{"_id":"@material/tab-indicator","_rev":"1666-42b1a3e915809723df757bce96dc0216","name":"@material/tab-indicator","description":"The Material Components for the web tab indicator 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-indicator","version":"0.38.0","keywords":["material components","material design","tab","indicator"],"license":"Apache-2.0","_id":"@material/tab-indicator@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":"8cb0f364af561a0e0311530247d2116c3ff88f49","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-0.38.0.tgz","fileCount":14,"integrity":"sha512-Bf094KEhVImPSX9Rob1a8v8MrrbcBa71/p4UHbXcjrheqdoS4jtW3kuh3UzVmdLjVVOmalUwlKtD4HE3lCmPLA==","signatures":[{"sig":"MEQCIGVHxYsoEts5LioRgh/q57NFZdXa2tyfnBiSojLpjqdRAiBfeegtU4mkJGVJmDwfOE2eLxUwEBJTzLafkvgGHJoWJA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81112,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbX0WaCRA9TVsSAnZWagAAy4UP/iKmk5DlJqA5GJCyn5lH\nmZyCOEQ/S2KFDXwYs9eWg0AjLBtdcfdGMUCoTwwWT2DCuuHlNqeopMIfE4A3\nhvxvyLMuAQmTOr56eYRRna/+gwwh3D4gUDy5CgtKDMDMLWGC9F3EwBDXBhF9\n5OJm+Wfg8Je7xrtw4CcManKZbD22d1aB0UigcX24MxlkxAogot3qDzEDZtN6\n7om14k0umhp/hsEro7rLcGnGL9VlZamIwfr4bRXl8DlGUdE2x8fHbPbABxGD\nt4vKAtnqSlzz1Pq4P4lNRFBxhD/3e0q0v+i0f/2AAtB9Dv0vEoZCaCsbrRs1\nsWONCAe8HhAedc0eNpNoAIJrZFOQcw8MBqwrJK8Rdi8MaG+HCcD5Lls2bikW\n9sNaf2zEuvXZioddYCsCga0Z3bOU8eE+IVMvp7vw4BuzcaUSMa9/XC6q2ETI\n01x0EDbbX1kk7L4GYYXGPxo8/aScwr3TQG8D6SkYSVKlSuT3sAknvZCUQicw\nO+XUEpdD76FAuW5YFkjVvFULag6DdEkBAfd8w3IF3bnHcTH8aZwina7Kcscw\nwEN+UCub/b7dOWeDVstcBDDY/Aq/XfyQDAOAZjvNwi3QjRIT1fClKn0PRdA2\ntFoQDyUf+vYJCc45lXVcWrWo5Ke//ZGM1+TEyFJ0TK+rF3Kq0gQZ2qnQ7w/o\noMj6\r\n=/cX9\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 indicator component","directories":{},"_nodeVersion":"9.11.1","dependencies":{"@material/base":"^0.35.0","@material/theme":"^0.38.0","@material/animation":"^0.34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-indicator_0.38.0_1532970394198_0.7896290219266711","host":"s3://npm-registry-packages"}},"0.39.0-0":{"name":"@material/tab-indicator","version":"0.39.0-0","keywords":["material components","material design","tab","indicator"],"license":"Apache-2.0","_id":"@material/tab-indicator@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":"4c8cc1b26a065205b6e90619f22ecb33ae575114","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-0.39.0-0.tgz","fileCount":14,"integrity":"sha512-fG2HQqZlNrgHHUAffUDCKTG6OvrGcm7oK9t2f3F3j7JK0fgd2wxLKaQ654Gj58epXUr+6pKIWv3lBI8JxW3aLg==","signatures":[{"sig":"MEQCIC/ICNY+9Ngg5bR7247z9bjZ/m+o1qEE6yKOuUnsnqlsAiBsJ7eUvIFcRlonrTuGsWThHIqMqxb/GDdmbKu8osumYA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":73571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbdZUnCRA9TVsSAnZWagAAY6sP/ic18m+qyGBNcDlYzNoT\n7CLO3GFriYlQjCV2yqxVCLsXrvVK6DVPbYeWSskzxzalfP/xcgXkMDF3Cs2H\nIzj32RHTw9PP8vqP8nh2maYyqSrW2NG+COxs4pEV8Eus7/OYAcinoOamqzTi\nC8zsr18ZcXf8ahpZMHe+Vs4tVtxZ7vqi9KO0VGjfX3n6WuKs5REw3Q7asK3h\nn5n0sOVyTFTZil93qFMQHS2nQ0lBJ/DXnq+QlxLRu3SU5lzO0OvPgSto5xnr\n2ChEgvJ2j4SwLCZm9TgQBG9q/Xb8Ib39uXhFvr7+YAjYTbzqBWptAUkonNW7\nIkVOUYUcs/n0YvKL2Py7DXoHucWl/D4ymdSJzTKcSuE+PM0CgbXGezINZ0zF\ngetRNgMroxeSq9OmvMHQjQHnrR7ZY4FoQKNHiMjF4bVq7owj7wvG+Z9YO1Kp\nVjbkJd/dxCOu1JoQVjvOWveRUbGs7+bioYsl+Jd3M7L2Cxy+/FdvxMKGBf+9\nZ5xH2iBTuRUN6NbHdlYjYsOa/ywRV+Vz8K6y18pt5qAOPw1YGBApHoHlJE1r\n27uOgPoCttPf70noEGi1PV80oQn/DpLGCvUted1i5bEYqMrDm4dOFLZvl/tL\n0fr7izKaJZ8/PVP3zRRS76S0xwxH9zDvudbyrbcBZwTxqEfr4XV9vSCQCP31\nk36H\r\n=gYf0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Fading Icon Indicator\n\nYou can use [Material Icons](https://material.io/icons/) from Google Fonts within your Fading Icon Indicator, or you can use your own icons.\n\n```html\n\n star\n\n```\n\n#### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProp(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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 indicator component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/base":"^0.35.0","@material/theme":"^0.38.0","@material/animation":"^0.34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-indicator_0.39.0-0_1534432550866_0.9120256752846534","host":"s3://npm-registry-packages"}},"0.39.0":{"name":"@material/tab-indicator","version":"0.39.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c681eeeb862df6232dfd6972b466799e2c8ef239","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-0.39.0.tgz","fileCount":14,"integrity":"sha512-VcmPbhWiisCniiR9sVboiS0oCavIiy/w1EPMD1VOZWIMxQk5nGm6R/PNwZONlFaISLRzmOjtimrafsizsUlphw==","signatures":[{"sig":"MEUCIBI+QNT+FMp3Bh3PojBBF2OUBbh1Tq3hg0coxuz0HgMzAiEAwOgALuQxpZgyEdeVzs/7aEVNk6W9v7PyrIH5c2QwLO8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82783,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbhDeLCRA9TVsSAnZWagAAQtUP/j9JP9dMfN9ywL3Kn8jB\nUSNqjMWhzKt9ueQwxbvg0pcqiOdf1KPQ1XdKS/i896nTM/JbhZprPaNXC2NN\nenLOxWagWsY/w75PZH2OslvqGc+klb/LI7JJSCuuPCYcCCpXveH+/0EggnHQ\na5MKz7+nciSilIQK5HInDNBg1UdVyr+r4+q01GYeRMjN0g7LISTTz7gvdSp+\nGCFYvjAjdH+nXYMgni9KzufPKDJpz9oCN6u7MC65J0s+cOnOuPjDShbolJSD\n13YFyImxdJfXMIX1tbSocappcFh9vVRPuqwP9Y5YnvTMBuC3X1WRuq7Su0KQ\nS5DKA0p8faCvLHAZ3cI6NCH6iEAidnOhEkf4mQaVFJKl5qpH1/Ia19yHzU/m\nnot6UssNcwr3TJkgPObVPo5VV4IgP9mWs6vIZVhtlKsOaF/erMnvpgkF3vy3\n3SWsrKpYXPkKyKgc2E2vPETyiKUQqDHuLpW5I5cclCxvGQnWk9y8TqFOgAAp\nZfiEF7HpPGZScoUmJYUaWhv9bzk54NFuE2m6ZJNGXeqRf38oZSdoyvK/xc5u\n5KuCILxreCTSChCxVNC4KaD2W4NkcTn3y5QnxQTU2FrpOjIRLT5aOBiSK3AA\nOccyv/vhJrKtXXehUKmJ66gTTzdURHsMLcJk2xia6K1JKebRWjHhxqnH6lUr\n1M7B\r\n=ObX7\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 indicator component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/base":"^0.39.0","@material/theme":"^0.39.0","@material/animation":"^0.39.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-indicator_0.39.0_1535391627318_0.31658850830097407","host":"s3://npm-registry-packages"}},"0.39.1":{"name":"@material/tab-indicator","version":"0.39.1","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"165d56309928c517aefc772a77be200b1ab79cfe","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-0.39.1.tgz","fileCount":14,"integrity":"sha512-QHEjH4LuJixgjFl6Ishk+7bt3/+9E1zKnvapg93n742ufxLBY3DVo+XdPG+05/nlhoUt+xJxrSYkkyqxOnkr7w==","signatures":[{"sig":"MEUCIQD4yXhrZU71acPUPvgq5/uf6fjYzB0hK2jjR3VswsyMxgIgEg+ECpYBTgQ38B4nW2NsOVQ0clTUe+bkRbzpwGb/7kI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82783,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbibTXCRA9TVsSAnZWagAAJLsP/3CG1MmsXC1hsdhEo1CX\n8mhuc/UlXM05xzDl9FoI9SwOkJPDGye7GaYQc/2QDuaMSg1qWPF4MYnCqhoC\npW/FX4/GSOp2aZulAqSdx3L7paAsXma64bFPMX0vmzzviIl3fujmcCLlW0lr\nIVBDZ7HNe/1ZH8Hodw8tWkUc1ltAyln4104bYgpHiTxJ1qHCzWOxOanDtjEX\nesbO5vXx2Xkt/bLovV2q76DInwQIF2DXr8zM+fxPuWn5ik9FB151sSni7Hao\nzPehFdMCuPKqZsYZzRZHGS886N47js8CkZSx86oO6VtSovXCWSWQhSAS+Wtv\np7wKP3gZmDSYI/5Lv9Sy0Z/w1pzSDe0P7Hc0XdHZdlG5z7cT69caNq8uvwId\nuVh5X4SB33GryZmLMbzKB33ElPKfnyq3axcdwwvt2UKTyktuSvTSqfQJtMtq\nbLp7iRDd3ZeG+8IrxJg8F6YlyjJuA5migsacKxVN9lhB71wnxtEpecTq7rHW\n1ddNxbbgWQDoUqxm+vv6ih+wJEF6gEdxKXUkPT5AUwfpZKQQZGxbJCkthbfD\nCwdcvsj3HpbPC5RszT9yTqE/r3IQGtnKY1AzCFzoKnuZETBL5JO+OX9RE2Er\n5gnvygtn9EVUPtNf9QALxOBfkLA9wuyoZ0awH8ni2pDCoT8UMrcZqMeKk4Lo\nCikq\r\n=9cQc\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 indicator component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/base":"^0.39.0","@material/theme":"^0.39.1","@material/animation":"^0.39.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-indicator_0.39.1_1535751381964_0.3291227930574625","host":"s3://npm-registry-packages"}},"0.39.2":{"name":"@material/tab-indicator","version":"0.39.2","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e622757c1fdee7f4f3f81ce1c689f15f4f4c389c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-0.39.2.tgz","fileCount":14,"integrity":"sha512-QZdBZ8C07NfP6f7vTMLlC6NIiyKFjyoL7FS0RUO5VHUtYy5PywYSNkgJfXH5G+CFzuKV9M+3KKX6ALbK77Cuwg==","signatures":[{"sig":"MEUCIQDqmTUJdjBL+kA0gpRe1k6wTsNEUmtRd2xq+vOhOZ/Q+AIgYR8RgmYlbsYBWihpnLg6H1Pjx7Nt4eEjlDG3TvbJfYk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbl/NkCRA9TVsSAnZWagAAH+gP/AiJfiz9rQ71w5yBRwRk\nTqnpZ2Ehg3WpgDME4MkAUJga4/otF3PzWp/W6y4wssuuxJM90TGx426E6+I7\n/Ed6UnuZeHL7np2cj6FViAyajFegMQ/PlOxB2XTDtI01n67NBOWyLwieJTEH\nxQrbBtENkwD1mVx1aY3iOyZjwpYrL645jHwduFzQJUIJ/amO48SlyiJdUxiE\njewcm9RwjJ/cpLsNEQfjfBIPndHJxPyWwRO2oYdKwXbwvP/pUwFAI2T9hbro\nLST9AbmVL/lS1n8mtOaFfQ6QThTngZse7v1eEI+zia2BfoVfPX6QgcF0i1Lt\n4/gjnQI0A7BymPRO66Sx9upFMIuO4fJ8p4+VFLhXA7RbNC06Es+rLoGVfaY0\nI90y5hrLwvczEG9otg1ei30fBwEhL8lCzZQCtUApYkgGvT4mmtyl/Q7kMBqv\nu9UG2vrSyS5NJtZ1P80xDcFNgkI9w8BamERHMXvSJTIEkt/4Edd2zwfA8SsG\nj6m8AlCWJ53bRlb71fDq0EnYHf9xD8gbOYENWWYkAB7bDJNRqkxDl+8CUYBs\nlUXdpUrW6ct3kP8GKExL7HuXIge1xZyzc1cRIsapZEirAEuPiQ8Lyz+U8rmX\nTmj3a/pd3wcz4n03BZm+l/8kQSGDry77sXAWo6VGJkQaBQ1qBf0YLIy3nkLI\naIVj\r\n=r3mj\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 indicator component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/base":"^0.39.0","@material/theme":"^0.39.1","@material/animation":"^0.39.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-indicator_0.39.2_1536684899374_0.7792800588230735","host":"s3://npm-registry-packages"}},"0.39.3":{"name":"@material/tab-indicator","version":"0.39.3","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"390f4bc1aa54dd2eb67778f9ae784114f0960056","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-0.39.3.tgz","fileCount":14,"integrity":"sha512-o6RU7PIJrDjbI/Sm//fftNtjl1XUftDKNnZfb27pCzT+IxHRt1prOJmee5y0sZqNAzb9kWb2J8GenIVAmqDzeg==","signatures":[{"sig":"MEQCID1VL0jF/wKSHfeKCSKxPl2wgfskiruNjSDTiZK+cSlfAiAs/ueKg7sYDLN5qSHHk7bsCW6jcp9zNHARkh5Zk+j6sg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbl/j4CRA9TVsSAnZWagAAM8oP/08t91myFLc4sjYtJdcy\n5LsuQWB7LQ1JTa8u3l15ewFOhbrMDkwFbH+boLJxwG36eClJ550cL3PnCDQY\nJTEsKHs/0hEDaBA0lbjP8GeluETJTyfgiGEFYejBiOm9bdhrftDfFD5FT5bb\nsIc+zCeqFKFh+ruhS1MTBm27Fx887ZdOgyiv6Q8LLnXQ7mZNervLqosrX99r\nTMVsNLNjnhbaluzHs40jkSdiFdcWAm1pABgCGh1yl3DJySAprkV27ZhaODy8\nFzM8ehjzg09xKQxSbRik8Ac0zVlaLUlHGh1YZfLixqrKLX899uFQKiFoVPz5\nAM9ORN7Cs/Bl3baKJpTOhUS6NTWFFxg5VTR3Ulwj+UMkvOIVKhLcOILymF3U\n8Fvg5mtbNPpkgbh9zxgGiclxfXA6pd0DAUbytEPRm8yoC4DvtoT6q4inbxpM\nZo+Yk+XGJVayPr6HFd//DnmdDALLN5VOQqN5EM4AmspqteSlPnJ7HsVi4zgl\nBeJ3kyqVwdjJksx4F+VbzaCkaS58PIHUQlXdd0P24q8YK1DSZSTsePZ47cA2\nr70RWzCaCdbC+RKbCMlW3KqHXPvQpsXWdGXbm3WPzUuI5qDsh4UPNVj6p0At\nAw2pZdVddudBPX8qi54eveHVEeh+YQZbAaZonX9m7wQULzhsxblLAH4NtTMu\nlo47\r\n=Ktru\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 indicator component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/base":"^0.39.0","@material/theme":"^0.39.1","@material/animation":"^0.39.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-indicator_0.39.3_1536686328047_0.4083129444832183","host":"s3://npm-registry-packages"}},"0.40.0":{"name":"@material/tab-indicator","version":"0.40.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"19a40b6dfbd12a1606af2e66b4f8e50cc7a7c17f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-0.40.0.tgz","fileCount":14,"integrity":"sha512-s3Z2mB7HLXWSBYo9P22RJKU+aQknVnY+U2jeZtz+9UzJ7wAtda15vRQlR+91V+0WZQTC7pEeMY1ETh8PzEeP3Q==","signatures":[{"sig":"MEQCIHHWeSN9JA8/4h4NSGob8yKB/Spcv7VBh0n3Dq7Cnp2lAiAy4wVT3NT9111chjhxmYp63FSllaen1egK8LszxM38DQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbqUJ5CRA9TVsSAnZWagAAwVMP/jeg02sq6mW/vWRL3zqW\ngms+vSdsgvCMDgSDwF+GcdQghcjP4E8KN3Cw9OdwquIiQLjyFR91gCTdTLdX\ndmDTO6uvp7py1Tkrb4ZS2h6p3H/rMnuYmPrQYA2L1+C2vzcN2zGkLV5osJxp\nEtdy0t8EWpnYXT1PwDcot+emvClSoProOkctm6GHUAXw5UsYvSRZnr1B8OpY\nnckV6DsUsOd4clb9BU8vz9BtGYlVfqFCEzRgDQPCZtcrmYd6FPYmNNtrsjE4\nvIMFXwNBh0egdYnjH/kGfNV/SW+CbCU6oHMZA7IDqKeUsczB/mibEtzmQPAy\n8IfW2Bc9lTNXiD/KENq3oofNU/STYbh5HWgHIt9j7jl1q6HnzbU+/bXAfUzM\nT+hnv05IMVGneXcxuL7aFEvAXadLFGR7mbmXVOOEs59dTQ1+S/ziZ3qUXME1\nmMvmEo7m0Xy32knbARGfKskoNhrQcdysatxndzDP3pUblJdy3xrwk5YeE+pl\n7VdOr2vTBwHwHZbJFN+RoYLx4Uz7gm1GtBz9/j8wrPG7fAMuhIh+ybMTaGsU\noIN19Gvqiqy2H9e2gjq/FQoCrHBECe/95LzKVulCxhp/8idZqMs+MUVrBBTE\nCwVmwb+swyq34WT572koB38bOb0UG6fIJ1WZ6WKvV77EWgiBIL+OMOJT+stq\nBHEg\r\n=MyMb\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 indicator component","directories":{},"_nodeVersion":"10.9.0","dependencies":{"@material/base":"^0.39.0","@material/theme":"^0.40.0","@material/animation":"^0.39.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-indicator_0.40.0_1537819256969_0.24995235246393244","host":"s3://npm-registry-packages"}},"0.40.1":{"name":"@material/tab-indicator","version":"0.40.1","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"f6cdbb709276ca9b0b92e5f57a53515c0f1c6646","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-0.40.1.tgz","fileCount":14,"integrity":"sha512-FmM27MmsInn0cvo5XBaoY5oRzJ783BaulgzRiSVMw5oNorwjNgW+h/9wEBMYnZNrpGAZXMiqj1l8l5qdviXiAA==","signatures":[{"sig":"MEYCIQDIaLNFkC6nE91ZQXjEUuW/nUX/OVqWGvUUo3bc/HiFuwIhAMRsnQzlmM8j5WSRyjlu0lIb6FisvrJQlF07FlyGyp0O","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83260,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbu8QDCRA9TVsSAnZWagAAMrQP/2g260g6u9tIUW7KxS+K\nVmD+DsAm2JUMNmQNK8CXWCZYBe/bMmlWoqbIfd1l7U/sC5MHmU8ogpFMnMPX\nQ9KcaJPY3RgG9pU9RMyKtJgPlktM28WlOMv9n760AzPAfGweaLCUyvLAhQwE\nhoqKha0S99xMuYyAPxONVF4s9qt5J22UNYQ2rh+3T6B2xY6j3Wjn48U8WwXq\nYkWxAypmrWVFWzCiEwG6DHrVqcZUdvQlJtIlN/JmdfM5DaBGixFMjOKYJ7W7\niBhdLgLnvt3h0dsazjSCJajo9xR7teKOCVjkopYpoTroK0BnJdG8YiwQpRU4\nrL07DvtlzxdeFM/8n8H0WFXkK5DiFZP6F38rVLddDDtlvBqvTn7Bisk5IEz9\n0UJm0BmHmh5WC4v99IliQf5BlmH4donNJcCKwKmTeWr87aceKcStbleX7U9Y\nyoVON4CWOfM1tvzBsiZVw4kV0jjv125UZ0DNqX5jGovCOpbYe0yF4TnfBj1e\nuAwQ2Dyz2KcTGFgFeLGv/sX8j9b5qVChy/iTZ7v+uFTvDCZs2YwiZdbfivu0\n5Om4wj9J8MOAGBU0QrTGdvPTOklzFAM2r5W/2DDIYFLqjlI6of9K6yQnTE7m\nQ3NgcSpA3p3YM38YrJ2drA0/VWQuwjokDqGege388fqwI/19OwClcKExiILp\n6IBs\r\n=tHG7\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 indicator component","directories":{},"_nodeVersion":"9.11.1","dependencies":{"@material/base":"^0.40.1","@material/theme":"^0.40.1","@material/animation":"^0.40.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-indicator_0.40.1_1539032066601_0.6477824810196429","host":"s3://npm-registry-packages"}},"0.41.0":{"name":"@material/tab-indicator","version":"0.41.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"396fb0902621d1f5fff195abf77738de7d4a91d3","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-0.41.0.tgz","fileCount":14,"integrity":"sha512-IBJEO+O8OnFVgRAn4CCGccpyNPF1bvTp5+1foD46S2u7XZLD7ejfxTQhqE5HYWtVLQ3zk1aYo3+N9+oSUkpM2w==","signatures":[{"sig":"MEUCIFiGHhwN/DRUTBJ4LHm/zqBHGAiWHWm5gJteAoUfZYvgAiEArk08/60QBOCBouV0zACxDrdH1SzlDdtNCxSivO9PcRQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb12voCRA9TVsSAnZWagAA6/YP/3YCyGxmDjewmOsYCk3J\nZ2b4U6wPQkfxXKB3TcJQfoZ098yL4xB8n76iRR4MuOQLPlYofqJ0RaUQse15\nCEdoUNipX/siWjxEudd9MNy7+q6oAo54K73Yd4revGPUhFl8qELP0YT+4duT\nnSPnurR68Ws2aVM/O7vOCR0ZDzI+G1wKBKdGwZWok9FKOYArHSKODirUlQnJ\nZjBRfT1QkTIo3D61qYKC0iFC2scY8c3ZorQ66Rsdf4vCcace59dZrA+dr84m\nHiR/JJ32sJlQrgPWa8GM5BdrZU/ZJ4MPHLhPutz/QwFyYM6ZSIqWBWZVjMj1\n9cA5XKamuH/IizadxsNh1KhJQpakR5Z5TtA1S7C34dPouvHAdSYIoxeH6Rvv\n6v/Qu2ELOQ2MM+eRYeSem3SKW7GCqBgh18DJtFZW5rLj6bOsqPQC9ogclps5\nxWi0Uy+hwWXyJ7+aIhXCQnVLY0tOD5POTYLKLzvPU5ux/XxWArMmtTofiMoH\nnxz3CmFNO6oCffBdRWJD/F5x5ri0vNy2F8Wygm8AgzZJFLGelKAKM65VSKuS\nVI6a3NLpkGjIkdPWbb0P6GeGyJZ3FbPlqaYtVvtFHueok0YeehHV9hPcq5PP\nHWwkISGR9AOTqY/MyEFDYqIIvLrD+R+0YTAHYOtqPA0G6o08vo9QHP9UJt48\nYsMx\r\n=p/WT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.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 indicator component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/base":"^0.41.0","@material/theme":"^0.41.0","@material/animation":"^0.41.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-indicator_0.41.0_1540844519574_0.04655167580547914","host":"s3://npm-registry-packages"}},"0.43.0":{"name":"@material/tab-indicator","version":"0.43.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"37fd05513ba55ae218d9068c986c2676096fd6eb","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-0.43.0.tgz","fileCount":18,"integrity":"sha512-RMNMQpWYghWpM6d0ayfuHEPzTiebKG0bMthViiD6tly8PubmOT8mShNhPm8ihybhDPUOLSz+7V4QNE5wikLEYg==","signatures":[{"sig":"MEUCIQDmq2LiEwrAXAHYWp3WMmuI78sFkWRWuL5fXxizJIZT0wIgLK+HDFiFTByvl8EZ7g0mdz++1GcO/8Cp06znNjE8P2k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214793,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcM60vCRA9TVsSAnZWagAAT2gQAKCy3Ba9AlMJRnuKYX45\nd/e8Av+CYcplDNseSlSyce55JscO62waoQa6pgI2T7QOgpjz1kvGNC07t/nu\naJ68Atn8pkM9e+zKHZk+MTka+qK3do+OsAh9at8Wi4a8w5qHAxlfm+lLKSni\nLxpWwnfdjSPdBoCQ24QDNQ2NS3ZHrZbiwFVf/ZAulJ0mu066hjh3d/6pw76L\nODZzvF53buCfJxN0X4H0WAghEvTs7M168i6ddwz0H4cUS9sg5GNAaC7IT9tj\n1/AK59fLqi5csCOUt6Jtu4yXAd0N9d8crZIqB761NlMZD0C5SQNjb/DgQsQI\nzNskXoyqkinaV+sPOxhEeo5XBDlcIkKlLcv8nN3jHQdHk8vWCva+IZUWbncj\n8D728z//ay0LVOUOpmhtG7sooUenE08vy8i0OFnXqct5MglYEGYhw93vX5fx\n0R/BsBBao9UM1gtQ4TJQ16sPKOZFaJSd/iqhqY4/l/iM94CIY5xrky4tzHRL\nHcJyy/axJkXZ1BNEoIJ5biD5E+q6lBgqnx2BCsuJ/Re2Kkksp3ir3U4nDeDZ\nzIoVWJEuFrLOlKAPIdB2ufDTtRx1GT+AZxGgcCk3CNjzVBrZeGjYx14KBfM2\n3fqW7TYvH28ubZXOP3xxPaMo1bVvc+OvaGuXXn6Bn1FnsmqlwJ9tZ3B2fBDT\n5nsG\r\n=VD6F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.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 indicator component","directories":{},"_nodeVersion":"10.14.2","dependencies":{"@material/base":"^0.41.0","@material/theme":"^0.43.0","@material/animation":"^0.41.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-indicator_0.43.0_1546890542956_0.533441542533057","host":"s3://npm-registry-packages"}},"1.0.0-0":{"name":"@material/tab-indicator","version":"1.0.0-0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"65158a4c0373935b790684d3508f0a074571ce19","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-1.0.0-0.tgz","fileCount":34,"integrity":"sha512-WpXMYJAZp+oKKoTqj5pqfs6fA1aeFHUqCmXbVMQBR+aQ8VOpM0Qmv/ON16ZuIU19C1kuKlQLotPSAJ74pkThZw==","signatures":[{"sig":"MEQCICl0x+uXTqiUWygXcsHgHz73xH9H8jKFqx+BsarrCPVkAiAvrFnXSKlG5iDmnn2m8sPVFBrfPfQ40E9iGoLG+JYV3Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331112,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcdyReCRA9TVsSAnZWagAAtuIP/1hJZBjO4IBPyUC4tNCz\nppMErKIRa9hQXsjAYVnxNsIXQO9IDJceY1DT9COVmg2c2b9kDl+2fdXp9rhG\nP0BSnnZyTr1ijp7CwnJSQ2wNieUD2KNnwmvJJbhbNo3OKJtz1lakTgHJbSeP\nJugXyjWCG/q3ubCmMRt8q1OBGfRUOoXEyfykbe+VnaOSlWtIahJjpEDYzfI6\nHSxgJVHhqRmKEVXLj0ZxN/uR4Bk68EDSSpGexg+HDBX89KzspLGX3Anp+A5X\nTVrEa0Tdfvrdeclky5Cnu61fiDX4QGp6AQzlA3vozPpgamkqk3PEiK4h23F0\nZvQEGAwoWQciwd+ijWGAUB81oFlSt/f48vmCqeokXGvh64zdGMWxJ/QlNl19\nkbDIAAMlgbsOrGfpCU31cUbvOD3fXOkn0Y8z6iYzHppgnNakc23ducFFvB9R\ncQi5AYRf3JLjL1IoMDqnxH23KmZZx102g9Wyjd5S6vuABRaXJR4QE8pbaOtU\nsjpdMmy5doM3V1HX6cMZDwuOkt61syCRndw9pV1fVC7jh1A8D2DNd4yNskzj\nSQNjUVmWrr0YIXh4FBdun+WkPq2FhRZp6/Mh9bHzufdpzmPBJx7m5To/rYqc\n7oR9160Gy30y5OlgKCdk9VYFHm8wQmeMlX9S1StHG08r1phkiCd3I36/Em4R\nn6te\r\n=qNdd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProp(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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 indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.14.2","dependencies":{"tslib":"^1.9.3","@material/base":"^1.0.0-0","@material/theme":"^1.0.0-0","@material/animation":"^1.0.0-0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-indicator_1.0.0-0_1551311965878_0.28107092646513965","host":"s3://npm-registry-packages"}},"1.0.0-1":{"name":"@material/tab-indicator","version":"1.0.0-1","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"f614e1deab962156d620a226c8ba4f0ebfd7f897","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-1.0.0-1.tgz","fileCount":34,"integrity":"sha512-nmSHicbJ8BJSnIAQ30l4dmVXhW4O6VKFXfXO50lY3WKP9CKVivxkjO6ppM0aYeTzQkt8Lm5FcLn2MBcmi6mq9Q==","signatures":[{"sig":"MEQCIFAYoJr2ptNzwSL7pBeg2wLMXZv1lcesfLCMmYVCmjH1AiAT67LvN6nL1AR6Pala+C/nAQ/hFSlyTDJ2nmt85F9n5Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331214,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcfbW+CRA9TVsSAnZWagAAhMAP/3f2DUcswaee5+x3AZ/2\nlHb37lhqV7ExuBqXkHb9Oh0sX34lz6cXLKO4Dog1Ig1JOgpl/o+3fu0RU2r6\nmvyVfQ42/j6cEIfkIy/gN0hBkMIqhm5VBrhKWyTeSg7flIpgx8dMV+0kmh7A\nJGbsfbXc+OyhVexICJUjkLt0oTXhSuXN+x8W5ZiTsf/WBch7swzvUX/LGCbG\nf+/0GGcT3EvVvYd9AUoPNf/C9XgFCS+VsLsxrYIut58qeD8/wo/0XeLAEt0U\nP7A31pLZfml6q9jz1/K4jbvKoGm+lzCc5DZLpgFUt3quUymB3dL2BLcKXD2A\noDirdYzYSfAz8fCh3i0qg0QdDxo5x0BQXaeBYD+22h3Po86DA5Yzif0+o9rs\n0kj8CwHkN1bTJsO5a8G9JhzlWrbnauDOeU6rkzre6yNMX06QED5rRYmykPdK\ngAJUOjJ8qtM1IytyPZXyEhthW8jjpP710MJt0+k9FVThL3R2FJW05+85i/L1\n4QT2zSn4UrzFIbw7Lto5tryZFhFUc3bnqBYjC0+DiZ4Y7SshTyZOSIlUoccg\n34Dwie8cueNPMGK/j9Z8KluYQDIWaQ7cQOe/1v7bY2kmsian0w/zwu7hyo+k\nMpF7gcan/p/reMDGmN3zYe9NC5LqO2AJSTfkezo7WwR30GmexQr7QiSkfxhJ\n6PK8\r\n=/3y6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProp(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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 indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.9.0","dependencies":{"tslib":"^1.9.3","@material/base":"^1.0.0-1","@material/theme":"^1.0.0-1","@material/animation":"^1.0.0-1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-indicator_1.0.0-1_1551742397782_0.8034589377238313","host":"s3://npm-registry-packages"}},"1.0.0":{"name":"@material/tab-indicator","version":"1.0.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"00add40860202bfbc1566bfc762d863ef29cf2d9","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-1.0.0.tgz","fileCount":34,"integrity":"sha512-4wT+dAc6YOe7ASPt68soHSqKlr/VVl5JcS883M8I2kAtJe92BglsHYW2ALa9IdqwWcvhFaw0sXZKWohLRwibMw==","signatures":[{"sig":"MEUCIESGyP5+HGjlj9D0qkZyJH8m3ooP/k+NyyZAhy3vLfB2AiEA6bLx3Q+0lu0Ehjna2JkhHVs6OPPIdo5pPW4gmEsS5YU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcgDa5CRA9TVsSAnZWagAAXvcP/1yEJIWdDfTJd02HgK/C\nbH2oD4V3kfZq9ZlT5PDZorxKmB4/qXkcHokv6gZ77zte6VbrGVp19Y904lmh\nevEDOABf67wqqZ9SmPod9dbFVq5pkZtX05Q80cQYJzjVAjYmzuXXDLh4EOu9\nW+n0pmyLVpwuPtTYZXbRjYi3fJEj9v2ZiLHSTo4kTaJiZdPSHYSx7BIWwSS9\nLUtgAVTMg1UUsEi/GKg1ANHJK7YrP5EVwYV4+B4xTiN3VeNR+ebBwYO3ivlc\nqzdEbwr0zuTZh8H9zH6QPGe74io7EnS4+/ZlVwzctUgO5tjmbdY8ms2HegUN\n64EybDGfbWs8Sr6B2uwGXUPZ1tjN/MavIx9mBkBIOG114ZjFzK9XpnaUvuje\n/xbgYkzGZYrETt8mQ/oATw1zzvI3MwGxIOJ1IwmysoLlMwNClovovKns8ict\nixaxU1aIloJllpWlDAUqJV7mzQwWSHkJ+j1lTYyTjYlIjY9Js8P9m+Ghd39a\nEr/BcIzBBKxinQJUNK2GigQFE7LCbgGhmpisKW8nYkyTazVthldDtxFJcjLh\nGjHoQR9TYrtAFPoeTNX0rq709bHRTGNAYKSJbPtYVXDznaMJ1av+Kc8UnOsA\n4fnOjzNU5Qhb6cRpInow6dMAZ7XHJ5P2zE5F8nVOr5mJA3l7Z6dZaqsdVIXA\nGzpQ\r\n=cy67\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.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 indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.9.0","dependencies":{"tslib":"^1.9.3","@material/base":"^1.0.0","@material/theme":"^1.0.0","@material/animation":"^1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-indicator_1.0.0_1551906489305_0.9028788814362556","host":"s3://npm-registry-packages"}},"1.1.0":{"name":"@material/tab-indicator","version":"1.1.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"2c37e8fe146d84a99482509cbb785f67336f0463","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-1.1.0.tgz","fileCount":34,"integrity":"sha512-wbZMFCfQo62einr/Ju9PDAeFpRR/Ori5oV2lcsF1uSQXeLxougarwcbk0egWnEtY4Wa6dPgM5P6wQQsYnIeUIQ==","signatures":[{"sig":"MEUCIQDuyPgxI/lpGeSTdw8MANFmb4ER5tOJekZGj2P1UAC8iAIgfpu3qJ/utTPCmqqepipAl3RbPWtiF3AE5Fs8SpFhQ/w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230935,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcmny/CRA9TVsSAnZWagAALTwP/itPAYYGW0JdK2d6JsVY\nePGY/zoOL7bbwbF4p0V5lz0M4rbXzzCq7/npgxKWUR1AJqrpOoJo6UqTGqQp\nNI2qW8h2qem6i9ur1hPo7XwHTcakn/0t2QHZqEWyTVSOz20pDhoHlN2ie459\nORUA05iO4x85J1Sk+qlypsC0ra3wpd4m8nT81UMrU+rIrZ5vgjm4Ga9/hmN6\niFAEWO0g2QY/kjqPGARwCgCPMCFC9o119yaWx4E5obN1aFG+JKHk7Bsy+KPY\nBdgz5hGckcWmIr5lmr9NYCS+wbv3h613yU+qzadVOYBllRdG+3MDUfceiQqq\n8rFt+wH9S3RYB978MRmEB53MICy9OZ9SCFcsSHULBMTGdKrxDWeRbX4lnxyF\ngZPg1Yqkn9AIDciaPdabSLEeE8sZskpvATu50v9DFf7h8t4vmv4TaLEzonU2\nqgYW2qrL6DrNjClXywoIx6xmXQRsFcKO3J52iVYCxwkoBw1iCuE9y/pF+wRv\nHZTUn33kitDatSmHyYSy/qIeuBGes88Ml1itvdeMtsszN1eU494GEnpAwJxw\nH+dRLCiC0Qw1ko/Jpv07Y0pJEFiXK1K91mWs+BpgUm284MTWgqWdpTypwaNx\nu3V0PKTpw9YOJ5mhKx/69CUCZK8LsAyKWHhjVL7xZz8KV5E9UXzjY/1Xx/UO\nxUmq\r\n=pRX9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.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 indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.15.3","dependencies":{"tslib":"^1.9.3","@material/base":"^1.0.0","@material/theme":"^1.1.0","@material/animation":"^1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-indicator_1.1.0_1553628350553_0.5467928122709498","host":"s3://npm-registry-packages"}},"2.1.0":{"name":"@material/tab-indicator","version":"2.1.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"20c5c5523524e38e62724dc8c830f4b2060fa003","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-2.1.0.tgz","fileCount":34,"integrity":"sha512-9A5lF187q5NbJB8uG76OuSZ5GpRdQtWFHj5oLcyhobnG6VMXNgHIt1512fqxBVHhBmDreASa2tfPlpx/rubm7Q==","signatures":[{"sig":"MEUCIQDqHaVT10bdORCmWAJ5TguEruuBMYRyigNZwT6n1vuqXAIgckKnG1zYqSXbdBRayH+22mDlglHD4pxnqGK5rYdQSuw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":252686,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc0FPWCRA9TVsSAnZWagAAs9cP/1Es2l5QHrplNOKg0FsW\nd2fOH8X26VP4mu86iqVmlelKBZwXXSUvn5F3gnTZ0pol4FHwTPjiUjVkOGpS\neNNW/ojWueeBtI2XkTZ4DtcnIwSbeV/fsD4mYdHOxPXtKVQXs0dM3O2iQ2nl\n1z9KXvcyQjfvHTUDAQaq2MG5VlaGopEtsK+hEcxw5uM5vvMlH3/m13eCECmO\nd8W5BjZ4hSYVCRInF4Jc7HdSQ35WoFgIYUxO4ZnxqsR04zlqX8xEXhJNtrgJ\nsSp9huYCi+TzmK50MmLME2wA7ULusEIvBRoZnFvyVrdNLX4mohBEV9To4m9A\nhzclGcrCI8G46rQYEeZ+ZBOacAqkX7KVQiU2IrUM/3aFRRSSeI5VZNZ1gzpG\nviUQm6xOUOK36T4ZS/RsnX1i8q6DWGZlGJwKFEg8WjlgaVkwLRN6KHV50L0u\nfcJMZXZma4LESEGL66r0zPcXpISSlmcvWtpjFuHRC5Hj5Dd4jKfMSMNlYsTA\nLBws3iDP6U9iLmQR7IU/LoXkjaNPrIrr4zgQNvxubXGVS0ZUslW6ATdVaRUv\nalimCrafOrpUJGwdplmGDzuwsw1rXtfAWoqzi+oizE4qENpP2HR2309UF1bg\nmD7N5Ni2lHGZww4rLJQJJC/GSztP0XOw6l02LAJIQ4QijbD+vyM/zb21mKHp\nZn2q\r\n=JvhT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.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 indicator component","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/base":"^1.0.0","@material/theme":"^1.1.0","@material/animation":"^1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-indicator_2.1.0_1557156821841_0.06574245898924458","host":"s3://npm-registry-packages"}},"2.3.0":{"name":"@material/tab-indicator","version":"2.3.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"db2eb467303e4b7cd09bc92b23f1d575dd5aee37","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-2.3.0.tgz","fileCount":34,"integrity":"sha512-E9jlESIfjTOoo2pZn7KoTeXEW2jI/2RVtu6IEbhfESLuxPGYmxgO+QxIodEW0VoJhogaa6hR/mFnYBVLbh3JZQ==","signatures":[{"sig":"MEQCIHYIz+DFApb7yIfWO/Yw/6KpDBb9+4V2JcUbc83wbMLVAiAHaCu/s84dsf4xXOBxRyjcK8S9sel3Hf/F2tPu5//XgA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":254580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc7abeCRA9TVsSAnZWagAAkxgP/RHiqj0c3z79ogvbveij\n6wYliDaWueUfTuTexREyOgj5aZ+oHXslw0ZMWjkthovXoE3Rf7w1g5xb+3YX\nT+aXP49YndXOJlQ/x4AoUxpDaxzhmaDZXhSyqs3GjgwSXT849HQOwYbWhQI3\nzOmLEHI36V7qL02YrX8VoydPEv7cvuwsDuPiIFdXe0U+1gHrQfmc88QtPJHT\ntoCPQKsKwYDQt/Y4JDSAI86qXWSDNoFkoGaVHUumkjNDxqZ7pxmI/bGzw4+o\nrOeX4hO8oNJBpDnUF3WnluWwHM5rr1IoiX2qeyfozk2St0fK8qsFzfXAdF+y\nAnnW5yNIK6EB0I3stWu4+di3OCxus3eHe6ZxNq1aSl1s/fHF300GDywKZPWk\nHuPEFPePrGyF4i/Zdl6B41vJ016jUUoe/1HtaJW53QizZ3Z0sxQ/t0cCm6h2\norFBhA9hPZEENHjkJIcgnQo+eYTuIqjjkYmr6l+0IxwdNOI2Rxpj4O9zr8+/\n/UMTgiYQuHXbFRNhk/tUv88ZOP3qawhD0eZ82hTh2VIETjqT986XL0b5mAPS\nf19HhOG7fBSTcKhqotezWjXqK8VrEHpITGbbMxntvZejCHlQG0yPsob7He7R\n0H1g0tuZSh57MpNnAORWn9Y1KERiryykTMoKz+mbVO4jAKC2EEsR+n/v9Cpq\nQYvh\r\n=Is29\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.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 indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.13.0","dependencies":{"tslib":"^1.9.3","@material/base":"^1.0.0","@material/theme":"^1.1.0","@material/animation":"^1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-indicator_2.3.0_1559078622155_0.030348669909476822","host":"s3://npm-registry-packages"}},"3.0.0-alpha.0":{"name":"@material/tab-indicator","version":"3.0.0-alpha.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"fb625b297ddb8d722e885e4876665611b0f521b0","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-3.0.0-alpha.0.tgz","fileCount":35,"integrity":"sha512-Mq72XPqHn3svwv5syCiUiEGaVlZUihn7dYvt6/CDkvsHEXIKGfPR0CCs58+1McQ3XbgxbiLi0l7aNqrLYa/UQA==","signatures":[{"sig":"MEUCIEVvaHjW2CpEWFbLwk7oZpqZp6uHcrlA8RRsKY4wNSnRAiEAlEdlX0Ilk0oq4/jeqAmpfQbggaSOiwCKTywuqUL9lC4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":255731,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAHpXCRA9TVsSAnZWagAA/xIP/jWHiUcdwp7Hp1yyhQtJ\nu11+H5+7LBm8jTXHFJi15Fq1cnU17AjSBdOudYBYjVP5E/erClMgxItBrsYC\ndddnQJisHssqaQQYURauFJ3jbOdGRpDQG6pdq0hyLFmUnsnfG3lUeYE0RMct\nYrqD5p34zH9ljFrEhAJkhqZWebL/1r/YnYTdoyLXpI+4F0oQwuNuVu6cMcII\n5sZpLETKMQyMmo1+cxYpNdZvW3oJuJ062zVFE61ADdnPUaJSJgv67eOXsXv+\nUS3FST88RyAd3M1oE7aRQAdzUm5a3o3+Gy+NyfBE7f6zMCvYMEkszHHYjXh8\n+/GKJ4EheOakXJo0x6CuCz6q1oCjhkTg3OqksM32xpNzXBBWcmp4L18IS479\nMHFnRwqLxRE+MGfhJymCSmW92kdHLTNktVBuMgGnrvmCajMQMXKXh2ZNd2EB\nuXlUzareTkW5YPgKarbk29CR1AXoA9tuQhhRgF0sYloaQjkXKkBlcO6lu64T\naYXp45iduhUqi37ET9I/4eVBlQzvwArpCTeI+CcPoeaxkdq1dWpOh63l/FwI\nsYHVJfYTj59UGpqXW7x+NswKC5qYnkP0HOYrvkkOqqOnBupUSP3Gv5jF6mXc\nBn9fSKRK2uU3AJbnPY5hwTyh3Iti6MJPBdRyVHj3tiH4U3uoJlyG5zovw39N\n+c8D\r\n=P6rh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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 indicator component","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/base":"^1.0.0","@material/theme":"^3.0.0-alpha.0","@material/animation":"^1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-indicator_3.0.0-alpha.0_1560312406343_0.6772126807194938","host":"s3://npm-registry-packages"}},"3.0.0-alpha.1":{"name":"@material/tab-indicator","version":"3.0.0-alpha.1","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"538ee5ff4f76da68558a43978a625b5dace1590b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-3.0.0-alpha.1.tgz","fileCount":35,"integrity":"sha512-WsVWo62H3YnziwM5JoJSthSkEqW27LAncAs6xMp2hp2tHTYtsusj9wxGa7Va4UXYz55NGuGjeb7j6muWp13Xyw==","signatures":[{"sig":"MEYCIQCEdMYr3LX/aIIccW6e3IGp2fjoZaTaOtJMQr8BpwaMEgIhAPUmoBVhc2J1bbC8V3gKm1YsQkwqYI1itIljsdnNW6nF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":255731,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAUwuCRA9TVsSAnZWagAAxSMP/29n9q52qxUZI1AF9GLh\n2YuNoNihUhKW4Frx6MWvkSVJounmRlfuujG7GX96svvWZTyCZvuxO5+vPMZC\nv6T3bF8EbA3C6eEk4Ri45SBT6MolYU9U2dB6ZXD5/KiQPhc5eZ8VEHRRmNHq\ndyWejnj+XDJZlgrFWkxxPr8SqqHkzk7NUFJBnQbnYujoFrgTWLYdwFRxsbfx\np6vXVBH6Sd0dGAh17WazbxBkQ+69FczmYHOWOomovZJb2BxdG+e0x3OjTD/A\nahTVG93LUdoLJoctmZkkhG7z3D1nNiIgU/iU9RuOnBc9d4X11tM1f6wlQ3zv\nWAM7nCG6YiSCeaZjCRq89gfd3kXB/HhJFOvVMl1/5HMLCYGECTVglgURJM/Y\nqz/uWLwxM2Za0XEHkI8kw/M70r572LfC1Iy8Lu06XRdzrY/WlEpIWopjy/1J\ne6khZemu/n5AHinLfPkW6oYjS1OmBaWtzg9/15zL823F/PBXQQQlPFiFriVS\nh1jm7drJ4ihttzcae1jyGfuOTfgKpihMpn/XteHgqJTZ83e40qRl1XGkFZFM\nUHb6bsLmOyg388KAbsIiycFShUytuOwO4S7G9Z5ZdaAmtn+xPG39m7DAFj5w\nXJgng/uvUbyWpcRUVZPrR2XbkBXUAsU2tl5SsXbvI/ZZvWDdH1JBvzkDvg1m\nrVPY\r\n=Ijgi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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 indicator component","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/base":"^1.0.0","@material/theme":"^3.0.0-alpha.1","@material/animation":"^1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-indicator_3.0.0-alpha.1_1560366125567_0.24265374820330887","host":"s3://npm-registry-packages"}},"3.0.0":{"name":"@material/tab-indicator","version":"3.0.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ca3c05ec5137b693fabc57f87062ceac0d1b9070","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-3.0.0.tgz","fileCount":36,"integrity":"sha512-e3Th88eVqZEZNLnGPvxfaGBYJ5xHM+GlmS14ZDb389noyK10sWMAt0AD/c2uGlb9+wtXOfMkHDFonvb5/nw+Uw==","signatures":[{"sig":"MEUCIBRVhciC9KYfPoykdHN9S/XHHsOGJPQOOWaIxZOb/fGJAiEAlE/eQh5iqdqJKyw2IuwssVlpKF8XIxSqHjvecL5+2B4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":261103,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdEp/nCRA9TVsSAnZWagAAJWAP/0EI3jrKQOLvwYZ83IVu\nouByyDjm4fHQjFnfyBc620p8kHYSod7FJmTgRoqRxo4OsmrBYKuQGalFWtz/\nPfeiw1vyM0gYvfC3DiXw1kQv9u9h299MSSg3JSAxVGAp5bmX/IjQQJRYkGHG\n+n0pQTIgDg4qJyFzHtZoR3wXLSyofjmnjDP2DE1IYm5tqQS5fpQqOahPwJqx\nsEdpl7dCDIJ38ljWjvPrZ71zX1QwId3wa5lk9PdYpLU8dSTdAkk/t+wgzq0U\nsnyvPBIg+8zB3eA/8bvPTtTZuj9kGUMtQim0qWWb+wyIqYcB/QRWFlmXPLcM\nK32SynxWq9UhhGw3CzzsXRy6EvpHvbowCPmqJh0/9gH5NHglGK0oIPH63TBu\nnjatHoCeFaIYmW/J4Az3XJSBJjfEaZp4YQC5zd1Y6V81UbV3YnzzUpELgoOW\nILY6hWMG2pckjR81GCUw2mNejTmdbMNlRTzw1B3gSwfZ1dGrPMG/bdPTOkOE\nZ9C8xG4bxveM4a1kS9Hvu5P6uGcrtB6VZY0ykiHLKjpXRXmNErqex/6TbWCK\np6DT/K7AbFEAWVLEDoPe1ay71jIvb5NIzF4PekEGKl6g+3Db2xEkEA7YIio+\nG90ZPTcb27oKvSYjxuVt9QFL0DZaQSViZzDxpBh5aJDTDA9bSI/wlwGnqGb4\nqmbK\r\n=nMDu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.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 indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.13.0","dependencies":{"tslib":"^1.9.3","@material/base":"^3.0.0","@material/theme":"^3.0.0","@material/animation":"^3.0.0","@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-indicator_3.0.0_1561501671264_0.5643398888840945","host":"s3://npm-registry-packages"}},"3.1.0-alpha.0":{"name":"@material/tab-indicator","version":"3.1.0-alpha.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"a4bb50824774d8ed18de2124d888fc96a24df7e4","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-3.1.0-alpha.0.tgz","fileCount":35,"integrity":"sha512-NBNd43y2zHgWr7yHmHgI6JHRd/+Kfrtyu6w8oRQcX7i3Td7XYIvnKpXqRRoIHb8kfZtXY3FHFv0OtUovmWb/jQ==","signatures":[{"sig":"MEYCIQDrrUr1cZDHMUVnqxzQR//qE8rzmSffFqaZYsTP3qaf+QIhAOK22WeevxQEuhbN5Dm5QshlMSW8zbWnJmGT4H0Jg15D","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdLdEkCRA9TVsSAnZWagAAT/wP/1PCFQNN7V23ruDvCX2G\nYo8/Lmr1mH2boTwZXI/Wktnz525pczhuEFe7bHoLgMP43jONdcapMdsoYYtk\n6kAV2np15V8uQLXpzSOzI/9GZ1RfI1SA2rdC8NTHUeLVxrcfjXHVd3YMJzSA\n5+wa4cSGK/O/A3tw+Wiplc5eNjfIARwIsEpKQZCyRBZWJearLX0mjHjj0PJX\nzR6qOTuQ0W2NPF4AonhIOSvFJt+2yaVtpWopsRprVzilSWzzX8m9U7EjFXx9\n6+iQfIHqEAPDhiTWZhbqS5Xe31JdYA27e0M4LxrSPEvIkK7z/NjTrMR2zbMc\n19Q9iEAWpQR1WCVXKQR/w2ylWKJ+80zkrTBXoP8DAZo2e6OAXczEeo43A/4x\nbGh8k4BEUVI8OW2+D5/NapiKE0jmZCMBstgktItSs5zSh54s0Uf6dq6gefdJ\nsOmiuBJmemKFdaO2MUNQy4iBzvSXqIsP02qDet6is1/qKrhIsAkQQ7vUBp2t\nl5n1Pular0wvEaAf14bpKe02KZaFaSD2uB506Qx09qYY/lERMXSuOW+6l+kQ\naQ4ziK4Sk3Zq/totEZR+pZcikyMbuWdeFOFoGaWRuTHNpjZwaLuGbEPSEZdj\nPxAJCSyJ1ImhIpW67cqbYhoFG1hKKrWHutNSmzKUu/lV/6cdaGBQExp86E2S\nKZRw\r\n=1+nq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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 indicator component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/base":"^3.0.0","@material/theme":"^3.1.0-alpha.0","@material/animation":"^3.0.0","@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-indicator_3.1.0-alpha.0_1563283747912_0.27061935472878784","host":"s3://npm-registry-packages"}},"3.1.0":{"name":"@material/tab-indicator","version":"3.1.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"aac5de4af5cb56da492535ff63bb2495a063fd31","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-3.1.0.tgz","fileCount":35,"integrity":"sha512-U4H1bg792ZP4BzjiG3i3htHKmRGlGUZ8c9iroRN6W5B4hYQ5/4DbFA2h2OaAZ1fhyjHiyFosK5ctvgu7qSfZ/g==","signatures":[{"sig":"MEYCIQDgUearAX6nd56a/KBXU+1An3HA5goLs1onvt+0Uj6k+QIhAMrUcZGWIW+KSRCP8kheSAWMLr39wOY9s1qsBYNzSs/+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdNjJ5CRA9TVsSAnZWagAAmI0P/izbAep198rbDpTi/zVk\n9E24X16+CGjmsttaMRBHrnfXUaand18CmaldblE/EYVpSg8Ed5jvr+MgbRhd\nWAA6iSw4Amfo/AyHToicgH8PGWNHqb7rJcnPNF7PRTe/cnqgZrVug2TLu0f/\nlA8MWenXuvfEEpJ3gYTSpIzyE6CvopM7L8NKqgGyeWkwjC/sdynHS30U8YDF\nRtgiCNBNrBimnU3zausRpYvT3DoYYp9/8iUioz+FZb1stJglK5yxFCKcGN9x\nLPPjCbhH4UaF5xQmft+m15+uCQ6yCgQhNJPmlGXZZ8Fj7Ej+oqp2zR0awyAt\nos3lf1Ctte3YXaRkcpy8zkGkxmMImIO5/XnlKCE4j4c3cGzs+lDyZcDvRzMq\nGyxyn5z8RLvxltKOL0fBcepgnjAOfeTtA/YHCKiRcp/8v2ttBoWIgME1KJrX\nO8+WDZZMTX0F6BJxe0ntgdutO8VcOI7+NO9cfeHLXx1ZcILIQpMyHFWmyydO\nSB1s1GNV3bNJh3of0/ECnF8lSkMCDliFw8Q1ZhsGQHmdX1jdvGWXTD4lVNY4\naD9Lh8Jh0A9c5z72OuB+eMmkg3eX/vkFvrbD7c6V0Mdg7duMinLOs8jw87X3\nJcehvfwc7AT4S046nl90CNWWfZVt1wOyrr1CubVTrbGRRB2mYxw3ItgioLYZ\nbDrk\r\n=4zhM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.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-indicator"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/base":"^3.1.0","@material/theme":"^3.1.0","@material/animation":"^3.1.0","@material/feature-targeting":"^3.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-indicator_3.1.0_1563832952519_0.1941276720879792","host":"s3://npm-registry-packages"}},"4.0.0-alpha.0":{"name":"@material/tab-indicator","version":"4.0.0-alpha.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"bc83410f450f2ce77a74c0d15d0f107fbef5cbd6","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-4.0.0-alpha.0.tgz","fileCount":35,"integrity":"sha512-hsTPMyxlGrawB/IlseqqIXgDJo5/2CAR/D2qTxJEgRoXDRJTgzzQ8iRRfy1zhIPH/H5YVaKiBu7MU9H2dTY/bA==","signatures":[{"sig":"MEQCIBCC2F9RsUl1j9/9wIG3qHru9Q42BBgWYlpDFqNRaaeGAiB34UsykJCyMCRvL/gwowk1V6aZGtTSObt6uOpwKtx8Kg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":166112,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdSz3/CRA9TVsSAnZWagAAirsP/0Pzu5NPZk+GOi93gIJ4\ndPOmKidXnWNh/U2QWK/80JM3d8aNekG5ca8jvlyK/UycAmrHUU4GNUawRbUH\npia+ZR7+xHeTzwRTVetwXgMDiMS2rxd+HJ5ml3XXQu16JLHrkAJs6zXzub8i\nCGcyfPXY/YGqvTw/CtNvicfUAAv+qS+xPAq1S46O5i/BsaKOvrR4/WdfRJiX\nYb97WDtX+si0ocKT6jraXhK6GAPeJNkvMRg1643puF5thiD4Lbb5ELx15Onv\nCdl874aAaEk1jo2PlmEp9aZApwL08FNhaWTyy3bgtoj8EJkpYTMZMn1RtrJ0\nP7jgzqvLhW1nd/aTIx8wYepdJH+vdZfyjatrS6Oe+xYQuP/ClCwYEYIMTxuS\nKBi7frcT73l/czwzLnEhH7dEucpiyO1w2kcfEtaawG0wNN4c9auuHMJZDj95\nWYKyhhVgL/f8ksqzp5oIsToaG5CXuK5kfMIj72r3e8zLTCT28L9TBiQN7KdF\nxQxmRi7povA7n7R13mgpzjumn/I7mizC/bCmrLgLxwvs14iEp+2GkRrUkz4y\nQk6yygiVOTTM41oAbyieEFUx+v3i+IpdzmEEYP5lQ0rzviXt5PMV//bFWipx\n5wFO05I217xG1X84eu4KYlAjOS/GQeR8TKDDPFP52E5ZXsRRJ5PPjW8FtbpR\nNBBl\r\n=z4t4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/base":"^4.0.0-alpha.0","@material/theme":"^4.0.0-alpha.0","@material/animation":"^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-indicator_4.0.0-alpha.0_1565212158588_0.31633203186439185","host":"s3://npm-registry-packages"}},"4.0.0-canary.0":{"name":"@material/tab-indicator","version":"4.0.0-canary.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"057c0f07262bd4435dd26f328aab13e4b6a7ad91","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-4.0.0-canary.0.tgz","fileCount":35,"integrity":"sha512-LxLlydh048T3YwqIS9bCPWV/qS4HDv3f69GwRnrd6QcTv5EERToPTRPqDw+KCCugFkIYhhpORdgq+5w2CgMskg==","signatures":[{"sig":"MEQCIF02+MQ2rCAs+XBNJbv5Qy7JMLC5W+lRF11dqwQr2wGmAiA+TWq1rQqB/UxXETncz034kVgPyl5j7C2VmctLp9bnEA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdcJEcCRA9TVsSAnZWagAAOtAQAIGNkTzT/V6y1pHRmSyK\nkktPFSfLEJi7wQwdblJTGyyyEf6Ey3G51zQB1iRelmGWP20Xu08Br1zbC1Iy\nswNtBTnqScQUR21Ubz4+bftwA6JkNwyh0A/HaRfT38Ajj+OWyR/m84h9f7bc\n/beHAyKoRFpSHCqul7pnZ1DPIza//mnLax35hQ2YqLOJukg2kYLYPXOcesth\nQqsi5ZXsA+hK6s0EPWlyVrZ6Y1KFhHx0ctFzEy/xFNmSW9SoUymBFSuYh8v1\nTK9bC3xNsPUSsV8kVNdMVb9nq82T5FH0F0pv4OuyG/tSKyKS1FElDNzpb/Y2\n+lD/ViAnOgNI+XDz1Z4JlVyTpDwpE8Sc7EDDHiObqujSRnUxClGDW96tNLm+\nt7qSJrW39RI69kg8rmptFr9KQiDSc83/SmqLnh8UzsW/rS744uLk+qg+vRuK\n6RRcQxCCFt7DoBKl4XMKgMVf7vqUIybN+ObZ5JPlAhwqjreS+QB8cWkWndNH\neBR9rRx906m/UUj2xUELJI49+SbgEv04SJ+FRZfeCSjd8mqVtr1rw4IR+QJ+\nL2pX+2lbXGwJK6E7zncCHKuhwHqThNYebJT2PAccQsk5O4d55k+aFmTgGpYl\nY8yRLtescCk8v0m0KLM+ytkjGSqAtduxWJmWphscWO3xYZyV4tsd3H1DmrJG\nehLD\r\n=+RiH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/base":"^4.0.0-canary.0","@material/theme":"^4.0.0-canary.0","@material/animation":"^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-indicator_4.0.0-canary.0_1567658268236_0.7774681593889181","host":"s3://npm-registry-packages"}},"4.0.0-canary.1":{"name":"@material/tab-indicator","version":"4.0.0-canary.1","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0e63aeb48b53ed7cbf1e1347fad2bd19ef074d73","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-4.0.0-canary.1.tgz","fileCount":35,"integrity":"sha512-gS4dS+BQD2n8ocKiUKrFqHPxE/P1TJcYt3puw8ICcp2l3ofxo+TBvD64bemb3qLWOedrQAksh++cBUREcBqzZQ==","signatures":[{"sig":"MEQCIAW6qWWp/P2xBKT2LuZh3JREZG/lTRU/Vxqx6BVsmolNAiBOSWYjuRHg2Otuj6RuJuu2YDTjnmJsaX4TxAkVa6cMQA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167670,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJddrQaCRA9TVsSAnZWagAAPusQAIpbfwIru77O9jwB3TG8\n4h2E314vJH4idkqI271Gh6koFsMEms0PfqxmzOIBeBqRHMReA2RP/JxQQJ2Z\nkaMqa0+yF8FI03OB5sShVUuqm3+/PjTMHGb9CE6u/UJfFOp8SutcV2XucU8r\nDHIhhMPNbxRoJlNQWzO46/htVdD6NGetlqEBloWPVRxGKacidZqMNCjVDJRr\nceqsQYWxzQNGE8Wh9o7UzrZFAH7wpIvGtpqkiym3fCrjjyB5YKUvPrwbjuxq\nigrYtzv9dTxkM27kFUz3HW1iIsN4Uo6iR/w9zC3OiNTz67Kt72avtLga2rvz\nm2MS2040gUA+cnSR9Privke1gttOYYZKh6nX0nrdehXYGseBn8wdBd4bsJrI\npK2bibERnmWNkYtjODwk4HZku/yQRpINa5tpTTOPEmRs5Sz+x/8T1C/o8sv8\nlrRdtoMGe7btjsTtJAHwGjs4XkX15WLSd2PAdLN8HuqrqQbLt3zqsymzl5Kt\noUPsxL+FOAfcPE1zE4cQ2/b3awiEAi3icDr2ROrhpGe1JHzWty6hFaKixbNm\nia6Oysr3zCqCW2WqSmPzFcULHYOszt+XCD54xw7UJ8R69ypIFnDsn1/WHThL\nIYJNFT7GFEc7sIanChXQCFutMA+ZWEBIRvpXFdoObVa1BnAdz4Tg0NlxVgne\nvPmH\r\n=r9kj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/base":"^4.0.0-canary.1","@material/theme":"^4.0.0-canary.1","@material/animation":"^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-indicator_4.0.0-canary.1_1568060441422_0.0017672495402258903","host":"s3://npm-registry-packages"}},"4.0.0-canary.79d881baf.0":{"name":"@material/tab-indicator","version":"4.0.0-canary.79d881baf.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"d62509a2feb67354f1d50b5f38c07bf5d02a3ab5","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-4.0.0-canary.79d881baf.0.tgz","fileCount":35,"integrity":"sha512-mgX0EGxYgDMKwH59p8NUkRZ+fKa/Uda507PmE4wRhshu3iJ64tjugV+YYC4lBsKq/WRJ4q25kayMgfgZiSzo2w==","signatures":[{"sig":"MEUCIED10eTNnmlo4qbN7AXkRyNgx9oq1tF2eNRKsOtMiqS3AiEA3pnX+JSLgTU/NL7Ec9VWCni/eyHTcMiTHOkZg1G8gjY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169020,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdev0rCRA9TVsSAnZWagAApNYP/iTtMzJpAS10TcEhEBBo\n6dKxFm57thntNvl/HIMfEjiRs5FjmcsED7a90k3w2fpXIJ9PtmRTQliknP+p\nrjLkEwagcsl+cRFWG1ViMePXk4RAmv+KADRPPventl3wPjw+jH5ivybUfXgE\ndtpTvQGKXFJbYW0QmL6CZ+8HlMheonygA7gltC0ZCsamXImXTdfGNdNV+AGm\n7hSVYEsn/6Sj8FZ/NrFNZ4cZvQY31SzA+FpxFWvJf8n40riCi8pUYnBCzdPL\n/y5KgR7//YlUBpuL5s6cRNsUvMGszPyEG3MxeNwWy7kTa5RIIe7OWAKpLaRz\nWE3HSShOhxSWWYzbZr86lBGbTF/Twl+nVmHCwXlJUXzLk5BKuiPisMeNZEDk\n9PyAZHZ5VQnlJo9Mre+9IyKx2jEzKewIL8Nez+I8wP/EleajRv9r+xKlHJP0\nbjV1XyOzOcLBenpAQp9YJ/mN4H4i7bb/VX50xLj9n0PnFQir+D6eqIaN2yFF\n73ZAqEra7tPwCUy9mcEGGxBvxh23Y5C9Z1/lBTWiCfgqGcNA5pRkLnE03lnh\nbT3+Yn/Yh+Q4vcei6j1X+jy4E5csHIS7v7MKAJcyo37r3SilTTugjTnpcijs\nODNKkY/7x8fJw9P40ZITLQlUflBo0d4EHMdkifmpIAHBHvRKVlBksPsr3Ri5\nG2TO\r\n=Hkmg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v12.10.0+x64 (darwin)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"12.10.0","dependencies":{"tslib":"^1.9.3","@material/base":"^4.0.0-canary.79d881baf.0","@material/theme":"^4.0.0-canary.79d881baf.0","@material/animation":"^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-indicator_4.0.0-canary.79d881baf.0_1568341290990_0.6924893269462324","host":"s3://npm-registry-packages"}},"4.0.0-canary.e851d4f40.0":{"name":"@material/tab-indicator","version":"4.0.0-canary.e851d4f40.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"340811761c3c00121ccbe51097781c4c559ada31","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-4.0.0-canary.e851d4f40.0.tgz","fileCount":35,"integrity":"sha512-zy86J93Le2wCc/Q4bTqjqdVjYn/5qaAD9rKUpWTi634vylAsPPmzsTfHrgqm2Z9Kb4fpVujBUvbN6NFo/Eqrxg==","signatures":[{"sig":"MEUCIC49mM13NWRrHxqhv+9UPa4NJLCQPcqdytlAkUHHwQScAiEA7vV4MUOe3xbrcMeMLalikKWmrBlax5jj3a0Pn8Nrl6Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170772,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdexX2CRA9TVsSAnZWagAAcnAP/0OTR0ibC3RK4ZHECf9w\n7ZgSpcTSjqvViYDGK7RxKNVroRgcVaCSTv0aDLSvXysXNbteQ0CvkLCd5f1Z\ntGF2d2R4tzFrlcERyinAsZON9KMuDaP58eIcqTbkbl9zeIrgN8p8Cwp09Zbs\n2Hwu79BoM+zG7KJstq9BKOY/ab0GE54n8Uc4JPsVr+IlktZ5qflrMIeijbFY\n2Q1S3x1ivanU75mGSZYYeWkc+lUzwhUD4QeczV8sIwqXE1nHrvWZD2+CVWFb\nT4Ogjwd586wwG+c/0WhpMele5SJV+dFs60xposTF9ywH9QVIAfBBNu5JAwml\nxkw3xX4JUxnmjUP3UgzPVpBzX3nMKBK5Rocld3D12IBr84DmErkGd7CZODY+\n8t5qraZMYHqsW20KSShkCGazTwIlCbNH7sUg+i8eHUFmAHAlUUlD4V+3FvVI\nyed29x6kUuF6V8EUx+GYAgcUuiJLtUzRX9ZKmBcwJZj0JHWPgTi3Q+tFoX5A\nCWl1FbF3CSI8Ewd1+Ds7kQC0lKQp1srU5sWuxlYCVRb+CKpmnRA67hFIiHE1\nKlIoZStwub/mKJqZGVdMpsEV/fXVcyjVfJgYJHdjAsvWd+OFS6V8WXSBMQ8x\n8lKHw6ImvCTJIUlVHW9T+ieFcN6OooToznWgxjZ9cjMJuuDk3i/9MFPXCujW\n30PJ\r\n=BQ4E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v12.10.0+x64 (darwin)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"12.10.0","dependencies":{"tslib":"^1.9.3","@material/base":"^4.0.0-canary.e851d4f40.0","@material/theme":"^4.0.0-canary.e851d4f40.0","@material/animation":"^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-indicator_4.0.0-canary.e851d4f40.0_1568347637996_0.902178462884413","host":"s3://npm-registry-packages"}},"4.0.0-canary.905884690.0":{"name":"@material/tab-indicator","version":"4.0.0-canary.905884690.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"9b7151c000e5bded261d2cc878005f33fa31d449","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-4.0.0-canary.905884690.0.tgz","fileCount":35,"integrity":"sha512-8ojMyVzV6leLhJaoL7yLrvTm3Pkzv/3KcySBhdMmoc8j6k0IhiHEk85ZcVF/vxijMFFe1TDIWA8Gk/VVPeDZ0Q==","signatures":[{"sig":"MEUCIFBjHeE/TjsxJmOkywbMOkUubi99zWXnth8acbvaD0JdAiEAvWQ2/lROBLeyCfV64oIT5lXQ65R9cWKDwxBeHUBkoW8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170991,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdgB81CRA9TVsSAnZWagAAqisQAIqVtZ6ZzOaWCpRC3Ls5\nYVa78c7HeljRFgcGtGAHtbssK2fFDfSpRnGmrWdJz8PdPzPge7h+lBzBu7DS\nDIg0VEbpQWFe7AMRhXWgEQHqAufzgTQ2OQmklRZHGLPc19lh9KRH1N9SLA9A\nDpSwPzFMa1hLGgr6cRDerG78ffo8tAx3aPCevZfCRLKRSblCWK4TatohWx5l\nNQDdtsbORdaFkpCXODc0hmw1UF7itaduoGiK+UiRBUapsflCJs+CMUnLJPsF\n0qQ2g/fRFpiisEuvcHKBq6rqiTgQlbRbBRLzJzYA+pyWRbkxN1gaTfWGEQoX\nwXz10ioMT93OCCgJIuuMpOoAi5lRvZ2FDWAzGv9COr5hnPO1vGkN3MsqepqP\nOZX4cN8BdypbE4KkJj/DtZZGNGt5vsN2FlG4fYbSr0tWzGgPQfu5Y2W4/RH6\nw35UQiwUvy4ku2v4lFN7Zk8c5VBkGU9p/z5Oru9j8F+UybRB7yVV0hGIWvHr\n0Q1XrkfLqzjWXkFSxjvtXwYeV6o5g7C93JnSUUvrD4v+MPwwDe3ortjQTK0V\nv4VPJ0x9SfmNpMrYZZIehETAe18mDOL7vQDvU/lIsyD8MaW9A3vnNqJwCpg4\ngyBvsakBnNmLd35hITJbvcY7LAEdKVWJABnPQjDgg8iGu5/ZhPcwrGlKfMG1\noxrp\r\n=kWFv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/base":"^4.0.0-canary.905884690.0","@material/theme":"^4.0.0-canary.905884690.0","@material/animation":"^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-indicator_4.0.0-canary.905884690.0_1568677685032_0.5202996939015136","host":"s3://npm-registry-packages"}},"4.0.0-canary.199534d61.0":{"name":"@material/tab-indicator","version":"4.0.0-canary.199534d61.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"26c6c099500f0c1c6e3948b2e547c1a875749e59","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-4.0.0-canary.199534d61.0.tgz","fileCount":35,"integrity":"sha512-OB3RIyxRCKoNuSy9y2fi2EKp7DXlJ+VdHAzwhubSM3WoNqgfgjxu/Cv5KY0gdVv3oMVRpbIshaUXZTT+A110dQ==","signatures":[{"sig":"MEQCICcx19eOH6vnvvR7I/Z5AhbHW5sdPagIYmaV6qZTT74FAiAnhp2W2y0VFJkkNusxLcuBGSBex0wfVArbXIWg+8j8PQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171210,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdjluvCRA9TVsSAnZWagAA90QP/iag+FziC33ZMWAziuDZ\n8Nxj8m58DzFf1YQo1s5MCu1ivmYoG4zwSe+6Q0txfG48HEOCpxeZ/n5osr86\nOdFimmaZdaQj+RSxCb0VIOGBJ6k/1Dg2fIJGS7eaoj8zHw3wmM3WXLBxYY8e\n3ibddmY5v6bb13ACjIVDClvhNtFfjdRj7JGQZOQwuyWL6R8YayfnsXNxx4le\nSX9oSze6SaDj4sR3ViJifESuSEvojTmEL+q8UMyHPiZ5uet+nqfuQii8xSnY\nvBGb41ocN1bADSSheX5NNNnefl5ZA4C5mupLwM5zP4km1Z2trpYRwaHA6/uC\nciPd0JgJgVvYfw6L0+Ej3ibsp8w1zUOYtvn9GAY0z6Yk01he7kPEbnaFKHNG\n4bnrYaDtkyh2MIOykG/2+fF5mBWrvVxnHxgVDM7O/5LxWBzljgoVihC0yM1p\nQ7+nMEY4yd+lpqylTtzbMdHuTGhmsCbsGaEvZs5rmnbWuCFUgsO2FdUdPnzc\nZtwJvX8vJCs9qDjEq7rHZjQucD78x+N1p+/V+ehx28dygi/kPwL9gaJcjgVk\ne4bxrX0NuUz7+oxKYOOMEKu0cK/eANOtTKnhyldTEBjlToO0ISH0EwK85+um\nR0fXrxfNvIs2wtkX63hPFe9otE4DvCyYXgm7u9H5BpeaNQpagYKfpsbPgBAT\nBlh6\r\n=WP6A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/base":"^4.0.0-canary.199534d61.0","@material/theme":"^4.0.0-canary.199534d61.0","@material/animation":"^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-indicator_4.0.0-canary.199534d61.0_1569610670548_0.7206118602909297","host":"s3://npm-registry-packages"}},"4.0.0-canary.22d7ad2fb.0":{"name":"@material/tab-indicator","version":"4.0.0-canary.22d7ad2fb.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"648812f74b9d2eab677fc23b8a1bb556cf91b994","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-4.0.0-canary.22d7ad2fb.0.tgz","fileCount":35,"integrity":"sha512-T51yfFwxvDvYNW1FQZ3vwYCL/et4UK/hVtwbDp3fvTB3JiArVpuntOuEsf91OQeHgMONNZ2lq8d1tMW8xYPHtQ==","signatures":[{"sig":"MEYCIQDQD8VW/qTpjanzc7UZngyxpNNrXwxQXjPWQYpnjlyEdAIhAIz+TvX6zLFKDba7tQMANtjbo2BY2onoURejRMr83n3A","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171429,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdphaHCRA9TVsSAnZWagAAYlMQAI3s1i907DDj2g7nAFXk\n1hvTlp7U3es3OIdPFeT97f3pBykww/urGP4d6B/KZQ8ruzvH1lAwLrPZs2hN\nqnBy1FhtkSrKEJgqX83ihSaRF8mlf8NDcNWpOeO9ezJHSUGoOhWk7wGJMKEy\nktGWM/P5xbJL21CV+pah3rK5GSEcRELSHYZC9KhvQuegPXSrPGB++pmVWSba\nIfW0JSC8cIKKmG4FfqEMH4DhusjjWIpJf7jc1q1TqHhtcQEnn0QDLZXu7gag\no7B5PSbo3WTaiU/T3Xmlq9y8yUBdukgtn7nXbjZp0sgJX/lqSeSR8iBkmcWL\n12JDMlfAYwTzqY9jAosiffm+Th3Z+BVTwtNdpdLhtn4MXR3Z3VY+ri8PjIlG\nKNbfDWbX6IkpXJvigUBxYnnNj5LxL8jDkmoAXG+mXCAVDTjdujlfRTjyHKHp\nlYnXh1euguTe31WpoMBZNqMBnTri0AcbPCx3qQgUYrJh+GstaUz2qTM7THwS\nkv8RWu5dng+RnbSbrGNTc5mvlS7+jmzevYS/xf+eeb08k7ooShGV1NSX22pG\nOAXMPwClvtujrMLSWzAvU43zPm6HvUWtzIPBLfHpRA3n530mXQmNo1ykv3r6\nJepcgAtDJZPIVDdrLDyBheMmItNCbMTFr0KuERLWhAfyyaIAq3TL/W97zpyA\nugeJ\r\n=AnRM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/base":"^4.0.0-canary.22d7ad2fb.0","@material/theme":"^4.0.0-canary.22d7ad2fb.0","@material/animation":"^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-indicator_4.0.0-canary.22d7ad2fb.0_1571165830899_0.5732085922724028","host":"s3://npm-registry-packages"}},"4.0.0-canary.735147131.0":{"name":"@material/tab-indicator","version":"4.0.0-canary.735147131.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"4ed9658326473e5f6f984fc06cecba9f69415827","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-4.0.0-canary.735147131.0.tgz","fileCount":35,"integrity":"sha512-e0BnlVH0tAMmWGU2O0RcEEUdXHOEi7RyZUszL+5LcOi5Eve8clJ0fJr5qLkKP4A+k6J91yQ2QdZs4sNIyRE43w==","signatures":[{"sig":"MEQCH27oqMdbn9wGpWNitoERQ3rSoRxqMUJzPAjkl8jXUCkCIQDHOc2mBRJkqfygaAgf6o7yOEI4P7MzkxVbGbFlOPZ7Nw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpnERCRA9TVsSAnZWagAAnxgP/2SizF1XUHsx7urYkvlB\nrN2aXLe1af6IkGY5yspCj6668Mgbeog/NniANmaWkHPUfbticn6QK2NQBSPK\nmE8yu/5hItca2/NGMSAeFuzAt8AIQkS0R8YryoWcI6KRa1NCW5GOIAEjsBLj\ntB5E2Cs2xzY9ZetguCwqOebG50w5Zc33VHgQ3l8snyKluKw0V2aUnlYfQlBj\n4569237HXNrBMqZiF68V0Qvm9kVdGU5Ge8t/LTyz6+Fxm8xFQwRkil4refJQ\nUNX1rZnDUYMrfI5KjHlpwyXKjBDYnVlrjOoM4HJ1f4NYVeLbJN4yxsl4O4oY\n0hMBjvFChCLX258wq3SbiEZlekp5rRKsZ1CXI864SBY57Uehfa4J6Alan/M6\nBE0gXWq/e4TZWqKMMOP9xyLnzLoa8JBrdzu6jjSrXkHifKYAmQUbgEz/at1G\n3hff0YJ7ndmNhfRSE0NthZqQDZLQA/eajrRunhYyV+qI28wM51UKd5FiJonm\njxcThddpLUh2b5Wt0LyOmUDch7X1i9dP+wZih9xHU4Y0N2bGOuomKRlaAPhq\nOI8JqVaznXNNb+oOyVW8HKSWfio7Y1ATFSn+p3c2jipJiCTfYI2zrXtmtKON\nfVi5pSpzGgmIdWc+SsOQs4gu+yHpqzeTkqvc6YrImvu40MJkKUmHy3oSUVaV\nn6Tr\r\n=SwiH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/base":"4.0.0-canary.735147131.0","@material/theme":"4.0.0-canary.735147131.0","@material/animation":"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-indicator_4.0.0-canary.735147131.0_1571189009410_0.9298265676409871","host":"s3://npm-registry-packages"}},"4.0.0-canary.062ade5c0.0":{"name":"@material/tab-indicator","version":"4.0.0-canary.062ade5c0.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"612eb9f72a7bf6bbbc2c970495411c3fbee14a84","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-4.0.0-canary.062ade5c0.0.tgz","fileCount":35,"integrity":"sha512-qIkGJD56wpvxpu3jjzXvAJVwzXCeUJL+pYM1W8KVBbbn8V7M3Kou6MJJjAlGuqPMMtXzxtikw/f+Zp+DgSskdw==","signatures":[{"sig":"MEUCIQCRN/fbgR8H0B/2DbdhfaX19RxWyJmwuig3Kbx5l+KVUgIgMVKxTub06Z6+FHaChHgZAdIsX5dZWZ7sS4tBy4sWOl8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdp71rCRA9TVsSAnZWagAA5QMP/12ieiFrIvpvBJnVCO1l\nuRt+uM9MVBWU/mtroTi/Mfv88PDmzLq4dU4XpfwqWL8KSQJc/UOPf1Kj65t7\nZK0Z7LRmhSc7h4I4FSoLHj6xCWedxWZ1iqjkohA8afwHTWZ3fU2GCAfjMKPa\nscUwF0BYXiXcGWb3j7JCEDyYnmUYIjFmDMUpE+tkTKn9j2tRJO3M7esX3lZX\n+OPw2n9LtG3rvVcMy6iuYt8vMNyPurQyEq2NQiOuk8y+NykfePtzy3B2kzav\nr+r99gJfU/5KR+sGFsNFl4oxLWAtdnid/ylocOpDaA7lqluzob2WHk/E3WIw\nhrJvnEOc93pYyokJ1afc6pjsU4+mNboQy+ABG+JzojFEVRju0hVHPymGYT0C\npJNbbp+PwrG+cp2F7ecXWtsq0P8ELGLdG/2cH435RiaV6XUNDo2svgPOgAQk\nJM/3FkIHf1OuUzY2mpdF5p0t4w7lfe25YaY0kgoKBHCk6bw9ixsEpWae8xzQ\nSU/w4qe+pcHxWpR6y1SqpU4LbIGS/+x/wEO5PCO3xdUxRuz28lqwHMZsNdgy\nbT6Tqb9v04nvjPxE1D3zJzuHC780vd7lQgGuIyz0QznLhjCoQz+u10jwkMVZ\nPHvzHndUkhTIYuW4k/hQrgKxwxFybe/B5kzPQGe/6DwVe0chCkukXIiZqvL8\nQtWo\r\n=JsUZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/base":"4.0.0-canary.062ade5c0.0","@material/theme":"4.0.0-canary.062ade5c0.0","@material/animation":"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-indicator_4.0.0-canary.062ade5c0.0_1571274091374_0.8327947086579319","host":"s3://npm-registry-packages"}},"4.0.0-canary.774ad4f8.0":{"name":"@material/tab-indicator","version":"4.0.0-canary.774ad4f8.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"bb5ee80ae1e50345b1163ac8eeee382bb8dff9e0","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-4.0.0-canary.774ad4f8.0.tgz","fileCount":35,"integrity":"sha512-qifSzBEyD9HG/Qo0xZ9KILMH6Wl69SmJpNgdhY7W4y89HUuVZE6wlFB/NtfaiKXMT1Qn73AAnrNKv3k50U/SKQ==","signatures":[{"sig":"MEYCIQCYWlkIAIxKJbkgitn12q6V44oJTfEZODbveEpvLK2BFQIhAKx0ReueIScdyAyXHQiGTgpfygI14SZQdRGGwJTl7uJU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165661,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdp+hOCRA9TVsSAnZWagAAHa0P/Rdzln+7fd76Zt3Ay0D+\nwCSU1rXrQAq6Lv1GdQwNTlauXNkcLdPm6q5vu6X4KS6ZtaqgrDSSmj7aHACC\njkk3ouGi02qEn11r+iaGETz9/ALSaEk3Q4OuJ3s4YLxy1g6GVPB9Ru0q9gfm\nx3ijJ4ESaMxdmSiMoCqLrvWQqOFrCfGNUM7J+yNoG0TXuDyhl6X4dCpzexDa\nwi+rTuxQp47nw58GU8tm7Ft9C/a14zQ8ffWSYcNCJHtmrf4N1CEgy3oLWpOk\n0Rmr2j4KU4hQSeQKzYcxmw3u4lZub9+ZuuMu4ni00F8n1HOgnOjXhDA5oxao\ncAITvAI0Gicdz8XObsRcaniG7JqsdXVT7ChmohmY04NSoZ5oQm1Vl86z6+X1\n95tNCAhacVlZmS0oc0NLQLJP3PvxcT7I/YB6tqhUDUzQ5F9u0pyXLF5uMLdG\nVH0T3b01AU2SwsmzdBOfElJin+1PiER7ZG/05bu1EW0ipdb3KP97x9oPXQZi\nR7vY2CrUClwkt4iRV9Jw+w0Fkbw4Va2TJu1ZztpLsmSkxnlY5l8ntjfqNUx2\nKa5ROukY48d6BTbyAa/KYNAZXXowZduId0hAaQ0EFgwn6JD9n7X2Y/MwnoJQ\nJz3d2Mw8SEwck5eYhvAJInt6Ktn/QtqQnEDsZVPxpqVT0HL7f9nCgbEVEcM3\nIh+Y\r\n=VVwB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/base":"4.0.0-canary.774ad4f8.0","@material/theme":"4.0.0-canary.774ad4f8.0","@material/animation":"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-indicator_4.0.0-canary.774ad4f8.0_1571285069473_0.5047653032975881","host":"s3://npm-registry-packages"}},"4.0.0-canary.5916d18c.0":{"name":"@material/tab-indicator","version":"4.0.0-canary.5916d18c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"7576aacd6ac026f3a38b62f8ca314144151757fb","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-4.0.0-canary.5916d18c.0.tgz","fileCount":35,"integrity":"sha512-J0hnyCHGUJoR+w/UdSAzzqFszEfAeUFAMT9KsQ0tOhdYuLU9Ssh2jJbipQ9RrGdHUEno2i0VRS94XRjj4UNWVQ==","signatures":[{"sig":"MEYCIQDjq3qyA1qcEROUyQYtjs2RMPqyRJmH6RyMjJHmgdnpuwIhAIHiH8c5Kg9NOLAKq5b1gyHbbk+ubsj+qoGvIIVeLmt2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165841,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdqhvCCRA9TVsSAnZWagAAskoQAI19jp/zAC3gSYx9/KiW\niG8zpXc8rS6Vv+LZRp70+JrG67X6xxUpwy5/0+ubuE2bHjSvXOWytKgSLi1F\nnhN+G/j/hfy+9kVjGO9X4HrmlrkvtVCzocar9TM0CNEh2+fB2w+dH0ILf+V6\nTplas5fpPDb76uJc9LXOy1LDXid05+ceDL+IRHsDxIP6pl2BOmNj2MebUf7f\n3c0OKiCeAEKB09+P6gVohItVO9WTQ2dLGQK9ldIPicX9VQZcGatuiXsmuuJV\nwCMepSD3qH1B2IzQwz865gloWz40L65gn3fMDEDxklzz2hDs/rYXIUh4EubY\nKdnwszFcyaCgXUBk5U/x7hrv89RbWT88vZmrKRLSOR+UNrqv5E0AkRKKodb6\n1eUklQDe3VM/3nj4F9O/dCYBE+uRSDHGAdlSXk4dy4dzeoeQ4cx2ZOH/mvev\nfe1AwVqTZ5+yjDlK/nCmSOiQZ1whF/tBF6qW96wMhqFs+sH3003mOojyG/Vn\ncFT0M0GtqrAU2JmXvGFmA6WmuXQkZfohWewd7JJHd9SFTytold932E9iba74\n45f3Qa8CU0CSFjmZvEpZbM2Z+HQq8rREuvdPItUbmOu9yr7AZMdbVUr9JHI1\n/43o/yC/7J2QzmYZoBwv9qtMmAWWDvz6WQE4obmy6Lj66p6MAzQQL4Qtv5JT\n0nvb\r\n=i1k+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/base":"4.0.0-canary.5916d18c.0","@material/theme":"4.0.0-canary.5916d18c.0","@material/animation":"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-indicator_4.0.0-canary.5916d18c.0_1571429313319_0.8918888544787826","host":"s3://npm-registry-packages"}},"4.0.0-canary.d4141c95.0":{"name":"@material/tab-indicator","version":"4.0.0-canary.d4141c95.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"d7fc072fec607e426cb8e95e5b234e5928dfac6c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-4.0.0-canary.d4141c95.0.tgz","fileCount":35,"integrity":"sha512-wRAU8uop8UFcPAtzkSJzCOQUDFokdiEgA+E0Fbg+COwpskzpohnCYNe4VNwFzTlSVQ8cMZHooU8cgbCfwGehCA==","signatures":[{"sig":"MEUCIQDuqkvfZ8QYF/e3tQeIRp0TJmsIG6VZzg8sXPooweiIiAIgdBcAGCxG5fZhCCLMj7+jMiEtTqIEEHm7J93yCrPXvMs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165840,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdsQCGCRA9TVsSAnZWagAA6u0P/3l9Gpg2qtVUh6hf5j2R\nrnBo6lS0egzxUD6duqCy0oWPJKyu78f2u8FlDpPBFzCFJmzuxls5kKox3/A8\nQSj09i2j7H2ivpNe0WBRhSqmsiogsAOq1ABFYTVb9GyBjBv4wUrl9K488EEP\nXZXLpq+RJRGAv6SjRFG8mPvV1OnaydVDyPB4l/yrgsvb364hhR6204PZyUZs\nRterWsFd7LlhRmZs9TRBXZAep2honRsC/aIKwrvFaFtHclRqTaE/6Ebz4PWM\n/5WGLb+RVSvvOW9t460pKu9AXmimJecz5Zf+RngmU00/EgqHmq+vnhf+OP/n\nZgEFFntxUnlus8dzu5rVZGUZBQPvsuOVLQgjCVmNoffSlg7ajtXmfM1tl8oM\n8CMVuc+lUyWewWQpcS2ipA3c4jqFnZ0o5vWG5dBRZ2vNnHrH6Mwb0nRckHbD\nWZVSPuhtk4F4pgKsvKIFpp/Y7vCyiifpDlqzE8Do3HEcIUEvBTb+4bJXGVkS\nBNkMdVyEg4X8ZL4JroHGju/LIrFwXEcJ3BpPLlQDgYIzZVYFoKQ4PaIJcYZw\nDtfED6dilWLCOv36rpPrSRPjpRDvMXsUeR8cACQ7/9xDr05gKxErReQEJwLF\neADrW90fypniZS63+bXGdFgk0iVINhTtXjBzZvGWLibFJTTmGZ1IdvtlMtqu\noYoM\r\n=79Ql\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"4.0.0-canary.d4141c95.0","@material/theme":"4.0.0-canary.d4141c95.0","@material/animation":"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-indicator_4.0.0-canary.d4141c95.0_1571881093660_0.9818378023854015","host":"s3://npm-registry-packages"}},"4.0.0-canary.2b878b3e.0":{"name":"@material/tab-indicator","version":"4.0.0-canary.2b878b3e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"a3f81595ceb73d15ae03c899831f0785d854aa1b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-4.0.0-canary.2b878b3e.0.tgz","fileCount":35,"integrity":"sha512-HIWr0SyrnueMlE8zmPHi6GKccj/NDnR3HePkk0o7Hix1zZUpU1xgcFuJajXs+x6YtiE0rc7ANfbDj+hAIGU4hQ==","signatures":[{"sig":"MEYCIQC1UEhcCgHdpSnktZP2nSc07eDHceiN+OP5SAzw3sHrPAIhAIbb4hZQvWQmJqb4dqoP69b1QqUzmiXKE+TyMYW0zdSv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165950,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdslmeCRA9TVsSAnZWagAAAJUP/iRg4qKuMmy+nKjhwijN\nNy15k9LmwtWrLONdjoJzCYUd1bbcTUDI7mVCMw2i2IvBkYY4Qcc76N0HduRp\n3VvTnTU23sBf/DQmPFysJjOmf/ZOJgL8ukGFqp0RPgf/53qQz8+PLMAThlJq\nZvI0HUHKSQDu89W5EX1mLQ6CrIzDGOCrvJ03Ft1b2smeabxpv6WUGi4jyKlE\nVVA6p9S/ythCK6G7jCO4uB9Yv0pHTPufVByaYsmO5UyivO0zrHr5QzwPS9Hp\nOoYUy5POyxVswKII0xSwkML1zMlPP0UCf/vBeeIlzMC1+uiT75EYIWF8xWOX\nvPMGVDis4zcCZkAwq0RYVCK7VhXGTC3NQQC+PBNAc3jYKlWU7xIMAkvO0TTd\njWgNdExrlu/MfCY7vCwDWKq1evimYE8lfl8qX012Zcl4noSYUIQZ5TpUvGbM\nvPxqmP5mtQ/U+7sUM8X9dWc/DuRuYpv5B2rC5BJeKSVOjpsbKznsNzb82TSV\nBAOqVL+ywKd/5ynKzdhp4TuFCKBE9OmDuQbXhmF1jSjDYe2HxEr/X0gPwLBr\nWhYKiWJb5JtqF0KIZs76s+rs+cO3jRrnVDNjR0aZoGpDBdhSz1sSLGn9/fw2\nLDpVgFfJi0AHUS2uFI38to0t3stFOT5GU5EZgb+GZc8RviP2YH7wjCUd3YUb\n9dRs\r\n=JtaF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"4.0.0-canary.2b878b3e.0","@material/theme":"4.0.0-canary.2b878b3e.0","@material/animation":"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-indicator_4.0.0-canary.2b878b3e.0_1571969438110_0.5237859499719888","host":"s3://npm-registry-packages"}},"4.0.0-canary.b06c0efe.0":{"name":"@material/tab-indicator","version":"4.0.0-canary.b06c0efe.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"cfab50432261c97938201312db0f4f706e7e078b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-4.0.0-canary.b06c0efe.0.tgz","fileCount":35,"integrity":"sha512-DVi2VZyy2SA9JO7GXN54lUzIos+zx/9kS7Dfl7inF8+fTYNRbhOwQXWS2RfDDjGGwQ50DUZamLdbeA1kq3D11A==","signatures":[{"sig":"MEYCIQD047p4GEfmkf3FAYbF7JqUhVaqqDqKeU0kOLPS4QDtrwIhANR5Z4AfF4wCHBuFHjlHZTswkY76anFmSl5Mrpc885iA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165661,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJds6LKCRA9TVsSAnZWagAAQnsQAJd3H/Wjoie+aRBXwikh\n8+jlZjBzVtWVz8XQeehVavyTiqLvp/bZw7cIcw6LJ1TQa5PL3o1hac7U4lw1\nAiKK4NJ97rmhNp+Qx3Zg+yTURk2UThi4TlLbyncwWJhPzxiZ/cURY71dg25A\nPBymtWCd3oPY2xjzQReWiwQi3owTrich3Xx+G071L9JYVEgliXulqM8oizUf\nNM/l8WUeyhYYoFuqgYD5mLNvAZd6fDEOh9sco2CRWNCJ8vDU7/i+CKxLpx1j\nxW0dMKQ1S2EgrhuExULJWgomzQ+L7IdUrH82ixt22dTzK12wRyMus6WyMY9N\n2dozfdjt94Wk0vB5ISqsdVJhHwKaMP8lYfsDImWKwc45AoJeERQekYcidD51\n1v1TJt+BlAU25O+Oy+TCyJaPbWH8LYwCEx+o/lD8sob7kOGmENU6NAW75EyH\n5JG0U3cp1/hDWUyGpfeD8HKTTWFrfzZyPbHn6j8LaMhmG/FOqzDbY1uccxlH\nTU7tTXpkWirxfen4DSJYGM0sJ1uzt19VUeVzeQzXWiSfcs276i1ycKOOIy8s\nKMPSQAy5CXDaMLuUc1hmi3C1zIQJkfb0XlYFmgtjCBs4uVx2bBmjcEzs/2Mo\niybkPUyS50ZHKHyVCDWEDyhCwfNj82Z5cmj9Uz2wI3C/DWtHZRpLjRMzNtbZ\nZaAr\r\n=w8yJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"4.0.0-canary.b06c0efe.0","@material/theme":"4.0.0-canary.b06c0efe.0","@material/animation":"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-indicator_4.0.0-canary.b06c0efe.0_1572053706359_0.6583952461263112","host":"s3://npm-registry-packages"}},"4.0.0-canary.01628efa.0":{"name":"@material/tab-indicator","version":"4.0.0-canary.01628efa.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"06f436932c6310c484953efb9822a6889e34fa5b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-4.0.0-canary.01628efa.0.tgz","fileCount":35,"integrity":"sha512-gj/D9IKA3Ad9sxPcA7pI3LeF8ZrquAeBeefS25RtC/WCyEO/UviizIxlmB4kmKaJOL06ShDBjMaMXy7eRMBWhQ==","signatures":[{"sig":"MEYCIQD8W+0exP4YGg/1fyw0mQHycrmYfMjo5DAbZ+EIoUOYUQIhALwuAARfOwExuu0zTJxfjvO24YS/60wYS0SfolBCEP8Q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165947,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdt4GzCRA9TVsSAnZWagAAYb8P/0+9TZxy+1DNzU01uupS\nutPAdTZFztWl7vpu6PbBAvUjEqqw4IAO3EQLoJM3YlrnufuPPq0dBbI58hci\nklUGmceIePaNb8Itogqpm4g7cETAq2ZyXy8qdKXCyt6znumNsjKpfwiGOgg4\nRKlpoMy8pqyACWvfoDOlJBNw9cqfu1WwEy3UxxUCUOUd9x1nNMNz1ISvWWIt\nMlG+SOdOoVs3W9qPjcDI26G1rA4enQTMPqY7ac2bpPPtgg7544Y7ZK+e9x6d\nT8VOZ3dK7YLlqJtlZaROx7WBGGRpJysFEAlyWqvUUlvLsZB/MJICB0ys2jrC\nqj8V/FGEiG94H4ADP6D5dBlr/+kXnSN3lUGPF5Da1yi27kyDNM/9SMpSj7mM\neVOhNV+NVR7cg8m3emcN7EBz6RWE3KHx9WAVJPC3FxGBpKYeU0pAC7nLro00\nGlXBxtyiTVk39btkM9IwYGi24MX6S1SRyddJ90dAduwiFfQthJK3p+rtNMPn\nZNzBjg/H/86E4pUMTNItbBar9EchbX7IcZe6ptdTvPTN+hH8CSyRvrXqiJBe\n7uOegqHnypg79nHlVEdALa9BbOT29WY18tHf+6CWQfaUwI7PpDSAiyTFjyVw\nDwIpyBZBjNxaNU88Z+HZ28i0aOMTbHBJMSBW+wl6i78mihhBmNvEp948arSi\n565K\r\n=SScb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"4.0.0-canary.01628efa.0","@material/theme":"4.0.0-canary.01628efa.0","@material/animation":"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-indicator_4.0.0-canary.01628efa.0_1572307378915_0.980946596777083","host":"s3://npm-registry-packages"}},"4.0.0-canary.b5c6d66b.0":{"name":"@material/tab-indicator","version":"4.0.0-canary.b5c6d66b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"896f20484936f9da32549037607c11e033f37660","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-4.0.0-canary.b5c6d66b.0.tgz","fileCount":35,"integrity":"sha512-K6H/B+vxq1RY8EUwYiYPMooZGSUCCtxO22gsoblY2TSBYRiiuiOdaISMQ1Uu8Xk4amQi7eXwXT+ruvSuHj3AEg==","signatures":[{"sig":"MEUCIDhoS5qvoDHTkg19JyaIGNxq+krDT7kkJbkt7A657jc+AiEAyILU/oduEusWNExdmPKq7FhGnzULdbFsB9ydhlFpEHE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJduH1aCRA9TVsSAnZWagAAT68P/17p/Zv2iEC1dr9x4bJk\ncU7xsNSdKQz91TU0K1tX0SBEXXPovTAPjk7rictjM7AVAl6rQQRogkiaNZCV\nDC7uLFZCyCMpYZT71xIh5fZGahkyChMdhNhbcrgMQLAv29kq/QCbSIxxZw9o\nYWw/6mIbogYai/VgnyFY7y2136FUSkSwYzMX5v80qvp2O7nI4FMOkX5yZbyV\nRQ062tlE9pcDBNegiXa0+upK6310nOsHb/4z9NId/mSSyBwT03TlZ6Qnt7nZ\nXrb+YE5ogLq24rDNA5l1VLJhRsJogRJ9auKwnH4/QbkK7a8LTRCgvb4xbqUF\nuf/4b8xcu+HsXkK+0hQHpMbzi6wo/CwU3xewbEVOzQjTGGEjSZw4smd99A2S\nYDO6ILwKvUjNGPxfPoWkmMmBGIJWVIvLbSCLiTZ4niRLxlzXyvEGkkClDj0Y\n94UA8T+PulYl+4kHysLC0k18o/TvyRiU0BLKHyr9Oa2X5ez5Y/J6Tg1x6Y3p\noIR6TPLz4c5BM2l7iXgZHc8TpHw0TCxHrroSu2AHSr//fNpM01X6Q0opLrGT\nIQQdNHF+i7yaTdlcXfGlGvFYmI6adZJx7E6FfEmaNzVox2XiIEvnZCxd62cx\nxHZoUIwHf0r5clD6iDA3r4lviRXD2fz5o9ozJ7IlQW1E+xP+A+54ZwxApXJi\nm82D\r\n=q4bF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"4.0.0-canary.b5c6d66b.0","@material/theme":"4.0.0-canary.b5c6d66b.0","@material/animation":"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-indicator_4.0.0-canary.b5c6d66b.0_1572371801602_0.9009152763549717","host":"s3://npm-registry-packages"}},"4.0.0-canary.cdf858ea.0":{"name":"@material/tab-indicator","version":"4.0.0-canary.cdf858ea.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c53f862ea997609147941e2f816f34e2569bc4af","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-4.0.0-canary.cdf858ea.0.tgz","fileCount":35,"integrity":"sha512-pPHMfSZ8GCSuOGxLJnTb2XgO6ma4kT5KErScyD8f1YZOmLbwfV/WeMFtW3FXGatl6cV/YUELJWGEAM6E9Dt3Og==","signatures":[{"sig":"MEQCIDSRW8eWOu3OIQnuZ+0hiCla8MqVklDxaL69Bs82OwBoAiBXPPmf+RxDtC5gJsuzZY3+1s+iHMcEx5T8Ts6nFlAGgw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165661,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvHJcCRA9TVsSAnZWagAAgOcQAIts459zJbwHVkgLzdnb\n7SUOnrp0s0Tyex+OvDg3rzNgNOG8nDkXYM0hVc5CVCkh5lpXYgvJoFwTVHuE\n82qNh4Q+D6dZpcr2vDHw6HP7uYyB0aSFF73UaLHN/OagDbcmvyUNw1y/F8dj\nZeA/tnIkIVYpAXKpzcdaWfJdHg7G7Axyq4TY+F91S6GN10Dn4sLjfDENzQAP\nuwNd1kDdIfMZLSgsQ8cjqVvZP/tzB3dYcGH9UcbVtvC/rkN5tij4SARgmYhR\ndodU1HiOHVOqVWYDN7Of80M1JJGIUp0hDb4oqRnUU6hstlJaO56YmfXM7Ypy\n/GWS3id/uwRMMtLgsZW5yhXDC7dp8X2zL3XkgHAfHC6uAbn70EFh+3KQwUf+\nGLs+xuCzUaksO3rxjWl4MJoijyfZM5NxSqYtROC2DqxNQ5b19/CGdil9cU5p\n0cmFlNTsQFO53uvhbLpsQJsLctkAGr+WCyzCUuvWwIJ1qKLP61cpXkdXmcIS\nsrJZ2gdBazFlCzahoanxwvygec/utwaRL420EWSbDtrWecNL1S5qvYotCJff\noUq8rUKQjn4IEinV7kkRxgOrNQUGhaSsplPfgZyDS7LwQghQZs5jDjvgqnFT\ner8zCQqYTehw7F36PtjnjK8mn9YlSs0FpiZRHOFT/7+vxd6rUSN0NPEki78M\nCuaD\r\n=DHdr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"4.0.0-canary.cdf858ea.0","@material/theme":"4.0.0-canary.cdf858ea.0","@material/animation":"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-indicator_4.0.0-canary.cdf858ea.0_1572631132514_0.9303083950080584","host":"s3://npm-registry-packages"}},"4.0.0-canary.719b57e1.0":{"name":"@material/tab-indicator","version":"4.0.0-canary.719b57e1.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"980c30e55348b167666dab601134edf004292fd8","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-4.0.0-canary.719b57e1.0.tgz","fileCount":35,"integrity":"sha512-egTdVKFf7eNacMNN/rIYSqpdMfljMzFBZd3qyaLkMOhIQE8J1wDj1SFk4vdeZPzSYkbEW1wiy4aAx4zlclrgag==","signatures":[{"sig":"MEUCID47Xo8qbhjMXz3D/1pB4uJuxi4P4WKnWs7RQMDvHe23AiEAyjOTn+/n3zV5MEALgcswigwgpvtEVNe8ZzUP/5Q1jAQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165850,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvI8cCRA9TVsSAnZWagAAmmYP/ReHA88sgglJRswWqXVC\nrDZ28BH+vG+MsHmruFd67w0QGFTAAHFBEi9+cbok0+KHhEb5WWxHTWuogKRA\nAL68W1jC5vOld6PoL2B22Y1tatC92orgPaXOD6AKN8wtzkobbel0I3Zp9jqH\n7xs6HDC1q4blQyufipLIfY4pq/g2HynI9r5tUFCtxBECeR5a37wtS96Q7BD0\nBRLrbCBeihFjx/yGr0Lz9KJRar1zZcnHV5SInqeyA6ECdSlOz7xDMFDdDGxK\naZ7wlkwEMn/xn/EvaJYHnTnEqYFfGlW+t4L+NovQlrTv9PIT6ExaEhqanoJj\ndveLJUfDD0CQH0mXB8Hd2wWFI8K3WaRfXD55qJudVDf4XsDm1oun4mj38w9e\nAbQmpyjTPCYnxFHKaFW4CjdOCvBtcdako5hNdK52gdNGtAyNmqYmuhpkEVBd\nt8q9xNqPB0KO5aXbTnjKCxZFAP+eK1N1C8oqZqdqVPKUqjZQPoxUJBQLf9pR\nwX8jTCm3lTva8JcyWeoAHVHZ0WtWsq5mzcTq/01pjZp8ISl3FSfJ239z6oMF\njElAMuRcz3GwMrHyfx+nDWD41knGZoH2MzBPQF+bi8pWPyDX2btIu9Z+UNTM\nmJa84b6kgvKk3yGiYST0m7+46l6WZw0dQsx6Te50igrViY3QsaIInwKlfT5x\nmsFN\r\n=pmU/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"4.0.0-canary.719b57e1.0","@material/theme":"4.0.0-canary.719b57e1.0","@material/animation":"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-indicator_4.0.0-canary.719b57e1.0_1572638492487_0.29198405891456614","host":"s3://npm-registry-packages"}},"4.0.0-canary.97cbbdc2.0":{"name":"@material/tab-indicator","version":"4.0.0-canary.97cbbdc2.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"039a390cfcbfe2077655e3305c946f9260f81a2e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-4.0.0-canary.97cbbdc2.0.tgz","fileCount":35,"integrity":"sha512-crRTPId08SD7D+MC7wZwnvJXc7mg7Mm9QUyZVoo8aA8Jfb4sksUtwO0T/AGXFnWqdpeaOABeKd6P5cbL4uKsWg==","signatures":[{"sig":"MEUCIQC3L2UcdsdOZm7qIXgNya7q29Dy9Ee5n5Fqkf6kGpyGkAIgK5r64htNmdVMTTlle+f+qdsdskLMmA9rxsAEIoEL1Wg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJWUCRA9TVsSAnZWagAAGIYP/jldQsfY9ThzYpMIr739\no3P62KF7eX7G0XaUs8C03l4bsho7U2ah1UO37ruA/VoJpepeGM9dTwRK3fIV\nBkLNuiYcplOEkvFcDcRdS26NqdfBx86Jo3Rddv1gW4Two6PgrgaE8rCL/v0w\nMm4ZfPQGnPxyHYS3bU36GQGmoeFzSeYAO+CRxZ4s0rSs1VOVD6fMQmfCfYUN\nHOFSEroD3qoRpxg5KLcT8BUnlK6oQ5f6PVy/NWU2xN6NVyTNkGBHxYrQFlkU\nl3fCiIdbVuy25+cBt9agmS91oRNYKJvjQQsC1oQ4k8rJZUs9mcrJGCbxK3Wq\nsvr5ByCGlKGbqLfQVNYkdX6GMbTzu04Wo//w1jUKS7ADljfTyA5liv27m6Fu\nZTz9Phal18psj1UR2S/PoHSsADH9liVzrcUeInLFPpIRITGo2gAQhsaBsY2R\n/OGQuLTAax/1fPsxt+l5VvKFNv5UjGdruX2xrCD1XwuQ2qxPWtJe+7LZ2+vi\nW71jifCT/EawYuwnp3xJiEsgcQ8QaJUjRkScyb2cl0OMsK7g19Q2EoU0kRe6\ntRMTRWVlOKaaaUUhqP18NZszLSEcZnieeRkva+rsG3SqqKvG9uxON1WuMpKJ\nKZx+ttIL+F/k6mbsEBxn+GgvzQHJ5M8+2Q4BB+2I1zmKUCgpoDSLxQo1ZaB7\nVuFl\r\n=wTAn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"4.0.0-canary.97cbbdc2.0","@material/theme":"4.0.0-canary.97cbbdc2.0","@material/animation":"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-indicator_4.0.0-canary.97cbbdc2.0_1572640147670_0.2506445419250767","host":"s3://npm-registry-packages"}},"4.0.0-canary.8e36b3b7.0":{"name":"@material/tab-indicator","version":"4.0.0-canary.8e36b3b7.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0fd4b8f5acbddc270e7adbedf8bf5ac2cb27f495","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-4.0.0-canary.8e36b3b7.0.tgz","fileCount":35,"integrity":"sha512-yJqFLRXYuCVA0SabaxkIzZ0v/OSRZoohGZwakqb/o66ZZZAl067n7qdEapv787bom+3zpClpi6eKNbBJ4ddvPA==","signatures":[{"sig":"MEYCIQCD9Q2P31dS+PEHkn8+WnRXRa6zlCKDpMWnYYSuDJnqsQIhAK7rwwfwWLHOwEJReUcBYDPZRoi0qkq4YzNIi4aegQj+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165661,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJ0YCRA9TVsSAnZWagAAcPIP/RVzMIcQMCZEhJkhpVgq\nmCsLXMAJyLN3OhuWVjNJSa0Ajf1f377oK9jEv4v3FPWBYJw5jYf1AxZigqMp\n1Bh5YJm/pVbV00eYgty11+kzp4B1sxyJOQIfN/oF0cp/k9+iQ3If1el5DhGQ\nD+G97Es92s/zzJ2WxnwsimAgD04mtqXZMmBDHR/Le/P+ic4FqQ2RpflSdGBV\nQuVRGLLODmEXUoZGZX1VXwiatJzK8QiKcNRTLslXga3CD1p6Z1KqWis5CEHN\n0wU1iCzTjShFmW+6LT/93lg2ITQI00dksxe1FAluSa89VRM17gkfpcRcZnvY\nq2OtLxHSeY/XJvnSccwh3ZtQCdaIcKKX+6iKmDYls/ZtNUNLV/uUfVD+dZpM\nsRGEmL9mc0nU/HwnTfZtCIEwwRIECnoZf7YV9IjLM7j+oVh003uGLEZMw6j/\nnri78kCuPsnHUEInS7F5ew84Mmx1qOIUIpH8fRWoKwKZ6HM4ZRBVLL171vXB\nOoljGH39OBY87yK6A1JYXQjekblqqTYvf3SgzinjbKprsNT7FOGVwxK+d50j\npfLqyqetVPHMLpNSo3jAfezyVLuEcYQOOsdTnz0EIXxltOb3DeCncAlJuJ96\nyqKAgDg7ZOpOGHcxPtDiqrUaqPWNa1xVGWqgjWyxvlw97fNO9kbKXvDp/Wtc\nf0uu\r\n=LVGM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"4.0.0-canary.8e36b3b7.0","@material/theme":"4.0.0-canary.8e36b3b7.0","@material/animation":"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-indicator_4.0.0-canary.8e36b3b7.0_1572642071663_0.292289221010255","host":"s3://npm-registry-packages"}},"4.0.0-canary.62d3a09b.0":{"name":"@material/tab-indicator","version":"4.0.0-canary.62d3a09b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"11722633e60c7295ad82b105a53d99cbf3306f90","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-4.0.0-canary.62d3a09b.0.tgz","fileCount":35,"integrity":"sha512-7tsRr565p7+LjaSApKLiVizc4A3NSrVEA7zrBUmr7ACXTSDLRCftSbAhXGk7gk26zy1VbcuGGIr8beW10sFGag==","signatures":[{"sig":"MEYCIQDsWSFzvDyAv96R3QjCPigDiE7Ok6TN6gBkRymFpVtpSgIhAPRHa+MowwMOjFpdTn+bOIvwga3q4cyZIiPIYVunHeS2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165661,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJ9TCRA9TVsSAnZWagAA2WgP/R7miaVSolWuCh1cDWlA\nMRswO/hUDSkAaZPwBnO3HEaqOBOH5Hhwlyb1XqxsRQmrfRTf9UW3bXyuzoiS\nRfT6YMftwkO43W8Pj8lEq3WEgEJw2yLOkiW09AJ+NP6PQ4zaqExFFFV5WU5F\n7WxnF3XkZzBoMWmEvGl3UGF+dNd/KvgEgYpEBtBp0hSyc/M12cjU20dhWAWQ\nvNBIgPIN8YCQyZ5ThEE2CEcG0oEBiKRDwr5Qoi/nSoCxXNK2w11oab+MwSgR\nMMW9h0uJVsUcbpKCpPyXADYwykdxB/Pnd4NdB4MrJ+nA5KwKW+ViuRTX9wlD\nF43+F7cUdjinT/uybz04FsBsTRqUdqyYET5NkL4DDi9h4jeBFPDaCoRP89Ln\nZ0DKztDYn0yQNvc3mIVdDLp21aQdaOA2luT0qod8htbfELUsmtTjGWCCDImW\n8kisMB1JQ4wqrXjhOCmaXm2HATed57M/OXSCUqQCZNdYMs3Ix6/D/1Kb6JBi\nXhlLFAQ8sk3jkWLpdfYpGQKLxjn77xz9wS0SrtaBsRZH4XzG/Se9tCkEA+lM\nKYPcFB2Jo2g2zmfRFNV+IodB5m0utc5q+Ya47YUjphRufTTRhAzuSM0NYwrN\n7MnBCDueBW6xDaj81eH5WI2ZTkeYO7PT8zWFpgCQwpsgzR7jXa0A2SCivsKF\n3M6D\r\n=qRjd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"4.0.0-canary.62d3a09b.0","@material/theme":"4.0.0-canary.62d3a09b.0","@material/animation":"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-indicator_4.0.0-canary.62d3a09b.0_1572642642959_0.3211144247452449","host":"s3://npm-registry-packages"}},"4.0.0":{"name":"@material/tab-indicator","version":"4.0.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"3c9c27a6880205d3addaaee8dab971fea00dcd31","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-4.0.0.tgz","fileCount":35,"integrity":"sha512-povMuMcW931yCzZMTzquSsATlks7BzTeBWPk+GxOk+x/0bb/B1URmejELWbzBpl74wAPdO2UdRtPANp+A30cQg==","signatures":[{"sig":"MEQCIC3Lu1vitMu8teSJXAMJtKUmgfTxaObsl/pZJBgC/V5mAiBt53bibyEbvVoNIfG5lVnqxX0/gBuYzQEPnKS9xEGDDQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvcbcCRA9TVsSAnZWagAAab0P/iRtltkVdQCtGNbHiUzY\nvPEIqdHzzLGs18U1vTV5VAYzgAA8IXIPLGcAMC6Vpe2tcbP67YfFgjLhqGBr\nKwp992mLZC+KmcQu6l/ohNEvCVuEQmfPBGoL7HLbe9hn3krp5V8RJTZ6aWE/\nD89MI5xYQOpXxYkxTzEHN9rXDGaiSuzuQCw8zCJAi4fSbMRJTM6+Ae4K6rnN\n8NdKFf+hdM91RWpKf5ayp6DFdLVZMde5Lbk6u1q47wb/u7vhuYtllP767NIu\nF+CaeMnR3RSYuO6oCOqgl2VqybeQyOHvu0ggySrikvK7xCA11UEWx0hbHHo4\nXtdplXC9BjfQ6ok9VXx33AwDgNTAnw3CN3GX/yQracLHBbi5Y/2QfOjwlHAU\n00oiEfnfob1qE9yCsr8rmtFMDQ1o3u1ajMgpLksNWYSfAOUFA7o5RFlctDJ7\nWyn+Wa9wmkXC0IU+epRencwvx42EiEeXoN5AvgXAyyRILdieYatmSRs5EUak\nbm3xZrl4XjEWFSSI3/HGw0x8vVbeXPP+gM+0dU+CL0LfqZn/BW+IL/Fb+zbK\n7hKihvpMwok+p1yWyrDDai6obRGqZlGNeKVTM65Nfttafe4f4LMzEmhDGUA8\nMEDI/snhMLB/f8qPeC00nwukFucR3y2zWc36xHq9rGaMoshS5V4bsVQhZ+ut\ntksM\r\n=/T54\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/base":"^4.0.0","@material/theme":"^4.0.0","@material/animation":"^4.0.0","@material/feature-targeting":"^4.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-indicator_4.0.0_1572718299961_0.8817062393925434","host":"s3://npm-registry-packages"}},"5.0.0-canary.b5eb51e94.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.b5eb51e94.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"167cd738dcc6d242c9ffaff145b06ecbea26cbb2","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.b5eb51e94.0.tgz","fileCount":35,"integrity":"sha512-MHrndOUDVnUwGexoPV7kSLy9TlnN/ncPomQuqc4N8ZSLRkLEQ6nRb6e4HUWHcRm6VdZsh00im1GBdQGd4MdOog==","signatures":[{"sig":"MEQCIEb1SI0oE2/l9GQ7H5Vjix0o5tSsz82J7McQVKmwDsXSAiAdO0skRn2j/qAntrYYoxksQU7VIeChMsopgraAfg+w9w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxGODCRA9TVsSAnZWagAAm/0P/2LAzdTHdK0fjUojMNe8\nrb8YzIV41f3JTzNTtVEWuNFmCyr/NtV71C4BMU6goFmzmb8+bZ+V6GbAHCyC\nESSS5IVd7BAdLW5hJttvk27K//b1aYGM9QACkWz3xoZRf1JCsRgTrrExpFAG\nXCnwR8sbTnhwjSrXmNhYH/hFy2YkdcUmifXf329szoaU8KjT7Eb/Zgj4/h6C\niFqKy94fwtyv06GHvhcX9FjTW4Cdw2mtNbV0J3ETmLv+Dufrwbw4QkeTJ0po\nqeatiNTqInIACoYyNmDT6xjzed2hBSgaW0HbQlSOWE97+8XWMvXGKL4mGj4X\njbLJ90LIYYNv0TENa0qmegRWcIBHjpB+D3yyiTNag5dN7ewBxZDB9kl0uhr7\ncZEUAnMe5KxoENIr3RRgZuDH/YtgtJtMTP6JzVaLk8KE68YMmqd+n6hFQrf+\nFXVkJvShPecfRFyq+uHq/LQPFuPgV9GctD6OZCK8U1Bpp6EtcHsx0ZhkNKA6\n1yrjqpI58mlNLBE3W3oLELnbuxtZPEdYvaPFAGsdBF5Vkid2fsawazSzwN6n\nQ2j7mVWijswiU9RREraTmn6k8QueBAB+/R7NMbN5V6J189dcgBVKotu0Zoao\nse1Xx/z78Y+U0s6FsPclOJuSbjH1hosnT9QqEGo90yuKGL2wscuV5ql0BTH7\nH8mw\r\n=Djva\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.b5eb51e94.0","@material/theme":"5.0.0-canary.b5eb51e94.0","@material/animation":"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-indicator_5.0.0-canary.b5eb51e94.0_1573151618880_0.2719478922253067","host":"s3://npm-registry-packages"}},"5.0.0-canary.58500806e.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.58500806e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"4643b610b6d41654a47624038bb1c9451f17e521","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.58500806e.0.tgz","fileCount":35,"integrity":"sha512-TtLIlNM5v7rpTD1hGcj36QeVKPwP4GZ3/QtpAqaTPF3/LqFjkNvOQVyC1JOYC4JXGy1glbqSju8cJZ2mbrROnw==","signatures":[{"sig":"MEUCIDa+UIx5y35mr3nW4Vup7BpZ9l3n3qTs724NIIGGsGXcAiEAotiJR0O7xSYDQw6iRtPPUHKovj2sg6cZuyz6aHGLb/M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxYtPCRA9TVsSAnZWagAAvHoQAKQC2m5Htpp6YtebNky/\nTOtADbgOr6lZbavgmtSOt4oaNmGLlW8sTv9NIznFbkO81lTfvnHss2k8yewq\nhFgd6xJfD+tNgM7QS1bAo54ynuzem8vGYUuXVTs3m2HVeHqccIrR3IOYt8+2\nggyqEUgD9DrIUQiNSr29Qk5soi0Q/ikkMTsSpTDta6BhPlBK7zcZHCYwLdcM\nN7qpb75UD9vG1B9WLK3+f9B5tG4SA9nRkC5gei/se0NbrywWU0qZUZ2o9IfH\npJlzrVRd3QhvWRLHE5GQnnRZTop01YQOcmVbn/8OADDQzdCOwZI7wdUFQfPA\nL+TqrRjtd73PLjDr6D7eAT3q2o+2K08KiDJC8V9eKOrDIFr+6Ui08YWHdYSA\nZMWausEJRtrleQpgajFOHIVag1/5rWo2z6QDhDPIh5TdpGy8yXZzxfqGAax5\nnVZnZCOwFeibIwm6N31lT2SBMxzOXfuo7aVqE7EZvD0EtMR7mAAkc9itENy+\nfHbtK1WppWL2qOMqd0XC9HWDppqPlv1+xs3zNXB/K/R9CMH3i2Uddsck9Thg\n9F3hVIJ481htKOuO9ETQxwRaGycygHgbq6RXWijRAXCeX6AP/F6cauGNo6oX\nwtAR9D2jFT8FY/VKWNxNjWWh/a17jkBK0GYcGfvxUafNRYb48WLTMLzojGgk\nnl26\r\n=ZugD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.58500806e.0","@material/theme":"5.0.0-canary.58500806e.0","@material/animation":"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-indicator_5.0.0-canary.58500806e.0_1573227343325_0.2196893435967222","host":"s3://npm-registry-packages"}},"5.0.0-canary.66299b646.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.66299b646.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"391fbb32caa2d246327b8d5cb3ec436ad4e4ef5e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.66299b646.0.tgz","fileCount":35,"integrity":"sha512-peQBWj3feqiS/PKL3cnLjSBlXE1JIZtPsgg6WvyHRa5zj7TyeMbAaUZcrEHvLKKI2o1D5RhU5zLaXm4D3D6dJw==","signatures":[{"sig":"MEUCIQC66+Qnkok3VuKziqIikNGpS+6j8uDPBdiYyhvY906NZwIgX7u8KWp1+qSrHEg5naIJaq+O5aw76PV0Ug5ZCCz0PrE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxdEkCRA9TVsSAnZWagAAoZ8P/3BAOK8gO3Z/fGJiovcN\nel/ni1cCK6XplqAbP/505zbL0XTgvenHUM9cBVsVCplBWNd3iL5MF03ZsiSI\nzvbhcXMuBXS0m4h34W2Gkimc+X7tC5gnaRlUou/hFxpYB1IYaVjVdn6Ela9F\nYxtaO+nYVd3bfocfdW0cskpk7tpUhPXACuqJ8tKgVLcH2Ns/S0q/DEanP/Ch\n9g5T3P2y+0IFHkmzl6iMqgoTCS+WpBiMbkjIZZJ7hJDvbuIJdOQ1ziMPqPwo\nwk6gWljNHCmLwGA8ZFtVjkzZsssac8O9O1Gz6Fi1Yy+RIUZrzq8c87GjSAnV\ntOlw75ygMkx+Xgb2OKuN12eNcaQjMFJY3uo7eU3pD3baEUfxu+dm4M4StpMh\nOM+ZqhqN0zrGOJI+ilESyTj0IprcpHf/zCYWhgishXAhU/jI+Ql641pMCX/l\nSIDaavjh1lESV38Z+Oxz0x5rjUA1m9PFutlaIt9ZznV1hyhUJOc6HsmqqQ+a\nYrP+YoeBaFs8WQE9ameIzAKcZtNo00kIsWtmcB1QdX781EbXRhCmfzfZ+aVI\nboFuW3rhhUUABanEAv2yjZ8sZSn+yEOgY+A6irTpMd3nJXPs4Bv8BEHxcOAA\nSxvF6ctHQuQg3aNzQpWtIYHlk/aeUdLZzcfuRB1IQWVK0DGHzREOaDBD/38f\ny/IT\r\n=8gny\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.66299b646.0","@material/theme":"5.0.0-canary.66299b646.0","@material/animation":"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-indicator_5.0.0-canary.66299b646.0_1573245220020_0.5862611499497399","host":"s3://npm-registry-packages"}},"5.0.0-canary.821871e04.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.821871e04.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"57f8c05e4aca409ca9a81d5d2e31b6c6df5467a6","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.821871e04.0.tgz","fileCount":35,"integrity":"sha512-8GP389oqAS2H6d7dDgbBR39cnxsJc/6AdhNfk060TwIHaf6Hq9II2w9AGPvlSy20IB6mjOdVjS+Y3zL/bBkeqg==","signatures":[{"sig":"MEUCIQDsDAnpPfulL9aov1p9lrdk2XuKY9liirbg3ujYrgidOgIgFF0R0WZl5FUjd0r8ap+SikDHF6WuvxHi5djGiU1nTgI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxd3rCRA9TVsSAnZWagAAjcQQAJumJW1BL/3DxpN6r8X5\nBAJZkx55WAUWcS50PFQVRj9M2m6gHmubY6uttp88ShT1KcGpuSvdvBZmUP0u\nm5CAPiSrOstSgSBPEDyRWOJto9eA+oxh15OqZCTba4400hWnOllTvI0CjApY\nd9h8JJ/8pGIM9snkrNe0uV9M6GXBUG6lh+EGFp5DobiCZEKParaFdCvtir+H\nK4B0Mfh5Jkju5NYqfe/6liGE2YX727d3lz1UPE4rzJqyrBPAjFrg99HyKs2T\ncxswVn4kcuijNdScx7hcszTt6MRyEV4J67VU/ZX1jueTEVnRxh28KTy6spZs\n6EJV881Qyi8yYTamCIMVXzs0AOjXnydzF6my4unHjC+zOg9ctqcVdYsD+1bB\nSm7NscpH6d76Viz7EQrxZsUtEd52ZTGENc6XkU4gvbyFfKAhcm9/s4Z8RVDs\nEATdSW5oBTE1VFssyd+FKtg0wSW3MyaWZ7gil/hIjAzVZMziYWQouNaygB3r\nTVWS6qX+PGciLG51bu8OrsUV77s303ZTxojGkotYFKaB19QuIcKI+V9gsu43\n/yAx4redOyH/jILTaCT8nmjx2dMNfocrEHC3IBKXrBVGnPZ5gbl1PHM3A3Tw\nsa1ZUgAR0GBV0KF52bPk5pjHdNAC/R+W2SM2l5M0Me+yfEsZCryG7NsYURD3\n47R+\r\n=Admp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.821871e04.0","@material/theme":"5.0.0-canary.821871e04.0","@material/animation":"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-indicator_5.0.0-canary.821871e04.0_1573248491442_0.6279693133813251","host":"s3://npm-registry-packages"}},"5.0.0-canary.491fddc31.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.491fddc31.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ba9108ab6676ae738655346736e8ef953375e8a3","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.491fddc31.0.tgz","fileCount":35,"integrity":"sha512-joAVJegXgAIPqXNwvc7ygHx0UtlcOJsXpzeccIoh5vAX2bKy+gTodXFFvA2uL9mkoocpIvt41QFlPBtUaovxyA==","signatures":[{"sig":"MEUCIQDFkFWfRz7qgwAxABaZt3FvrFB5mVEj1KLIEqy9HsXkswIgEHzlKG3Uq4adWSB3TEkUIl+tesqbiMc/MmMP03SustI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxecRCRA9TVsSAnZWagAAcl0P/1Ygask5VLre6xs2eXQ2\nSi4gS7Du1KgijZ136LPQr6E7wqfYnue7nQxnqEDyvgz6xz+s+uM0HCtB34px\nB3WTm78e6I2XLSMBvnlo1KDqfsrbPaitXbnesypOceDsnefXuw5H5zpLa8DC\nW2PaqXOrm3EM1YTPfRZ/tqCLbq+gEqcEvKpm1l8ALCJ+9j8TzoQv2xDAywpt\n5qptgQHEgCqwo2d8QglcvOaPPS5y8jW0cqtQIaG5hxXHGd2RSmxx0IbfzK+V\nFDQR40ONRrfGGlCPYyOPDkbcYOu1g/UhzBTyrdJKVoE87K21ILBqkFqB11gG\n9UWNtLktjP0M4n71Sq1H7xpLgKw4FYCHRPvW7j8jwLxkTesJC97KxET34+Gu\nhzoNt93WZKc42+RESJb5gFc4hypZM1B9QRW6aVLL20k34wSWuLkdXB/tY8xM\ni+ZTu5yjbAg/fMucZC5x5irbMDh6+dfsnZJ3MJ2Bb2ELGsivP2Zbga6uVtnQ\ncyYc/7PRukRguwrxwown+fy1haF8fwCMdPerD328wWlmtkLlOoRCvpJvKKvH\nGRJS/idY9w/H30HxP2LYL3Hz5WIqDV/uVMCRlN/6lMn0rp7aYsbSDYpSDhJj\nNvci9MUOKVFLE6Fz6iMYicPn2EJbgkBc/RfRaROfxJXNrrwnC/xbv1IhlQr1\nP9KL\r\n=OVo4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.491fddc31.0","@material/theme":"5.0.0-canary.491fddc31.0","@material/animation":"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-indicator_5.0.0-canary.491fddc31.0_1573250832689_0.42277964290407866","host":"s3://npm-registry-packages"}},"5.0.0-canary.b0cecf145.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.b0cecf145.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"55808086460bf58c01112c525cd4bc5119846d4d","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.b0cecf145.0.tgz","fileCount":35,"integrity":"sha512-LuRSDd0FGcQKFRLqrDFlc07dUJ/x4huQGwzdSqO9emGoxe46k1HbTqlzGx4D+7BH2ed6pImhNyxY+tJpNLqhKw==","signatures":[{"sig":"MEUCIEqdKNZQdzEHTm90lUB2xseeHwLHDTW+65zyMqV278KLAiEA3vLPrLliFHJMukY2q7HxVz01ude32hyX/OieC7rVPOQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxwiRCRA9TVsSAnZWagAAC9oQAKBgB925GpEiYDMysiod\njO4tIhPlyLIdG7KSD51OgTn93f1gDwh3cn2VRjNeg2FFddLbvsyXZIStCHug\nwJXt/GaUr7Oqql/EvS9oWDkkJamjuWV9MP2nZzcGMPOC0wvEqgQYOhOpwqvn\nCmLv9PdKqQLTCJkj1meHcPQB4VDWn0Wkbdf6dvpuvxgT4PbzQLvQfWDxM79S\ncUV9rfgYgeZgW01bP7nT7ehegU7O2vQfR3PcQ6QvhMedYgzsqZ/a9DokZD67\nRbKsZxETZOTJPuoAt4K02i+ENa89d2hEMPEe33A5cCB/SOaNy0s+8x5MFx3z\nzFkRNMUe/JogPAUv41eNjZNRShSJ0NlJyWL/4qS0lQBQu9RQOd0jkNxroLga\nLkFnqE+mp8yo/9kj8YhBUHFcPM800eL+3PmFjUEF6BTBkFfBdy74TRzUURTU\nTcTKEf5o7Zlf4LRU/tIi4U87NhIis8YowL7Y+zkyDxZ3KyvXjeSkWS623ioL\nSqIlS2S9W7ndnskM3vQHE+o0t2+xt1dJqO0HIeZWu1KbXIHpxW+Q9LdORjWt\njJG5jSBLOdc7TLMG4Reia9AQ8RO1Dlcf2bVu9mWomNosJ90p8a2Xu6rYZX/u\nslW7N6n0ZLVGp9d85rfEB4h7xi27s183yykcq+PByoKxIkujeYiGNS0Cgs4z\nzRWa\r\n=8j2b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.b0cecf145.0","@material/theme":"5.0.0-canary.b0cecf145.0","@material/animation":"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-indicator_5.0.0-canary.b0cecf145.0_1573324944598_0.4067278458939796","host":"s3://npm-registry-packages"}},"5.0.0-canary.afe0dd1bc.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.afe0dd1bc.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"01efabc7f01d3223f6856286c28b4065a78eee5d","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.afe0dd1bc.0.tgz","fileCount":35,"integrity":"sha512-XpSupVHxtw7DSX2gfvyGnaVFb6Fr1fLhQVQ/uPOfvoGfsdnwYe/WZ8BriycwCZf5ucfFRARGmK5SGtLCTthHCA==","signatures":[{"sig":"MEYCIQC2MZnImMQ84EBKlDzOvluRqSwL5GI4+wI8RhvJy07W3gIhANKR1B9Fi/mdmgnXaQjBqVsrE8Rz3P+HzkOM86+VeU4R","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdyYBECRA9TVsSAnZWagAATosP+QFS4uZifuJEiod3Fe6S\nwpXumKkUdKgNQqIUFXJmEPmHLM4b5M4ykEJyDuR3TV3w91IF+RfyMXlqEyum\ncY+w9xF+VA9UTBiMfD4HGgRxxnj0wMkaOf25qmiP47Khd3ixnxwGuO/BlVpY\nhoxQctsLDV78C9jEgIrNtrG9aS5sjjKkcDACL0Rv3URErFlXLwk59tMZUf+I\nLcecaTIARLDrImiyiySVlvqSmzBp7pSdADZ58QC80UcgUO38Rh+L0/0GyOl7\n0HCeaZtZ0WgKn59lbOyi2TLY7rfJyir3Jo+RaFmVNHpF0FAwo640LCQw/+DI\nzCNSnZtxNKUBb982UQ2mpVqt0saqXimuqvUgem/kyjfYtM+bPjsjN7DKSow7\niGTGrj8r+rgClkUVCgdyLCtV/zVdktBUprc0Rk18ffM8Ksc9jMZEf3Ou8P5O\nXQOwNiNY4uFJnBoOpgx99/PVgvdP/3lnZwZel5MSTNc1ifkspy5tqW/JD8/h\nEtC3DFQvwmsSuNgm1Pi3a3lLNHa1VlGcSOFxyde4+OcROXT+9A1bVRUv2ghT\nEuVTIF27vHTw4iplpoQmnl/9WaykcKLqog91EqhTVSfShuxeYDDmxiJPptI4\nUnR/PquwB18DnZngxI8h+yxtM8sQceYl+PR5YkP1P1E0g+ukwmj+QuF3jQYz\nighX\r\n=U6fM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.afe0dd1bc.0","@material/theme":"5.0.0-canary.afe0dd1bc.0","@material/animation":"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-indicator_5.0.0-canary.afe0dd1bc.0_1573486660135_0.5079588927599261","host":"s3://npm-registry-packages"}},"5.0.0-canary.b4cfdc40b.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.b4cfdc40b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"6053c95208aaccdeec236ff2e674b5c42f9eb4f6","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.b4cfdc40b.0.tgz","fileCount":35,"integrity":"sha512-+jecihJ4A5q9q3k5TseGKxzDEummR0cqSxMo/Pccwn+fwsoPUuCPM4cQ7RQ0WT1Vxx/52h/CRlq1ECqvwuWyig==","signatures":[{"sig":"MEYCIQCCyC31ejSJUKVDuOVkm0majpStFYQoFMw/f/1ztEmF4QIhAP9j8neRi05RdOuNRQSFcLtzujW2yTVt/fsI4ldq+h72","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzXmoCRA9TVsSAnZWagAA/rEQAIFxCYFcX7XQxtT/9RJA\nk6WSDPQhgUziXu7uY3fUZlRyaPcs+COU11MaB294ICUBphFlOG6aQux8BBSk\nkk3zsW3XkKSCxUl8WyR2RrC9lnCe4BWezkPYKh9tMjkLY1yv9tAL3GV3j6pF\nmq++8yL7GSzuim4S1fw4M0RXOSU/36h5JJazngLlW01SsSZQk++bf22RVNbq\ntycM++zMc0lae0jLovdd8ofYqfgSiQPLPpFeq0MZeLA3gMqK/qRgHcTpZqLI\nBchjKXlTYZA5J6Zp6Jav11k+uUT+OO1IoOR5tA+AWzskyJ7Lj2V+6JC0puBT\n7jAots6XAsUFOeLey8Vo6i0lRBy6ybELzWkXHkI7DwKRySfvCAKII3pxEBJN\nHbeacJR88Q6640/ep2ulVi2LfR5N3JZtG8fbcQ2TSTkne7FmYcEt/OGF0pTG\nP6MSSvah0HFm6IQdGZtUpsSKa34f6Jh8w+3MFOSzkj8tEM/kKLODLC12VKBi\nEr449NyELIgEWp1MGl2RjrVN+0HZZNdLfyF9D3DgABQ5iQDpyqnAY7bhUhLG\nfhXqHAlAGBqHTTRzexGyfPb15MN3vPLM63Y8Urbda8anNosBx0fag1ww0hze\ni5HG6T8xYGQkyZY/xOeNs8GF/KbUKB4rqPm4lgiW0Ni2sSGt199pFVpkCFjd\nmXfO\r\n=7Cje\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.b4cfdc40b.0","@material/theme":"5.0.0-canary.b4cfdc40b.0","@material/animation":"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-indicator_5.0.0-canary.b4cfdc40b.0_1573747112297_0.24825577598505832","host":"s3://npm-registry-packages"}},"5.0.0-canary.525989b5d.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.525989b5d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"fbd254f278decf7ab851ac534156191d3fd3e8e8","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.525989b5d.0.tgz","fileCount":35,"integrity":"sha512-+iYMZ97nvp2XT5K+Mrw+YOd43Ac89LN988nlnSe4AKra1ewF3cVHVrjOabSzyT9v/OGfmPgNnycmwfZcOPWmkg==","signatures":[{"sig":"MEQCIGnO/JQQdu2lYFbPYLjJjqonKKWhEFixFK9q9xpCRImyAiBTabl1ckBmLah8x2POas/k4PkZCOVr2Q6ouzOxGop9rA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzeOnCRA9TVsSAnZWagAAfogP/3XyA7OPFd9ofpxy05M2\nLJijXtTDNjZCgg4teROJrAaTfJuBeJDMhVcLUBm0m/vi532XfwSSP6m7LZjf\nOVyMpHZbwRrw9EkvjFEgOksE6YcrJRlbo6WXVLCbHth5C9cc8hZxIwhlRPSt\nu9ZKXB1H3bdtUl9ThwJAgkkxnXmr7f2tN2oroTOaMzpbnii3/mpyhS3lRA79\nNdvemVfzMtbxki9gaIsmkDuMA4sn3GJ7mdj7VtbK4ikLcOtQxq29TgqC39p6\nqLIfxab6zMIHIZW+9D9BLwzsirb3OXsfNK/RnvkTWbBwKWOaCe+W3mk3JIIU\naAEmmzSqFOJPiFYscVcHfNxkw3xdoF9bjf8IfB2Q6FR7wgxxI33LzdIGWSOq\nM69eIK8K4i1YajT86N2AsdRpxb4R4Nhj7/3XqGUfvJVrHlNtZc57Sg336dE/\njNxBA2DWvEBgOEboLcYUeB0PqgcCaAUhNz5SskzrVcVKGXgzm5lKSytxNRrl\nCtvYSxj3BjN/dVLpmrAA6NLL1eUvWPtyTBKKLEn1Z5Yrz+Q1DR89WIoH6nv0\ns2d/xRXudwRcQiF/ykQoBnyuauJEtwEHzPsvf179NgsGlNzP65PzaNQ6yY2y\nbKaqFRnC5e0lQpaiikw5IgkEX8QMXWILkQleOZTx6S3Gtq4LccK0QqnA6sdN\nc/Af\r\n=Bqcr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.525989b5d.0","@material/theme":"5.0.0-canary.525989b5d.0","@material/animation":"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-indicator_5.0.0-canary.525989b5d.0_1573774247527_0.936709841311562","host":"s3://npm-registry-packages"}},"5.0.0-canary.7084b403a.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.7084b403a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"f8a630d55ab225a484670bcc9022b79b25115579","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.7084b403a.0.tgz","fileCount":35,"integrity":"sha512-E/xT9f9R+JpLQ/9EZg7lUyLg725PiPPfIH5xlOD6lmIuf6TvR8qkN+ABvULupM8n6zH1ue/S3RdU2bO0TNMiQw==","signatures":[{"sig":"MEQCIG6gJLR8KPnErCGRy7cOYfydbEClVqz77d5lHFgd0V11AiBjU7u7Tw//Puh5J2UoKcLsYxS9qEG9M+MeCLWaFOObnA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzfnyCRA9TVsSAnZWagAAW3gP/0vR+ZoW6HqvaIwEaaVL\n3eT9uCrKB+EStX5/S7KaQYwVh1v7t5qSJPZAVB4fW2rueO/N95w5VUR2w59G\nJCrkwyEqGuv7eS3my2B9xqnuw/2Qss4t68gsK3LQ7iviWtNVoaovVg6MB6eZ\nlcoQKCsZAgF581I0vrPIClbC5P1FW5mwmzZKP6Jinnra43RSTS7gSLqh7+vo\nLqiYf1C5Apl1wt1FVSs1LdthlAavbujOmWVrquf3BVvC+YRAG9nWymctB2+0\no20PhvCtIWSmy1VN1Ye6VNoQuEgeVz4scglPQO2LqPGzythcplTE08CbQiQq\nLJI2tdcf295hP2JimchD+n9p9ujWYHNQS2w5XTp8DieuFSe/YxWckNM8Jey4\nSzvuNbe7Hyq4+ZQEZHA22uU7m84WF/lQm0rE1RAfExJttm0bd7Ez8y7ayw+k\nPdbTElkyq275Kz5ZuGYm3rOzEeCC3UxoUB1z0r7uNT63uPeAQaI0+qUPHhjr\ne3QGpTUdau3NSOoxTTrJWp8nwbkgCX3VeUiGHNy3OzJP3dB2prXT9MyjBO9d\ncsXTaoRZfqaV9hAMsoyw1kHGD5g3GSWeki7xlbNqYqh/GQ4n1QaqE7SqU6kv\nvn3Ek6KXbu240fLpes00mYymdVANICO5pDB2jbEynnZAfycSR9RnN/41ae0+\ndCwY\r\n=facf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.7084b403a.0","@material/theme":"5.0.0-canary.7084b403a.0","@material/animation":"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-indicator_5.0.0-canary.7084b403a.0_1573779953849_0.45226693706172716","host":"s3://npm-registry-packages"}},"5.0.0-canary.3cbee6dac.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.3cbee6dac.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"a16918146bf0ae9a31e03d7f388cd23341225986","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.3cbee6dac.0.tgz","fileCount":35,"integrity":"sha512-ZLEXvWcZnKmAQXILSlYD2/VP+DXVk+7BYoXPElvTd3If2o+x6FvFSLPcR5ddYuaf76oiEs87TxiqD9FhuVwLTg==","signatures":[{"sig":"MEUCIAKJMclvydYCn0mCxPbAdHv1dINVuyA3fi434CBHFaTvAiEApyJPXzb36/9H079Rs7YAIY3tWU6/ApMhsYdtTeNFvBA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzyeRCRA9TVsSAnZWagAAF5YP/2lMeP5PhvXVznNZC83D\n51MCSeIgZlykC/4btiZ/ldqJrMlc0Ycgy2d4S3mW64lgE1DUWN8Mz+SO+c4L\nDki5xIuVzJqAingNoLUmPs+kFwRwdBFK4knDMci6/4MAXjxhhyshSUEb9Be8\n3v3QvHRGX33vb52o7fKtQAmimgoAuEkhFgwpbX7AIt8IR/d7cNU4mVLhRUZ/\nct8BNqTWe4hn+OsIXPs+oDKDHGGZQ+/m9vxhPbYASj+gFErhwNkUNZnv/wg5\nOAab1FNd5rfJQloWJwGjLcEZHBWjNtTVg+vp8sChwAwYg2WftZCI9zWhx8Vn\nga0cF4vuqnRCg+pSh9LiMrmOfXKp2oryKXLFsdg8t3QQxiZfxwNdVdeuJafO\nmBDZj8qjP58S8bxxY4H5YM8jhUIMR40M/q0LW0lmSCbojZ27rAijMo25TNG0\ncUVIE04ikUOWwoHBV4OSB+GMX3JHbCF/DZbYQY7+JAU834NOYziG+SP32L7U\n9AH4Tmj+Ljzlofj5S+YAXDajRK3GO81b8kW8Vq6O5QOE+DFPtsExpQYDAdF6\nCMJIp1GWsKL2Ubou/XQx6bawe5o7YH1/6jLAfevzi2eYzrOBq3j8yN6hCYFY\nMSVoM7sKRhNVFS9vn2VTptwJXRZELzhel4AzymOHFJajjUFnCnt+XnV94/cn\nxQpp\r\n=zbMm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.3cbee6dac.0","@material/theme":"5.0.0-canary.3cbee6dac.0","@material/animation":"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-indicator_5.0.0-canary.3cbee6dac.0_1573857168933_0.5505805298773623","host":"s3://npm-registry-packages"}},"5.0.0-canary.591a6ad44.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.591a6ad44.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"11de0e7a3d258a891cb8935f490f08291a1125ad","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.591a6ad44.0.tgz","fileCount":35,"integrity":"sha512-knUkPMNNn/4RwsCfzMWxnHrsT59m7qEewEkU8dmfcrxkR47cv4UDM0mQeVlKL9BIlPEoYmx59+Np7ZXHRPCbmg==","signatures":[{"sig":"MEUCIQClO97AoOcURblwaWPNPWA5sreGnrcMuAE5gYWY+v1k0AIgE6OghJiEHkR1CIEq15OHSQqwLrDtTX/yQfyX1DCNqUo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd0y3PCRA9TVsSAnZWagAAwV8P/jBlE+RNPePljzrkMeks\nJ07KlRkZBZepKo/vshTWfpt0xaO0hBWUEUBCqeJZexhvEnONYjq/Qv9DmelJ\nPI37Xq32OCpl34rkDGL+ui9rJSVtRpQvmRIYOyNSxbtB7eYru8Qj+VHVTkaT\nGw+gq+1xhmMfh1z2yEgBrgcfSoMGO7LhSM3t4MRxs63UxPMRHO0c6YxkLLkz\nPwqQFliciYTG4L059p1msvbyqyFIH5FpGG2QKPSGce/dFfnbuMX/mv6Aajxo\nNfpWH3geI5ZP2Zt+KX9CJADxSTLAnYbEocLm57tqP1RyYaByG+kaC7CEYt2P\nyzGKAANKlSMk249WEqOoVxuXiy6TFTId+WX9DmfmSYM+KVf9qcRQxWU1rB91\n13LVRhaj/OpaAlfsQ1BOuc5qhbOCQggLaZnmAZqBnXyuDvYUr/inD8nCZ9SI\n0dEIT70pAonQmlpuRDTdy4WBUbRFPlNqGK3CABaNAZjyBtXL50bzs/G5hbP5\nAEV3x4IjWhm6gCwqldL1te0mHJ6X659T8jCZAwQSodbWygv1KHBeyaVTC1UN\nGxKMrmZhzi1ZWdk58YTB9naQpJYtWTWV7TWsrun9vos5TFlR/nt8EIiBFWEl\nGG2kdKWwQHw71M61kGVD2MJI6E80MvxIMHl0VL+ltEHzH40Nsdd96c1Ryx7q\ne7HS\r\n=Wmsr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.591a6ad44.0","@material/theme":"5.0.0-canary.591a6ad44.0","@material/animation":"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-indicator_5.0.0-canary.591a6ad44.0_1574120911207_0.8867665848851958","host":"s3://npm-registry-packages"}},"5.0.0-canary.5729943ba.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.5729943ba.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c29cf99239452d9f2b7cd096b307727acace10a6","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.5729943ba.0.tgz","fileCount":35,"integrity":"sha512-sl1GC8DV4YL7Ws/NCoCKWpS6BhPXgjElz8kSpwYpfYxZ+K6puWu7QK9jrBnrJPMqKlvTFEHlFXHHdbvZGd6fcw==","signatures":[{"sig":"MEUCIF4tFhxU890N0je42Kel14IU2285ANDi3nbWGFY3OvicAiEA8P5qi6K8/ap+EST6lombTVBOfCykimafzXTPMZ6KWw0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd1MzcCRA9TVsSAnZWagAA76gP/3WCmEWZxEo2a3sARLnw\nxCYFLdTuhmDAaYBcge9DUfdU9MIZRKmBaROCMMfqwC9aURgaLWzKsZfsYc1j\ntYSh04c8SXNoL7IkNImYQYxtBqs0CDSxzvgLs9KlQDRmSvfwcMqt9khjVM8x\nEodXyn2q1qcLIcwkkxkwDte+eSuml4LTEgdt9oW3OxZ0Y2+Qe2xYNaW6NIQ8\n9wFFE9IJnhdxRI3RVeFaIcgI4snRsQRv7E8RxqbpRRXen7qpDFFXmoFSPQ5o\n6RHE8yjCqsvtd4PssBJKY6OYd0efEiBBVmDbnJiG8cjFyOKBumjhY5uE/8P3\nqM2AGxczI4KnzskiWjXap95Hd9LgAMDBTZs0r+04flcQYSartKBB/iJQyMtJ\nGkmqCzFjmE8S18b70qeoSdyXjN4KTkE+/QKMa3eOpfiEPwsyNeeaRP6yAMOT\n/f2s2JE2W8V3zrRGWH9BPAhu1VBW0Vd+SQHIkThA42tvb4Cc3peg4QW4bLls\n5tsO3ERnHSgGsD4z3RZKbZLZGm91ouudSiCmr0dn3l96XuyylxybBUojwfC7\niu9Ui8LHP+DGYcdIK6bXiv3BfTIVDOckWHZk/XNL0w5oiZ8eTbt5al7evo3W\nVfBH/mQjyoFSUNoRwJJHwa4guj+SoWhLYe3ntr0Jui2Vj8bpCyv3wdnF9TWv\nKrYB\r\n=t3iN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.5729943ba.0","@material/theme":"5.0.0-canary.5729943ba.0","@material/animation":"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-indicator_5.0.0-canary.5729943ba.0_1574227164513_0.2670896819190187","host":"s3://npm-registry-packages"}},"5.0.0-canary.e89750dc7.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.e89750dc7.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"7bebc8ced9600a619baa3c3ae4fc137e61cff517","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.e89750dc7.0.tgz","fileCount":35,"integrity":"sha512-JxiGpg8CfAERuRDUDKSMTn0DH6Vnekre26gryhvMWeY+b051DXfzBlbuV8dGZijqAm5KhbaFxAEHRB+8vkTkiQ==","signatures":[{"sig":"MEYCIQDgwbbVImbw3QiL4ejdXWjsgX8tpGyLO1AzcdLtuyaTUQIhANajJvyjUuyTx9q9D17twoXmYiKH5rJaMo20uTwacfzB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3drnCRA9TVsSAnZWagAAyDQQAIGCzsH2122uMeBnJI94\nQiv0kWHsTVz2GE5mKQ4jvu5eET6GWeNTmgLoOyerIXQLIHnynbLIqKR9KQ8f\nrrPG1YhReVkuNeEHvUoFTFBNkRN/sADfRVFy2yqVTEgovHpmVZcnaOhi8to1\nERXKZGwebk3GNZbNGwRgRTDVHHEnYGLa7lMeHAZst6SouqfHtesfvz/WU9rW\nerIJ0uBkU4OYsWW4cC+mFlEEIQWcg7BjeNRmlyVa/arsqZbMPg275/5EFr4P\nDYSu2Nu5uOT8YKa75oANTxOLRgiXYrfD7ib3HUeqa0ffUt2iq/7R32FoMMLt\nRHO5qFClPFp+j0gNeZQUzXOJYeQuDkX2lRu8CCKp6IQNGDTa1newpGRDYDqz\nKDkN3wbznIbJjLNuNt+xL+dGdYWw08LZU7IkNfiH5M2leN+Aod7vngEVB9Dv\nTa5aPpfvygZDkjVYbSsH4q12mJ56s1miRiJaYVmGUL/fA2OBeAOOthHLRTSH\no3dXAcDwK5hWUFjXPToOjFx3T82XC8f4zhETd6LbDlbj5Wj0PiM/VIrIox2h\ntg7dKsEUCybwV38bD2DvlJHLZh77XeKCQRiUYCj502TMGrTjRmvsezaYh8Se\ndsIytFm8BttetGgts19MUBdSI7/l3M7PXmeVu0xSJIcxXt4TCPJoSUve5Ms/\n2AQC\r\n=Kxcu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.e89750dc7.0","@material/theme":"5.0.0-canary.e89750dc7.0","@material/animation":"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-indicator_5.0.0-canary.e89750dc7.0_1574820583421_0.9436112074216632","host":"s3://npm-registry-packages"}},"5.0.0-canary.3e560b33a.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.3e560b33a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"3bd2a10822ba3a7306b1e07e8f04f8d12e8efbcf","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.3e560b33a.0.tgz","fileCount":35,"integrity":"sha512-8bC9wUENxCS8jimEc7FMpryPfHiBAAEVdEOrQRpq2n9zW3DCMDKLumphB5lg9eYWZJGvD04ZKrkSIbnRBrmy6w==","signatures":[{"sig":"MEQCIDAyzOvbgg2oZkgOAFIllaREnfpfD3Zgt0cnkNBiWDFEAiAFkHkCCNSzIZxEalHKfWNEDsCaGpsdnrT6HVJdtYfpaQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dsZCRA9TVsSAnZWagAA17oP/1hzDiBYj0OZaZvP3kDQ\no4hCrgH/oSyP9bEL2uib6s1tppGTXHmmfEIJt9Snh9HE6QtWv3qo0Gn8KJCc\ne/OFaR+6TNtTqvxRg3J6WEn160/pHA7Q4HqQ2dQi+fgLaJgAYnbycmUYquyV\n67dbZkGBZ+qeoeibCV56cCHjrQKcmvRt/EvNfgRuI/mv1BqtnGdh4l2f4ukD\nQ6wCPZGcHLek0XPWc66xlAYJ4xJVsFuOyUuhJ5pkLMqNVQ5Fkc6gkIflxSXi\nyecLNZ7XETPS1MWni30Rh+5G32gtQjw5sbqQ+V/X4Cq/AlZ30QLlNh+L4HpE\nnk8fTqvkpUUUiJMlrd0Ipu7U/iEDoCrFLiHtaTqAhLyEQ6thxol2+PurnnFd\nXTuEphdDb01Ol8TmRH+R3SX3vSQdaKi/wwKURGUfameE1qaUsZ+m5xJut223\nwwyeg+w6ffz8/u+dbH1M1EkVbQgug0YnirDKOnzpwt/d2M3NXJ1pTup+g4IK\nY5u1p5BJcFuotsOqz+3ghm7yDIVTZgATHA9U616eUT3NWDIwvr9vhFOYg6tk\noCVtnhi2UgYWrYIVnMHmi9LspXQGS89BMHhzmU9FSEg7WU8d90ACu0HUaTsM\ndLhfmstBf0gfclvWcoQVw7oR1ajd6TMhVluo19InxCeNey+6h/JscuzBJ0bq\naViW\r\n=cy9f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.3e560b33a.0","@material/theme":"5.0.0-canary.3e560b33a.0","@material/animation":"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-indicator_5.0.0-canary.3e560b33a.0_1574820633432_0.8469134674468806","host":"s3://npm-registry-packages"}},"5.0.0-canary.7fd17ce5e.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.7fd17ce5e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"59cf8b312f5cd922e180c6718850139325fd1ad1","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.7fd17ce5e.0.tgz","fileCount":35,"integrity":"sha512-7GEw8UKaiDtPpu50C2tyvE0k45CQvz5ngjSnTiT4UXbstBX9zQ6jvllAVaXd06rPIO1fmDHLKdLSW67MbQsw2w==","signatures":[{"sig":"MEYCIQCY0L9OG52PdFifm/TlusdBqiz91ucgqMarMwVaRslUNwIhAOAC1AIYxnnhruczIwgjgtJ5kXkQa40oMnKljlfGKjUP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dsqCRA9TVsSAnZWagAAefMP/3PMTBOwsP8OpyhEFV+l\ns+IvanafCWAAZuASvZ9bEgUkv4hfnKXsx9Wf1Klo4GDceF92/e7/JeCxsB7g\n4twGKEzKZXGm/Dwb7dssLXyUZpZC+XJKjRIGY6V3UzmTDLShRQtKkRXH54p9\nHhq3wDJzZ9H8PMwLnX/ezW/7JEyMCT1S6TeTlQaykzMaY3dDwoQwg9V70qBc\nquk9+Lw6IdoCJFeZjRipqg4QbRNtdcRkcUs8r9gX/IVDB/HNcVPNrbDUFdZL\nTkZAmuK8FL5JIZZH8cSv2s/NufN4zFTE8g21J/aekUmL8kcUWtLdl3+IphEk\nY7kSXhzWuezwmbJ1VCB450sx3T+XYvXdy8eugWWO2ylw8IJtsimkxVEelFad\nA193blYu4rJUEn1tOQxIzmQAg2ALIE3JVnApFZs5aAGOP6Y4xaH39aD+lITe\nVwxka0z0mr6vOHNEcwgo2L0QByzrQNZXAKk3OPYuZWRDNBnVoVURdD4L2P0K\nxry7JK9SyG7VrQhVNsqh5jWbEJ7ZgJfequJgsw+kfm8rVnKEcuRcAlyrz/wo\n/qVv0qCYAoDhtsYWJhqTGpMbTysuxfXL4GTbHligleHTz45d9DJj2rSfklbL\nwUtaWwpFcUWc2oY7PS9NzkK3Q2PDuVh7k78gjeWpikCPjKJW+PhJaFqk8lWm\nZN/y\r\n=+o+c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.7fd17ce5e.0","@material/theme":"5.0.0-canary.7fd17ce5e.0","@material/animation":"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-indicator_5.0.0-canary.7fd17ce5e.0_1574820649723_0.5688435968253416","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec729683b.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.ec729683b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"33b0ddd2f058adad4db3f04cccc2ae414951731f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.ec729683b.0.tgz","fileCount":35,"integrity":"sha512-M9y8DzzPO0Y7rBg2AS+r3XK8VJNrxEX991RkQ/eQEDSj4BUhtjozaXyJH8l/RebDCRfbHu+RBceKR2hvDI/e+A==","signatures":[{"sig":"MEUCIQDddQAKyEp47Vb1APKR9MKhWqwN8Jo6CdPmvnLI6W1xKgIgahgBJQVPt4+8M/iZqihptBlxyzXr3/gh7KTp5kkuve8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3pxOCRA9TVsSAnZWagAA0WgP/RuUL5mHtPWKHfhYKX2Q\ntLY7TrBw8QOuNBiAyQE9E/+nazEZKhCuHGZaF5hw/cBiafRB4G3v5NgszRmt\nzPwTHYDbuyQ7mkihqRaQiLluKDg13uwgUN+97cgE/acTUs0XXiMF1LkQ9/jR\nUkxRd8gzmTPx+3975CKTNecn2LMKgy4+BBasuuuMEPjDZ3jFRYfHLyeEMw7U\naIV6y/DTytDpMyEZpbnUaIGzhnS9B4ZSl3liJ2KVENtEXc6m62CQCONG1yYC\nPzYwaho0AteUWoJFN7j2QnK8JMo/7izvqSkKg2FMIyi+jlXRo0CImCZtm7it\n/a69gIDo4xHu6SinMlok88QtSFms7t2JKFbhbwtzIwy4KNqzOiprQbHPHfW0\n2ok9aL9uSI0tEdqow8T2U+4YOS30KD6XWNSR+H4TXAJIPIZS40UIyWTNiBtZ\n9MT0tA/24WWcsObsePCQ9SNpg9WDAbM1et61ZEVAOx/1cz3BT44NNwXiCtv6\n++gMZJFF5pFL+CAKcua5v1o/mUUV/on2iIxZDREUzhJKaqH3dGZNqgLsyGKe\ngnjpuXTvwLC4sfRZxTDbIWmjZbQHT4avnqU/rSNA70rSI0TrzEZgZscSbbDY\ntafqJjiQHgIB4pIYoRKaVEaQ6/uj70cp+ZwjBjeO/eIRw2imT7VMkdGkav0k\nSrPT\r\n=232/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.ec729683b.0","@material/theme":"5.0.0-canary.ec729683b.0","@material/animation":"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-indicator_5.0.0-canary.ec729683b.0_1574870093893_0.9021575864885845","host":"s3://npm-registry-packages"}},"5.0.0-canary.b8bc4a26e.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.b8bc4a26e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c63e459f1f3b295ff6b1d8239f15cb070234e546","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.b8bc4a26e.0.tgz","fileCount":35,"integrity":"sha512-3lmnIT1R1u8HKlOhOpFoCX8NS/iRG4oUtgNwRh0/mK7KZZF5pf6n4awEjJxAD+q9bw9Rn0hqKpQs0YAj1ZUYFg==","signatures":[{"sig":"MEUCIHUayG8mNFUfa2XP0i37NorxpkCro3cgpyxyvUfeNeISAiEA5Ln6SrIPqCEH8Rbwy5a/sp8sUak5K11XR0ZxykTtrMg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3sudCRA9TVsSAnZWagAAn98P/RVK463FykpiYqduyQuv\n8IDCncw2qyEHRek0oVv42q8Kr4hQHbISJnorruN3ihCXtvZfl5kXW+40GLqN\nHputjp4xcOqSSn3v43DkbH/CxDihRWATf4q029D08YIT8A0oA6jjJHOb0J6J\nOYuEDvvutIezDfU4ZFJHmM0ehT03U6lbDyS4fSuowLWY4+xh7Yiq0sa+evK0\n2SRLUyjQhDzeagE65xsBbvqjpcOyf631EDeUMY0I1vsaWdglEwaCl2KoU50o\nYiSpD+FDA//2rvRigDXZz5SRi80I1d/Hgfg4MpXcJzr6eXGpLP1mfCTipWHn\n1QrZN58hmrC9szSCqDd3zNXtDJDYHEH0+FQxeVNnbZL3xD6XWVhfmdu6iz5D\npEEK4Di1lVkiDoHMnTuv4TDhd0ZkJAiHuopcBrm4N8An66XvGVLKt6Me9pz9\np4Wj4ykktiQVe4HEjU1v6DBnzXjv/S88TtMBWjtRRoYoqat1fxwc7jTMSzgK\n/S8grXDaRRAyr7Zmms950Sk03nfCSIphC9wMsopPg7TFWTjGJbp+CYWaH2oF\ns4y9kSadOrKxlEALWITadAGwQ9/b8vXVlPTdx1DD8JFuhVe9bC3HJ7eXaUFi\nBZArBz4cuqVpZP/tH0UGWHIrTo9drthGhnd5chKNGIWTEaELqp9TdIxLMQVx\nGACi\r\n=oVhs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.b8bc4a26e.0","@material/theme":"5.0.0-canary.b8bc4a26e.0","@material/animation":"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-indicator_5.0.0-canary.b8bc4a26e.0_1574882205139_0.9256617716979667","host":"s3://npm-registry-packages"}},"5.0.0-canary.f978109c3.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.f978109c3.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"65228cc238ca7dc800379c505a3a195a50b7e078","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.f978109c3.0.tgz","fileCount":35,"integrity":"sha512-eQ2n518or6jFbRmkMpPkLohs7q2k3W7z7adVGulGhCmPtO5icL2dqawPoDjyGygkzpZ0BSIMOV/BpXH0Kco2lA==","signatures":[{"sig":"MEQCIHEcXCtz3FcAyzlaSe2NAhzLS5WfbO9hAPLJEP9iVJTmAiBSqdqcA2JQedC4KgFxb1gOIjYO1ykXIGsTHrBjRxtZ3w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5UTICRA9TVsSAnZWagAAfWgQAI28fl3KOxLaCXNPdGdI\n/P8ncHfjvylR/5D+zCGpUXG24Zrfe4HbggoJ7kstEq5shTP/RPKU+hQDMsGR\ncypheR4DbNWIHw30vzpgbzGdwRQ0X1+Sos2ZvOH06Dcv5K0NgyYGmgtv6jGI\nlQAUyNbYXK25tS30DCHVLPDKOR6V0K0MRugcPZ/tzDSscYLH373UVQoLWn0j\nSOaRS2+/n8oiyeG3IlVo0LR8FeiCtNqKh0dqzvdz9v36S8rwa9k2XukeDbkS\nj58ymmsnrCjTbtVU4xiJQjFkFFalGA5y0cc5FhO3zxnQ0z3Fpvj9ACTPFN7A\nxcgQ0AsUh4NojTwUMm51FV6lNeJvwbS1PTjI8TuBJrScJarCfzGzEu+O6rGu\n1Tu8g3BqzpEaELy+9r9KG7xb6RFq3T/f3blWemqCTHitzm67ROQs9ljom5l1\n21VP2UYsizWa49xLG/1DHZXiFG69o/XqZItogrCyf8HIm9E4kqJRoQdIjM0F\nI5Cj7sJ2Qro3OySdaQo3RX4EGRhRnHPV9F7tjYwPpq8Kw7OpHZuW4zjetfTD\n9z4MLU/oP1e5JNUidL3hhNdulLfgmYF1fMzp8HPAtVyRm++utkwSGrY6zAmJ\nADa7fBymQfYpPqdur2NOqapqonr4lKstQwt3WL6Yv1gtI7KTPupMv631pHKc\nDCDK\r\n=hqIv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.f978109c3.0","@material/theme":"5.0.0-canary.f978109c3.0","@material/animation":"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-indicator_5.0.0-canary.f978109c3.0_1575306439939_0.6684167148923472","host":"s3://npm-registry-packages"}},"5.0.0-canary.ad9dfe706.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.ad9dfe706.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"3ad7b30c12231aec53d6c7cd366c94733b3ae332","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.ad9dfe706.0.tgz","fileCount":35,"integrity":"sha512-nUbnwzaF5+aNHEjopon+bNUO4Lk7YrPiqp2Af9kE6Zb6b46Vx29UFiPspDt5EqnERiob2sV5RRRyp55IHPDw6w==","signatures":[{"sig":"MEMCIC9c5qL7rFoJYXbvwco7cG7zaNyvygVln7Z4ofpI8bBhAh8lDowBS+lwyB9cKfecFEGQ6cxMN5A0aTYHmgr81ZZ8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u0sCRA9TVsSAnZWagAAM8YP/Rr4z2krrVSkO3mG/SI4\n7wCB2Ba1uaM+M7kmfhQaUDZ557Tjq+pN7zpG/N+xGcSeVgPowzsjeWimoBpO\n6n86MWyYrYvBXj3/gSBp/Y/SiJPO2N5Gz8AfmdKoX4x7meItNnxipfPhLW9z\n1IVC0J47rufuMpycwFsCPeBWv5y8qAlync9OR5uP5sQqYYg1+P5ddx62dabj\n+5Vj08UewSHi1jQRQYi4Np5EAb/x900uxvybqw/UCsPLN7n9tVHzjUd0aPYv\ngm8BMbMHcNOVbqMKJAAPdimk71A2ogWSlTfpMkBsr/Zoo1qj024A4WeTIQsS\nPoyYTytLJ/izuyf17y2sncAudGb5M91YElzCvKZTkU6mc6Yi97JcJqmQZJbz\nIb5kqQlGUWwahCmgRZ4b6/T56ebQjx5o7N7XbnVo2Yp7eHJyYkM4BF6ZySX5\nwklA603fbRdOlZp1amA2UaKtA4hxdg7rITYzPwD3n3ZKn5PR9VOQQRxPqp/Z\nttrsTj45XX1+Cp78fnSsGpTYivPsrdSPVgef0U+m061cJPiplKpY6XUo1Ghg\nYOTlASC3mZB+l9x5cwfPtquZ1WZEoGi/0Ng/c5OWUA0/j5paAGeCx0HjJkwj\nGJ2F8M5w1bEEg4RnGeqr5WhNiItZagG7GiAggZFJFT3AgX1F6BcuA9EZ/vE8\n8k0u\r\n=4gIV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.ad9dfe706.0","@material/theme":"5.0.0-canary.ad9dfe706.0","@material/animation":"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-indicator_5.0.0-canary.ad9dfe706.0_1575415083788_0.019480022078678383","host":"s3://npm-registry-packages"}},"5.0.0-canary.5e45d77f3.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.5e45d77f3.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"acdd9c9f53c0d4f246a0249b491397ee7db57ee5","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.5e45d77f3.0.tgz","fileCount":35,"integrity":"sha512-b6pBJKO5DcQYUFCCjfbCiuI9SLpEHldUVL7SZylSRX980/nOYfEUqY2tR1boZZs7u4HuZ9xAK3M9+Q2MVSTgqA==","signatures":[{"sig":"MEQCIGeSxIC8PeHcic98iE3HePf2WayCrhTP5J3OvejE4uhbAiAvAKNiTQUXSOQ4ofuHAcOa9yMmR2kjVgSmEBoDwGpnTw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u1yCRA9TVsSAnZWagAAjQYP/1dkIp/yLC4O+xbjIWHr\n9/jvt0ekYdPalYUcxn/G+oCNUS4vYdskDjMht8npCtjOKTfKdsI15IwmegUa\nEMyqKi+nCscv2nkvHplCjA6So675+3OwPmUqr69DCitNV2tkgLTjckEenQey\n9S1OFQn/iMwF9ArOAtmz3bHskdSBfs4A6kWRxM8m0MgoPkyoZp8suwB08w2i\n92yEwzUlL7A2/Vc7lV/yXD683XI7G6uCFLo68MFen5ANQjMOqiaN2x9J9ZA8\nXIGtMICzj3wPvq45Z328l5TqkEKvZRHYpx0/MCYMdgn0hqXezH/KcvvvpBMm\nor0AXRSTQA1z85XTs8VC4aAPM4e4R6ImaW2k8TSIfU6BtUV4t/ANxTLjW3aY\nvCQ2O2b+j5MTjSHVDgVAwGum53I5zlpNWtNaBmaXKhMI5t/CLW4FIwrQOTRM\niQi8so4ZiXGzZ94BmWuo/OFpQ6VG9yU4I/GZG+s0sH/XqgMqLnSoitDBhn21\nQY3c3ht5m35q7+ONsmnDzciC/MYZpaURJH8QF+NPZrgsNfOYl6mqDTFsKExy\nvJre2rccOgcpoSqcNu4hzMK6XjxwsvDlArbKI2C2rP2PlqFZgI8zRkbN8srb\ncF3QMmG2b96lVZvUTdEGD9wMO1cN9YvxQHNwdBnfPDDNmtAA+ROaJaa9SD17\nmAB+\r\n=o/5k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.5e45d77f3.0","@material/theme":"5.0.0-canary.5e45d77f3.0","@material/animation":"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-indicator_5.0.0-canary.5e45d77f3.0_1575415154566_0.2675077003461974","host":"s3://npm-registry-packages"}},"5.0.0-canary.d10e8cdf3.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.d10e8cdf3.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"fd4c027271072592d324ba54699e2541e68c8893","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.d10e8cdf3.0.tgz","fileCount":35,"integrity":"sha512-ejnB2RZ1OEIXX+wcnha90iMTkwJZmXL3rkoI+rZ2tO2NOOGEaO7bp1GrKbqS/LrglfBI5FB4O6yMzBlxAtVTsQ==","signatures":[{"sig":"MEUCIDG4uSzy9IVp3e2JOjlncKtPS88sb4JTI3zTJw4IVg/IAiEAnJhlzd120o3zV55fDKVhj99HYeX84ye+7Cfr7Ze+htY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u2wCRA9TVsSAnZWagAAQisP/iPzDTvn9C+a/JETJ8AI\n+N/n3lh8478PjhjJyFJyP3SAoW6JHhAfO1fA7C8V3ZxWjlINHJUHQIH3XHi0\n16wNdveYRNKKguKWbvF+pwdH3eqVx1/2VVnNxgeOI5FRkQ0telIRMZPqeOD6\n9s4hKRuw5me7ETlrT6imA7hNn869qTKrJiqiRx+A/4tThrZRISlG0EiWUzFx\nkmbRAuWqztjg8dX1CXR1VGjdt04XG+K09mP8r6JOa9fLMSFGB4ox0W2eGtIn\n4zR2Wfj1rs3KHJrSQLZVcK96MkW3WTczRX71My4m5qaCZTNeLYoX1Vc31a41\nZoUeChshcTS2nnwQXyMHZYyASGh30Xo5OTl2ASY/8VIzGcLVBqjQqwNrZ4WV\nN8INIZSxkHWCuZKeDU5CPjdtLiQeasMXDNjDi4fBjwxf47I50jug+7dxf7yP\noGdncmsdjbyrwZpPl3MVZ73JF8zbPnWlnW56JPfkic2w4lw4YK+TebBvFOux\n02HIeEv4SpfglaCZDsKUplQ3fGi4RXaNh7uLHCbrQTwq0khAGi8yFjimZhwB\n3iz3aWl9JznDMg8NPFsAR6DagLy65An0IGQ4pvQO8jg3OvnvbgkkjnAYBYg6\nk9hKyIwuySgIHwUMSzl/xOPn0ZwpO8ndlqfj6KIH//5+2fle0zBXF5ah99uR\n1oKs\r\n=oD7G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.d10e8cdf3.0","@material/theme":"5.0.0-canary.d10e8cdf3.0","@material/animation":"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-indicator_5.0.0-canary.d10e8cdf3.0_1575415215714_0.12256462040042893","host":"s3://npm-registry-packages"}},"5.0.0-canary.a5dbd8a2a.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.a5dbd8a2a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"90506bcaa43d974b4854d2587b645c5ef665156d","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.a5dbd8a2a.0.tgz","fileCount":35,"integrity":"sha512-Hg63suJEMTRCsy5jjL78yFMRzPbhiXfROI+N5zuqSnT0r+xugZ6sPUqimawRYYa2LR/aLM8i00/IpKFgkTgm4A==","signatures":[{"sig":"MEYCIQDdiTt1cALEv9k6dOVhmgHWhoWratOgfn6Z2wp9hfeA2wIhAN5C97yEZ7k24XKVVAYc9Q0ssIXG+7Zr7vu7t1pXj5U/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5vXTCRA9TVsSAnZWagAAoJEP/0k1vkdrSOMxNecLb9AQ\nfUOt6u4yPkt1hpdwspxoNvi6S1og7hgvcJL2PYm8TuTi3LqZXlQIsUdvYrh6\nGBLv+/CGe78U5Y6rS4UZTYUp0LfJ5G0/efRYLYGurGoG/KCZfvdQQTEPgP14\nC2r67dGAM5GqMHdcDFh0+NtJuaIsYNzjH1qEKHV/9ijAlXZlZyFrbBXeG66e\n6n0VY5POIEPofFN4CDYOTE6bGrQzsofJ0miGnp5UrtdqzDbYAzdxYCJd41Cb\nCbEg9NNiX1ajeDR8OOXY6WzUBa5YIW6L5dDc0uvR13QmpN52FjEYbxaW9FXe\nubdNkB1Bgr6CYAfKEXuU56gK0mvXpP9CRkXHb3E1gT17KNVgyfvMDhRvIVD8\nzvftr/oQPfDzBD2QHqkr8sd7WwLutmnqHYz7GMv/P7Ur54JTypz8K9cNgCIf\nWMfIHHT4zwyceRx4aph8jGeR1EZXdFr8WCYfmmMvw57wn5DxrzaWOAvyRJh2\n12Eg5lqjHHQJliNSn4CB7PkaG2nUIkRvdCNDQUzAfKxQDZ3fS22A7oIe5LUj\n6cpNSFuKPTXG98AIf47jX63cblJFN2EZ/7xDETmIAfyiPH5O0908ZngroB8W\nLPXJEAyDAAd3MCTcNaoNDEsnPBdb6TVSmf/xTFp8979G9fdmnMx/12UMaiNh\nTbal\r\n=/WNC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.a5dbd8a2a.0","@material/theme":"5.0.0-canary.a5dbd8a2a.0","@material/animation":"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-indicator_5.0.0-canary.a5dbd8a2a.0_1575417299140_0.766088255140118","host":"s3://npm-registry-packages"}},"5.0.0-canary.ba879b68b.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.ba879b68b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"d33cea622721c2038ddd850f9fc7d00e7c5b3eaf","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.ba879b68b.0.tgz","fileCount":35,"integrity":"sha512-fw6pRTarV+OXmo6+GR6uIA80uMeAE4bI2i0qQ6uZNBF2bOWigOyw9mBfhJJy5SGUMURHBtpSMuy+ZYPJUd/Bjw==","signatures":[{"sig":"MEUCIQDPKa6yyptTHO1omki+x+00u3c2YMZid0qfFc0nhk28BwIgTmV63H4UaDtd3EBo5/JrlSci8aGIevjLovCS+tIJIcE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6BWRCRA9TVsSAnZWagAAoZEP/28tIHKj5/QVTRMx3FBC\nbyMSWV4E7+OK4Ajr0cPhoplko7O/QoOPSrWH1XMCDMPEzyyyX72EbQnFTrHH\n7Q1ZPCBgFE5vgbAIYbT7bbnXpvI8ywAqyK3R9mkg8PvgopbONONrOKwA5GSK\nZPxDGqtxXhedy65cH6r6MdQWhQ+lQpYj8OoS8lx2inlE5OOa/o0YKSEbE2r0\nTz1WE/bS/o5fuQ3UbWsKczbAncxw48wskaSaHLa7naj7Ig8p3OseYqDiy+gv\n74uqjer77FlAAgS+dZk6dD6nRCcmoS7gQewizNQfCnbOAGwuXqnHbL4sX316\nS1O789IPKjfXK173hEYgVVye4Rpk1WlUhZAN98jUG8cTCswIA2nV8msWfUL4\no8JVaImRwWyPutfZ168Vod97pHbaID+KD3eFbBBqNIsPsLU+WYlbWuBfpMY5\n669zBg5DHNJi6Ouef9xxg4Qz44QPxnwXk38btg+xa+ZmfTOml6H60+X0af06\n/cVwVbrrhAdGa4Yx31zO7BzEM5yAFuqvWQlgs6uMHL4xZOaQhS+UXPkyKLQf\nV9itIv0NFK2u4Wm0OCZFj66ZSa8SRvdmCrQbb60GLcDnpjZ32UsMjWxDAhaC\n2+NG60L0SRTYDC+2hyUzEmEnMuRdmaB7W8SZE7kccHsOZPTZEYv0n6v6Dxq5\nlZ76\r\n=G+UC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.ba879b68b.0","@material/theme":"5.0.0-canary.ba879b68b.0","@material/animation":"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-indicator_5.0.0-canary.ba879b68b.0_1575490961096_0.9216431406383137","host":"s3://npm-registry-packages"}},"5.0.0-canary.aa0eba489.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.aa0eba489.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"4d0e1effdcb42bd596fc8bb6ca07700106a6e49a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.aa0eba489.0.tgz","fileCount":35,"integrity":"sha512-6sStIYna5YbDJDLPiOF3j8RJrpZZuZGnRGmPsulDRltwiphO28qexf+loEZd6wRVhimH6d5Z7jgw0oTVNEK4Sw==","signatures":[{"sig":"MEQCIHeqHKtJMXZsOtSzaMrlR/bumnBHm+NWmE4nMk2TefpmAiBjKGq2AbPM1f0U6yeVOJw4eHIW8qOnQ8oy0bKfw7rzQQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6bXqCRA9TVsSAnZWagAAy2sQAJKA3DeVd0Izv9UcUu2b\n1NKF/yaaLq8ntL96dmMHHwakoQCKEn8WR5kBIcTWXujzExLUlNB8FnnmM+Br\n7ntBDDjObYsLfOuM0q5s4+yTl3R19aQZzTqrTu6RVGEARQZ/C03fhmT9Uolv\nPgVVKYK6+T1JhAG1y9/OhQa0rxitQG9iUtEDt4VooXRWWCsdlk5XVtPxObhe\n1fWQJzjgR3PQi5ue+s6H4V5kaHduTgz4ZzQBJMpOtsbiSp8zZRD+FK3bq446\nZqWrgFSPU4mareNmP7QXvRsDSROCsikH68UL8lXdTYbNZWLlbHHf3FDqiwc+\n4nm3UourVQED2HZn7Xh2o4RvUbuVkVAQ5FZmCBPDrW54ce8gpPGWTZNMjwdX\n6RYVAtprDC6UeMK1Iop3r1D4Gc7jyLm+WvjAdaAGL+gdQkFvniEl3YaQXMiK\nsqktNQYygFep1+b4pgBDeLhDmDbtQ1O7oWNfpHYNHno1FXMt8k5UZP38uQ/Y\nQVWbf/tc79R1KrbX29Al1NXEKHTl7biOqyCikqSGDcrr5E+4jBcJ6riPuGPC\n1FljlZn8Au2jTsDUxnD9j/UmLcJUKE7mrtTjvhUI8WJGG1mF784XmyLr+dWS\n6DtXeLth8EpkEI7T6U0z84q+8vuwlQsEg9RnXtTkzxmnXzDXI80YtTxNpdP5\nhh3t\r\n=j9dr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.aa0eba489.0","@material/theme":"5.0.0-canary.aa0eba489.0","@material/animation":"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-indicator_5.0.0-canary.aa0eba489.0_1575597545910_0.9149030699236593","host":"s3://npm-registry-packages"}},"5.0.0-canary.cb7b71a86.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.cb7b71a86.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"86cd38f4b3d972b646579ed39dc4b7b76e8f3ac9","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.cb7b71a86.0.tgz","fileCount":35,"integrity":"sha512-5AHlwGU6Bvdy2kFcASYWGkzqqjhIbeGWqbzDp6NzxLk0ucaPq3lMGYzJcP147xTplXuYPGn0xIZA6EqJbDMzfg==","signatures":[{"sig":"MEUCIAVQIgxpzEAC/TEP0pjnWna2Fl6nUO/13WBTL6trfPvvAiEA5VNxYBpJJJuIyZKW4EAyqHf6x16ClpD2fk5Pggw9xPk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6uqHCRA9TVsSAnZWagAAjMgP/0J9ZrjylYM1zWIaQID4\nryfcj6X0ZLVUFiKlU2BgWFTYAlfnz/99uCtgFiDMC34R55FyQnmb7yGjA8tc\nKpfBf0TTunDi97V7RTxWsobKf7TeCH7dahGlaoX7ItiBLB1paF9QTiXZSBew\nshgPgiyzUM2q6EOIPP1MKyPQcKfrTtdp5EzUvMOwniyokRvW+OhELRzLBQqX\nEqsoCNAaM9JiOvNldafMzXCwm6jbgttkW4TfC/sSG0fPi1Pgr7IkgLgi286l\nbgESybMFqWWyLjgzjkGHko4dE1VtiVtSSHF4pZ6PB9Ul0ccAwUlKWFq98Qp4\nyTGu4Z1V4MmAdRO4gWyujGLCQWuN7AH4MRFpc+eW9NNMbPziTjlzaI88GMX5\nfyhHwnsJsj0TeUSz26yn5gb5KC6TtBXEzH8mFfSFG5/XuaA4QnQYp2LYliBN\nGQb4F7AHc8TI7SJX1ZP2cJNL0ZOZcc0y7cNyu0Qk7aDxeuNnSH3w9NQZpjOv\nU95SL82eBhjfwo2pOQp04spbnxo5LbrvfB7Sv42M7YwYFmvX6Um8es/f4t8p\nDpQdCoWsTBqEhsEVG4T/2UX9LzF3xS03swxiheHQLi23tHRbkCwPTcqRsaiP\nHwbLiyJ7jyahbs+xG0zeQ9LQpw4k77pkF+ICs/k7ExP0Dv9XDZk2FlhL2PTr\nV7FH\r\n=AoLW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.cb7b71a86.0","@material/theme":"5.0.0-canary.cb7b71a86.0","@material/animation":"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-indicator_5.0.0-canary.cb7b71a86.0_1575676551087_0.03444869558272923","host":"s3://npm-registry-packages"}},"5.0.0-canary.50f110a6c.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.50f110a6c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"90b5c8c718ab5084ae7da6dd591e91b86e74950a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.50f110a6c.0.tgz","fileCount":35,"integrity":"sha512-A6OOd71ZWcUb0WfV/3HTQ0FfFgdzjkoaHIeY5WFnr0BuT0flS3kIaLf9G8IljkFAwaSoDLgUuWSeU9pPDgUJrw==","signatures":[{"sig":"MEUCIFvRQUxN+ufCmcSxpGdxGbbgF4xhyUnr3kGV4QwSAIeAAiEAvsgguLH/Y30pRV5sTEV93+GWhg7OzvbU4LQrops99bo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd7873CRA9TVsSAnZWagAAcwkQAIpYpY4oz14yWe041o9b\n/W8cFN/PxAmC/0FVgQsRQleFWh8C5H15CJ9RuYuVtu7b0BeoI4c0B7NIS+BS\nnC/TmN49SXob+UnWJxqHwkTubIHXSAfvl0Y0ycKx+OdEJrRBWFeFRElQkN5T\nuRF19gLb623RY/dKo6s9uHQced5a9R0w4KCXfZT0T2HbuqRKD0ql32VSDAKe\nMR9b6eWGrFbvtXgAgnKl2ph3RRCCXnWX6EhqYMuBQkKJx9mcnLHmGhhwBwqs\nRKjauy0EF3pbYGpozNgtuP3ClP9b4Nwl3XN7PIYNCSDHFCPbpql49foVqrdM\nsL/4GiyS4nt4iIg3pHWgPEDXH46PPl2hNAU9u0iy8gXpMMstuLh+aUCWgAys\nuQ6ZfNyxeUp6XMwXZjssPhxb0UIYmjx8UYbrMt59IhGRXjVadWhx6EYlyd69\nRSnO6ZvEYLwnLSNX/oA89KA8qam/qf+eagP4d0ev1RiW4ypEOg7Yu/ycRWwD\nXXJugfzdjo+k3RsVH6sk8CeUDrXxbypP53pEupsBvhT8tLOPvDkP5DWeEzHN\nbzN1SW7n5uS4zHml9Lhb6Sp/ihOJwvOk+WgnteiI8yAhM2w6+A/NmLTvMxLj\n6F+I4WVYKlBxl5T/cBlU/3VXKFsdXrEM5t42guGORwUml/7GX+ga/QjGVLhI\n4CTh\r\n=qQpO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.50f110a6c.0","@material/theme":"5.0.0-canary.50f110a6c.0","@material/animation":"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-indicator_5.0.0-canary.50f110a6c.0_1575997175101_0.33967873013730476","host":"s3://npm-registry-packages"}},"5.0.0-canary.878a08b7c.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.878a08b7c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"b29db01d9a70442e452eee507b795053cec82dcd","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.878a08b7c.0.tgz","fileCount":35,"integrity":"sha512-Rj+zpIL9XE1ELwVYG+FU/5M9u8HnciLanrUPc6TsPdQRhtBSn6DsDkEPmjf0pFcG+JcmgLX/lsfCEMC3YA3SUg==","signatures":[{"sig":"MEQCIBS/EYKUQYANIFnwbPMcJERE6qdlZX5hg5mFgory+r0GAiB+l1ZjtTHVuDN5pR5N5dcRlU1YYQk5BZ1Ick6dfN/1Ag==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8U6UCRA9TVsSAnZWagAAWvwQAI2HB/xf9u/o1C5eCUay\nD/GwABMo1QvylTakhhv/5fB+MG4Rf/5+KkttdJV9YsdIb78sOCppbMhhEAES\nIV70i8c1iseNQlSHQjXD/JZFs7VtldyEPEojEDnxILZ9BILXCOXTpo5+NyxR\nkOZjYsd6TZk/FFf8DF1SU55nN3UEIpUxtmLgFR3N3CdxW2zhrM/b2yX4AGrI\nY59XJeYkO0r8rexpB+rAy16zZF6GtLjy9ByNTWCaolOJlUrOlxKA2VIcLcrc\nYz9ubkkNM6nBqdn8YMI7eyvrESnmkgGIcpWCBsJrjtcGshRuGdxMfE45JqiI\nkXhKhFK1CojydIjDQjlBfG9Rretge398ivxx9j2a/8loYEvqEFvZ6oF8r4ec\nqa9LPLkem5OpD7CKQcqYvz10BxhBu1G6eGtD0leinopBK4uA9yDbRbUc5s9W\na3YpBOkc/m1+Dk1ALusdc2469GY2kNIG2hzR6dq00I4gAk65xDCunS9iYeNj\nzcXnchj1Q5Aa3EzZY9vp6Vu40G6RMUBponKLtpcrOiHujsB3ZPEMfL/Ff+7n\nnlKKLFTT7u/Y8GMvv9tar0P+0XrJ2/OOdZFK+zcOyKe5/j4zRR++6AnUghub\nXa1ls2eqtd0F+Mfdc2kmuyvRylbZBChTKIKbYPJuL7YbtVdQfJe1Lbv8zDOK\npkoe\r\n=PrnY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.878a08b7c.0","@material/theme":"5.0.0-canary.878a08b7c.0","@material/animation":"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-indicator_5.0.0-canary.878a08b7c.0_1576095380549_0.2926081996481076","host":"s3://npm-registry-packages"}},"5.0.0-canary.397905b4e.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.397905b4e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"3772d4d8331d1653751951fa525f925ccb49eef9","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.397905b4e.0.tgz","fileCount":35,"integrity":"sha512-w43lqIgUewsskh2oNdeM9rLVikJmSsatI7uH/SoAvefdbB2UahECdXJW7uvW4mvWun9x5Zf+xLRvhVAM3nNXdg==","signatures":[{"sig":"MEUCIESQbToSZDVooUbh4wM8eNpOtztZzKIGUYVmX/mR/Nn0AiEAua+5CRBVVKt90BeRll4IRrh5/d5E5EoawTUcda6OBBw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8ao0CRA9TVsSAnZWagAAb+AP/3EqWZoirfa+R3nlWsL6\nvjYuVAVvRHE5gtB9MCj6Y5qn29w1vXnyaY6tJ9VXT7xxVBdhC5hHwI0KdobS\ndyJud++CbefKzZ+WtLrTFp5NmDaUxkwVsYh34lwPdKHDyBPr9wjuq7/oShCo\nrGGKYdGXCUSdyop0Mrq/4kgJK3vDQdESmrIECtMi4wm/PI2WuGLKNSTbQuVF\nccaxXPvk1X0ovdFJuPkEZG0jmYR9lVfhtaQuj/eTKw1Br91jL1lMHhCtLAhi\nRbc9Rm7WHTpfBQI0OAxD6JDb531GEH2BjjMGolJxsrShJVD7KT7Ch/sZuuGu\nd56T5uVPFIaWHL4r+0C6uqwHuio7RxzQccTHPZ5GAmqSN24p1NRERb6zQ3RW\ne0W7XMLh4jAS8BlIuKU7nhDNH5LrZmm2NQ7/DMS0BdBiQoeKtoR2FJ/dRYVB\nOQ1DG939vSNtWMp1D62/OK+1fw5ebpUCBfJKzWi3GwTOICkODJwzNGDCWTP9\nqZaKhJPDExQI3Q4iceZKv2TtjwuaenCyBS8jMyGo7WKyg0gqBdD7tHGvfQu8\nI7cN3u/9ng78m2aL02IgQaWXCKN7nJd5XKno2PPUszXt22eBJdEwxqLxevfe\nOaPp22VWxcn9XdPld488jQhr29LC4NwwzOoknr6kBMLqMedtgo9JjnlcBRye\noQ7l\r\n=8fQu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.397905b4e.0","@material/theme":"5.0.0-canary.397905b4e.0","@material/animation":"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-indicator_5.0.0-canary.397905b4e.0_1576118835857_0.524212227550942","host":"s3://npm-registry-packages"}},"5.0.0-canary.1fbf5bd1d.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.1fbf5bd1d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c055fceab8bb58d82019611706d286f266b5d732","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.1fbf5bd1d.0.tgz","fileCount":35,"integrity":"sha512-BcuEujm7O8NLDQuZnV07S1VkaGL6Cm533cnzfogz96Pk8+2pqKS0NNzFIX96KhcbPzOnX0lcUfXcOQiA2afKvw==","signatures":[{"sig":"MEUCIDt4hjWaF886aDtB46eUqnc10iWPKIrLf2wp0QFICOZ9AiEAmVSZScRkhwKhPsDfe1ZCfut0UMZdPRkXxQ2IhjNwdf4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8o4ECRA9TVsSAnZWagAA5JQP/37uC1OSRMMUHr4JTqTl\newgdz/GkXdA4dm7IWvAK0RebjPdKVfkKBnG09GTRJBsGJmtmEUX34fifPOwc\n9vn7jvaOT0byBMxg9GSuc5TwUjKwReUv4FBUceCWq+r4XdzMXY4ERqpQ12pP\nqdzgwqAUAsMm3Uwu5bPBObC98MBcjXuEaMdgmJ3bQB0fVt1S1ic9Dga5V0I3\naGaUAfdVChLXRUEWLL/c8P9upO3opl9vy1ZWRJPZj+J9D0ay6AGuPqpoyXEB\n8UibicU2aI/wyu2LmaCswCcUFjvxP61mhbYAzdcuJH0PF0D6xCjteO0KpdLq\nhM6xnO5PfkzhXH1cUZzzPuZHmmf0NS0kQeq6OMybDB2Trd7JZCdroZ675aFj\nvAElmumYb9rANKAguO9ocBGnrlq55rMxCmjG56yEmZuFwFmOTpXNmmmKmP9b\nKNfpq9tulVDWcuiYMEx4WSrLD/rtbFoyEBAoynmit1o+t1AjbRFSSyAZyiOT\nWZuoc/cbVGu5C2j8oJku6KswEdp4MQ+Tz/CQMrPmEkcqYKtqPZI6G7hZ5VMZ\neBf0MWqsQ8Db7m4FuXBW59pBpKPmzmD/hwkJv9e64Rzfx2XzE87Nm45Jmky/\nbVRLTy2HsT66pRVAzAVNe+hg0JeHAViX/X+zYkrlMhqd5zyReZCgYv4ZckzQ\nWqvt\r\n=DDMd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.1fbf5bd1d.0","@material/theme":"5.0.0-canary.1fbf5bd1d.0","@material/animation":"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-indicator_5.0.0-canary.1fbf5bd1d.0_1576177155800_0.11922422128663901","host":"s3://npm-registry-packages"}},"5.0.0-canary.b723dfa78.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.b723dfa78.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"f730158b3c554d7189b6c27bb6af06f3a5fb7241","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.b723dfa78.0.tgz","fileCount":35,"integrity":"sha512-9G6fHGLS/KQZEHeqNSCAuUFJZCUbWkFl5FJRDrqJjx8c1UzCsgi+ZtJmwERkDXkPOdLKXfQ3gz/MoxJQhgwPJA==","signatures":[{"sig":"MEUCIQCbt1mjOQShCdEmYag6nYIZYFYL8Um4aZm3Ify+wf0oTgIgcWo7xkDvWGmMDCADioKD9FLIDkEj1kyrHSPtx0PxCxM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8p6ICRA9TVsSAnZWagAAANwP/2K5gW+AqF9xByKx26bH\nDhNNOgnG1bu7eEU+wV/MoUeDk+yId/l2/nORDi6hgNPUoR01Afrv4OM4udpN\n0mc5haiCJy3wvo+RK/NDulr3LPs4v+hNj+xqykqKi5x+Q0FnkAe27CO+R2/q\nVl5xpsj3XygnhziIseZ11DBcBTf1MlfpMfU9kn8w20J51MG2KFDhqYvHqArK\ntX+oGLQOLrUMh4HemhNGsLxe0vuUxx9Ka2VG2WgCaF2gDU1nGuZUuFkpCTNF\n2iEgJNcx3NQm4AUkjsH8tcj/b6KVYHJdGimqocOmT1vFKhwjhTzY4QWr6QKS\ncJc9/aWs9I1KvBqVtCWdrkecTCrWAOwKu3rXKKKpIMm6McWO0PisK2fYu9ry\n+vZrDdgnaJt5xvpnTefiIp8vm8ipw+ge8aCsIvdHFo6My9SYV/jOytbcNfCg\niwwokwpx/5rCYBzmO81laAmmoCZz7MKHTR75fcIY6iHMPDs0BEljZlL58riP\nS49O2hMGjli5N/cgGUilA18/EWLH5lUPLohpJKa3X7UYCOTNkdrlmHUM7V8f\nNwC/uH06U+upTgXaJUEEYIqT85u4WmdXq4bgY4T8UX3P0Zs1SI5fEfwFUeT3\n7wH2LollBJCC/ispaoIX1zBrLnnPrugvXCGmu42CZCBAirLhekaK9hWHkEro\naHYt\r\n=mXVa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.b723dfa78.0","@material/theme":"5.0.0-canary.b723dfa78.0","@material/animation":"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-indicator_5.0.0-canary.b723dfa78.0_1576181384490_0.27667149357733334","host":"s3://npm-registry-packages"}},"5.0.0-canary.1c494e567.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.1c494e567.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"1f8440fd0bb1bb46f9c369c9cb29722cb3ba57f5","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.1c494e567.0.tgz","fileCount":35,"integrity":"sha512-TKayQ+XS4OpOw9sI2HB7g6yWk7S6zqAluVt/Y0mejQbLcT0RIEH0MZreps7c263HdZzJZP6is4nSvOydoZyfsA==","signatures":[{"sig":"MEYCIQCeXUyBvfZ8+albVknz6MdPbiwj3IAREMBPRw3Tvlh+SwIhAJiNSWApuLtrZbhtkzCFAVwpk1S5u/sAj8+VrLwELJyq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8s8NCRA9TVsSAnZWagAA2Y4P/0fuFrXhdGObqaqK/4Cc\n0CTJSFufeFrgJDmTEwbOopNay83wLXctoYM/mrrshvNXedkcfUyt91R7Mz53\nlxmKgdVuYRLADYSGLOXvpMKQ1JncA4GZ98uSpbCo1YswCIS8+kr6PlNtkVTv\nH3Ur7y8zIBrkJR++s4Cvc+FhYcDe8+Hq8dS1YQBoIiA8SpLPawegNlrXogG8\nNfysAqBK6Od1kPJfo2k3jZn1r1a/0MZJY+enu7XJ9p9XlLHu7C8tGHD2oSow\nVGufu+7OlOW8JQgE6gp/fmckM8D+6EiZM1R93d3FyvTA4tEmFgmUdWCYcoVi\na8KLZxcL4WyeWVI0bVk32EkxTAD6Xz/+E2RU60WHLXcvYrLKEYS/jn4RExid\nSK+M11N5FVvWTopf51ejFG223Y42XnxYVPvlcrgKlwoNKe1TjzdSph3ySqnb\nhjP3UCbMbQ0LKkE9b1cw1jzNVa8G6kqVWx3OWLkRegr1eF8zJdqeE8+Q3G42\nuOjTuwJGNoXoSwoxNVeCRjfMsrRbx6IHCf6KHhsZEM+1IEYXr8/U28MvdjV3\nxQcascfEP/8xKjH2rzQRB+Wjmq35Up5xzJQFum3nKjVOdrEgnFCt+4FiW9gq\nzPbhzZwvPEf13khUkeN3hR2vJ7fMFS0fBkshE5IUSFZWq5l/mhlQV4v8WIfg\nFKod\r\n=UpYJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.1c494e567.0","@material/theme":"5.0.0-canary.1c494e567.0","@material/animation":"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-indicator_5.0.0-canary.1c494e567.0_1576193805411_0.8938848001256838","host":"s3://npm-registry-packages"}},"5.0.0-canary.c9e98a125.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.c9e98a125.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"a32c51bff63035059dfa71aad118c34a0afceaa2","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.c9e98a125.0.tgz","fileCount":35,"integrity":"sha512-N1e08fQ/mkUNdnXhRHR4OgcHSAU6sYwNR0EQDupXrv+9cMFYzhAi+iTEq97OMEdseG0KajsJlqgpzIxSp9rN6g==","signatures":[{"sig":"MEUCIDo3ViWIreOZwqyVzJ7OTdbHy5kUmE6jS+NrHK5qSP62AiEAzJI3HMmSGoKeQ+yRAvfYMO+5bfmWA3ShiECd4i+2evU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+RnmCRA9TVsSAnZWagAAvFAQAJdiq8y69WbishAf+T3I\n3u2PkuxfcRY87O1LMxbg1XYhafxLeZGToyStFQdg2eqezmE8oEOFqb1/dH/c\nQ9gnVdMPtrdW4M4LaQgz/58MF7lZocujidcj0XdzRfPPME5RFxm+nqHq8OjI\ncdZO9vk6XzZKt7EKp8o6vsQk64FPkLoBzqYX/zS8+lBljzOZyuVPmZ1BppXL\nAZvWLVU1AFz/YIYdqLqf1Ok8ieH6VIshbzygUq3rqD5s+ZnlLS7NO5Y19wQQ\nIU1vzI1uBwPVzXu4pTIyKaAymXs4cZ5tVXCgBCZbpH51jGDeY52HEKM7UnuN\nh5/Pgu9aMKgouhgptk/IdLRv3nNQePiNL4AAZqjBY1IhLAqTdM5tVpIMFimm\ntfDVNEj7LBQhTQnkAUWldY2AVJBuTbsW6bCWgMyIr9eQhRIh28YWed8R2TOX\nnknLXI5Wp9veag2ThcOo48VKLu04L5rLtjnD7fuuu4Q6PRwBFT3K6rZIWJi4\nP2g7DH2SFgEtS1rYDA711wU/I254Ce4aoTiTiawAxsF2zGTRBoiZwq6Aerlg\nei7k2NbLgOhqVAOHdpZANgT+7qL9BS+sVshlzFp+2ZWnY5Pw7liu8GK0d4ak\nCp7Mdy50T0lgpJJIudbejjl6P+dgTYg7GzJLmciDTzVtVBSbyivw/OTP1C4G\nkc0X\r\n=1HgB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.c9e98a125.0","@material/theme":"5.0.0-canary.c9e98a125.0","@material/animation":"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-indicator_5.0.0-canary.c9e98a125.0_1576606181821_0.8849983365165117","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ffe8f7e3.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.5ffe8f7e3.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"78f5ce19735c4d0a819e80f4616bd7ee73baa66a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.5ffe8f7e3.0.tgz","fileCount":35,"integrity":"sha512-Pqyru3fTPHMvC5XFY6koL9fX2ixgFhaYnLRn63ymzXmXU2vT8LFUn1C+y/nqlzYcgVcmWDjYJ3gYSuIWVHCeYg==","signatures":[{"sig":"MEYCIQCVcZIAi/HYrkUS8Wgvb539H9p5V1CTWaw47jZP0tDMuwIhAOjrICLNh3RvTJekKyJTf4Gq6wi/TISNpnurtj/NjdAx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+VeuCRA9TVsSAnZWagAAF3UQAJUANrjwrAw6muGlYbKr\nBNbaX6J7kjC96vYwx1e200wpb4UPB5QLs5xbDjJALYjHgilqLIJtCse8JhBI\nxZI2epAU0f9ceM1Z0hwzq5rmwtQdJ1otUihmiYox9rlxdih3G+tSII3IQzhD\ncR/zItoWdNBSaGI4A2+VnAhdoHdKBr9FyURf4God+06DAJu8+cCq4WQWbiMV\nlh5yNew+nYnkoOT6eA/6L87/7rqbZtiBFY3FCHO7AlxkscGPt1E/FIj6Gbko\nSkYDpXg7WOc86sDokme2MD6ptOlGcjTgkIFI5iwZMNT0fnLoD1YJBflwuPmv\nxFgsvMk288zbt+IQwA8z4abIPZsCMAX1wqkJqqJ65MOXTld9LCI0mhdyzSLq\n4untI82lcDTXBJeI8BnW0nYW+MeaN6q+wQKb4f4c1tLbbBtlNI0wsEtgMXSq\n2MPinV5mcf3DxVSuQsDGYQvJ3Yhndz4qB6bpWHwYSBSNKLdjfdOXZOE/hp85\nXzTbCif+7v94mc2SY7xM4ouvTLFbiEePM/lGgVbi+xJqN+VBa7rjV0/bF2pZ\nM//bmyOnqslNH904yIqjdmfaBXmiotdP2NPrdwtUxfKdeehlPsNEotmcaeWe\nReqqoUvSuSmV/fR3aZT6TbixWNV5QXJjObf9m6JVnksIqw0Nh6Xn30QoQMGb\nRkrX\r\n=vLyZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.5ffe8f7e3.0","@material/theme":"5.0.0-canary.5ffe8f7e3.0","@material/animation":"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-indicator_5.0.0-canary.5ffe8f7e3.0_1576621998359_0.21261575753641315","host":"s3://npm-registry-packages"}},"5.0.0-canary.47949b08e.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.47949b08e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"cec9895a005d6649509d4d95f12e58bc39225896","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.47949b08e.0.tgz","fileCount":35,"integrity":"sha512-pq5+kwpFp8i5x7JKVR/EiLzXw/lo4n2aPbfSq788NaK3QCbYzP8ig+1Y5DMXRnGtBLBMojZqIUn53Pzoo4zYuQ==","signatures":[{"sig":"MEQCIAwcNz2PCZFu/YCWwJSmuSRbFxKJ8vAWdpUPjoSzSllaAiBDcaw0ihA8gqgtj9JWCv+ct4Yk8/4Ibgh/5Pe5hjxHaQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+mSRCRA9TVsSAnZWagAAbNYP/RwQgJmJTFSQj2G4llA9\noZXFyX7VftK1ko77ewUpxAoYDQWJ/oahuvPRr/KuUCZ78fscidKOuTvpUuVq\neTLRkB8+E5QEphzxfhGOOv7BAZG9LxpKURvIE9nDFiNeG6+N8PfAD1dkHRx4\nxlQ3Vv7UaIRpyILSfpVokM7rueqIgAXRSXHBvpsInYBGKt9KzV+LIDHrtTem\nYaRHrNWG6655OXX3ECkzaTnsokT6e0XDpdXC4IKEtMLP+cQNG3xqQlDYfCfd\n36iUVxXy4vl9KJ5nrRQJCcgA2XMAD1+3CFvARfYVDtTuY4X0eUeg7hzAa+vs\nyJ644WHfiHCOzkQzBitl8WvwXxGwjUaMZA2Pv/lXQz9bgLJnUIP14LCUMf6k\nJNOHZa1GbuyjYYUgsoTM/JxaqRgJEqqqh5cITHcbH5qj9yiKhYja0C1DksUf\nzyDCCvxhKu/8OKSkeQUDZcOkv9R2gp6phsAWjSwTLx+MDA/RMuXd34/QmI8+\nCgdgXcTd999zMRoHe/G374QD2m5RAEhHMeNq5kvsIUSutd3+gLFZ9ZKnOHsx\nMkFxwyi4a+Po8Ty7EDEDzIfvDAEqsIkWQlh1hY66NZRXmVAuwtRf9ATiMIdZ\nmOdo+Lv3c1R/0nWDtyeDoWeYqRRhTk52Jq3o11K+8UMFXEINu9vR16dGn/04\ne+rq\r\n=uP8m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.47949b08e.0","@material/theme":"5.0.0-canary.47949b08e.0","@material/animation":"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-indicator_5.0.0-canary.47949b08e.0_1576690833399_0.4571252622054245","host":"s3://npm-registry-packages"}},"5.0.0-canary.b240bcc1b.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.b240bcc1b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"aaae4f6d72c9de535dcda811b61e699fed92a872","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.b240bcc1b.0.tgz","fileCount":35,"integrity":"sha512-17ku0/bAImKOdD0EIYvJoJBAfO++WtDecMnaO6pN7jENGcBmILxsqKgCda+SedGVomL++3uCS/NghvGsLka+yA==","signatures":[{"sig":"MEUCIQCgzr40S6EJMgDj72wcZc0FMZ6GHnZh0zz5R1H9fTMxwgIgL/HJPMNYfql5/ScmYJXrEHXMlhTkp5b828nBRooaVX0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+nsdCRA9TVsSAnZWagAADw0P/3UyUxQ/qGcHT/xhT5H0\n0ecKFvuhxTCBYgIUDS06sU096QguOFGMdbaUn/T7sOuxfYnJO1fTXdLVtVR7\nvPRkzFVD0puh0v2vx2zjJPCQzzkq4WYQvYHZOfXthElMWolQ56SDxJpP8nfv\n/mTEs2mLFtq3qSMq2was0UBGN3froicnt2rqg9p3Ph5qMx1sptsu9Bz10rMs\ngiZHkyOey87n3jiJxU4tBvckoBECItuCA8PVuW5tczz9sGaUvUw1HvaKUk1+\nXV//vqnZ9l7QP2mml1suCzrEHRHgTiA2NldnFiQybLG8y7EE7Dvwfp25JhVN\n+FDQUxHmRxJoZfs4fOW6agcgqkEDgxNH5D9iqoJB3Vo4JU6KMmdySe+yf0fH\nnRDO9l61HpDL44lx75q7qRF6mgZEmsardDCCIMQWgiYavHodxh3QkYoJSOAw\nVNT/+8qXa9WM7NuJ8Thf12C9s2bK7hZ7SEHGFcublv/srTAw5LkfeTBfMsTZ\n7pPTt6KQIIF9qlts9Iyq28OKhIJK99inwkPQFP6ols7qyRyMuW9VeHcVqdvD\ngo98F5V+JatdFWr6jvD+zWQynmkYBknQvTTLrKek1f7OyGW6C2qPDLfv9x0l\nEF0W2GekuypADjw5lVPflg5TYLAE25P+6ExRmg0oyYQRfek2s9+IdIaIOmd8\ngKu/\r\n=/jcM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.b240bcc1b.0","@material/theme":"5.0.0-canary.b240bcc1b.0","@material/animation":"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-indicator_5.0.0-canary.b240bcc1b.0_1576696605071_0.4913952847029135","host":"s3://npm-registry-packages"}},"5.0.0-canary.391674a26.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.391674a26.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"d68abe4e210ccc8b4e40e34540800857b9004e31","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.391674a26.0.tgz","fileCount":35,"integrity":"sha512-RnGrSIKokqnlvpItaCzZcpispod3V/PrM6gVOwqG9lCbfu446JWaXTWQ7raczh3HfeP5v802boeaH/jDiokHXg==","signatures":[{"sig":"MEQCIBVZcK8kwnkMDHEs6+knYwFn+PQC2kwnS5yNxJ9mmR78AiBpH61DbFY1UWly2p65/ZxaV21YRU2SoNSEilWtovrSgw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+nsrCRA9TVsSAnZWagAAg8IQAIgQtNh3aI+EwjjCem/O\nEpdegxQRg68M/005eNgGahyDDDgLXVfHh9wptZb5Flzf9Rg65Ntg4PHRiDuh\nANAo4QVOHi/cFg/4J+UpyT5BXZzccPO6P+6doBrzC4IX73nQoDH0NPQyKSXn\nH2AZS0D1HjugrtKk5eb3g08XX5y3kaI/DrnQKsytbecvW8LF1WfZ7axhRS1p\nXf5lnLDO2l4eyePGYX0677AzDRpNAJDvIXCNJRswHy34FOl6Vz5NX1OgYiZn\nbK3IM4idjB/uS+8aAmq35a8Y7iNVcDwcW4uXHHtFZh2T5reem265xlOB1ctL\nC0hZP7PcAqWsg/5Es47lzESvpmf48HcyD30RjAqgJHrheBZYb44ZocbCJjDM\n/Gk2VepndWZOG/996qNx9GlrXaSSrJIA1JjUT53yGeGorrmA+bIXrLM0EBis\nmVWiPyPLTXL/HpQyIZIPvvjrLbY4CQsgKAjsdKo4MnzpbLyPhEWBQALim7V1\nP53KZDwxJ5qu+szLsTi0k+fvlbr15w3s8FO0RI9k7t1PZGn+sUClhjsXQzlk\nJCiFq5Why8Ky9LPKWNRq0Htm+96h/1W78yo22UoTiP6ja6BNFWqeF7KnfOfI\nBAjfXmCmE9naRs8wTqeQ3AibWRg7HRXdw+OESAXuabBOXr5eiMtJyES8HS2+\nJEtb\r\n=HN23\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.391674a26.0","@material/theme":"5.0.0-canary.391674a26.0","@material/animation":"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-indicator_5.0.0-canary.391674a26.0_1576696619069_0.819190772469313","host":"s3://npm-registry-packages"}},"5.0.0-canary.c4837746c.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.c4837746c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"4d9aaf4b67105569c41df70aba939e31f48bbb4e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.c4837746c.0.tgz","fileCount":35,"integrity":"sha512-MHgBA2JFbiyk84cuXApY4gk8PEcvTq8a9PhEi4ifcu0yVLSMOBfeNTn/viwy+0iqNyPWC3mt4iNv6KkSlkd2Rw==","signatures":[{"sig":"MEYCIQDU4LqwTGEwc+QJCwNMDYZSdxMqLPmPwwPXm9zIm5AywwIhAMoG6fybcVghiQctIhOHsj5L/EHZG0eKEb259Pi3WYu7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+n9bCRA9TVsSAnZWagAAt0MP/RoHkabNUDBTF3v402rR\n3j2/KjtcPCcM6Zb6s90nxKcYZbJmff0RLVD8tfzQGP9ecaeFU3BiFZQvVhN0\nbGvcxCLU3IuItpU8l+1rnBdj7Sn3G0J3ZUTEC7I/lESzKfcioIYk5/Ic/VOY\n8cnsUukUCwPpJPmGCU7PCUVSI24H6mg64ZWVgjdh5GazGb81FD0vCOddUyKT\nFGNsPvNsMbOp0ZmT1U/4xyXQeB7bdHCCFH0H/HVCtF0VSIWH0m/gbPkoPHbC\noYapIcPWI84cBrUAkfT5jWAyGcgV9qg6H61ww7+ow+4Fi86g0j4nEfbImo+v\npbKYurINGYBLz/ArAiTFGC2uFiOwtdYqZNZvAtGEW7C7SZ4CFwfmte4jZ81j\ngwq0eySPKuW5d/aayYVsrf7mdY9k1LX9nAKGNvcnUT9M3AE0g+q9VQye/p8O\ne0FqfWKBU0GpOyuTHSSLmuU4gwpD/vYSqaz8RQej7edC+c9wELxsnKaPDVOE\n/VzPkQE6qC7fQzyLvVGFzb/0OKLnKX87DF1kx2OTZnFghfl9VpKOHnBtUFA/\n2komaolGZLh51HpPZrDVatllElnso/3IIaD3ntWKEZNbcEXn2N/LxPA0lwXc\n+qBL5BTNvbLBxbJi1exq+xaq52kIR/vztWXAcAjNF6kBTu+hzFFA6/X2mdaB\nFUGQ\r\n=BDtz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.c4837746c.0","@material/theme":"5.0.0-canary.c4837746c.0","@material/animation":"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-indicator_5.0.0-canary.c4837746c.0_1576697690560_0.3230908929850034","host":"s3://npm-registry-packages"}},"5.0.0-canary.e41a70425.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.e41a70425.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"adbd8f84cff05c2283687f8da8c292c3cb10ce9e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.e41a70425.0.tgz","fileCount":35,"integrity":"sha512-DnULacUrAy9seuB7xvoRiR8/MmkN3V4D8bheXDG12YXpm9/iwxW6c8lfVWft3DynBJfCAYydnf/70NTcCgIKsA==","signatures":[{"sig":"MEQCIBmp/v6V98NCvf9CqK0dTyemn/plXPXWygW5XwHk5LPCAiA0E8qRgygtzNnThn/hIXoRfxfVdMYiIjigPHjeBbqmYw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+rQoCRA9TVsSAnZWagAAjZQP/3xxBOWh6fy7irIVKmeJ\nrU2I70joIlQBTK+m8tPnWtmKk2sbh6U+JHekDfzCFIs0Z6vLtn83ndyLXtcD\nz3VestRYgjbi5BbN/UV/fDQRrC+cyGOwHlyntQmLfQNhZjI5y7V+/faAtYk6\nhzBHilfnoM8Ej6YTe/+fozW9Rg3aQiSjqL7B2AkSbD9K7VYcF0EAipfDRPU0\nfrc5MRNCo+TSJT3syXUxbt9jlgmfLjtAR3k+zUPHTXCGzas1b1ueGGXW0D0Y\nCndceIC795AvtuR1+zZKuxT/xkapvB0MjY1vtSKB/oqJDCXO39ioBs9qsYmc\nI3uG7saAU4dmA+R70GynY2ZReJw6zU/UEEaP47CGm2JYKyjp1LH6wF+en1Ry\n+2SzWsglYABK6f2uOKRAwTmIrH/gJ1ln9bgBvE/hep0YcKel0Y65J7MyxdXh\noGYaL2DuoV4a0HtKQws6uTQ5FJRoJ/eyIRO7UMGVGKomSQxaM/cKayoV9qkl\nC5FO/gfzaZipj0EEXrMm/z/Kwggnm0/x1Jfmc+avy/oh5jhaPbVUpkFRN4a7\nnbZ4YBV1FYLqEDZu22psQnmGwiKJO0B83E6DMpCJF8qPrVXfyOlQPOBcakky\nebr9/Mlywm5XrQZKR34sGXkm10CCVy+c/uzCxmJYlNuAjsluwpc48UEgUsfD\nai+D\r\n=9D4+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.e41a70425.0","@material/theme":"5.0.0-canary.e41a70425.0","@material/animation":"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-indicator_5.0.0-canary.e41a70425.0_1576711208225_0.6679505482357251","host":"s3://npm-registry-packages"}},"5.0.0-canary.bac43eb43.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.bac43eb43.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"507764f1764afa11c1010ed8d50646254bfe69bd","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.bac43eb43.0.tgz","fileCount":35,"integrity":"sha512-dlAhUWL30dEBTHQPqveXtKYjK1Eqwa+MXjAUeOb5vyGYKNS2MG6oRDiTu29muO71msIhQgB2iUQ2hQt8QgFtBA==","signatures":[{"sig":"MEQCIC4tKfjq4UeBlT9SnfLk6+0o2f0vFTEgjOk7Lqpbx3FGAiAFu8YqyF0XwEHoFAtclpetik2x64kEsA2tofmfFy0Wig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+rURCRA9TVsSAnZWagAAXQgP/0+KFPEXrOt34L7jbUxl\nxNcR6Q4Jf/Vp7ZfrM6CVY4y9HwksM+UhonUxnZ8UrwcfGLZ+XwLmnwCbD56P\nZ59aywAEBCGivN2qz4E8UoBGmebAnOaz+e7XWymyHerSimWXmyxKZEqnkm3j\n64k28YHLiCJyDLp0Z2Yd3YuXMVmR77FJQFCzhZ9qqcj2vii4r2oWD88uu8Ad\nfV/VRnL+aQq5eU/luRbufzQ7yPH74732nshV5i3p9YZZQgBVwiRA5ZfhfhoT\noI+3v0n8iz+pMNg4F/4QTAoh/98xmhGtggfYboSooUvqs9zlCU2AVOaauw66\nr6yjHlNkOvbqZ+rKK1UGdeU343Ydm9dL0Ov6HpxCBhCsrJ30iGJkgOrY60qj\nbxugDSvnp7b4A95BlAH+FkagpW32myUhfGHa5wyQ4EfsyU6zDv2dT6to84lT\n7WeX5L2vA3suVLOiCHPgFyI8V7Pcdf5SS/ySAnAuidtDWq1uQN9hEbDXDR87\nFp/QnNZUbZzGk2uMdVt7jv2zP5atFaXbpuc4IOua+i/k7+CtoM4ncOHzY+Fj\nZobM4en10crR2Z193JpBObV0qRueveDSz6lpiMWxCZtx8akqp0z9w2LzJjex\nz7VCoFCjpZ8noV26H7nm3SdSEHVM7HJNJ/3U8uWsRl6p7j1T5sGPXttG2LWi\nNwPZ\r\n=yPKb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.bac43eb43.0","@material/theme":"5.0.0-canary.bac43eb43.0","@material/animation":"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-indicator_5.0.0-canary.bac43eb43.0_1576711440760_0.19347258014204693","host":"s3://npm-registry-packages"}},"5.0.0-canary.2e491de55.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.2e491de55.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"51902da2ba162005a88caa058e936b8138593f0f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.2e491de55.0.tgz","fileCount":35,"integrity":"sha512-rcubzIFFk6qt2X63Lq2nTZAf9Fl1KGVRPwV6yQL28VPldL50nxb6kgHc0t4trunwlx0AMLUe5ns8QxXBmJOo4g==","signatures":[{"sig":"MEUCIFTv4ShyVqNG2PYm/jciEXXhyIcb1lkVDRapXUn3/oBtAiEAi89PiN07qq4DTWEkyIzqFgK+cqBS8IZ7EMRdo8OFSuY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+1XKCRA9TVsSAnZWagAAJK4QAI/w4B3N5KHCx9rf9hlQ\n1fmdgsxCKwPHw9dbi+3Doc11C3jRg3h7I1joh3uxhvftGHRSWeIjXQujybKm\nriO1VTY4KpboI6wbs4ZvG1ACtj0rmtQVxHukxV7q7Y52yMM3Iojrr2rmRMOt\n7GT5CUtUBsq3lAB3O5PfuB1pS2melIIMFuMX7VYrCSXBm8DbE7oEcJ2UFxoT\nFvg1G8Urq0kIa4KoVy37UjwRcIpDpCkVCYozuQxIXzbShvJjfUysY3tj1OQk\nom2Z4si2EZc1XtOPYvRKXsMYDFcEDjbZyvzpSQRybq4vAAkMaTGISNj5k5Fp\nqwGZIh+4A8oz41Ik1kWqrwCwRtlAywN8oUBRShH/BW6QrYiwp/vruZHfCZn7\nLpSDfapYDLexTT6dn5Om/t5p74srhjRQas2lMvH8S2i9s5Dvw5rsai7Z8okc\nX0RX5axF7yQDtgiV5E9u5qW9h6bQ0r5rGOra8Gy9YoJZsGHNjrGFpce4LTOT\nbaKinLbE+4UwW+Oh/yCy/2YF69kCwE7Id2UhWXVZRlHeS5xuUm1fBFGIodP8\nsLaPXgnQ/QyNKM1RZRwzcZany2sJUaN4xE5l60xgXbstz9OaYO3aO+aD8Vch\nMH/6md1hnFB7a61cBuaG4CF4y5X3YqKy6ht+1sgkyRrKLR14XkDSzPA1RzoJ\nu1le\r\n=MD/6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.2e491de55.0","@material/theme":"5.0.0-canary.2e491de55.0","@material/animation":"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-indicator_5.0.0-canary.2e491de55.0_1576752586086_0.7083409109042904","host":"s3://npm-registry-packages"}},"5.0.0-canary.ae101c144.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.ae101c144.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"04cc82b2594798bd57de51a4d16ee82190f9d0f4","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.ae101c144.0.tgz","fileCount":35,"integrity":"sha512-VKB9zRS9rmBThhPdchiKr4vRoIv5ZLHk3424+ETKpHobLRwI6C1D7ofemsuG2hGgXkinFe7eAAFagtKGeM2rvw==","signatures":[{"sig":"MEUCIQC11btvSTeHKrL840D3RlSbtOZDMSrFWpiNo1yzmgJtUQIgXdn6GBFu6DxNdj44GlAIDtxWdIqcu7r4qzt73e9ukYg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+6RTCRA9TVsSAnZWagAAD80QAJMY0kDeG/R918EJr5vT\n85OEPMM9VKxL0wmmXeQ06JS8nTbC/VRmYteQ10MDB0ouALL5CFvaMPgfqEtT\n7snbAc2f22lSlXbwSDGV5qLTJzHtd6X96vIRT6FhornRPLY2mfEZP1aJgNvZ\nSDxyGfJUb9IK1Ht4+oOZLdZ41MDzkXwos1Imibb6sNiY6ZtfZ3aUrJNd2QKJ\nFrV10YCpheW0rlIHRneNwGJfRBRErYHKP06QmbB2ZcWm9/zisFdb48zOK2KH\nKMXPZZTmmAY30qfX3oqas5fyRb74ddEzeGdql8cwMMh6gDlabFyXWrSKpSRI\n8jhzsclylMBFRey1qqpl+94KkIDGAHwP04SSeWTi4ht7oZj4UAALbR9gdEfe\nagiIGqpHt8LZwACSw0w+F35YNAtrkFgGnMSv18PsSVHEMFBYBMsxqLUUsxoN\nq3oPw/zaY1boJdlBKru04gbv4WmBoFqgzkbL5iLy2SeYiUfn6mgaMRUqzk7Q\nvhg5b14CclL44yBiqwUaiMvSK3XiCbGsLDf+H2H4pEPHFBMgcR4XsPheyDhP\nHjEihDmLxAJPkIJsjaMWP3jrlf0jRs9FqzeJN1fjiW1UMCO6Ow1vI4o24PFt\n3gGQWlhLOHavWE8wTcqC8AnNer4EDBeD8+DYs8rjBbXweNZ7+Ehxovah1x2S\nYCB8\r\n=2uSN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.ae101c144.0","@material/theme":"5.0.0-canary.ae101c144.0","@material/animation":"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-indicator_5.0.0-canary.ae101c144.0_1576772691307_0.020171544699686406","host":"s3://npm-registry-packages"}},"5.0.0-canary.a51c31f26.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.a51c31f26.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"5f922a8d978c797875a4ccce6520c6da5dfbf59c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.a51c31f26.0.tgz","fileCount":35,"integrity":"sha512-7oCEPOOZyy5s0QkVYka1FD6TVeYuh2kkKoTjnM3GZPWTsOaQ+mor5mQa+RZAJRn5XSHdIZRaYPvhYmx0CzKTHA==","signatures":[{"sig":"MEUCIQDNP6BlXnCCvqmaTKVqhlg2M4OqcFdASXXS4Kp9JUrwnQIgbizm5w/ExeKWRt9ib8p/aURUPxXj8HeINGlohX4o5bs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+6/nCRA9TVsSAnZWagAAC0YP/125M/giHUynUX61zdIS\nfFj0rOHhOFLUqdjX9MwioPJNMVG8AHnBhvkl7ryJuNS9Io94H5ZNxHYuhaOi\nK9QhTt8xYCdfbH0I+2Pj5TGWrch5sO/i08cU/nrv9PKLe9lz/bCZNJSZBaAp\nsfzwwEYsu/8MxnOsGP0TTCTVdYeCgYz4jLojPwHNTGWTiAdUkvilXfa88Ool\nqegMam1iJDXi+kyfdSIec3/OViC6lnMuxVEJSS6t4LT8J5ZFrVTSIRzDeiAr\nk7RBFq5LqjrT80XDQyMLkrW50pR+mjLbcGEf98FxJegvCfYJqvWqpobiwTx/\nBjD2Hc7w92H1ysm7Efd7RGmZI1ZCNNLPTovzh+aTZZGl5ZNXKhmU3Jm2/aqu\n69uSpRbO25YPowFd3ESgYrYajo1DvuTHzER6Ek+fnkDEO1UQ8ieheDlmKqs3\nxUzVhui1e710XEoqUh4C8s3I4bOJcIcawIZIy8nis6KASllycUonIBi6QqsI\nkLzk22fLVaA48m99MRuju1Mxy/jan9/fJV5i+aqKsOnVsT9RmUOgdcHe95hF\npHFFpV12Z2rj9fnTormT3QCMi0IhXO2aQl4mePwm8ACHpP0ty2NhI2D0wtlf\nRhVDC9pMHZ5LBndMtrMN4nf1X0P156XH+eq8rPLM4qjoO/Q3c7tMa6/kh3f8\nKHOZ\r\n=rCTz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.a51c31f26.0","@material/theme":"5.0.0-canary.a51c31f26.0","@material/animation":"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-indicator_5.0.0-canary.a51c31f26.0_1576775655276_0.9696346230243544","host":"s3://npm-registry-packages"}},"5.0.0-canary.21fc4e13b.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.21fc4e13b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"b1cd14859c6360d5a9e930c1cf8ae3b37b7f37fe","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.21fc4e13b.0.tgz","fileCount":35,"integrity":"sha512-Q7yPIx8DBBD53xJsqnOQ0w/9Lu75IDjpkjJIaWIzqUkYKHPbEHbaCHRZFkJULV+sJfA4lqSNNvEMpJo4ki/Mvw==","signatures":[{"sig":"MEUCIQCSucqUtID8atdRdPplsFqmEugrX8Se/bNbjPaOIez6yAIgURt/dhdqJ75r0kS0l/O6MVTNOyoGQTydbeMOlkbOQZk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd++soCRA9TVsSAnZWagAAe3UP/2nZXYpjJwTD4fn7OZsf\n6Nvz8CAsbUjH98OLAuL/yWyp5VykYuP2yoLaR6pLBd3gHm7tI82he7gq43mM\n/lrTo3wo6A1/iH+yYlo7DSfzaplhAOH5KCCjUl1UrUDQ5hZ9UPNhCzEGDSbG\n6OFV4oeAvmhE1OBUWUp+GQCI7g8BExRS95BhPnXi7j4Id3Q27nMguWoNOBpb\n9kF612NpWwclDcDAr3kF0+wPQI/9nFva77U11JMbuIeYGZk0dNhfH5kOTc0m\ntCS7OvMk4MChykSxobuKR8wXvGoCvMXRd788cyPG68yN7dgZPYeZ6xFicoyq\nTXIf07ewOsulUl/WV2aS84iSKO/bHdxN+9YwR0JJGVlyrByB2nSsuNEG22wn\n2e6NxceVVC6uWCP3ig5r6GbUImb7s2N8ya49dfAClWeE1FA4iiEWHBuQV2CK\nSeDWtxIAfivbKAbLcTJKAR/kBsY1RLVe4zogp9NpyXft3AKsSJlAQmUawLWp\nrMMuOSYOyj03AD87PuL/o4Kte8HiVyLPUwiWJIv8RfBZ4Y/C6/YdMIreZpWt\nNl9boKRK9ZdODmsY6B/ltQ9jYbXT35l7jqo8vX34RWgnEMp6P7Gv24QPzYZq\nr/3UMYzS7h1OJlUWuRZTJZd1/OJcd7Hz7gzMlPHcAVNOxVSlLinBkTeE6N2z\nrmcl\r\n=tmaB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.21fc4e13b.0","@material/theme":"5.0.0-canary.21fc4e13b.0","@material/animation":"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-indicator_5.0.0-canary.21fc4e13b.0_1576790824370_0.1365133669877845","host":"s3://npm-registry-packages"}},"5.0.0-canary.d2ae6e17d.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.d2ae6e17d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"6e96226680b68c694abd7de89b67ae60177e5bfe","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.d2ae6e17d.0.tgz","fileCount":35,"integrity":"sha512-iid1NrPdKo+uh7TfkgXp4DmLYUJpRNVfF62EJS/Rgrrk5ksdKrcxeciw7YfHor/KEDDPGg0Db6/98mKYjL8hJQ==","signatures":[{"sig":"MEUCIQD5ptS0E7aXoQtHrBD8rUDE/eQQ/ZYahtfz7bf+k3a16AIgLOtGRBoeB9LY00K4+5iIDAKr7sNLuYlVMJZds0cf3zY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+/iICRA9TVsSAnZWagAAFK4P/22qRpFH1uL7LumcWqY/\nlYQsKKcVwD8aqoh62kbhA+7R7N71qvEkFuM/lo4pPCNYgcRGO/ygoeNktqLV\n06vpaJfqjgxaCTIDhYpZgl4rLNFgMhMiLPqn0shIL9X6+HBC1EJZdnY6NDNf\nFbpZQekvrd+4o8znmdpQ0wIqYo08+eNNM/IBZhb28TXJdoQhT0olUFIZBitB\ny9pAwycRxvkbJfqIwRfbZhd1erqWGV/ki5zRp80THteJbLrv1m9F0oil7nmL\nok5xdz2SKiASRKY9aqLpEW+J2te23EObMBaIU96ONxU8P5S3qP+cbVNXC4GR\nK3Mwt8qljFKMrwCEjf0VAPImU3P4G0tjl8TYC+gop+aiNFKerRdYw4edibjj\n0IORGvmgkahmd4xB05rMfB0VoWo2T+2G5sAR05fXHLxL4c0Y7apsNAPJRh/Y\n5aFEAGLyISBcluwlI4K3K3jK/5WUalddowzmyJjNHPERIzwj7LZ1MnQvhec0\npGv8LzwRAjrPvJjqGL/mnXH4q6bvsWlKnrP4oIZcM+h+UnTdKRrHq9G8atB3\n4UAWo2qaC9Ny+ujPjl+hIO4W9PGKhpXaftHZ7fAfkD8KCcq79Ti1VNRthQvI\nZSvb/httByOdQH8960Fr4RR9eCigt5xObePqiv5HQn3haG2qGzFS4FDp0O7f\nYNUX\r\n=g1R/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.d2ae6e17d.0","@material/theme":"5.0.0-canary.d2ae6e17d.0","@material/animation":"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-indicator_5.0.0-canary.d2ae6e17d.0_1576794247773_0.6332964369277561","host":"s3://npm-registry-packages"}},"5.0.0-canary.ba30399ad.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.ba30399ad.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"21e21775ccb7144c82efe1ea3c707e0a07b1c543","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.ba30399ad.0.tgz","fileCount":35,"integrity":"sha512-SVvqtp28A9hRGBscsc2XDRrYmc6GODkGqk8lYF0fE4yb8hHvGOL613GGtx++h2Rm/z+WFv1CHKw+OQEiuLLZzg==","signatures":[{"sig":"MEQCIEKOZzTgRYrqrzLc5jH1y/QH/2bIBvZaVsKnZoCBNqAvAiAjzEQqjur+V6XRwskvrY48jm59DZMjckkhJtGaz9nafQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd/B9UCRA9TVsSAnZWagAAysoQAJKXHp+ZQN6+cKPbCq7m\nyFIoeMsYyy+EBfIlZjkNlya0sNIis0EukwrEHaPOifUSi6eFRnQEj3LRxUiJ\nQ2VHNkfSUzO0KdE84qyW5vB4ZqfjKMHNg3CFWmniu1E+ntZfoV/294jpl0tT\nqiqJ5lv01eidRuNUgD6in/2gynIwJGErlwTexbxX3qBMhCSWAQULH9gDOUx/\nfItq1VQeJECXRvmg95yFbS7gt0X0Qv3ZLalxJ1OJC8OdxEiVBuBq8xT5jIWL\nYEZhgxJUVuS3h3UZo2s6VKzeWmT6NtdzLCEIy5a57X92p/55qHt8XeHHPGvn\nit+0Q56EJIMA/HDQJTYssMi7lnRZwBIMq4ib8MJnYQ8U7Ek4ChF9+gIioTbe\n+4K4k3te1VlQgj+WXaewawoeo9f6jIGGkFyUO2/+SQI2asInH42XeBrMl2Q8\niLgo6fvbwTHGazt0gV2U+6AhuxthvNITALhr3k/2BhvmfR0l7eaVmPJhUL1z\ntHNQUiuaGw7M1zW4r+kA3EjdAdeVd+/w1kyCmBMZ4anvy8a6NTKPI4FJguil\nS7m+7xBK7UcWpo7m4WRYdf2jTcPf/9BS1nLzacY7TGxW0mpznLJH2gTk3rVf\nLkLK5KSFtCxPRfxA7qhaNomZwXER7CshwxQTqqEKVnA+uSVlo/y19uPkyp4z\n3n0o\r\n=sMf6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.ba30399ad.0","@material/theme":"5.0.0-canary.ba30399ad.0","@material/animation":"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-indicator_5.0.0-canary.ba30399ad.0_1576804180135_0.4510445195932484","host":"s3://npm-registry-packages"}},"5.0.0-canary.a08ccec35.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.a08ccec35.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"8f51a423def6d13c1e5f43ca52c072cb54f3c952","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.a08ccec35.0.tgz","fileCount":35,"integrity":"sha512-conOsNImyJt0SNR6mdjCGGQlfra+wuIxs8+CwrhlWVmE+HUjPbnazUR9kL4v3B2SPmw4vT0GtiKt6Kow5eox0A==","signatures":[{"sig":"MEUCIDRVkbPSlXyF0EwBakWhEw8DSvYiH8wV4W9fTHR2Lce+AiEAo8S4wA8fAzM+YbH1ZN/jK1fTEAilylyGm8qpck1mSjc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd/Vi2CRA9TVsSAnZWagAA/8gP/3LZRriP2XMYRDJloOTF\naD4T1Ix9jGr3qvmSDllieckpnSkQXtCpDY3UNQZjai+FJv+aCdTUXR4lDqCj\nM/GL7+a6n+mXmo2pq8CnKoe5as5L0Xsv+mYdc8LKN8emZkY0639nHFUhNalm\nq4ucNixOH8wU2g1ggQkP/AaWVNCki26xS/nXg4/4OX6cgkCzmkSgmLmaES0g\nr3O6Dw0SMTvaSQmyjoQU4WIuIeE07+GPXnImrGcvaVBUIcQCTxIbmg17X9n7\nXeDhK9vR7l03oHZRIz3QLYSYRDckMkqbrubHoYtFE2Jueg1yUeC0amRp8mXh\nFrvEpB4K/CrLRahkU0bAEamtb3T9zGBIXSLUxyFD0tTuAUFhuikg1RgoEwD9\nzJebzUX2tByfQHb7KNP7H/74lJmrMGzifCRqluM3+KM/7tATygdDzNXeaBT4\n4RPTNgqFA/EuP7qV/6O0jKcwLAbctiWmRSFg1BLg9sFWw5vWulbPcmWOnGtH\nnRwCsyiBil5uEvMytQisHny3OeaSggIIKX9QsR/TanXOLntNMXiUvByc3XS6\nFwjn/w9Hf2FmoOfv7vguTh/qURS6fDvgz0t2N1R39O0Cx5C4AgYg0TF9TnRl\nQKKcpP2Auqo97iEeauzJSceEB5rMJCS6LBH5KK+J0eCwjFlk0o507j+ziL+0\nrvq8\r\n=qJqU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.a08ccec35.0","@material/theme":"5.0.0-canary.a08ccec35.0","@material/animation":"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-indicator_5.0.0-canary.a08ccec35.0_1576884406103_0.09078122387850307","host":"s3://npm-registry-packages"}},"5.0.0-canary.a2f75105e.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.a2f75105e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"a8fc8f64df6393793861b3aed3f96284a8072bcc","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.a2f75105e.0.tgz","fileCount":35,"integrity":"sha512-tJQyPQpk2Ec4l+vBSdeY7tfVLEBneMLKRMiz0izwy7ILNnaAZ3IE66Jgaa1MMbM5zJHfxYzw+N8E7q1wZQp/dQ==","signatures":[{"sig":"MEYCIQDhC5ApcpaGa+k4WFJ3J5mbw6RitilurYXiblLbCO16PwIhAO9I5kI52njE+Yg3M/gEqgJ+NfpJpCzKCIv2VrLu/MOK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeARnaCRA9TVsSAnZWagAAc+oQAJBRwEndxxK/Ukv4e02z\nWQPfVP2PgZ4lrkE8GlqeY3dGN83GHRYHgq3faKq+8iFROuHQkhC+uh1OVdpG\nGGEDEZ0eo25RNpVPmd+o4G9/pOLLsnxuKrjuLoYD1AmTZtrp5RHZI/sa506N\n7aAYGe3mtPmLcqmPFU2MIcZHkbRmYkq8oHWv2cLkNGAjaSIGnmO+cypVka/f\n3e814rKX0vL41R5Fv0Y/PZzkgZlQbMvKZM2mYCoS2aiqbU/xpRHVW5VtTHun\n3/HbkoH1hdLFRUas51g1w3weTWi1OdzMqaePlG/gXlbwNTNc/c1Bd8hNLZMf\nhSBXa1YrQ6HIEP8FIw1Y+3pzt9dC4863JwfJbuvHxPzJTjsw485NE4DOTazL\naeoXBOzk3FhjRj8FuC5IkB3D7aWwyhGyEnBiOISRmYtYpiLr2iDUZLL8dTvK\no+2K0TQgBiARp3oyAPODWEI4ylamC7xJoFAFMl8nKr4KZLrNG6UfePHT+TKj\ni9ok/Etyp96NM0WpqsE83UBC5A1tkCxDAlDkVDNBXOBGMolJ59lUEuXc2GUE\nbdeUs5crTT85Pp8j8Gmpyua4aY3GsY6DHyuRiJlL9SIbXEyuWLNIgt381K1j\nZTPXNtWzhOh2U49+jdPDjhvVf4gd2w25ndEDLBoRHJltF0+rYE4Bx5HbtN/F\neoZg\r\n=H49q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.a2f75105e.0","@material/theme":"5.0.0-canary.a2f75105e.0","@material/animation":"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-indicator_5.0.0-canary.a2f75105e.0_1577130458068_0.8229015975483969","host":"s3://npm-registry-packages"}},"5.0.0-canary.c054a24c7.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.c054a24c7.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e62fce6ab60e4361b4e6c4f23114759a9d97c142","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.c054a24c7.0.tgz","fileCount":35,"integrity":"sha512-dRlC8FVPOIUWEfdv9ILBOqUnModhVHs8orGPuKhIKHIfvrjZIAktM4jEV6XyW+aFAgJ6bKV112NBKnBRdUPIZQ==","signatures":[{"sig":"MEUCIQDLbIDltLVLnnPuUN+jsOp5ISTin52Mt3xNsNbMqXU2kwIgZ4tXJbUndfeodFsAo3l7DIzA4KftDRbA1o8lKIFRfgU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeATaFCRA9TVsSAnZWagAAx2kQAKRP+EgEKMJqnhOGdtng\nREE4K+jPjLTekfzAmSX3thaOw2gVkyU1zQqYXAItq6NZ+Km4aZMY8gdRnt5Y\n/KG6FsaYE72E8Foi6RFMxE7qmtjPlaRjUCw5pjFlQpEk2PfmimSSxMkaY3Qd\nGBIJSWvebrFxFMt8a33P+p73c+h+ZKOdT2AW52sLYY5WYFGGF5qQ8CWOnSzj\n2kTy91aKUFvl/TEcRPoEavwLv4jEyskImOIzyzTREJbQmYmt9k42pGXWRC7T\nCpMwESho40BpWAA1DU3gXQjVZiQnoK2Qg/+zA2SSCC0mxTf8QM05RDkKvir/\nKdPOdnUCid+J4GHOT7Bcq0TJCKpGhpo/2cd/vrIV4/rH4+ac1cPntySzAZDI\npG9uVHytZ8WXFKR5djz9hi7RNj9+U3Ua4gBpyg4dutGVnskc5nsfKmkmifp9\nkgzWR5gdRKuK6O1VHvZWkS9vR1++EPXNe1HxgKrYyX54a0fgtYbabRNrX1NH\nmUYTnmkQlzzBq7mHAEZhGi9CTY/iWYj2G940lniPHJY87y7U+Yy0ElmYozR5\nHwHbA1b0/bi7sqdtY6kBqquyFCvYJvGzhrqLFjcb9tFWPpWmvZMMdPSwEPdT\n45+Jiikdx22WNEnyUz4D/wwxvEWFN8DeWRKNhsap2p+tkDLq+lA+LetGP+ba\nfEwD\r\n=K+Dd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.c054a24c7.0","@material/theme":"5.0.0-canary.c054a24c7.0","@material/animation":"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-indicator_5.0.0-canary.c054a24c7.0_1577137796988_0.09848686473571644","host":"s3://npm-registry-packages"}},"5.0.0-canary.c6808c51c.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.c6808c51c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"bff7b63a9d8145d04ac8358d237466b549a65934","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.c6808c51c.0.tgz","fileCount":35,"integrity":"sha512-Xj8N8dSue3TtsYzAVGpOG3VuMEmwh9twHGTxVomIQ4G3uAT//ffaRRKtkvi81f7LLKIl8qAAkUpqviMELc+F6A==","signatures":[{"sig":"MEQCIAXQJpETl2MvY21nmLOc/2Lx2q9uweo0W2mLxSOJVlFWAiBWuPzZVi/GSyh4tkrnTBIjf/HS+dHMaliWbAYZoP95NQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeATeeCRA9TVsSAnZWagAAiIoP/1c/e/Gens1d7BD+L9gT\nzo7EY7Yw2e3gM7ykg/N+aCj/hWb+DQDnvcnVs91yNT0WPRor06jrtcliBsGk\nW2bICB7NS4BpELWCJzl5h+/kWcZXBq1Kgfv3SY1v8DTx+wlkBdtMjyFL4x7w\nHY3qjQuIt5QkgPfye7G8Mnp7iUDOZfbQZXZX9UocEJvIeqWDvSTHN6HJZL4O\n0ysqR7R1CkiWxTq9HzPgKYjVe/3yFJGgR78XCG0SVblUPawyD7wTyVczt7yS\nRvVARbAAmJia4E8WTE0J8fSQigsoSlQKUcx9F6OUPyCP+YGwDGqvW9MHJ9l6\n5DhovUq8qxWdRJvQCnRUBmv94YQoQaWiS8IezOMqcEoBVUDFtD1NChiH24/h\nBCjLtPSx/22XAmcN4vUF/5GcfHwf/XpLRZqs74RIReODlSjDv3Aj67Sbd7DX\nsHAUVfakrCplP6oWBiWPqBbZoG5b66SSEEmKQHuKqyoKnJzyQD24rXtZT7c2\ni/sONVFgRNkVlTlQbQ+cVcFDwETyIPvSmX0wvHfbjCJB4+3ysCngv7CniZyN\nmrFWhn7KBdaHXWJMlxFl4Oexw2ZKttNdFPgV5d4TYg5THo/y+EX5yQPMHcXL\ndeETTr/FRJYzXil7sFUMRHWWyU4aKtdDN7kSQEfl4yGEpEtHJNNb8w1p7It1\ncmef\r\n=5p0o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.c6808c51c.0","@material/theme":"5.0.0-canary.c6808c51c.0","@material/animation":"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-indicator_5.0.0-canary.c6808c51c.0_1577138077910_0.002573868616496666","host":"s3://npm-registry-packages"}},"5.0.0-canary.7bce9cf77.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.7bce9cf77.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"3b71b7e459fae1ee7af25dba9aaad9e4b601a3d4","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.7bce9cf77.0.tgz","fileCount":35,"integrity":"sha512-yjN7x2Th+HPXsXOEMxrC+hdBnpSBF1Y5Us6Hq6+oHIVmXIqShMR0BsgznxZOVYBYL5n97JiOlR7GFZeqisirDg==","signatures":[{"sig":"MEYCIQC/PuaNfJKqJSeXoTP2o4P6PU42HAlnZ/eoyk6wHA4aswIhAJMBtNo2AWV0jF3twUOJcz7XdW+Me8naWUvV0dGA27/B","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeBP/MCRA9TVsSAnZWagAASkEP/ioqelVCC89WKHMr/qtm\nyTKeyVap86BvHLx0OV23q6z6S1wPTjye9gj63Idt9GbHXPLd4UHWSKaWf+Qo\noOjmQKGQMtj3BD3fne0qbfPX5HJZYc2FQb9lZ/G0OHmmk95Qs9rmq/cY2mby\nL2wcDUVpjGR131UzAW63vVE7ZAnPoFjq1D5rarypWvCYC6UOv8fZ0v7Blh/5\nFC90j8DuDDaaxb0vBGx8fUoEgsAUzP2oA/L3q7zm6d3ZEMFGAm4NcpdZF33n\nOv2cFc5lwxhiJbijNcoBspLaBQqZDFYxJpit+pSxGNy371Y6goqbPwR54sMb\ncqD0bhbJkWhJymKBIOeoCyF+u1TfqS4HcRdfpVC9IcfTEanIaehMdsiV/oGK\nWfSvMchKKk8NH3ASCUaVfGO74/pabX38hj0QJWQrZ8djA/2IuWCKln5MmFHt\n5CiyaZB+ugvPFXl3hUhcs/EfDygVxPi6Xt0lkEqKy588dW8y31Yy3Xc/n9O8\nP0FASc8DK4RddrYUN1H2RmKXRTRRmGE12ckmzeaqYqOG+KPqXFXAfSP+ZExr\nZKzHcot/Dryji8vVfwX8fb5GtQSjQyxc3ZNuG2J125LkJwML+zUWR0/LKVUM\nM7BoPRuP4CcOn18RtHTxHvWLNGRZcSEOBoGs+U30k0BhhS8/EPyZCHth4WFE\n5WMY\r\n=xM+Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.7bce9cf77.0","@material/theme":"5.0.0-canary.7bce9cf77.0","@material/animation":"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-indicator_5.0.0-canary.7bce9cf77.0_1577385931798_0.9234848892349032","host":"s3://npm-registry-packages"}},"5.0.0-canary.c92f038c3.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.c92f038c3.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"bb39ece7af178c9280d667a80f27ea5779c6f61c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.c92f038c3.0.tgz","fileCount":35,"integrity":"sha512-cgRhuoAkj8K3r6U+k6ssYnoekOJx97LsROfFwGPg4TbVNW4JJOfxxoGw3qvmTupg3TTj9jF+bZYY/YIUjmTA6w==","signatures":[{"sig":"MEQCIBbcuD9sBw77wiWMeK1Ni2xShOQLZKmhwXp2P0eSkcqaAiBgUnQHnZXHrWulNX8lAhxfN1O33mNdPu/sjFQzo+91MQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeCnQWCRA9TVsSAnZWagAAJeUQAJEH/EFMn0bsKczt6gxB\n7SR5qkqLTIeW2Kfu4wgGDnuyLnx3+CJvO+IovXsKlVoTHnU7BAZg4uFNiTL/\nJ6Ij6etDhRU4QCbFPOgFzn5Xjryj+bdMySacS4n9HZmKSv8Rjoq+Lb/SoahY\nT1IPnIMmPLJ+3O38lH9UQANdzxOxYwfueRDtmWDCpzBLE2afO269Y+GayK/e\naA9wuQJ/kas+GxvZHYiif9PGuZMYKo/pS5wLmI10WRf5sZ+lNlwPNNjVGmIF\n3T72WZoh0HrEJQ6fyZrV92l/utotCitx7yZaF1Z1AxuEgW1bQht6UuYsjjaZ\nMm8d/CZn7QFY1Uvzgu9fEDz9ZRNf3ZU4car3jQIrJnqohEiCRWy/LrdMTlnG\ntMF7q/+PHzYAhEmEK8sIhk4yva/JsVVdAwfa2635yFgpJfmPx8Wtc21AabG5\n3tVcbj5RgMmT0DvNrq1jKm27PYn7znZY3grCyPMDVQzMg1E3TgobR4b4J8MI\n/dsvn8/BByxoPhj2kjWtgMzO3F3sMLlnacTEtG2lRpzm0hWFTwQantKO1I48\nEN82QNxopZDANh+KLlR/3G6Y6Q8TaofcGvtI0EwR+DAT6Gxnj3htq/DKXIvw\nm5gkA2Ee++YKqiOxBGkXH5bSbSw/5eu6ekY4UPnrhmtLjKXmHQPYZvjFzyc0\nz6AU\r\n=R41E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.c92f038c3.0","@material/theme":"5.0.0-canary.c92f038c3.0","@material/animation":"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-indicator_5.0.0-canary.c92f038c3.0_1577743381805_0.7204358953873251","host":"s3://npm-registry-packages"}},"5.0.0-canary.1f1ac7558.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.1f1ac7558.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"3d70147b3d77bb1529711d6fe4a56c05b7fd3bfd","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.1f1ac7558.0.tgz","fileCount":35,"integrity":"sha512-DDD0Lljjlr99OGCjhMfLfCwA9D6yeDiLDQ9OIwhaX3KkAKN1Sn+sErm0pF2vlCcwH8mJWZqCjTsCa5lxVe1dmg==","signatures":[{"sig":"MEUCIQCDzLkFrqHdZpqBVdbR19Ups0EBowpJBihMIpcG9hc+gAIgH2umIEmgaw59Tafqcqbul9UaXU4CJ/4HBT5VZR2mlwg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeDlhrCRA9TVsSAnZWagAAYqYP/A62DrJSzVKDAPDzhcgk\n67uqlXetT1sGilfALYXwBK0rfXnRccv6ZSw98St6Cwm+/hTGTevW6r4DGaye\nIM/AlGaEX95P+zMwoAg/IYT7vOawUXjN2JnfT2CJH2UJoHKqj2yAy+/CKdKE\nbDwCzeKk6JzMLLTdcJPRgyXqsOSkxVjVJ6aQjRd/e9/Nyh76V+cJE/jHSm5w\nyr59VkMsPzg2Ty74slXTxgnXKlYnVnD4msuj8l5EsL7uEsVIp7S6E9cTP59S\n4yhbdMILJjYy/JD90G+vG0M+UwiTWDqsT3zpKfMm7ALmFyV/UPS4G3Dk6En2\nJmjoFeA873eKpLtKkU4/UnCChunmK8SqSpQjEvtN0Rwwf8jmnUqAoI2PabUX\nGgZoGFNTo99efJKchnHOv3jddCPSgHDNtyhIi0UM9lzvZJg8MfVIAizu2AJm\n0BCZiIgenrDfbS2JHjpHsrGTshDME6Elsk+NeOF4qO6Ti2IFoEjiQhwtHqow\nuMaTDwz1RuV+3g4YrthIcr4yHyp9wqEPyY+/qGMvjA3VREdg5ZVg3tUuqSTx\ndD+T6v1fGKTvSqSt+rAdBt17ieDNzBda+QxXmW/B7eayCMPN8NkMdqNj48XS\nJk0tRFzL/G5o7MBtKrRsE64I9uNU67jdDd9TS8jpC4wbfewY45bAtOSU2aY1\nm87E\r\n=8YMP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.1f1ac7558.0","@material/theme":"5.0.0-canary.1f1ac7558.0","@material/animation":"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-indicator_5.0.0-canary.1f1ac7558.0_1577998443517_0.6206459803655511","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec26e799c.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.ec26e799c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ede847432116673c8603d595e267b3460aa480ce","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.ec26e799c.0.tgz","fileCount":35,"integrity":"sha512-z7lwsgtGb6nql74vvFIAverCvyJlT28uxq3T7ReXKppLpXrEjFRvbJxIXzzO9qOStHxZ/Kkd4pZAp7DlzUfQ2g==","signatures":[{"sig":"MEQCID6p+1hkl8xWmAGrn68o9NLlcn1nlgyDYQM8AIUUKubCAiBmmdJSgXWJ95dhj5AGSe4WlXihNbN94bgISwQJj5dlfw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeDmO7CRA9TVsSAnZWagAADzEP/3mkWct4fwXigUN53dEQ\nAoRhG1gQVUjXf2Z9c3Y7+wOrh0+cF7s17Efp0TNcot+tmGfSO2kf3bn+q+36\npg9AlcYnEPTg3/ov+qKPT4zoPkSnxt6LaXees8BHulqFKCBCmSEuZ2TpfRnp\nfTAUAU2D3shdapr4WjNVNBLQ/x07D+wMXrBlbBiLg+R1feYS4VfkjAZgR3X3\nyXVlTRpMnwr1KYSSxkWlqVdVB7btE14qQRuNVzO/xX0/mcODp/5Vqy8dGnyX\nnUqqr68WdznsKozbOoyL1q93Af0g7O70pbQWLMsxHt5FTcG+jQq82NXSCklO\nku7N9Mi7rYskIfq9tyx95Co1n6hzjwbwe5Qh+7fpwMzHJqd6EVIY6BYxGsWX\n0cI6Pj460YWRYeUex0IXhjY/RMkhXER6znidbb7XtKbKiNgcHJ1rpeKXLx0x\n1+2d7lW+421DovZBEVnGjslAq5n2yRFfYsdmrtR03TtYmnqwoYGTvFrM45md\n2B7zGzzUUtspYE/A06MPe7ekf249P2hZpkePS9v01UH2NwA5aIRUvkAxaXQY\nIxnzuzNVXPqPdgD/ZfH+7EQuHT16iUczsesPzjxdbRWDPAAsC2EbeWu3/20n\nkFZJON7bVtVVoa9gEBiJZf5G0XU45o2mDU/FYVwTchkOnDaz5e5+Ly7zMxh1\nGDtw\r\n=f85D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.ec26e799c.0","@material/theme":"5.0.0-canary.ec26e799c.0","@material/animation":"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-indicator_5.0.0-canary.ec26e799c.0_1578001339641_0.8385183120231223","host":"s3://npm-registry-packages"}},"5.0.0-canary.0a40ced40.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.0a40ced40.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"7333004473a3c2f3debf0d6ca1f8d3b0349684a7","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.0a40ced40.0.tgz","fileCount":35,"integrity":"sha512-NZPdOjO3Wemlb8T8lJNpwpfzIKJQAEl6jCPo9d38Px0QCbaiEPwPXeYUo+IN6p/Gy6kKfmioVWkhe7p39FOamA==","signatures":[{"sig":"MEUCIQDtQwdSn5zKFqDaVPw3hJK6LZGr+w380+gi9UHNnxg5QwIgMzUx7adWZxm9fY86xwsk4EVaJuirIH6Uac8Icc3TKrE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD3VECRA9TVsSAnZWagAAr6cP/j/G8eolYW7Hi+l283AH\n02n7TUEV7CHUpmWv1ouFK60aphMfqiOfbT3Pe5SBwpot65y6uwuiPsi5ZDlV\ng/6IQJrnp4JBaaSRECqbt3KIkHNAB6T1XrYCKoyzivStXJSBIQivre3/8X1d\nStSqrr+pBUbCoEG0X5xOR5t1RyfZbw5dlIbK6pq4dW5+/ojN9vEPCQM1OPKs\nhMvc2kD+X8f/25SJ0gXs1FXQinuwO4t//5yXWR2j7g0Penw0QxrcTunrUHd5\nVLA2vq4FG3mR9Eip3RvekeSl3aGMtKAwr1l9J1mEXU+gF/7wn8g2btKB8S90\n6FPKs0B+SWDHyenqpq8L08mJz+vj1tO+E18rPlmF4QYbfE7vnXdni7CQ3i8g\n9teVzD4z0fw2/VtRYbir+35aREt5ZnDK3l7gnlPguDLk/pOHMm3gQw8T8p/0\nQzkYpFqdvUglnJv2rIsXul8/6q6htMEJw5KbRj1V9NuRyFCScWwRatJ3a1Kr\nf2o/opmhP/DeXK/zKBlrZfquJloYggru4GIGSVUmPBn9QrGoOqaEoMHrXGdq\nHU5XPnXFI1K/n28G4ZG+56laVQCb4ov6H0l8kEvYcGiy5lrmIrf5a6/LYhFj\nv3M2STbfwTNzZz6MROoh4wWW1DKFzLJZhXto82G5QTlgetlsnKwsyv9im976\nucZe\r\n=rQ5d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.0a40ced40.0","@material/theme":"5.0.0-canary.0a40ced40.0","@material/animation":"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-indicator_5.0.0-canary.0a40ced40.0_1578071364161_0.357683757074047","host":"s3://npm-registry-packages"}},"5.0.0-canary.3adf84899.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.3adf84899.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"cadba5ae4e33ca5a76f13420383a6ee4293a1a46","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.3adf84899.0.tgz","fileCount":35,"integrity":"sha512-0G2F62Rf+TME5S7dD2Xj5k0M3dxqbOcQTv3ShRCH8RyGCF3yjlqVMbnGKPmqbgwYBJlJ2rtD+Gz/WKj7fuA9Vw==","signatures":[{"sig":"MEQCIGQXycY846cx/a/iXOCFSitpalTDZzWHvUZzwpYJBWreAiBHNK82m8uboOtEYRrDhHgCYzRWjNf2JYTYGlK8DKdncg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD4ZdCRA9TVsSAnZWagAA65QP/3t7A1gxhwby8mmjqd62\n+P/vyM51UzdFgeEIy7l8ntP0x/w86W0yHl7sZvJeF+c3NoSZFJoj6dEW2DAT\nhh9pxWxkhT1FHWPnSFD4fIlKP6gZMaX9D7TGCKaB3xGb5UNKRKHgy93vVW2o\ndCuUvrRLOUI+/j5R08D2qPcSJFjCquRqtrMIE4AfsBN0bhR9tVbaXvpuvA10\nVrih7iY/6jkhOZSy2E/R2aRzB79LHQNXsTCvtFFVzWfDjjvO21I8O8UfC0Fh\nNDA8gGOMxJjAiKyn3+j5+m9EMZFuzmqXVvs6VthTSkJQdkf4MITSTF72NOKq\n4RpjtackGrTKuc0E7NBEdBHaSlLiBIoJlyK0T/b+4j6tOk0I8rhA37Wp4L52\nNrOW/FpZRJK/MBBNUugmbO01ZzFFT1bc0tur74M8TkgPEaHWqU9KVvFwJ7I+\njqhnZ0yD6qyVsRkzCbvI/iF+CVUK3rI5qrO655/DjW3pFaMSMW9k5Le52zS+\nUsY1BqsEf/OomUBqJzQSoRjO/WeHIzRqB8z3FkwYajB7S47NuBu9Eqvd+Zii\nAJA2QgpZUwKTXTgCBEVNvt6Iyvf6WAI9RCUjhjASXtPLBpPgJA8Vq0r8uAdr\nBpp6KU/wttdaUSuoaIYAdK+A2KzI0FEC3WFMD32wcxIQ8ZrK8LDPM5dov0V6\nE5GO\r\n=aM30\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.3adf84899.0","@material/theme":"5.0.0-canary.3adf84899.0","@material/animation":"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-indicator_5.0.0-canary.3adf84899.0_1578075741416_0.12301184218374117","host":"s3://npm-registry-packages"}},"5.0.0-canary.0d42ee650.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.0d42ee650.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"9c160f91c8afa918d516df86e0cb245ff837ddbd","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.0d42ee650.0.tgz","fileCount":35,"integrity":"sha512-VngGgIOJ1nkG060HMKpBC6LRKGcktKsL0KauBn5M+nuB/TEHwg9rDkQHfjcFMECpqdKmGR45kMfm5RDQt4NrfA==","signatures":[{"sig":"MEUCIQDhCJ6Tn8c8ggem6p154DAy3snq5Fc2GP0nZKoTpKBXawIgXj1mzsaaSvK1HqibVxS6syDkB8lXpn7s9HmimajMkQo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD7P6CRA9TVsSAnZWagAAFn8QAIqlzFQPIuRJT5pAQUMl\nJtxBqEq9lqqDeRJ1PfDOuV7icKRK1FQ9pRzMzV5MBNJW0ljDLmJgwJaCxgQI\nBcJP3hzW70ujF3zWllUXZ/PBFGYtWXP1GuZcViedSc9LtWExgORD1i1uwsw6\nXN6WRmSnmhz9fXZyYBozuoj7eGC/Ico+X9Hmj+y+Ee9WbOn/kTNTe15njwfC\n2hFX84segtL55CGm6q0+8bcsp7yoqJSIzSRV8bqjsB9o8dxLIROoLlwjh63/\nFlmXA8PzOqWfWhu/CqoWI4A/5QJMsCUXRWGzxULCMPMKBfE4DmP6JnAab8mr\nSw/puj3MATNLh9D9uUL0Rg8tfFbAFB/ydsLTHultATGqgUUVA9sneWTKWmx3\nPPFeKW2xCFrdDToxEDPSXOzhPmtXquLRbpCnzLDUtoa7HdRxueMdGTAwSR1x\nexKgC3pxh9dfraVBaS0+pHD6qaT4/aCzMGzO6B3ajICmp4cpDMeyhIvDzPM6\n3CsWqnBOAgI3RkIlO6v/CgzWRpkXptQM3JFr2fWL8RECJ7vHcz7hecIn0dp6\nI2SQj6VVX2qwqPhNBs9u2PwbH/rS0jQ3KVqKiGYxnnUoZfCHewjPmGz56xc1\n4tuBF0otHtwHAGUpamu0YLBaakz9CTMRalGvt4fWeVf5vgASXjesaVKLafKO\nIpa1\r\n=9gOQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.0d42ee650.0","@material/theme":"5.0.0-canary.0d42ee650.0","@material/animation":"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-indicator_5.0.0-canary.0d42ee650.0_1578087417769_0.2740617901377673","host":"s3://npm-registry-packages"}},"5.0.0-canary.847dd1ada.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.847dd1ada.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"daac6707af868c85e91e163354f83d1dbd670d91","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.847dd1ada.0.tgz","fileCount":35,"integrity":"sha512-SswJl3qZ7rsd3VQG9Z2F/oeL6lXd8wUJy6icQJiIbuD2yM6237Kv+O6v69q55jzr4KbffdB+w5bs9ZUGwP09dA==","signatures":[{"sig":"MEUCIFb8biV4xpzfuTzpB7DbNsm3y0QAyTic4m1P3O2xQX2eAiEA6HSYFyKVHcZSa1Lea2SqDhhnqH0BVdpDiovRMPgQE0g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeE4naCRA9TVsSAnZWagAAm7YP/iyiezcKYD4ZnrZVn4BP\nWDWG8SmHRerJbUb1vlH9ZHg6kjBoQQRG0dg+8+pjjeBzfo4NO0XxlSczOB1r\nc4uYdMsOlVRceQjI3pyL0yVgBBrI7aY8dIgehS5cllz/Pnokx+ZnjywI87wU\nBnmDFEHbb97uN+V7eVov8H/Z5uJ6YPPcN4FZhdZ9lQoirkgFKjY/B8XVBbJp\nVxcUxsHUSWYGEBqciHpGqBiwssV7o73Sq2EmbT/mXL1JalHkv4g//STXyb+P\nPqTo6Hoj+4q8qH+UWbwFdtYsAU+MQEmCAGwK0D6Z7eP4Thyisc8wYvh+/5IG\nvjAn8xLnIz2NEqPkWZ/37hjdnAO1RufINpuEiSah2G6iwULSbGJSZaJp8Udd\nGCiwDARZzk5f7c4NeqEi9KClpIaVjc6YN3oH1pN9MNm6YmZJ6Pz/hr5KRvO7\nZQonWJzjhnalGgbQ2MBymomUNdYQcwIcIZR9JYQ9ULrridvGewTuIa4DU3Ch\nwdagOG+4/q0qBh8MATvygT6DsJEzwc+RJqeW/x3Poeft9Sx2xIbpZHe0smf3\nfgIfsnO8UgVLGTidT1eCws10zJbXOK7H3/uj1JeWINkY9N4McVcnoltKZk7H\nCPGq02Q2esWYEJeDa9envKinPT8BTdNEvw+ySuoszkrW/AR3Bx0eAIXaD4Gz\nhJKz\r\n=yHjj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.847dd1ada.0","@material/theme":"5.0.0-canary.847dd1ada.0","@material/animation":"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-indicator_5.0.0-canary.847dd1ada.0_1578338777702_0.7045629499000188","host":"s3://npm-registry-packages"}},"5.0.0-canary.39df7e5df.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.39df7e5df.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"f642fcee771b0654aadefc61863472019ef91c98","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.39df7e5df.0.tgz","fileCount":35,"integrity":"sha512-vI/9QexdaSp8/eTqckbBgaiWD/3Q+04jR6gx333EuFXX+0wNBzN2gHvds9nghe6UcItNaKxI2IBnf1/GFd3C+Q==","signatures":[{"sig":"MEUCIQDhwFjZHckZmDYZAWhpNKIexKZT6AUAooMyCThXVBV8ZgIgBFzcmz2reLoYlyxvcf7zuQLBasTNF2z1S9rCq6dBqKc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeE9b7CRA9TVsSAnZWagAAThQP/A5HWlQsr6APkbjIRUs8\nnIjQeP+u02eEFj+nBkV8yQDVVFjMtSr/0BFsaJRQJnI7IFEXZIpFGnVN4Wbv\nkZOebTKJpgw8KnRuIE5m5IYvAE6CRQelsZ6D5uZJkxjkryqtXt5bVJsl3x7z\n0QJhz5Geb7EbuAfGx77grhCZ1cihCPSKUJ19AhCvlBLeurukjB+SM0SwydjN\n2YvjWunX7sRzprxnWZ0Lz6Om6FHW/uPlJMr2SMc2TXDBMRaKnX6VU+dX3ntF\nUDSNEuXR14yDe4nCqm45ZtTwLCjv36lGT0jP6RCV1CLd2lPXYDMREJJmHBQs\n+Ov3dmRgDcfz71oqbukUa3PpCnDeJkEf0PlpUng2pLYB+ro9tLBTRWrGChdX\nlT3PVZrZXnicqtOTsmi1+S6sBbpDjoGWyyLbhMoBHkp9M2rNdfRMSbQGmNJD\nGfSGXyxMqIkwZDIfOYpfK40MjeEKXxAuYOG32wqB22HDupApMpCkhrKyRG6G\nhXQFJdrp6Z+iAF90LK3GIvv5CDzhFfEuxMvk8b4/swqErKvVFlF3s32x5qIA\nanPSAAILd2E+25k+jLIdRLb8pwiasRpA1ZCJXj5GQtrwTyKj+c8YMGRTUfW1\nvoJAaWJ4Xq9J/lZtmu/jnTdLwQj0DWXtLenWQUv6QQ3WVAMLe9N57Crxa+Gk\nTnih\r\n=hMWr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.39df7e5df.0","@material/theme":"5.0.0-canary.39df7e5df.0","@material/animation":"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-indicator_5.0.0-canary.39df7e5df.0_1578358522914_0.4128616791288908","host":"s3://npm-registry-packages"}},"5.0.0-canary.f1a2581ab.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.f1a2581ab.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"2ff2d0211809de96e1aa68e85c73b329c3ea3800","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.f1a2581ab.0.tgz","fileCount":35,"integrity":"sha512-UaYPn712uijZJnLIhZAkv/CY24UagDAdw047bLSMDRHyRXYtOkYHY4mj5bO4dobl39pWcw9epM3is9tk4jxeUQ==","signatures":[{"sig":"MEUCIFE86HYCHAY3GWEi0qXUWvSiLnZzup0Vs8FDsaSarXCSAiEAtKW4i4qXkaggrjYtgLJSOlj4R03DiH0HmXmRu0ln70k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFJzTCRA9TVsSAnZWagAAvSMP/1LwJipBY1V4cx72CLrP\npRSJiUwlJ6O2d0nDaHPq18ptk36eZjmvTVd8CWp0zJFLoO6NQVf/4fHPm/Kz\nvjLpqyQho+QBZivSm0Y/ljGB3LuUV7iFTM2QND6Eyg6MdjymOLWFGXxUICG+\nTTtJfFhg0D8DAxMoEV8IuKIP38xYbmpnq5vw0OphwmVvqTAUYJUjEfTtZnwS\n15IMMKhu5YBgsp8Hm7xfVDlf63VJh4fK1FoN4d90Jy0UNTWwmDuCxbXO95A4\nElZe1RFw3NS+T2jU9u/iIijKVsH5tlo+Nn1t4rQnRCcrHvf2hsVXHm78ABra\n7Hu50/+cHixXSLNj8h42M2HDCUNhr0kKjGGxH76CZ+v3jREK6yZb6vdEUjIH\n7DYcffXngqIdhpL6sfcQyWY3gEkckpwov1indj4e0alR8p+mjef/UEVsdMig\n7iWJdhiIV2ExuM5zsq3Bm6/AWxaGM6DE5pEToDmUnw1SgWHdp4AklG8MxVtB\n6FASG2oUrAe1Wk9xu5jIDTY7slQvMC161oPjPpiaxzWnvrzkonXdpe9hWKvn\ncuTu9bNCEfmWUlXu1sdkOxPhmg3FIE1ggiQferTx+P3eRIj4SPcOZ3HTZmFU\n9PcwyUBRnx5nP1d2Mrbd9k0f+XRqR+DsQG+rGQWdsxkkg4rtpz0a0kTuv7Op\nEf2x\r\n=fkrF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.f1a2581ab.0","@material/theme":"5.0.0-canary.f1a2581ab.0","@material/animation":"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-indicator_5.0.0-canary.f1a2581ab.0_1578409170562_0.15084360059195068","host":"s3://npm-registry-packages"}},"5.0.0-canary.7c7ddf347.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.7c7ddf347.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c0e0a6ef42cb6b44fbb4f361b9cff98b25daeb52","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.7c7ddf347.0.tgz","fileCount":35,"integrity":"sha512-hXk4M/kiMbSW4ICEdwCjV88y29TDS83qOmKuhkHmscS6l34CJQsnMwE2Qf+hkuWGrsB1an1YLh0qwHhj7es7Sg==","signatures":[{"sig":"MEQCICOTG/bBbif5EbvSGV+43PsiOWyWMjN5fLitu87QykPzAiBX1ToutwC1UqUdAbAmtIET3kZjbCaiD7z0wAh+BkLr/Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFKCiCRA9TVsSAnZWagAAFGAP/jfdXG/hhAHow1j33pVR\nBPvMSX9XSc3kYgtqg7krZP6777qHEfAib+Pn3u+nJVdwsqQU3GwOtTm/5vBI\nhZgP8cpNM7nYcolEp3X/iSXSWoljwOJRwo4JKzxH/FgtYA3eRuAkzeA5orUz\nMiOTsi8DiBC7Utm6QIrkaQ6Qjl0W43T70qzkM78NyoRAUFhvXBvPi8zNcxE4\n7Zm1nr/tAvqdunUw5yP8xiIeV1byGx0n/h5znRDlfmctJfqeNH71nCfuk/K/\n9PUOjFgTxGAqKAElbH1Fjff/1Yulha6bYEEjUng9wofa5I7MAPcwQFKqsZjJ\n9PNNkt2nJvckZ1mqo2dPtAB6G1fhm85HWiBPpVidZF3HmdltDUg2JeD+XQcA\n2IS1eJjwK2F1cRl77PwX93l2N+qGtSZplPwkohuDnmO6qJbEIY+NNCmtgD9s\n3HWif2ktU2QbB1nSvzVgntmaoyAWnz1nYQJgvKbenqwRVq7FViNaWIJhwefk\nBZC9cBUBI6nVqUEdKKbmT+Ca73D9HHhBgkbNDTs0NiWgBwDRB6s9opJxwc04\nOcjtu8bjUDX3SWs5tExmj5eRWbTZIS70cZ4cpHLShW426FWhVGaVDl+agJHf\n9g2ngXPA2XDt6/2Mdw6wBGDnwS1tdN65D9WmnjmbF7GuLhPxG9SB7dIl5MtT\ngNeH\r\n=SGeu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.7c7ddf347.0","@material/theme":"5.0.0-canary.7c7ddf347.0","@material/animation":"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-indicator_5.0.0-canary.7c7ddf347.0_1578410145995_0.26567854454522344","host":"s3://npm-registry-packages"}},"5.0.0-canary.a1c84d4b5.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.a1c84d4b5.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"60aaf3dc7fefa795bd68548f50a248e727b90c40","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.a1c84d4b5.0.tgz","fileCount":35,"integrity":"sha512-EU5ygHZeXE6BqGPS2WExF2YiRyFlojHZarcJ1Fs5cPnfAaTZaNaQ43Nb+gwmjXoFDWJVcr6GDHbG2pWZmQep5Q==","signatures":[{"sig":"MEUCIQCqzi7bAXzmNXUAli41ZkJf6E+rVZUmXLGFvYHaZ7xRlgIgckRiKloBHRHnwS1clu0cNdtW6pxMi9tqOSS8kOHh9ug=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFMl7CRA9TVsSAnZWagAAZLEP/1DzCBqFPbSRPrOyqRAW\nvRHopdD4Rf/Z8G1HoX7Ki7i+e43LqCxo4ZRhR9WuYMJXmoAdhqIxK02LZDKa\nD7uGsYQwJfZzqhMYg1mUHSSEiNSZ4LNdBArypASDyarY1fu67mmvpin0lARM\nT0tITAm/76IZGhR59Nwe5Qw5heg40U7HmB0q8mUBnra7dCBmRCGsWf9WMZ8r\nQ98uZ+RRxFn5veeC/XlqSAmKZFRKNPaCjAlYEMP2vrVaRgdrK2Cm0rA/91Qs\nVt+mYUmmDNa68XnvFh1q8MwIBxw1x9cJdOL3wWlV3Qryqdy5oMuYDedp5yXM\nt2LNHbRtI61VeipyH3Uri46aO4gdjJ97SAGLFXVcSpaViQkrRyRh7YPCp1T4\nS0BhKwp6tmlzDt1LWvlVNguVFhpnbFVFWObOkO4B8Q+DJ1eo0Wfq00K6s72k\nJWOwUsNCmxhQ4rjzqpAwtBrBPeGzMYSPD09E/jUnae4pkuDsFVO8HXqtVEsI\nCdENCFPpo0B6P8Ku5kyb6YvOAQ/ZvIhbKDo5L1cGW0B1QZvfDFwaFnsQh8u+\nkSyF43JGMzv/O+h6jo2T7dJolxE7icuFnjV8zGzEqjk3ix3sYRHYln3YZzQP\nj7Ws8gfl5JQxACljCAmcTWNOdFsFTeVw/mgjajxuDQ6w1PsyGuU176WHNISX\ntok2\r\n=gd+V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.a1c84d4b5.0","@material/theme":"5.0.0-canary.a1c84d4b5.0","@material/animation":"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-indicator_5.0.0-canary.a1c84d4b5.0_1578420602753_0.5161557255833606","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec9f16578.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.ec9f16578.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"f0fe889030b725f3b15f37e5ca679ecf4ebbc90f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.ec9f16578.0.tgz","fileCount":35,"integrity":"sha512-Im9+RlUKNkRaehQfe5pfiKZMFwZZLZs3jP6RrUOF8X9I7iG/lRh1/+QKlIMImFfE3pa8YuKuaf3cKMjc6SPZ3w==","signatures":[{"sig":"MEUCIQC5PvXfCtrbQ/Z4CqteScVuZjlS4LvrrEwfjTZvYrMj1AIgS76r2UlmHEDg5bygpFRSmp7ZQi9yN5jyTnmVc25lI1w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFN5wCRA9TVsSAnZWagAAXA4P/iQAXn7ufRTLFC3wjDFj\nQkwwSk+N4rOHueZZfdvLBpBWB3KECDWzXJbUaAhV6bUThouV2UbQUgws4vrN\nCtY1SY7c+Cn/W/bcc2IH2Qdkx/SfRSzL1lJu+0hI1XZJI5PczcxJ6m5cML/P\ngLeXBqNwi9a8qGxj4lyGFJtO4zqncEW7CRKbo3PJDvGayV0MhCGP8WEMOCGu\nJ3aFWIFSBLhTmzWLuSyP0z7q/Tsh7eMjMeOWvOHvzaTRCEWT213vL7fuRPe2\nSd15F+DmT9esoqvx3wwZXYLLCLYKanKGp4Q0kJF0HlPNrMVT/D5D44ElyvSd\n+Bff6B4zArAaaMcGtInBnl9lFd/4YjJnNKpYd5Ep9GkIn5y2IBtb109uxcLr\nlQPKehTvLE65bmuPc/ioZekGSSul4af5vOGm1duHUkW9cYTUcqTab0swpnqQ\nD8PBRxb6KKfoFA/aR/EHM3zNsBRYw233KUdDqV07qNbXHWqN8Ubgcdd9x8q0\npJMPuQPw04mgONvF2La5B4g3ceq4YGGp9MFeZAPYt2uV0gTH4son+xsw7Mc9\ncFSjTI0k9tcpjrqnY25fEW9mK5Y7tlq1Yo5CTNYkq4nf0jttTxz3aGXyq2jY\nw5SiuLHmz+lhSZsyLwQeNIOAIyZA9FEHZ7CeVsn3RVrF9aXa5cFL6aCnGFBD\npMaP\r\n=UUpE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.ec9f16578.0","@material/theme":"5.0.0-canary.ec9f16578.0","@material/animation":"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-indicator_5.0.0-canary.ec9f16578.0_1578425968117_0.9133380639903659","host":"s3://npm-registry-packages"}},"5.0.0-canary.b602226ce.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.b602226ce.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"731d38f5bddbcc3b7ec1a3202fb5be27ce0a04aa","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.b602226ce.0.tgz","fileCount":35,"integrity":"sha512-7sL2d/RZRy4mTDLpVK2rnoNYIecVFrvoJIxFQmzTw5/yvyguKjDMCVYpnyr1C4jzJ5KZI7rr3uJqU/x3Ole+Uw==","signatures":[{"sig":"MEUCIQDHxxsTPGNU1vsLW3Fm71D+lFsPvVKxBfmywQf8Z8JPKgIgYxxTB6lgZ9XtqSL/SP0AhFee21AP5RLUy9vAFRa7Q1c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFObOCRA9TVsSAnZWagAA9foQAJdx1Yv+GZei9s6mxQ3k\nTjHU4nhw9PB1QyiWt2um0SsLioT5m+PrzSSQosE98McpLSii72Srm6WAAXd4\nF6cMP8KZ7/TDVDUruZqD5w4NLXhIuJB0CzDVgEgQ2MPdjJ4a0uqA2CHWFepf\nfBdwpAmNZqkNVYKcEgpOQVxOCA17hNXGR36aLBvTsIxKMtox8kC7x5k8Ayzv\n/ZVIZaFvwsNj7CyN2y6QyrcC0fEXLywHztBuPN2lFBjDEKT8cJ1kG1hPn1SD\ngZitleONDN0XE7qQIoRkWGEwYYCPb18edjbCYXi1I/aVQoakbSy1HcxRBJit\nbRLfbu7Lqme+3dxWWYmzFyC+m+LJW23GC3Gsy1JdaEBjCkfVC45g0soXj6os\nGHXAeo5MW+NJ0kqXZt97VJuxotCpYGuQrDMn1QRCyBGKlYCkcENiV2q88fCa\n7Xz5kwvMcBrsoQci2lR8sHA5rqLhAQmFB8RtQxYhTMPxmYni/kDwbyg15Xnd\nUUPEoe3obGas7C55Z2esFs/mYmiZBIlPRznR3U5Mw/OAnJniypsy/Wd59z4w\nzZ5sn6xE2CqBjbuZ200SUyLsJ/6Sf8QeO+3FBq4dFvzrrhE1tNg+xFkq+QpL\nNw6jrps207DtEiDKu6N2rcpzvK7wxK4BihF4kUYxu1yNUAUsMh0W4Z2c3pkS\n9f9w\r\n=UZLQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.b602226ce.0","@material/theme":"5.0.0-canary.b602226ce.0","@material/animation":"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-indicator_5.0.0-canary.b602226ce.0_1578428109634_0.1243177465219667","host":"s3://npm-registry-packages"}},"5.0.0-canary.b2d2dc08c.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.b2d2dc08c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"5b6f6e4d02eaabc1a520652931dbe8198138e08a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.b2d2dc08c.0.tgz","fileCount":35,"integrity":"sha512-a+7cGNUyGRg9otVI5InownKh2PBelaZN+kRXiiRGfELNi+YVtCVewN6uNB7adb5znhCB7waCVYEIleaAWmeyXA==","signatures":[{"sig":"MEYCIQD8cID4d3KZFeKjdI0qVp5ZLiv73zjxHcBV3IEuHwEw3gIhAIk/+WHS/5eyL4Yf6aZz27abEhU3OVTieWC3zY2YC7uL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFPdiCRA9TVsSAnZWagAACdsP/iQ5S6JhvKieR/m0Cqm6\ni/k0uG7+1z61VuVYYpc1DR3Wk0gIGmfZtSaX6ZSiKc3ealEbtqhn10ZJxd5T\n0wdp00+g/FRvCdU6grQ61IbYdXChyRraCI1ek/sbQycp1bWEVGS5+Ukcmx23\n0UlAloJJ/4evAw2DOIAZdCV/7Bt+XXliuXG2M3dU+tcrHogdeT0d71131kJ/\n97E26sT27oVQSMqPL5N8G5M+0GHFKjjY9vzEVjqfbaJu9jaf+S2+Ck5EtFw7\nclwgzGPLoUa02wVG40LiDEg+OK5LLgF2MUX2hyqjYnuOyAIRrH4NPiqTXcvc\ntBsbiomM9B2KftJMTT4fUF+sWBcpvLklsZKqupYO1BjAJvUhF1FgnxDVlnvl\njsdJo9n8B9MAIFNCw1Hy+EOh8zYpTfC+PWJv9L5qyd9zVGlzV3DWI533H6VO\n9n9s/OBFUgtdj/6co2WDkVPFljyTPNZtgYp+qPKHeIA4/tuGh1rgY4j5As1b\n94qKoUla7hDwpl2cUvOKmpvqAkFpks79EPhYcGB3thXrZVJY5DT7Q6Zozv94\nEMu0Tz23Od3NRCve20Y3s/myArYWtG86zZ54z3gHEBGLsN2Fi5AJZfeaENso\nNw2kw63OwQhn+P7Zjm/PJH7ixib4JRpgkeRuWPlz99M6TZ9VQIlGB1CAlqrq\nkfMM\r\n=9OiE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.b2d2dc08c.0","@material/theme":"5.0.0-canary.b2d2dc08c.0","@material/animation":"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-indicator_5.0.0-canary.b2d2dc08c.0_1578432353847_0.33798461579053307","host":"s3://npm-registry-packages"}},"5.0.0-canary.61f2d7580.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.61f2d7580.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"6899240c5f5cd06ccea6ddd3db5500486f7da156","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.61f2d7580.0.tgz","fileCount":35,"integrity":"sha512-ZHVLQ339J2xPEzoQj6ZygXWeZZ0WSz9tp8z8OvELL+M7gIWLT2HId5IJ5kxfiltt7OTwCu6TkdbkL3G7vod0ug==","signatures":[{"sig":"MEQCIG4w/CVtAbxFCRnZuHz1tl9BKSIEkzPF7Xq8gychym4SAiAy2ElPR+C94jBsjaQxBMApvoywOKmQgD1VGp6LH3T08A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFPqYCRA9TVsSAnZWagAAKhAQAIypH+XCs0e6Bhttxusg\nCgHOKabR/hzGbYY5oKCxgq6TGaKE9QZYVBjJ3wM6J9pQQOQlDrp0gPPYly2b\nYETBP9KdhHqBnkawXnJ4gvrOGeQ3Sit7Y86CNN3gyoAUW+RNYlI6ZPXIoTTt\nVpvC+NnBA1eIi78+cKjW88H9VABVqKochxVpC+vF47oANiLyeMhbwiSq9R/9\nm+A0oqXfULttY2CB9vqW1cNmKLIc1TZ7Gg/m2bqbSAW8XwxhHUObsSZce+pF\np6c17vcsKGHd4BROrhQu0ElrtwJV6phCVVLE8xiJEIRFQLVsRMNFaxJowoAl\niySglk9hQi67Id8E4G2+xA0QnQUlArryjUsvJ6H3GupDu05eIt46Z0yZXPkg\nuFBKhIC6n3aOxZGY0bFhJDeWqA1caTgLzgCbYhHxys5Uge1QZQ/OhDXDHUm8\nCcKx1ZLWjhUmDqcqhZfKii8ZlMD73mvK6/HYAwu5YAAmo0nguuFhi1AhIz/C\nh+uZUS3HR/uGv9NQtM+Dz2F27GwgpKe3VxWksnT4Nu9pvC86pbmJJLzK0ZMo\nOr754ZSuEE7Q7VW0mQRdl8DuJ8lx/0XcKgDbeEvUXc5fdri/pS1OCRAtwgOH\nSoQ6LKqLzJHVCNvpZx0jsbgs7h+BcuttNzSEdg29q2GXlvbs0+PFL9cMq9ta\nLW8w\r\n=t43U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.61f2d7580.0","@material/theme":"5.0.0-canary.61f2d7580.0","@material/animation":"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-indicator_5.0.0-canary.61f2d7580.0_1578433176372_0.9868305041704395","host":"s3://npm-registry-packages"}},"5.0.0-canary.d1be53a2e.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.d1be53a2e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e386f3f3100cb31c539b06ac6653effcc52dc6d8","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.d1be53a2e.0.tgz","fileCount":35,"integrity":"sha512-1fYRB/GCiB8/HKzHim3+f5PZ9yPR0puyv1dztanySeiRQsl8LXiB+fOdaZAAib/y1ssmDv7sda1nhASVAzOK7g==","signatures":[{"sig":"MEYCIQDNqWRfdy+Mo686rKJbCkFbeIVQFB2Z42WJ0eP1GRWxPQIhAMoksWOtQPgKjP9sOjBecKcxwRWtfpffTLqT+Sgzfezr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQNmCRA9TVsSAnZWagAADjsP/2K7k0HWrSSJ+0617gVu\nFUJBqU9z98NQlR+CL5ztvLOibaQPNzVzBgHrpG8SjBmGhPbUY9Jb7Zq1ki81\nnSTrETvxpuJ4vU6FOIYaJ6rpMv6xyNNR9HrDCPpd1Gbbp1nr47RDxBS/3JCZ\n5iZ+0uhEtBmIkWYMah28MmnXm0cK9plvG5i6pWJ/+uNm+UIEaGAIgkq0OPkp\nMaZIxrdNyVyVQ25CcuKvDo9j1/kzOs8eQLgp5u+BEE/vHyDO7pX1LgYnJ2BR\nAgLmGFKMcsOb9YUaLM7hzA6/ix9MVGYtqlmEfCr3t22Wofb+F3dBHq39fwrf\nsotNj0i8TKpeTT2pmupqabU1zZ785fbntKobVi85dTi94ayYhUODGzE943A7\nm0J/I/F3CKWfou9jEtiBZwlIMFzmnkJfnyRSVqb8uggLs6oPHiXRlYV8b5cF\nHaxj9ctjriZy4mwIOSUmmuIx7hF8DzU+SVNJUqqtpbUULhvXSrnifen43GHE\neIu8FK2td0+HgwGFo9+Q9jhibYkBbjUaRebPpQcmtM/vc0d8UVuHxOEwZ3g+\n5Ikd6lPnxpr1gLlZWdIdMDehU47k/TG63dUrQJofaX8tDvZYwc9jeddA4tAi\n2/bFeikVczOlDIe9AjzBCoRFfOP4Y/nJw2ttspNlvDj/AlB7sFXGHsR6Vx+b\nbC4r\r\n=Akvw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.d1be53a2e.0","@material/theme":"5.0.0-canary.d1be53a2e.0","@material/animation":"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-indicator_5.0.0-canary.d1be53a2e.0_1578435428840_0.4872736877019732","host":"s3://npm-registry-packages"}},"5.0.0-canary.9b0d06e32.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.9b0d06e32.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"690408545cd7fdf625fe95dfd9a9b7055494de6c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.9b0d06e32.0.tgz","fileCount":35,"integrity":"sha512-SUdqU9qFwtWUgLuWPzi4qfPAHpMm/Krdd+jp1nXKF4I1CThX/WLUcp+PthvNYenTVKXYbxxVWRcfG4vfy5Mg7g==","signatures":[{"sig":"MEQCIHGXp5oHkgQmwcfhnOVwSddhdKhmjBKJeezGabh5WqlpAiBPq9YOYIBlFiOfBsGCdvs64wuBv/N5kcq5MVuwzZQ4ZA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQPhCRA9TVsSAnZWagAA0O0P/2YWasKZq1iphc2tkr/S\ndshzoQh7nALMoUmCyD4w9/o9ylkOHIvB6mNGH++ettoPzypAjUgRg5W2EpI8\nToT/uRpqZUsyk9RkqeZHMwYbsmh5LN+6b9+t14Zf1Eog8EJDgcvvw+IzvzZi\nPRdQWZ2n/ziZmAPU/Xsom1H87pAp3ux6ksPgsTG0n8XkOWqHv3I4xgvth1zS\nfMKqw/hWfJODK6ZUOWWESN0hOGFNP2QuGq71iOCWvRlWIJ/fc5B50cSDQtOr\noEOFb9qjrBmxr1QGI3qfDsvC7VgwuGko296Ckrtq5rk/iF7vsBh0vHkTwoN6\n+I5mgqnAG+o9DgYdwjzj9KdnZlOIpva4sKi9VFIKhqfArOfrZ/J2XufcQ3JI\nqQpZ8/5mKzUWEpCzt+F2pAAXE+jxBZRbXAcTF6u/OWH47T9WdK5QimctUmrH\nLtdCYU7Du3Qal0z/jG9xFNl0g0XeTXHdwxDdAPzw/wLZGqIp3sJOgpjnMYuW\n5mzkpvFLZy6SiZ0qdXLxG5aPBqJOgmH6fMvrcL7SZAQRfXG7ju8Yee+jiWfI\njZqvKMpeccMsGP4mwoTkYDZquRthVGn+wUEpsO3YplIJ3bayfLHeOrtjDKS8\nZUUnLxKqX6OeSYmifahHVC5cG0VTgJpH+xzNnzFkM0KF6YYbXhe93V1NyMZl\nl/Qw\r\n=DVso\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.9b0d06e32.0","@material/theme":"5.0.0-canary.9b0d06e32.0","@material/animation":"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-indicator_5.0.0-canary.9b0d06e32.0_1578435553189_0.28602854913258935","host":"s3://npm-registry-packages"}},"5.0.0-canary.730c807a0.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.730c807a0.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c1c9d7548a342d28812266af02d68022b99d25fa","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.730c807a0.0.tgz","fileCount":35,"integrity":"sha512-otPOz3r1w3uDTwP3Say0c23PmjvoPgVXiZjiyHmbxqgM2FDkmxyUbP/j2BE8x6mw8DdzYyHx4Ymk4R6GH+dMfA==","signatures":[{"sig":"MEQCID/rg6pWOQRa90qDZiHLf9xLGat04fOpl4oyQ//1PRq7AiBwQqOkVrczQLQKyAtWaF4mY2heyLo68hBO505R04y0Kg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQRDCRA9TVsSAnZWagAA82QQAI02w+PbdYM11M96nhSc\nyjDyPBv7fLgpORYGXotbEMcORIzB0V9a31hfNW3HAUHIkIq0a9PUZ15Hk8WZ\nz71zAwY6qvFngtzcasCWxJ5w9NH8geDvMpcTaZiITP0CnfjFhcNNfRE2+4Qb\nAU5p9GAfLtyZ1nRX2PMI/JElff7LsDbzSSbHLMY/4GoXfMXWt6D9eyvis3EW\nBznWJ3KB3GfW1ObcoUGy1kn70S5+2g16Zs3ke2QFYYdXIGItZIrUiUjjljEB\nSUFJfm6Nwi6ckc+GPZkVdyZFHJ5I6PcrO95hm5q6K4ixV+jXgEL+LIsYJ9LD\nsED2yqvTeDdpTducYjdRX/eCknPimNYSoKEPs4jp/6ZNZm/2tm69wkrLqwnI\nc3yXLJ40/tAlkmKhgFtQZMhs/bTI1g/D18sxdWAcEHyzOMSKRYr6OUQi4kkA\ntb4UhTsFoU4SdXvQHqB52cA3w5ziglEkPgYNWVxFp2fp/bNWxnIgTcIEkDpY\n3dF5eqpyF+MC0m2KO3qZRVpwP5fXj2Ukz9iDMo6RpTaqZZY0f4MZPE4acBrS\nXzxmI8ApyVReF9fxIO6oQDavnaERXJ3Dac48ZdnnJECkGqxl5Eq7GMF1hDVm\n+cq7cDdZua/m75rTYO80E84wfb8mWSXl8BbtgKPxTRC0lVj2zfc+xaqcfkIV\nhhbI\r\n=F3X4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.730c807a0.0","@material/theme":"5.0.0-canary.730c807a0.0","@material/animation":"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-indicator_5.0.0-canary.730c807a0.0_1578435651420_0.4247478403360423","host":"s3://npm-registry-packages"}},"5.0.0-canary.2213152cd.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.2213152cd.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"9d9b48341e43ce5dbea5f624f3dde1702c6ded2b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.2213152cd.0.tgz","fileCount":35,"integrity":"sha512-lcE+TmJwsLewUvQBazewzTWCd4DqXjKaWXXcLYtefF24prtVuzhJ2hYCxC37UWhScM3UVZlw4Zi+5XrDdYXGew==","signatures":[{"sig":"MEUCIQDQW73eWFEmF2jYlfGMtHdkgYpDEKT6dZk5dltnzCotYQIgMWmyovUB4pLJuvHWwwqMLIhuShwOhrtJdVe1tuOYf9I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFg/CCRA9TVsSAnZWagAAgP0QAJv6/yvuS4/3Da6qTwKc\nBjl5TwFX1PakU4qP+beAL4EWYs/d3KqGxXfTDiNk4RRDYmFyw2YG2xfVbvh6\nvnFkj/V1kZSK0q5sStHJ55CTZgVDPskJkc0j02mB69DpoYlLzA50uCwtLlZT\nc97gN0E982bTdPgfkgKipCc4S/vBSF9Z2B3Qz8qcWeXLIoR880utRN3/0WnJ\npP2934TX2LPdAVRyzRerpoT6p6viZCysnwi6u0ZBev4FAQp0X7Npr9RDRYSw\n9iUns6R2WCGZku4gHPO8/YDsengHuva8xkQYhKAuTDGxoPdd+LLuFl+Jy2aj\nAaT/xkH2krYm6u6rpRXLJk/LMkis5+gYgnIDPc02ycFRYfxx4y7jrbxQgCz7\niahfBMFb9GejAN1Eko4RmFiOdKc4skwkAqTDeehqKE5uTYJee0BK4sUhcnTF\njTiBjGbMgiJe/lIdhPZwUf9gbhggoR3y3eKoufajmqY2NFCB87nVgNW9NSB1\ns9BNoSuPt5MAidEOeWv1sAp7WLDN9JkUXcyXNtZLQ/u1LXhXoLrqaBUnm1u3\nn6HGLwvJLCpt9Lh6vo5qK2t8Pz5dASDAc+O68n77NyXC+aoXAf7iuZmRWoIx\nAq3F5Ma5LoFQhH3yhlcnEwqIyJyOJYaPe15M+EE/VtENgLYyTJPChMuvNUiZ\nPHuf\r\n=rJoG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.2213152cd.0","@material/theme":"5.0.0-canary.2213152cd.0","@material/animation":"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-indicator_5.0.0-canary.2213152cd.0_1578504129824_0.45985244253001833","host":"s3://npm-registry-packages"}},"5.0.0-canary.5750f7169.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.5750f7169.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"66136840008527a1f4096c55c24ffa44f73c1159","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.5750f7169.0.tgz","fileCount":35,"integrity":"sha512-16fwg10S0K37WAofs9DpRK14YiBPq58mPoo0tQyobxiovJazTZl8Bk+Kx1Qk5ZL1hf3iCaRQUNlWsyq5Rab14g==","signatures":[{"sig":"MEUCIG2fD+n0lPiehNlR8MgUtGAkQ9JbyptwrjdJK16+oDOsAiEA2oaTG8E5p/Xy247ObaRINgwRR37L1YGS3MFGKUL3aR0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFhfgCRA9TVsSAnZWagAAqagQAKQE+dDax/bDPxaCXyE3\n9HbJ0GwzVt4TWtGJRt8LoQfHuOt+AVYs6cbkSvi6jhyuVD6iC+q1ln2gcgU8\nE9dMyjlnAQMuV58QtDyU7eCVwy6hPDbX+So40TrARH//LCKIeqKV31xjR0ok\nPVkaDtu1LPOItmoGXc3B/Ni+7qbxZwxPQahWJzrGLYyB9TKFJablNMCl+F2a\nt/7LwyecW/b2TYIEnQ3i/rWHSNVZy8H3G0piClFsjJpDS8Ps48u3lOjsgwdl\ngYi5c7H0cH1o7NJIKuU7anfN0EO4W3TNMV2wk8jR7gOalnN7mF7rc2vwu9fj\nKJjSb/gGASefjqaW1nofWHNrA5LoEQDdby1f6T407f2gMlJNenClKNfcJTex\nysn0jhhcKoUU6CQqXOFlCmSVC230Jj6yWLLtAhJxKAjUTgd/jzvZFp0B9Y2g\nzs0/3UPbRx7rwUHcLfyGcp/2LQiBq+LVmrbk7ngM4CZPt2f46nOCcxZz2uEO\nw/mhPABxOYLyPf1iWV2PXXlrzri9bwySR1gxsb4R3Gb1B8Povw++c/miFFQ7\nrnLiA02FrAJ1xR23JzM0SoiQDaFAxu8PobscCudqg+kDqLK0+ynDWF7PlGX/\nGrtdR5NpTwDeeFp4nXP20tCShu9XiufG9qarSiL5srYE62bN13IWu3RPMyfR\n/pmo\r\n=xsIS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.5750f7169.0","@material/theme":"5.0.0-canary.5750f7169.0","@material/animation":"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-indicator_5.0.0-canary.5750f7169.0_1578506207989_0.07896540843909317","host":"s3://npm-registry-packages"}},"5.0.0-canary.f7abc7a43.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.f7abc7a43.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"8faefc7e547ee0e51ead1bafed61d35bc43823b3","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.f7abc7a43.0.tgz","fileCount":35,"integrity":"sha512-J0rIl+iLRkAVDdZc++5qpxXKpSF2vULKaJuiYWHYjsWnw5i5eLrSOtaCf8lB7QdvAIY/VDKOiFqlRsZLrHyneA==","signatures":[{"sig":"MEUCIFBePwVMwRT99IlovoljwGs8+lEB2bokf0YORkLSusxtAiEAki/VCMdMRF43jAfepuQtJVXY3dBa3ba4aMqccM5BBkk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFh8eCRA9TVsSAnZWagAA2WIP/1SN/ImHAFe01yaEriY1\n/0a2GTQ0sLQFiV3+iZMNdYXVMVsQnq35xRCekCUrgtWTBaef7n8zeABixMlw\nAosajwvtWWAt/yjgTLJZt90dVAGWbGZgRefdwDp9RkpqznhQ3cqBBbcUI79P\nrlL3VcoJY0Ar3xJDfX58Qye/+km5qhzzybZlkOERU67Ow0d3l5V69kp3lyI2\nJTJ/zFhaH+CILjYJvWvtEckJLYwmSo6RPs0H8NASMC16UKkvFL6hn27UGKzz\nuKu1HcsZPEbpe24gLyMqb2LAfZ4Z9HaG9GNBtoz4jJiYpCyCQKSnNMH4Jn6x\nfVMvDS3yK2ObQ/U3I++juTASbdp6TNIHLXEb6BAQClROG8HIWzTi/UHiq77p\nDXJXF8/3MgXbycq3q6DXPva2aBqlwmp2ztaJq/UPDsLvt1pG9xpth0ENqhNg\nS1T19iHSEM1UWQ6UxTeGyfhO/5SENeHhG6RK0afLeUyqaDMeQc6Tv2/ZCiUc\nonSS7Z1/neGo0MUKinHUBBUv8eEznyifkdeG009c45uAjLLIxIzQSn4KE/eM\nxout9pGq0Rw+M0TFzYENiCj3Kik611kJqAaEz+UowyoHrKKjNnZdKExJuRNJ\npdEHWkqmHynid3aG3JAsIT3OTTiQprO28DZ69kk0cxRgCYZ/PPATGCaBohZj\nZIXk\r\n=ZI/o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.f7abc7a43.0","@material/theme":"5.0.0-canary.f7abc7a43.0","@material/animation":"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-indicator_5.0.0-canary.f7abc7a43.0_1578508061781_0.2838744272213749","host":"s3://npm-registry-packages"}},"5.0.0-canary.bf7b4a061.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.bf7b4a061.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"bd998f786772ec0f81d6ebe54bdb781f0a3ec61f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.bf7b4a061.0.tgz","fileCount":35,"integrity":"sha512-qvJ9NSM1hTWg1yAMaHBbeHac0iApeUvelFxpPGXrHC2n8eX0u3bbFKbhlMvIU13/wII/2S9cW+RnvmqxHRDCWw==","signatures":[{"sig":"MEQCIGWYYMOoS7MjuhiqLDHwHNUiKKqhJsf1WTei7E2YH2/rAiA5/Ophvvrjp1tZw4hWlbPwiVPs3efedjbB748HackP6w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFiJZCRA9TVsSAnZWagAAr10P/1alogFZDRLvOxWPb/ps\nKvhbzTZX1LtoWPAcccygnsUIAMsMrkUSLexs7TgXtCMCla90291NB2JaAZiF\nFbbIvh/bdKBa85QgjWvEH65z5g2bTqzcFzB1GHB0RZzeW7lxHgnGL7Ppn/5w\ndqosTUmhn4LKqjBlaTRhjc7/vp43G6JjD5zHnc7IDTGT2ycb2uO89eWcM1LK\nt1+9Cg/GJZLaSGVHy+prK7u9jzxBM8qBclTEXvRMy+tM49bgrJc0aJGs+osF\nixNKi93FqSHw+Mn7naJ7o6xsA+XFZumyM9dOjmW0JDEGbQm1E9YGvXA5FBt4\njLrdzD5wrHXkqRkzuiczsf0eH99E1nO0ZEBHi27iCvIp3hcsCvwnt8tyhea6\nTRNYE5fSRHbfsNnldNUypLb7WZRVph05h3vwqe9TQ3HMPGeFTQY1MVLUHvAW\nT3aNmxqk/Og645FngkfDNLp1DZdnbtfgXtlF9Y9Lec+yT8cpnt7PNKsnIF11\nJuroPZZoqns8Enk7Gt+FI/V+zq5QA3F7Kx5ljnZQ0YYfunw3SseC9lyvbJaO\nv3Htx+VcttjlJOlWgSnXzk5Fe8cY1PJMjy+U/DSvGhwqYyYvXkBQmW8OUm3x\nSyDVE+kHcS4cnR/eBK6fPWq0K7X6i6r5o3Uhjv0WErOfisVzAiM+gQ3sjDj1\ni4kb\r\n=bQ58\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.bf7b4a061.0","@material/theme":"5.0.0-canary.bf7b4a061.0","@material/animation":"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-indicator_5.0.0-canary.bf7b4a061.0_1578508888948_0.2806729589909993","host":"s3://npm-registry-packages"}},"5.0.0-canary.784fa7903.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.784fa7903.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"584912bbc70f9d79601af6f26a001394c55591ab","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.784fa7903.0.tgz","fileCount":35,"integrity":"sha512-EKH/Uq1qF4ajSzuOm7ffLmAdXGLNaTLB0cUtjt46HAaVmgdjSp3L7Of/3e0P40bgdVnxOVuXU168g6Upr6wDqg==","signatures":[{"sig":"MEYCIQC1iThkI/7vggNzUknQH5ISqCmFK0cUwV9hW421Uxk92AIhAMphJ8UyoEcaBFkW4JbP/8BAlCfQcSEu89Xm6Pa7wsNh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFikXCRA9TVsSAnZWagAAxPUQAJTKC8gl8MPdam8hP1XS\nC69IhKvBGuWYJqxgxN/XuAG6RRKyrBM6cQGyNbvqxiaZaKnPlBUBoDh6fsEt\nXE3SUp2kr7ZW91/a9SqTI8LxN//aHSWQ0lAsv+oUoBVreozq3XvVmJpEZsI8\nJCf9DrNyrG+dJjxsSwbpdsGGh7FJion5uBhbw8VnGG+6HGIEqFUBDur2rdZe\nb9jFMAkCZr7BbdiKld///46p3uk8vnxo7gl2M23cpJJtpalpCfqn7srv4vfQ\nSCVySy1xQN3sqpu81iqZp8sLBZK/cI7BFwINY6T1vP1NQ1b78ilV3ZoOjHRj\nzx4zVmQTUvuArQjm9oRClqKn/OJE5KcWMzCGm7L1T9M8W/jSvsHjW9rG1jng\nICseRBnaAWAaKl1aDZXfn5GXgqmj69b0PATRWoVVO6cBCXH54ZtRTY1sZBfs\nBxICmRWHqosLqDjZmPaV92DHAAhP1mWaux9wrQ4WImpIAGgPcNGt6wqS3Q4m\nTnwiCL7Kz7MsVAqXaBY1qe/FqTFKr0Nfjr0Z9QWvrMYAEJqKA9YNshG9LrzR\np3/W/qizMhA4gspeM9Lp0TkeWidg95q5R7EyE6dpy0WiS6u13YNqt1bb0JT8\nLiPMiHTmM/Zz1lYvKWqZwxsEUJtJp0ebPd3a0wFJTI2QZPYcI3Yc7fozorls\ngmXO\r\n=QoOY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.784fa7903.0","@material/theme":"5.0.0-canary.784fa7903.0","@material/animation":"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-indicator_5.0.0-canary.784fa7903.0_1578510614818_0.8234199658006094","host":"s3://npm-registry-packages"}},"5.0.0-canary.823c050ba.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.823c050ba.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"67b83a8dc2fe650aec2654f32bfa1e9bd599e867","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.823c050ba.0.tgz","fileCount":35,"integrity":"sha512-OioFVDk6XdEaXs15Vne0SXx07hCWUjY/iwmgsLynUtidXU+p9i8uRIAGm+JixfOxt0botLsRSUadFA+t0X3vsg==","signatures":[{"sig":"MEQCICE94GA02BfSXY+L7DLwHHYWdfmLl35AbcLwVYio7Nv3AiA/LQxZ+km9B5Nt2ZSo4qLAYEUyeSTsbbUg9q6iN2dN6Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFjc/CRA9TVsSAnZWagAAm3QP/1Eqwr+siP/FGC1Ec8HZ\nEa6ZpuJdTgdoXhButdyOK1pSKX55fN930fT6hPyq1qxmsb7afOEM1pSUGE5J\nII2wG/mlwG7Eli5qIcgSnnj6qw7wE6ZQbjFoG/85sxyONAhlrH100V4UtJ68\nbumI+dzORi5vY3sp9W1iDK0u0lECcg1YqgmUnf1mLkcXyGO7QFhaUI4cBnYb\nrPX4eH4L81y3XYlOWZr5qAC1HYjeAJk0HJwmgHp84ssipYdApQqiQp+uVyyd\nPjxOVIIKbpv484V0C4vUfh2ckXvGmJIXpC/duJrnNq9tvWFK+BVXTQMi2QCr\nVAvmhYgbkEGcO5mzR1hh5KuIZRSCszuQDflYlrtm3AmImjZA5lSWCodpppQ5\n31NKGbZmYprKR7Wi+w3QD52/Wqh+N06f+JvSeh7wjlwo2LUE/y+B7B9/iqBn\nR+Vb8rJIwb+aitph6lgi73xEIP36op4CTMW1toA9zJ9y8kQVGycC0q7Y14RQ\noMn1IOhPldUJpU0BIYjWzPfcq0qHuNCd+uQCFW6YqBDdDhAc/XExhYRlYZtX\nsg2aXULJTVOXlQLV1fDkPAa94RoBoYIO01lZ+gc5XjN6WhMC9sjdp7dAvn2M\nEnf7ZKFsiHWRGNrFXieoRCVaRPC1wG60v9TPtVyIT7WUl+6hh4EkZGe9uX6e\nfYGp\r\n=d4rE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.823c050ba.0","@material/theme":"5.0.0-canary.823c050ba.0","@material/animation":"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-indicator_5.0.0-canary.823c050ba.0_1578514239231_0.09357954335559748","host":"s3://npm-registry-packages"}},"5.0.0-canary.70c708dee.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.70c708dee.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"d5a15e569d5eafae361dc430ae6ae1e242a61e57","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.70c708dee.0.tgz","fileCount":35,"integrity":"sha512-9BaJ1VU34+bjRd4U1icYvtrKbyFxCblO0M2Wc7xCuzCp0oq+B6XUlmnhbMmUQ5NgdxZhaetP74pyu6UN5JovAQ==","signatures":[{"sig":"MEUCIQDWLcV6isn0f278o48VdSXteDNBHHMJqqQY2OlcWhDmEQIgIy0SIR88z2GGVfiBlDvx096jEBDeaaaLOZNVkWhZB/I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFjn0CRA9TVsSAnZWagAA0p4P/19+hU+RzWdXw08fBd+N\nKxn7zdwYKWKbUFqyPSt3nuAXSIY3oFsT1RRgUsQkI0v1HfFntr74SfZwn3h7\nKKELVUR2HOwtJq4oc6lfayupVZ1l5VYTnK3d0moW5DrBR3xOrf82rTPn8PWb\nkBU4QBt7l9ttDO6uTiiMCg7P+F7hr6dCbI97BmtHFC0YnzN/6WnvWR95sWy7\narQM/0QaKeksFFEui6E3Cdxcr258Q0tYf1wsUPBkBS/CrxRTCnts2JF24Evr\n1g/qHx55CAdFNHlJEPZr3ZFPfaKOjk935hWs4XJA8/FcgBfUD6eehyHOxKnq\nfK+upnIX4qzRA+vSa6va9MVd2odhtBhcyr+Ku3C3bxDBbafKx+ikOMQ7hGlo\nN9+JxYVsEyKNT7PsEk3RTTz/hr0mrwlN8ynxfifnO3OWWgrkkOpCeKu8ImZs\nz+UUUvgU0gF3NInUWn+CygsKRq/PHFlc4A+Yih2pLWUK0GhXD4fb04cE4h89\nfZGnwLOlbeq7j9jBwhoHzgy6r0fMY5eX0AqIk68Vj+SHfvru+VCb/2VrtrSN\njT4u8c8ZI+Y974qRCogZ41vkdAvJj77MeFlv4VFznKEL6Z5R2kzkr1YWoKtq\nUeAdltRt+dIAA+ZnsTuNAF39e5VOb0mUY8kdbYWMpLIBZ7u8TlXQze0HNx+X\nTKpQ\r\n=07tI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.70c708dee.0","@material/theme":"5.0.0-canary.70c708dee.0","@material/animation":"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-indicator_5.0.0-canary.70c708dee.0_1578514932107_0.4658631256778136","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ed9d13d0.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.5ed9d13d0.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"67958d3d388a00b60cef62ea210c5e39d2594a59","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.5ed9d13d0.0.tgz","fileCount":35,"integrity":"sha512-xQd8jA0pZiztnDdpVVJ8er0jmFR/FxcwaOsucFr5h7JTlUZ8a85ejYHqxFINr9xKhJagDai+jUBMQYPYOVjWSQ==","signatures":[{"sig":"MEUCIQDlB6AspW5/3Y5+MMt3KlMTMrblm0RFZwhoxk+u3gnepwIgSVhcz8HnpMj87bpo3zO2y0mzppMt5/EMkuAJKUSBgKc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFkzJCRA9TVsSAnZWagAAwNcP/As/wjU0hZzdK88FSGKZ\nLxsGBDx5ZYgzCAnF8oIxosvnc1sMxftvS+iu3gPxALKGbL0gIw+zCGhqcg4h\nsg9i/uYh/uNL4eW2Ell7nvbwnVOTC305Abd8Rjgl4PPVpEAeKIfn7XhEwbWc\nfifOVNUYu1f9k7tBRAfuQpxulN4DwuVyC+y/7mexqsUp5eMxROv4irKj/WdA\n5HktF9kJ1nwpUSOwYHOySfJ/8U3O0hLkCN4QHhPEiV7yPVMXrAdW4x/a54JL\ngW+KCXI1srkgPIHVj51pGZrkCHl+kcx9RZkqOkSszvKCiCkFVaATtjj4DOYG\nq7f5+SOVIoDs8F6TzGRzALAj3rJ0JGWAt7HgYLqKAZnBVH/YEJAoagIkTY3Y\nGfSkYJtI0wkjkufKqb2pZYvvE9HR4B/0lZzEVJmpwA45IDTWSyrlX5XMLUv7\nxLPjD7Tt+7TjNYQ9oICbvQErNZGv0J1ka6SVx9VhAo2UhucHur0km5t1rSPN\nk8tZLGRJ/Kn0N5sIj3aKbFZ/+nM34YfjbhyqtrqR/T37/yS9furoe+D4vx7B\nNI7m16zMu2c/iZgnqTeJSp4e5kAK3A0ZGnhd1qzPl2eu7Wl9i+O6OQDduKaj\nb7GhuqPaBQnBl8yU2VF8nifN0S68fLz8XeflGg4QqUYXn2vuhJe68hkegm73\nxinE\r\n=dNrY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.5ed9d13d0.0","@material/theme":"5.0.0-canary.5ed9d13d0.0","@material/animation":"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-indicator_5.0.0-canary.5ed9d13d0.0_1578519753035_0.4917664459130098","host":"s3://npm-registry-packages"}},"5.0.0-canary.4819cc7e5.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.4819cc7e5.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c5494f5d3cfcc1a053ca684b7f30d66fa98eb6d5","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.4819cc7e5.0.tgz","fileCount":35,"integrity":"sha512-Hg0fQPIFpRMiJosuvykFGIFILFK6IX7RPOZMMoR1CO1698z/zCxq3N6HrHZftuC6XSGh93rFhRwxdqzoPTh4mQ==","signatures":[{"sig":"MEUCIQDmGV4RNYNBrIvnjiD2jV9udyUsfQdXnZl8h8GHVmeONgIgA+PJ1p5b4m1jXpa+pTQFhyWpFJbR9+WIyV+hI50ZMck=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlBnCRA9TVsSAnZWagAA5ecP+wXJqtHxYGzZ0LBKGyH7\n6pQdNvo7nl0QHR/q/pTq2DVWxifF9+psnt/txaMg1WzD/hEWAPwaAIg17Gi3\nh1mVyntNw3jtFqTvVOlkgAq1lOXclyJ72PNR3whmxmFCEypoeBE8qDYEf65E\nAnNgDg7kHfQmpJGGNeHfwn/U1nudkcxxRvezwM4XVHhFVgvZpw0ZeXccb/1Y\nD/ou54LQbDBR1JN0pmHFK/yoWI4lSu2fGESqyRLdj8jHoycr2nMf2ouDLMDB\nDOMO4DtjWtAFkn3rNwjob/GZY5+nJgVYssnTKrKnp62GbJTMPCdjpJSCN9Za\ngdvjDAgBRzqNA4SOVwoIJy8MuVZN+P93u06XZ9nrDmuntj/jjzuDvss2OK6O\nj1G1v9STRIqwgHULHvHMSjzbyPYip64rHWSmUomBq6dRknZrbSxFnr6XNT3P\nLKgD/6Xh/xpBmgWZyQvtlfCDZw1dTDuUcA41Wq/FsTPdqOI6oEoGy2OhXkp5\nJufgDeUX2QT/j/5G/AeVUh9vmyb09pGzg28lUbvfENKH860KiVWhb0zSf/Sn\ngNRWdKx3XBqCUyzZkneWU++T+fXnIkKTUBbO19RIu52bMHhzHwD2M2zlFLt/\ncc5MOWx1UI7WbKfC3U4UlM5pw1ldfdt4YNab92mocS2Rq+g5cTSmd6yUee7d\n8dMc\r\n=fEtw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.4819cc7e5.0","@material/theme":"5.0.0-canary.4819cc7e5.0","@material/animation":"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-indicator_5.0.0-canary.4819cc7e5.0_1578520678059_0.8226521708538264","host":"s3://npm-registry-packages"}},"5.0.0-canary.fe3ffd2c3.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.fe3ffd2c3.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"7c3d80346facfa751834f0da5eaf7c67d3002834","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.fe3ffd2c3.0.tgz","fileCount":35,"integrity":"sha512-tIC6WUIdb+7i207pO87HtrL3cZ0upWMpFgfgoyUFykPOkHuXrS7mZP9VGWDCI05mW/ewqshonpNT+LrxVjEFDg==","signatures":[{"sig":"MEYCIQDiL/B1NK3ZPOnO0CKufKYzgbPdKSY2SCmAjGiy/mvAUwIhAJBn/NAmKwngdzSXwxQdpyEYUlVs7APypkcMPzeZ1u6u","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlSpCRA9TVsSAnZWagAALvMQAIm3szzgfLgDns6RufkA\n41xA50PUCo4Y0df0eZ9GBZX45MIAk4WAV8pusjuojynUcws7JN16AEsZPUFu\nT9jP4T0355MxyU6n88MZhCx1yjvxGHCnLOZLmpVzxCq+kKb+nbVWLmbCYpvM\nbV4GqnA9LJZy1VyJS0fFKYJxx6QTXT/XssXzix3TAv6llke0xnSr9yOjSt4f\n3jy+GGSrra2KPCA09Nq4uUhKLzIqFHVTcdrj8OI24iwRwz+q18+TUFOD9rsH\nuxlbwL5PoaRt9458FE1vpABt+5+B+8ixvCIJc/2nvHStbuq3tXLHdUrN6SnZ\nsjJUovDF3y0S6O0Y0HJTSLfrsA/WgbLK55wGnjeF8R3KSVoN+ylM/EohjQ4x\nbO9HFS/Akeo4RNQbyFENc9/kXw/oyF7bfplr2n+NJeRVd71c1sm6pXUZisOJ\nd+OSi4fpHd9TFoHcD8Cb8ZW2Xla5mXDmXunaZP1t9FhkC5PtQ2CI9JC1BN/r\n/i+LYTDpChKuI0GzTURESNtT1Pbf0k2/AUxtArXkjCQrW8eDEb6upGoVS9W9\ndpXL62JpIPuNq+WeDO08WRNJcEZv++uslDvIE8kJCrl0Ly9kneU3BMeqVRYs\nSsr4PpEprjhlrHjU/p2UAwM2W0L8bY2vwOo/YPbG1s4Mcf96qQDHRX9YUZJB\nK4Pb\r\n=RqQl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.fe3ffd2c3.0","@material/theme":"5.0.0-canary.fe3ffd2c3.0","@material/animation":"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-indicator_5.0.0-canary.fe3ffd2c3.0_1578521769253_0.4973674853900425","host":"s3://npm-registry-packages"}},"5.0.0-canary.c0e850090.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.c0e850090.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"84d5cfac3501396292a1fbe841176699ae3b63da","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.c0e850090.0.tgz","fileCount":35,"integrity":"sha512-FVFfL5dvMsOb+BORDDJJsZlHWrMJg/RdCCMCH7CsK3MgT2mvoEDkHLI1cVCGXgkjAoQ/yWp4qWbHvLL91HWEqA==","signatures":[{"sig":"MEYCIQD/hjZY5Rd7ZEprejmmxyZEspeDS/2Mga5EEuSv6aTXuAIhALiYqYwnazmhegM72FL2r70nxVC1HVyC0bO5mCXR0QtV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlZMCRA9TVsSAnZWagAA2v0P/jNSxIY5U536ncVJ7L5R\n8Jfj9qDiIc7QNj7MudBuia82a20G44SenTaUznLdQJOW5sUX7Yl2UYN7o8zG\n1QhVOBJXadsz9FYAbSO0vo/Hit3RCsw+SyNZzlnYQBhFFOd1MAc6EfYtF2mK\nKWcL0/7ICSqYMniF6CDvVi92VJREAoC473TktHTcOoUgmkK5ZxhP0tcOYEPV\n00O7axWwExZ7LXJJM8xUOvu3lNtdmPr5nodm9tzbVJj9nkaxtifMq5u8GuGp\n+AMUU2gYkGA+QVhojaqEoH1VeAW1jR43fTJ/GYFMpSTKPylqm71WZ+MCv7kW\n6S+LnmESP8E5z80Gw7VFGuiUYuBwz/R6qg2bNy8niawmGShT2teqmoYZxAua\nf86EucG3uMDsMuXkSKRbNMzXJK7qCPiYeCWtwi0yyd42SzgceLezHKomrFx+\nmUkxGa3wgqfNFjTuKFriOio3mf2yzUEM3Cd7lLKYZVM5elKemu27QJdeUBL7\n/i52ozlLZnDcbIKfOzBN53WbOy80eY1Z9m768TKKi3lkZCg+CU/0PH+diD7d\n23y5hpdrsjpGskLZl/FKAnKLZYVJ0hdMonGGP0p87mMPQrRLCLD+mXm3w5+k\npvYKKKMwf7e3fH/t5rkDokuvOG137aykskxu3ySZcelacEF4wfAQf5zjnh8K\nKEhs\r\n=l31Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.c0e850090.0","@material/theme":"5.0.0-canary.c0e850090.0","@material/animation":"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-indicator_5.0.0-canary.c0e850090.0_1578522188212_0.5020718291966948","host":"s3://npm-registry-packages"}},"5.0.0-canary.615f86f38.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.615f86f38.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"aade0095adc8dd9bac88fd5b6a6da21230a4103f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.615f86f38.0.tgz","fileCount":35,"integrity":"sha512-8SqXfSsiGqRQDBjKZDfPjNnzgBqTm+yrhWZQQ9+KSn7kewBR+zD32GP5oWmSqu+sYR91qR1+t3pnIcj7B4bNvw==","signatures":[{"sig":"MEUCIBhKCXQKR97Kk3JT+qWQ4mM9mLe6y2VYQLbK0bzBDBPEAiEAtD/2ATMjgBBlYDlzqPCI5N48nf+bTvemORq8SjCBad0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlpGCRA9TVsSAnZWagAAEkcP/RxYAks5mNRd8M0vZ9kD\n++W6pg9w8imsQ9CJmtgO4PgWQAeAyeF2ZqoALfb7dMGrmovjSEOnhaMXayth\niJIpo7RzMTkJIFLeF5KXj1OuLhzmX7aHvAZntb6oSZh1J2gI1TeNQmZhTTFx\niW16rELuR7KrDnv8fkMe8fCyUhFOsUvyiYznca9FW1BqhlxgcIghvw9MQU2i\nBpQ+XK6RvIUi8IB58JpJyR4AqE4pBnHFRY8eGelu7F6FQ2sBXevvrkoPT+mE\n61tLdWwJJUvB0HgCNL87v1u90uwgE/CDZmNA+cu7zcGWU/zHZRnhdKFQDHvb\nWZp4AfQl2GMrlwi/DeK9x8eUeDhaWlDxXRt01/lgEER/77hQqr76xshzFvmZ\nWPaVY9a+AUD2WSioHQ1T+5WTcmDbtzemWXaDzkbAiwR52TzQy6E5BsGgkRxu\ncW0Cq42D6Ng62Vve1GkATtcbTMn3ZIzamRcsjNuY9aHg6tgw/yxs9Xn7aKHp\nPOZ1b3rcKDOgCMsCDkkKnHHPFUw/8oSz0SpOefXaLPU9AyIMZiXx763oMB8U\nIVR9EVXJ+VXh7ekTEmBDsAdq99Wb1kxVpcsRH3cvJzybfS/2BgPH7UrRUiUn\nLc2mACqeChYx5fav34gIalRevJJoDQwOK4+Wt9mBz64CKskTptBzaDp5jE4r\nGw0e\r\n=UHsG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.615f86f38.0","@material/theme":"5.0.0-canary.615f86f38.0","@material/animation":"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-indicator_5.0.0-canary.615f86f38.0_1578523206452_0.9788332739435686","host":"s3://npm-registry-packages"}},"5.0.0-canary.1eb032637.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.1eb032637.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"cee2dae5ec3dfa7e318bf8ecd4ad691acb94f57d","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.1eb032637.0.tgz","fileCount":35,"integrity":"sha512-3e3Kb6DR9bFYJ8L2zFLsFIZ83Wzu6HdZ3gFX0Va03FPWM6sT8zMte9Y8cL1Su0BbgzWV3XtpOXKIV6U5WuhUow==","signatures":[{"sig":"MEUCIQDcj3WnN7o35lVokUyf93/M0d2+SdFX8+4NJE26ql632wIgdQagsEuNRWN680l0i1XvUa405t6I4CYxe6yWAgvhgy8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFl7qCRA9TVsSAnZWagAAtN4QAJFzQtSVF0ZM0+gSjuAR\nSBrViUOe2NqiyKIsDiX1D0mP3UUnjQQESHwnBhwH8SaZmBgJTLPPL5HiTqbO\npi+3WG6Eiuu6I9/H/4N+Z9pl7FSM4wfbNJwHVLcueNEWRsN737VZWJK1LaW5\nCsXbnlG6zamKM95VffvOcoj3wU6JHsCn3n64YX4bprGj/ehBGT85l7Rj+V1R\nUYMEWgayOpz9vrlk2xBZXhuPdnbZivwmy/JWLkeCRScvTEsyObxn7w88o2OC\nFas1DJyioetl7/km3POhdmi7yUNQiChYxC3dYT5kjz5tbtHa3rppRlkRqm++\n26SZj1kY13KSYMfvuC5c+xiT7vAsaTHUC2F4k5CFk6R4iVdI2Q0sMeQfE/V2\nPZMRQWSzpnuP1nrNs/0TUa3cvGUC0IFN24JOr+WAYDzNAbsRfmowyR2nF+ku\n68BkHvMlQqu3LNb/hs/KDc8oehp92uZRql7vxw7RGxV7EXkn1NC82WC42bH2\nowqPBy6UJx0qfACiW7lA+ZuVxe2lD5Aek+HUJ4CCBxQDWxuYzxXg2V5A8Y8E\neGruq6oujYpsrcCOqdpUgWQzpuwtAZOWVo//214MQLXmOY+MMFdo/dHpPR5F\nIfSP5/Q28pLf8r59hBVrdrV5cxODJBvjc4mZvkppNinatrqZ4Vgwr/zZPyc+\nbcjn\r\n=VNS/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.1eb032637.0","@material/theme":"5.0.0-canary.1eb032637.0","@material/animation":"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-indicator_5.0.0-canary.1eb032637.0_1578524393908_0.5221441048138724","host":"s3://npm-registry-packages"}},"5.0.0-canary.5bc5ebfea.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.5bc5ebfea.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"2a1b2afbcf5512900e156684903488e55bdb79de","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.5bc5ebfea.0.tgz","fileCount":35,"integrity":"sha512-iD82fhqGaCf5Fw7csnktKWPsu9Q9SZ3iExyUToPSfCzw2PXXowq/z6ZKuM9oBn6yL8NlPlY33Yz4AgDK7jcCnQ==","signatures":[{"sig":"MEYCIQDZQ0FfjEOlD3BeBd7l2blkPDlgjfXbMsD/VHGoP8IAWQIhAIO8HkCRiea7TUiRs/U3whSjMytKKPEtiVtsqCtfeBWf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFl8dCRA9TVsSAnZWagAAZy0P/ilWCHnbua8cx7c+/8Wg\nEtuQYkVe92olzd7iDhgpW2Vsmr+LUW7l66aEjK5Ua4Pq+KrKjfdbbGVfGrMs\nj6fmNyb01II0wW131TdLV95rnmfVyvyuegf8UZAptePmU0ofZ6eTc7EBxR/9\n1VVq0YrzhxkO0lcAZsvGUy0usPfLwINuN0Ccz6xsx5K8J0/R3vVgxFtdte/+\n/pLpYbDqrUri/UWv1SYA34Nncvnqti7GVCWa8arv9OBomD5yHMlhaXwXLWOd\nxak6cFOkQCtOY5SfaIBLWK092KXNnAch0XX6gmKkrq8Qk7AHlXWRMmfr9qTE\nX7gxn11wx5j46oH4NZFpX48UPpXqjp/197jI929nQ/QIN8dO3Ly7/vxhv6lr\nfDXwWvoiMJuyN+TRqlDV8+fErrMTp3yzz66jxLbWs4BzRv9feQ0GNkWyWsus\ng/7tygrK2m7YFvL3rYfTOsM9rohgEfP+InAmNjBuzjQIkXKoMv9Fa8KbrFW8\nkUI0c5IEz1onvUjam9muS5GrUsAo1ZL/97TOUwtbjnq8qbO8cV49v0LkRhCi\nL6FRMGL9uyjQwNwspJnu2iRHOp/V0Bj2xLetUZQlL3K2h0NRBXYWvQNHSM3v\nLMf8njPy/cu0uLGxcJqAbuV/ZCmLKH+TyjCltT/HyGgcqcnfEeNegm8lwzRH\n8HTY\r\n=phB+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.5bc5ebfea.0","@material/theme":"5.0.0-canary.5bc5ebfea.0","@material/animation":"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-indicator_5.0.0-canary.5bc5ebfea.0_1578524444764_0.41738024287234965","host":"s3://npm-registry-packages"}},"5.0.0-canary.1112b8def.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.1112b8def.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"8b9b0a43b0234ed77a8786ded2ba01997353beaa","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.1112b8def.0.tgz","fileCount":35,"integrity":"sha512-It4eBCgUQCTju6KeHsQJmRJVLXzDtxF7dph0lanZGpU1j7KqVISWmSKL9FpZu03RAKYpuCyfug6KH75ELwXoWQ==","signatures":[{"sig":"MEUCIQDsDbb/W/t+RvONl+yEdTBhuzJFYPE8oxZ5XMHEmTLMMAIgeHJs/wSK6fYcxd3YIhMg2aEgUSZCutaz6GzNtMyqd64=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF6TCCRA9TVsSAnZWagAApqEP/2jCquycLtp6MaczFZAg\ncsmmYTGlq2fArR0rwm5jOc0SlEGGbrS1DsakG/ssgl+t1QDnBEJ9DCihWyjw\nPWOFOrZixebDUK/19qvflesJEQe0Vf5XVWLLuQGsv9xyFu6I7YHd9K9Nrctw\nNgyWNC1qnU1qJ1IiAT8FzYxrYbFcyAhZbjAZMKYXW5JhBibb/1KK3v7k0N0B\nTTys+k+RRvCnbtmnjSY9iGPS5LR2uZmY6Kf2VKWW7vyXJSSc8GgxnhGaso1S\n/CUnleLKCOVCfLy2acR022yPKYCRfM/88CGGL6HJ+qQ8savGnxu3Df5GQXZq\n5t4xgt3novtVcg0BVSys9SKw02OLNglVm068k8v7r5qxEdDKChMkX/9x1rL5\nhZKW5LbYO1ABtUlREcavLNGId1GED+ek+FiAInGeidSGf8cZ+bFawpkmSFqc\nKrWmZc1ZVAcjJEQ/3jrXJ6CBn9hjL6kjpAQEyIhOt5Wlb77TtpuEotIw0ihO\n4G/RDgndmHQEph7N8D2e0XY1TiaIWgVKCOXDEzcLCnrWogiAED6ucIpBkqtz\nWyfL9vJp1brOB52FhgX7++cdJ6B16vs1qZr6yJvWUEHuyebqrAySnKdwmf7o\nIVpEqU2ULkxpVZF5gpR0HoHEWnyeZ7u867TXR+Ps8o4gMezlW8OKx6wtD+V8\njlMv\r\n=rM9t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.1112b8def.0","@material/theme":"5.0.0-canary.1112b8def.0","@material/animation":"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-indicator_5.0.0-canary.1112b8def.0_1578607810288_0.8524692981483577","host":"s3://npm-registry-packages"}},"5.0.0-canary.aab102017.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.aab102017.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"6845d4dfd152e8d6b8b74e0e87c0a0c83f644032","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.aab102017.0.tgz","fileCount":35,"integrity":"sha512-MTQepJEE+/28Di7mGuVcOewMRVD+JzrbYbM8MSkqZGI8KL3ulSpr4G/9MEpyUmK9yA0xJ89udZtesB9pRvV2VQ==","signatures":[{"sig":"MEYCIQCB8O9sPAlzjn3GBL10Wb70H8ssRfbt5cMqCXKMLFoQOgIhAPwY9bM4i30DY1pIdBsq3G3gXWc93NApNyrhIFKL51Z+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF8FfCRA9TVsSAnZWagAAFMwP/iMpkNGvH82CtrPYg0GP\nHjNvAomEEfKH4XEsgDBAZ+pyxoTPaZndUMUYQE4OMrBMq75R3TCB5NGJZhVI\na/4HInuvUYO1I2Oab9R/yMA2ubwV3Kn/iWeRY+44m/nzHi1EbW8oApFw6UUX\nfxUEcOBi4PCejMnDhHbEkfmXl7tGhT3cwhTJWGUXtuLSVOdHYEhiBJeDa1eN\n6dIj0nWEVeYz/3TzeSP8bvjyY7BgatVq8jNJUcAdaCZ8wEbDiS1LmOKMoB87\nfQ2Bd4Uj/ImCCZuCSc+Uif5lOJBY/BC+Me1b8XWxYd4e7N0GpinunHkVcAZx\nk5svFRzJSLjPiDbkJhtci9Tco4Zava4mjAqjMpqGn4Vdfu+u7D50vtVH98Qh\nWoNvzNn323bgK3Zo480Lup2OT5akMKv32ezT5QUa/MA5rOv54JQqZibDzQES\nEtuV3y8T6SYNM4o1ZAuZUAix2l8Wu1OeafQT2QfANNqmZK/EBr2Nj6G9byJZ\npU2I45JMWB9RFrd0MSj9vjMSV7vRzYxXTZiYdMaNZY8pA+caaZADataSWq+E\nggIntnV2RsFu+oNM23WbT7Uh3tFIE4nSoaooSzBRZK/vRwW5kw/L99g5osn5\ny2Rw64Kkc4zu7v5IiiRYb/rdg5DWcsYY4qDU7BLGDfeBy05i+y1hFWXC/mVL\nCYJ8\r\n=Jxnp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.aab102017.0","@material/theme":"5.0.0-canary.aab102017.0","@material/animation":"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-indicator_5.0.0-canary.aab102017.0_1578615134555_0.3993041291299575","host":"s3://npm-registry-packages"}},"5.0.0-canary.426913342.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.426913342.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ea5c487f2d070f1fac4f1b04f098d74a92e5d839","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.426913342.0.tgz","fileCount":35,"integrity":"sha512-jAHXsfyz3fxDQJw5+Oemmz0dRRcrNF840hZcXyiB1GpW3oYZ1g0Q44PMuFOgiOXRiutBEaVmkcE4/jqEho1psQ==","signatures":[{"sig":"MEQCICH+Vyvr3QmEnrhOe7EFiZXS/+G82lMrR+mTY+7sYmfrAiAHuW4Ud5kJcF/dkiXA/yWhrvIkZUCFh/8cy2ydShtUiw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF9bnCRA9TVsSAnZWagAAxIkQAIL1g8BYT0/WGG59K0oX\nPUETmGW0WrIyEtN0/lhtO0Q70DtjRclvCbJNOdREZBupxFaOQ83Z9m3FfLTy\nJnUblo/IVglMzHUbag1hBH2OKYiXJyFJTRFgO8yaSkEWunvDBuhOWM9Fa3HS\nYvs5O6CDZduWMRzc8vpdM/Ym7X4qZ48w0TxBgHCh3YHMKI0Gc7pyrdGBN8As\nbG94eFXMUpCiiSu7U8zUJyQdt6Rnk0ilK7Hr12muBYHyaBAf8A5hx7HLCwVI\nqYMUC2q+8YorqXfBmZyvnJSgaw9MqYKtIv6ZpFTfKI102WKM6k3Pzm013P49\nHHDaOrdMUCTIIH/Um0rusHWWidAXlLO2aqFHLPu/b3SPER886+HItL48IREF\nWs8tUQ+Ulq1yiE918AgE2P2+5z4DOc3TvSloj3IrpRlCciFXEzhgYsCrr3qV\ndNK/qKw0jLx/OPWaOe+LMRQ/ZEEkUpkkkWVXWglFQ4NgnGqwms/3AHkQJBtZ\nflpGzX8l9bivncmGWPKBmA/l+M5SFvDjtX5lRMycA2JimWLea6dzqq4lstde\nXDxc7P0bqGynTknbE0t9k9FbBS/Q4n4KTjux0bukLMNCtcGUkPSWvwptmcwf\nghRyhn8ha4mN5ltKQusdYFSpyRs1VkNSrDa99ajEy7GwEBUEgJsGrZwXPFRg\nVz86\r\n=sdoG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.426913342.0","@material/theme":"5.0.0-canary.426913342.0","@material/animation":"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-indicator_5.0.0-canary.426913342.0_1578620647099_0.15553906379720783","host":"s3://npm-registry-packages"}},"5.0.0-canary.d4ea9a706.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.d4ea9a706.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"57fc0211acbd1355474dc8f73ad5d507219f462b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.d4ea9a706.0.tgz","fileCount":35,"integrity":"sha512-JeKdspA72oNlKSddN4RqEiP/Ox7RNgL1ELlJ46WUY8ClTh5e6h0hBU+m79iqFwvsCjLfcZ+UztZnDUCMOhp1Ig==","signatures":[{"sig":"MEQCIHSeAhPhyvLFL5fIICcyl2EgpHenMgZ+nEIDaVUWxVIQAiB4/1hJFOnKYRc/fyIXB+E7PjZCooIybrBcDIwvjiiPgQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGLN7CRA9TVsSAnZWagAAh6gP/iiDBF8q5y5bydjN8xkh\n7aHzwcLHcp6PA8+6MMU8D3WUHSzN8jVONpJKzeoDrTQRgom2EWZDqP7B50xZ\ntU7Hfh6mAbX8rz1wokf1ApsHkuVEfYBvpdxBYik6Fq1VEi9qrL+RLaeO4goy\npg4Pb1HOeI6xMeaw5luXsk9n2VUr19Fcxjq1HCrrH5bUgdzIQegeEvvh/r/R\n6aDJDl6EE1+Ni3q4NFPyAXIrdWOLXRSj4BMmlMQW/4Xmi7Irpz+HwajNcZKi\ntN0tbvNEDGQUPCAGV697dUd3J+MZlPhS7XmJxOttzLr3C8Up1lPWSlUpjxGX\nOfSy/irpbHVUgmIjR5FSJk9iZsh17Wi4P+DlbyIcBOfApisOhjxW2C5d2XsC\n8/Jx1xkeXLapmyNv+tPzHhtLErt3dj1XM8UNWGye3tth6zkw0maWzfCvDJwz\nMABuEG5vRYz31kf3FDMNvRBEJ046Q0eYvf+ZbJWTo7zcwmh/tN6o5QM8Ee7E\nqyGc+F+F+u+xKFdQ1VRdBHx5ItaCT6ZYLntvjqNTZD72BTE55udXM2qHn2mR\nx94La2LenBqoEjs2Fbmxo1ABsG3REwMb3u+1Mppr5Q7GyXzVftZUpE+KLrrf\nzvnWyv+S55459r+zRR/ir8MHui305TTs/xnaycrF0nkbnIgwwAMKu1z1qECR\nFy/9\r\n=ATLg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.d4ea9a706.0","@material/theme":"5.0.0-canary.d4ea9a706.0","@material/animation":"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-indicator_5.0.0-canary.d4ea9a706.0_1578677114818_0.6412670309667219","host":"s3://npm-registry-packages"}},"5.0.0-canary.7d4ee2996.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.7d4ee2996.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"f7aead9b3142778a9ceebe104858d1a1431c4902","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.7d4ee2996.0.tgz","fileCount":35,"integrity":"sha512-OqMjl4aDeGDNKRKSF5UpZT6vr1m23JYSk/9tAO7t48z/mJSNj2VRDPlypciEcVYovtV8TfcwELzzlQGKRJM5Zg==","signatures":[{"sig":"MEUCIQDVV5f+K9GGywfbjjll0a8BsW8v1snx+V2JFEPPvXRy6AIgE/nVFjNS2U15TfuiKhApyHVFidqIkXM7oKCLFy0Dreg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGLrbCRA9TVsSAnZWagAAet0P/3YFJ4bPWEBIjQn3YzgY\nWSyq0MwMmgXdAUjanXQoyfJDcKM8CWlr84KXxkZlM4+uTD2b65WL1cBa6UzA\nsGK6sdWXzLsZGaAeDJtr3RCOweoFvyd7wxIl2X9jV1ewNO+C4DRMMswlWY+s\n+6QHuonrU40en3V87y/g8Uzs3ngJR6DcsEx7khT3YOzb4hiPnO+hV8WOLx3Q\n358sRFKNjFjc+00MTuQ4aWXSE/i0YODhTR5vQkbzG20AGW8Okea9jyI1b4Fn\ncC+8FWdxYriZU1GddvkKNSukpsNVHz6Jsl0Lx7z2FT5toD/iR0E+NfJ7XCO2\nRzso+CU2dhzm0iX/QpoXRgrqj+MRYNJcegzimS7iX2Jsb3lb7mVVCfaYpW5K\ngCTQPkjS4n9GaO26yn3lisKfcNYrqRiJ88y33Yb2rQsVFTUPVnlWO1XpNQRK\nCj5dnU7fa2vkZ7nEGjh6kaiMPwzqOgcR9NzUnbtUlog0r828kMMehZvdfbmT\nL9ykd+coBMcRlMXSJ9dvaUbQZ9i3QCkfsK1SqazF3ipxOK13a7p/87VdUF7E\n91f+JSA1cJxq3HWxG+KsX4Mz9I0Z2bloPiGpIrS96o/2CatU9Ysndp4htT9w\nkzaeMPmIgHTMro/mUbyaYb21wPQi8nMG1KZ5OVr16nr3187d2hzKONwoCONg\n1D5h\r\n=AFS0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.7d4ee2996.0","@material/theme":"5.0.0-canary.7d4ee2996.0","@material/animation":"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-indicator_5.0.0-canary.7d4ee2996.0_1578679002568_0.8505369337779103","host":"s3://npm-registry-packages"}},"5.0.0-canary.981ec9b6f.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.981ec9b6f.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"685efeb61f14333f8ff07479b58d3be271a85bb9","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.981ec9b6f.0.tgz","fileCount":35,"integrity":"sha512-JcuZBuYcCqQ9U/MZ5FyawSewRevZqAcF9W9gFUbAmTeoOo/fVwBrIcgzCds7ZGeG/xb937sKuCRiWdA1oKOH1A==","signatures":[{"sig":"MEUCIBSt4zwS5TvMLdhtH9qILQxGXn7gaxlRLPRT/+a6K0DXAiEA5/4J/W8JLgK7FQC1RiFByTXkG8KTpB8vuEVkjxbRhhg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGM/rCRA9TVsSAnZWagAAHtsQAJl8Fprc8WZMbECAHKwl\nWt0rdOLNEG/0YvZ69qJ+SmF0OYJErZWm3BsH8iiZ1eD+n+lXiRk3VCnrynQ8\nJbBDgKpynWqTh7Wyn6v3QtNYdiXjqDHridAsjgu88gAR1ANn1NVNtX9IqF8u\nnVuWb1GgbXeMrQWeLErdD1VUjIwDscQXLs2mMnkAPNcMZ03Ahw1V34ITOVqc\nHxLoTrwA792Zc4u1nKtZ8j+NKPFriD8AJ1faQxgcCwRtYgTvIIybQWht6JkR\naOT0FopHHBNl8AHZSmSEA7vJ9gOzHFTQkiHiC+hCM9Ryi9aiPS6FJzUCUQaL\nEisXYifCR5wVzChLvtn/sbIWc4wZJuN8JDUYSiHtAmHUzBEANZiUyCEsqwa6\nZvU4DO2tUhYOGaVCDEjsI/pbINXnEmD5u4qeGJ6x2ahvrnDTYIZUlRdEGga6\nHB75K7MyTDalMpPxEu42S1OfAxrO93TCawC/ZrBGn5LI5/zxlUN8782AN1aR\nLqhFqW1+oeu+1uByjWcDTEBQChANJ/CfHycb2cX3L6dsWwcent/L1CB5qYVc\n7IjZ4dxgfs3Us+LA7T5Ztql7T1lCVdrcmi5Nz7XdpAHBKzuxMkd/W5O2Ktw5\n+Ntf11wtu+lATDiC20YV0VyhWl6tkWDgPREs/oU6aF8Kzda9TiyIqOLE4kRn\nvmWv\r\n=fzwX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.981ec9b6f.0","@material/theme":"5.0.0-canary.981ec9b6f.0","@material/animation":"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-indicator_5.0.0-canary.981ec9b6f.0_1578684394674_0.4681459509820085","host":"s3://npm-registry-packages"}},"5.0.0-canary.737da83fc.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.737da83fc.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"08b10160a1dc62764468a69ab59bb555d7d915dd","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.737da83fc.0.tgz","fileCount":35,"integrity":"sha512-dYRL9KvYtrXq6sVTc1SyDIGRdZjzjRMXSK2CvHTpojfS4amhmElUqvyOBKdFFjiF9eSu8sIH81yRROLGd+Ne1A==","signatures":[{"sig":"MEUCIQDd1OFy88yOoS6csLthjLpQgeFBgRVL0WJlXQ8RIYHmkAIgR0dM7owG+HpVLfPhmD6TROJDoVY/e2Ve/bDFUbGvj1M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGOo1CRA9TVsSAnZWagAAOR0P+wV3GApOwCQ1wDIrbkah\nQDSaHzZAsUwfh3nwsFMyYL54VpkGOFfYxQuwy2e3hDIcvmeucdi8wq6/qTaT\nRB321DOh+DOHs0rhAtF2dybof42wF2oKnA5Aq+MWBnWvv0nZD79PPm7sRy8M\nkuPvxPqgdsW8Nj94veD0ZjfqLBowhuGy1qTWW2U1RANY7B3Zky7x/PtWhTzr\naY7/pmyz6OIwGO399msD/11dvi3KQqY30X/8Oi8paHTdq4h2WUJZwXZmq/Xt\n0eRdnVnXg8mOlzyIGeZMLap6LYjfopYC4yhsfIfwstiGfVhSAH4IGI1XBfYl\n5zdtQafS9ET+PHaCRW2Q+/nHZORefzHBifiPr+XM7DRBmaOsn7UtuTQahc5z\nqYnS1VC/3y9j/bvv2Ts++IGTAeYOppcYQX0nMdSjlq9lPWSNn7Z93YYjWPGs\n2QQ9AMzlJm0kjqh41t4aq+KsclEExJGIXmrP48g1yZp5Crk8i62/A1A3ptOj\nhvOKicFLcDVm+tb1k2KlelnBzXfpM8esC62oB53oWA1+7EJLJ/CqRVen2P8f\nQysqtEaiBz0BIhaDDtzQC2/nD94NtfTBh9ynIuMaCdoIUcit+xvxcbUryZZh\ndTWGMz2rw52UHLnj890zAXrkpkC6m9o58yxu2brgUEavqvjJRkF2tXbPsRiu\nVqa3\r\n=1KXE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.737da83fc.0","@material/theme":"5.0.0-canary.737da83fc.0","@material/animation":"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-indicator_5.0.0-canary.737da83fc.0_1578691124895_0.2557434033839554","host":"s3://npm-registry-packages"}},"5.0.0-canary.aca8e6c18.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.aca8e6c18.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"be39e19adb766c2f2e32ddb8303e65f34fa64958","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.aca8e6c18.0.tgz","fileCount":35,"integrity":"sha512-HtJMcjcSTsVXMVxTBSyGYGvSwMOP1YseDcn3ZtLRcrkKKgDY0Vh+sbSpHucBEotJN+QqMNMkHIhr7liwcFUt5g==","signatures":[{"sig":"MEUCIEYMiQzo+bLn95NEvjQBXMBX3j3ZUupl/Qb4I3NQEPlHAiEAy15R6+c4AxdrOmiVnqml3b7LgghPEPK3MMZXXILIB1A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHMW8CRA9TVsSAnZWagAAkG8QAIWfO5CRu+6/8cklN+EC\nG63ee+DB2vMPocW3NvTk7ommkqj+52MI/0b4kHzQ47sIWwHOZxJw4vGAFwWm\nSgZp8pJ9A1wAOwZexn4eL64MDauMVBGqO9dJlRoHg5fdGs65cbqOXz+QvULm\nhz8Eey+B9aKpBYoiFe9xx8aQ1l0h8ICzcjdj20plEhv5p/JUFxRHV2lO9BrO\n+oALJePSL424nIwM4hP0WX0+ByZO30EsqSXDs7xrAfq+QHj3lqVypK7htXqa\nhxyGEEMbut6nol6lsv+fwzQc/jPqaU6VKANk6ReRHKfOFc6N56NBKzOKuYVo\n5BLAp0f//yt9ktdwQZhYg8K717j5SbBs+UlQADHzZ6mWXLyy3Msnv18e8t+n\nC63fzPvX5E+YHObc53YD86zF3tDswfJfwslXa9bhfH2vLojytTaH3zHHf+by\nupXwNvJyqcUP1xTfveuUDbizJdcjl4AHRfBaFh8pHRmSaGeZp85WhJXfB0Ob\nKh0/BxqW1fW7PJYY3jRToOey9ED4jm5XmhfEHOCIy/bECQl7b3m0ZSsjl67z\nAqt31ajS+XwXUURT8dDbF4xoAw5WMHK8CYkD21kBDbscHcxPHDXyrdZuPCFB\nqG5zjrmbRLbYn8kEIeSopX3SAVO9MuzgFwr6NS1OjzKJdsYROSTHmg5P2sbR\nLqgk\r\n=pWcs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.aca8e6c18.0","@material/theme":"5.0.0-canary.aca8e6c18.0","@material/animation":"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-indicator_5.0.0-canary.aca8e6c18.0_1578943932229_0.4522173679195418","host":"s3://npm-registry-packages"}},"5.0.0-canary.c38d84e21.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.c38d84e21.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"cbbebadc9b1cea9d90dac869ae1356b7bfca8a33","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.c38d84e21.0.tgz","fileCount":35,"integrity":"sha512-bHyhkbtZ1kvjsjtjrnl7WpA1ODf6jABT1mGyzYABY25bLLKDBMoC182jDbY7KZD2PLLYo38QF+J2/SfopyHQ9w==","signatures":[{"sig":"MEUCIQCtP3alVsD5YDRAdkCwnzXLVRjTWriyHOCdlCjWWcmnDwIgbW5x381g+NiRtDHr791oT7MtdvyDO9NdRwfklfg2tP0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHOuQCRA9TVsSAnZWagAABo0P/RuR60Zk4eGAQyrS46US\nq9Wn40fUzn6Uy7+aVOg+yYk5X3jZaZ8RuS7nRC5o62BUZYhD1sN60rGEdsZ0\n9RAWc3h8W0Uv6T1Ut7ydbb3Z6WofD+Gg2ZetV00jczAgWHWo2ZnrpSJUIP9R\n0tndP26Ei5zl6bqFwmxMdxuE2CXYUp+Twnq62uX1d3K3byT9ynGGmu2HMgTk\nTj5uEyw2V/TXCl5M5iUnajULTxCnXMwXrMCcB/opwAsOvriAqa0OJcu6aE0n\nf2x+jDy41FvM7JN6c5xlkRottsDSjd4j0LgLI7L36gM3moIC9LVEoFPOz+fN\nsYvZMIZbibGA1bYjSlIaEBDwXuQsr20nle2nB07/OHJtfi7uUNFkti2l+IvO\nvQdXS9nTRTAc45KGYkNh47GADYw4iiBJuu96TV8nvGAXwS4JbFK1dSpcwABF\nk/Br/HZp+0GjZnhwXmURq2klgJyQah4sg9/JNqUYWn+SJU99gh68v5ZjFljv\nLu+QIy+SPeUShEv+bCT60aYfxRmS2AILmYU7v3FjJUKHHR8ak+tv6uKtd1aX\nlV1pzK/A+3OXZ7DZOMfic7D6E5iLfwbjsarMx7wgrbH9WsOBN1JKYbH4ifsh\n1SP4mtZNzTizIAMYpA6slaC8f/G5mfK9cV/dryAzwkElvvywq3E/Io+4eKmM\nARz7\r\n=x3LQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.c38d84e21.0","@material/theme":"5.0.0-canary.c38d84e21.0","@material/animation":"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-indicator_5.0.0-canary.c38d84e21.0_1578953616478_0.3261120004553988","host":"s3://npm-registry-packages"}},"5.0.0-canary.a4db5fbad.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.a4db5fbad.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"4c6557f7e535932c54fc782719404835bae31b05","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.a4db5fbad.0.tgz","fileCount":35,"integrity":"sha512-9uC3sqaYr7FPWZ4gnA1U4CnXhcyhwID95ECWAkwUlfFM1mQ5ScvLT47j1BTTxSIejwEq8kymWbykEXN7Tm2vuA==","signatures":[{"sig":"MEUCIQDiVHAmDTHSoeo1osVEPucBJ0OcYdBRFE3Ywn7srDn3TQIgILqleHYm4FHgZdWri1YJUVRFqt5Qzgkf8+MAjYk4Elw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHSQ3CRA9TVsSAnZWagAAnUIQAI+b6GqEGl7e9qEqMM9m\nyavcbD9cKEAGPmBLZOE/qd6oHifvbgzGIoq0TzWNiNAGWV6se9BAnqSeOQuW\n07Luyxqa6VlHucHOBeRp08ptSJR4eWbFzPHF13Yp6CyMZ70LSOZ6EDMEMJuj\ni7lhYjZiIws/fWPkYFDokrRTcOkyPHWNLDxZ07dEwuRhWEjjHlixmSbZVUa8\nADkCyyz3Rv9audRULxhQEaVKZ3n6FEJz+8/WRKLtd0LQy/j6NBontuV0uZVw\ndCCxvFfJcJqg0Ax8FfpyVAYaGjVK9Evjzg0iczX9wL0kLUiV/+2tCoBHGEIO\n5l/SzTSJV0QX+i2Up5wknk1YQDSJXiBvyUW9DtFloEMbtfrbkoBrZEw8rmaA\nL8frNTu5tsK8UDG+EtWJJ7jv+PHuRjy3bXmvOl2wcs9/Aa8Lz1pdk9gHkj5Q\nmZqR/veNtIdhk65CbguZAqXvSrI14vWkPvHY7N0+O3MGZSVwSS2ESCve+8cn\nQCgU1Mz+UHyX7BCvluTMshWBsDeoeSb6VbvnJxl7YEjs51/BhdwlEbR5m53E\nf0xzMuyxnKrnpIJyuJCg2Xj/dOoPjXjrPG6Om1xaXuLKulvclXeIelpmUIhw\nvXoIyx6ToiWxURrScWiQIFB8GmAIA1q0F7WuYLqoY/CsFZ8wR276D1+PNCyu\nTB9V\r\n=Nr7/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.a4db5fbad.0","@material/theme":"5.0.0-canary.a4db5fbad.0","@material/animation":"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-indicator_5.0.0-canary.a4db5fbad.0_1578968119526_0.7176162877883117","host":"s3://npm-registry-packages"}},"5.0.0-canary.faa9af310.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.faa9af310.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"9fb5245bde5f79271e5d1886cf62716e5f2e2c1e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.faa9af310.0.tgz","fileCount":37,"integrity":"sha512-Vebij0h6YZ1Ty4U7jTyxOJOD1YrpwqmdrAnc+jiwHm48j7i5W9o4CbnHBmlLdZoRFH94m4Tzf5TpoCtaaGfzRA==","signatures":[{"sig":"MEUCIEAMa0jynxywXVA78ERw6m455fNM9hD+fRY5y6zTpYXJAiEArPKqbpL/zrOIJpWdcK60sG2ypFmb4VVqaYVcHZMWKyY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHfHZCRA9TVsSAnZWagAATkYP/Rx/qA2Tq60dWPniYGup\nD2xwHj5yST36gROPBu4RkAkMTy/fpZi02aUeHBNDS9WGZTfngRIN/zytR5vr\nUi2Rd0KcTVmjufSoxjD5HQokAWeshDaIEUHSN0hiyVyfLw7H+/SDw6GPd0RY\nUYYrWLB0Pw12ObugmKltYk+Rqwy5Ep8qZHnpf0gkv2a6PBJHRW7MuyAWB48K\nK0CPeBF/r+2oMg77J2ziSzypdDXMjJws+A2N6mfjmcDmJykw6zxMs9EyMG03\n2txOWPSa0gKTUPPDfWkRNL9jWrnysUb8YS9BP5cadUhG2JTt9YgIZ4fxVmsl\nOv7oVGmM739FQAA4pUAblc4JlrS/LXV+TlPUby/r1ms32UqpyQ52CP5i1xT4\nSEr/tHoN1ZgxxTOV9GR8v8p4QrAVvZbpLvQfePezcLPrs12I5YUqdws5d28h\n4HS5yUeDjSyB/8XMG5DiJDKUQCWJcC/75rpbCC2qdeBp6cl9KtrNGDwyxwXG\nPdL1vYu5nbx4kXfbrHeEZeZvi+TikCT4ed5R/KWIa8+FdLLE5CONlpuEF06i\nJajsJ3xZ8/j9k7T7NuYY3n5MHU3AIcVdIAzj2dgW4p09VjDf75UC3TnOA3h+\noIGDU6L6yoi6cbmWlKa17FK7Qa6Q+32nQWisXKUOUgW9vqnOWoaWKR3WWiwM\nMA1W\r\n=B9EG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.faa9af310.0","@material/theme":"5.0.0-canary.faa9af310.0","@material/animation":"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-indicator_5.0.0-canary.faa9af310.0_1579020760843_0.8673266323951596","host":"s3://npm-registry-packages"}},"5.0.0-canary.60354c577.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.60354c577.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"80d896b4938c9895a2caa4ab7f7b4512624950e5","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.60354c577.0.tgz","fileCount":37,"integrity":"sha512-umWLDLBtKma54rhN0toQ2kPHIV9srZR3B1NjpMwav0kcQ/z05TWoA5IdU22YADGlc/cVB01rD0+o/GtJqmK5Aw==","signatures":[{"sig":"MEYCIQDNNk7Vf3SDOcibQ6bDKSM8vBdSHwzo7A+FDg6BZAWbRAIhANWwjurzfa5w1K7PwaNZ7hIatGTcwt/Qg/tLu2vUl7r0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHkSfCRA9TVsSAnZWagAAVywP/0V5AAWoMIgSo9jEfYSD\nrsYAu4lthu4hXNSOsaXIfqYofMxqP6ZlYmLZe3ULyzlnw5bGJValWWNIBAv0\nGbegk/AOR4fwK8pSGtz0ER77MZb08Q6bEYOub+cJLbKBG3N6kWBjjFhBaEE1\n9I34kz7F2/T0ilaqCp4RYXjwlYWX/XOppqb9Dr8JqTt/zUGAXxkjPeUralMZ\n72HPuWEUaoyxs0FrH2TP19z95+zJc4g86k7d1b71irrctB7TRpIJ5qQ0kigB\ntNoBe423Md+jt3HesNUy3a4a2qX+XHnkIvbyepS5T5SnbrVnToXvqXMfVm1V\n8j2wrHFyowWYcZMwRrEXsvRCWgmLnJG/x0iy9Yu6WhUwp3cWvPMn/87wJLLD\n4aIPjAsv31eXpb3fAz2JaABbGOMKcgCGFeS68g5g40O4LsXSF4lzRJpfd6or\nPcpKbg3E+mti1mLfMgrTJeOxBp2OKV3igaWnyMm11bgQUP/Qq/A1xxSLwy/Z\nKZc6OmVzyX2nAtP4alBOTKkc+drJbSK5ti++FlYAkRtzerVDFvwL708CXOe0\nnn9J7peOAEibrN6v7SFzwlWrPzb97/wixn4MJSyMmrXYY59yr5L9xLAtwM8I\nJp7tTUek5KDAH4vH0/VeBLixQuufbu2DVvScRy4AGlUEejPx8A/y3CE2T/Dg\nyKfJ\r\n=c0Zj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.60354c577.0","@material/theme":"5.0.0-canary.60354c577.0","@material/animation":"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-indicator_5.0.0-canary.60354c577.0_1579041950949_0.37544012027833307","host":"s3://npm-registry-packages"}},"5.0.0-canary.d07c78daa.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.d07c78daa.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"f90601113791b9b47483455ce75bc281fe8aadfc","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.d07c78daa.0.tgz","fileCount":37,"integrity":"sha512-tfLfo4O4pPCYq7mQjsjigrfBF3A5FOdCEHQysUV6QJbE9DCgBgSZuYKSYxlh4Y5JNnJBajVxeQZZjjLWiO/u9w==","signatures":[{"sig":"MEYCIQCv0FFsmBVDpa8urIWHBBuu11l05yCo4xCelhAdRPwfiwIhAPp3M5P6ZxHmIYZOl3jzhKxc97d+8b63aT2CshBquouR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHlDzCRA9TVsSAnZWagAA4WYP/RT2vQiN6YLtS5EKQGfO\ner+d6I5G6/NXmw5Q0UQra0c9FJJKh5X4nSsD2T1Jl9AwFHbp/g6oe2Jagbhx\naBwwFiZSZqkhWlK+2c393uiCMjsTnHDAtP6Jp7PSegb1PbIxYc2UgCTJegpQ\nny13SeJx/+fp7oZgxbUyItond2RW2RKZy9qY31Kgh5Tw0ydag1ZvUI+omiSW\n6OKkVHAubhGrBAqrVk3M4piDD1jOucxZ4l5rOC4cSH1N5XqNTuiG2LHXk3oR\nBXoYuN4BaPKjICu1H94c2XlSpd9ASvcA25y13Ql4UGCCVEL6RmEXPQncb/HE\nhUBo5Lgh5iKQFiWyMl3aVJeMQhN6pTk0rNkEa0NSd7TMiia28TbJHMjVzvC/\nj4aN74haRx8Obi91XQdXGPytJnwv7KJw+rG9BqkVA4Xiiwe3HHtGLNbdB/rd\nKSi8nkOqK0Yy710ejUJ4hnaH+43Lo87OtoS62P4Nt3zt21JbGzBbARFFHKmO\nXIoBRdk5dRMaRZNLpMOXbT7adlSOtmv6VHTxRcKfwk8PyC0YF71+jr8xzK9s\nugtZGOnCbpWHCfRysPfDOD0CgZr0vHUp58AgyqOuScZLGPCXTpjbfQ2r3D2p\nZmElH4LoetG2Bcc7V0XUW31v/AW06QT2qoadbAvBUZA/iGyFQ1WZgMNg//Om\nKz/1\r\n=8eBu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.d07c78daa.0","@material/theme":"5.0.0-canary.d07c78daa.0","@material/animation":"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-indicator_5.0.0-canary.d07c78daa.0_1579045106646_0.22288174713712428","host":"s3://npm-registry-packages"}},"5.0.0-canary.8ddd5c6dc.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.8ddd5c6dc.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"bcfc0b49a21ec0ae284636e670eccfd24056a9a1","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.8ddd5c6dc.0.tgz","fileCount":37,"integrity":"sha512-44X9nxN+iVYDYJ29t95zMIcNy6akUslqiHhpZEVG3BwW8L+o2eJunYxg453An+d2zPXtsRJYlK2Hl4qKmav0FQ==","signatures":[{"sig":"MEQCIDBfR4U7/d2pzWeEJdk5aKiv9ZX2SEMEgqcBZ3XIVlYSAiBORh4Pbj4UwBzyp4IF4W319HIym11imeybmWWliHWitQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHm4hCRA9TVsSAnZWagAAdCUP/i8BycnfZDOz2Zz8wyVt\nTkSUJD/TzTfa7ku/WHxDijyDfV8gDPX8y82wzHaC/aZagHEn8VonpdiMBPL2\nzws4CjfbeeaeybwTobZZm/EP4ATtibakJCOUW2KhlmUrAHEJuZh0SU3F0Y4i\nMsCazTD0TkK9ENMHRzO5TTt/b2ED6QxHUKXJG9OYGMUxmPFs5DAr1rrNpi6L\nGpxjI877viYI2Y8jlE3mWthf3je4byCN9v1ny8bembaUw1rGF8+z2T6oAh6+\nTQplaVtD7OVi0Ym5hkJSwewDEiUzICx2JeD7svQoQdaqdO/fzPB3gtlurfgo\nW93lRD372OqfB7Dfpd+UbrLCxeMVpVoPhob7wYYnPXGpI2ymsnujZHBX7/KX\nrcAATJsTTD+ApPJv3zKqtkCXQtPJexBip/8YC0zE9K7lx80T4y+U+3Q7VFzM\nUuehYvhfz82bFqErsXj5m0or8hdKegthdJ3KLjEETUlZ4yexcHnLHM0FKhfE\nfckpMTyVbO2x3Tb1DNj56u4liNkDgtGlAXV5aK4Zm1xGke9cWYrDi9f7GFqV\nlpl7Ho8bPbJc6XcG9TQNWhwEu7T6RRuQDk9kgg3L95lpp/u4EaENg8fOr0Mp\nM9BCHB/8yVAwIH08o/Un0j7OBuEbkxHKWIqjfQhaSg0cA0v6AVL/pB9CjiZ5\nvhmb\r\n=Lzjr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.8ddd5c6dc.0","@material/theme":"5.0.0-canary.8ddd5c6dc.0","@material/animation":"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-indicator_5.0.0-canary.8ddd5c6dc.0_1579052577013_0.5746491638957765","host":"s3://npm-registry-packages"}},"5.0.0-canary.a9511d870.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.a9511d870.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"b9b59726683722d63f4ddbc193ab06dc6051d40a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.a9511d870.0.tgz","fileCount":37,"integrity":"sha512-+5Rxpm5+l7oA1mUx/RkPRxUnABZChJmNt5cQ6hKZAAXdgMrJY1YNsta4ELj5N+X5fN9qsJ/pSnQKmTVXbRyfZA==","signatures":[{"sig":"MEYCIQDmmxXJy/Cgs0atabvFQwqTA01VgDiVX92cjDJbsE4MqAIhAJFAMdw/ImtPe1vBUg7Sw6eBVAQTXt6TMLDlwN9jrQNw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH2OVCRA9TVsSAnZWagAAKLgP/3IqRqJx24KTGTqzEWOp\nFQ417bltADTzxP7KR9Qwj2RrGSdZIkJflnjjKLQmcPQktORnk2JgVfuPo4VL\n9l6ffntdk3rcymRlrZEUTUn2US6MZWg6nj8Hw1efv4glhtB2uzbWYMKsR3zz\nUPdpgp8rEKvHMvITP3cCV0xOA93liRWr3ipFFlMf3zaBvV4xny6kuS3rcXgT\nPJZ9gTJfGXcpvR7S76wPJLal/4Ug2HgsAdhpshixsRxH2QZxg13E4gRC5tMN\ncbA06LvxIfOQmJqbPJXOx34/LvXd70MytXvLYddBuc0J+YKvMltqialn59bd\nxwWZqvGBKA7sZTBK+yOsBwXP2HBFTu0b6w9lAWnQakNe2THElX75tsdRYT3U\ny3A33VB4ap8gmyqLdKbbaKyXQPcVglsYLSUzbuxyZ5Xfi8Zd/syO8ewanrKr\nrbhDGnrH8yaS2y3go++hzWwZcFMJkOi/8aPSUnoYaRKRBZehvmUd8BKbW61Y\nRySNRCiREff8arnO5o+WZp4/LeF94TPPe0Wb9eNZqh0ER0jMyeYJrUkpCCSZ\n0NzPb0vSbWJahD/qA+12uQbHAxgLC2NUxZhkxSVEA0zYgrxwyAlr5KGfHxBY\n3Vfmq48nLaXNeNO5TjXEfPzufkds8IqkCdSpHcE7Ocd9/g/jFkOLiPAi6+KT\nA7/K\r\n=PLcG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.a9511d870.0","@material/theme":"5.0.0-canary.a9511d870.0","@material/animation":"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-indicator_5.0.0-canary.a9511d870.0_1579115413318_0.8914532160905775","host":"s3://npm-registry-packages"}},"5.0.0-canary.5d4b82bac.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.5d4b82bac.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"580c53ae4362d98bc8e5c935a5cada1969d09d82","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.5d4b82bac.0.tgz","fileCount":37,"integrity":"sha512-9nu0X1FAJsQQmkujjqoWIXchdQv7ZD4Wr/l99lyxZkfKs4zPMDyx561b43exbEqc1o7aJUvoPIwGr4IF4lSSOA==","signatures":[{"sig":"MEUCIQC+2FjuzdRIbmdwYwoSAr1tF0/abWUGSATPb5vWUfymLgIgLSHBTFKU2H01wbZu8uPgHOLtpJH19TG3dPsuKZ7NIgo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH5adCRA9TVsSAnZWagAAhaYP/1LrYe2m5OrtrlcorNUG\ndlL8SI2nGTWpt73l3U09eWmSRybp40kM/BT6L6sGJaEsRY0b2/dyFOXcyZ81\nJnxlY5YepQXavPwuQJuIbkFCgNFZiLODpLOvf8i1YWb6CFVConFIVgdmgBqT\nMSzOVgqBxHz0tly9yUCCBp11YiJNj+BXomdTqI/gn2kUJsAMlGO54dc8bSKf\nGQZq48/FY/a35IJGMg6vYM42+ACcsk/vUUuEX+v1phMfDGSDgVsPoi+eaEmQ\nz9zUmzT8KyF3nEjfAJUFi9j/IgWCicPAmcZG5hPmSQ/PrhazUZmOAhDUakKz\n6kWhWfUJg1CNE+pKdTTL4x7s/nyn4Plz9JtkQsAslEvGv+Zt5FI8XZGzSmle\nEPmEmjgCzzY26Dp5onb+GdzsDpfxOAadJEovTIaOWlfl94N58tZ6+wLGtPBV\nhPxZvH4/j+AxGA1y5+e9hulFui5h6RygFBG7Io6T0AHYEJi/ZO05NF6OuDFT\njFihpGPlMBe8RVH4HlUbhcpt5z+iB/siouHXBCawojgoFfX5OEMtLbp20jhV\nZqUdtj91GagmOKwKY/ozE7wC1VGBaGodyNwrXFQ2IqEALYn2zkAgCwmB1QlD\nvjirL5jslb3ecwjCsqSSuUjIjFe8b8akfN2MiP32mEI4FxWsfo5a8aZoC5Uc\n447S\r\n=q4NZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.5d4b82bac.0","@material/theme":"5.0.0-canary.5d4b82bac.0","@material/animation":"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-indicator_5.0.0-canary.5d4b82bac.0_1579128476889_0.22635209211028706","host":"s3://npm-registry-packages"}},"5.0.0-canary.7c8583c4c.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.7c8583c4c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ab611dadd16265f02094d12c32d8f3296e62a6e7","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.7c8583c4c.0.tgz","fileCount":37,"integrity":"sha512-vTT2o6BOryi2eNNwU70vYVpHAmDtCb6qD+hxu+CTzsgIXPUpWHRWapJjBrapnxNuSmegqBgaej74czFb1a6j2Q==","signatures":[{"sig":"MEUCIEOQpbnWzizkdUesS9mKRdJ9zdLbFCCGzd5dIPwvgDZYAiEArd+on2yV4OJzxbQyv/C30a5rORCvyrhyOrhdOIO68/4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH5alCRA9TVsSAnZWagAA0wYP/A2e6Ttdy9lCdBiwKN2I\nRBl/B7dcn3ta6+kMjg5ihOTy4pHHqbtLgCXvrQGzVhTbbkzwo/loRedgK6jP\nSxdJX7aFtNHkcxzbyKw6EXLWJVFu5w0N7asRdHXfOfuyqRwMwkGXmXFSP7yU\nx23O7ieAp6mtScmrqYF6NLQ5fpZt1xSmEBzXrJHjQJ06JJTsmvnRziCnzMHD\nPplV+PTH56arS3vui2F7p1JFYqmLzy8jBo4H90nRHbWdJUov8jT7ZMAtyZSJ\n4PNYuus86audNnLA06aG3Q/yUlRfPJyXqH9UDdm5MjBkbOL2hs5TdRJlqdPY\nwEZNO8HufL3j12YAjXI02bEmauSDz7wOqvCeFTLwhQJvRj6kw3ZTYNnUXVtf\nyuCJ97b+GX+oVXQTkTjUZyIWC8hB08C4RHuJjSwHr3NG1nYF0cIGNXDk8VXt\nfeSxmpCjqYsOFEGn1LlA4YgA8CaTIV3Ir1bILtoUr5mLV8MQ/pR27S0rVD5B\nuKigthsQZuR1FPcX/Gx/L490Uu8NRWCkrulzBz7QDn8r/AYYmOG7YOnm9IIt\n3XMsbgIQAeLjOjHpGE3a2C0ZXFJYKyf/fhncdhGrLpmrYHYa8pFzVtNqE5Pk\n3QJQjCXbgyrRyysZwaIGJ9G+2dYSj0xwm+x0IevA+KFnQ5kFiUjy0R4sLD67\nAwWN\r\n=YWeA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.7c8583c4c.0","@material/theme":"5.0.0-canary.7c8583c4c.0","@material/animation":"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-indicator_5.0.0-canary.7c8583c4c.0_1579128483709_0.7906534844382325","host":"s3://npm-registry-packages"}},"5.0.0-canary.57d0186e4.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.57d0186e4.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0ab7e172ec0312a748500531fcccfb36dae1101e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.57d0186e4.0.tgz","fileCount":37,"integrity":"sha512-lo0INBhckRGUK/9az2iLQy/sc8cVCIFkvOYrtbq3vSvo/hmmdIQeTR6AuBeWCqA79cS3dqEm8ClqVc835J5xjA==","signatures":[{"sig":"MEQCIAId2C9BO38oQbx1SBb6J1U2qDDnFTdzlDHDRGiNerYCAiBk0JH2LrLg77qjrpTW5+SkC6L92gfidH+fMeQsfPnzvw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIKi1CRA9TVsSAnZWagAATdkP/0KpbhC4xoOkVtIZ5BqQ\npUG/bvWgws+Y/f1Jwm/pCD3Yoa9/tkYM+FrncaVZJMb2Cax2h3+t8T/PUTM0\nnZm/IMD/ZfznNso+t9PJBtK/9RsUJ5V26ekS8cfh6zOWXlH9Te7KFu2ghW/r\nkxHS/MvwwpyeP4afSfLZBuHS2vyjnxWwQrLf4T9tLYmY2/h03nNgSCs+xCnc\ndqZi8oyRoVUdaTi8FNAn74+dmZ1l18ShWsZbT9t238IVCG91aCyTKKZUd9Zt\nY4sbvqgDZv+AP91XDO9/jRhfl3EmBiaiQL1ucHnh8kF2rcXoQepECAyvwJBB\npcNKKQp2n+DcxXR9CjREBenSyJRQ5SuAtrjsdNURa0KzMO/mXw4QjsEZKOU/\nuupC2bC4FD9xQ53CxkDWEwXxBdtNnCisSFYDQ3ERIv4hhuGqLymoS/vZa44t\n4oCH1MdY7+AZEM8BSu56nVjjXXHqu+fotimsWJkjw8j3iIL1dQFX2tSmYxWh\nE0ATuL5qmXftjljJEF/v/deaw0mbuMAcJgmBf3uK8o4soCQTWbo0GSm+WL0l\n6v56nJJd4nSDhN6iUCSFuCC77MEvBoI0XY54y0w3QLngzZEaN1FO5w+IQGvV\nxnpzwLYqU3WRaWaG2hsO3onBDr35BpiYSrmdTIMBrXSQdMoEBfvjWeQPyfDC\njxl0\r\n=2P19\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.57d0186e4.0","@material/theme":"5.0.0-canary.57d0186e4.0","@material/animation":"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-indicator_5.0.0-canary.57d0186e4.0_1579198644752_0.008040693781291575","host":"s3://npm-registry-packages"}},"5.0.0-canary.071a6ab70.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.071a6ab70.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"3825e99cee4ea29c961f653541e2bd22b5e95961","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.071a6ab70.0.tgz","fileCount":37,"integrity":"sha512-2Tme/m4H/p1NDJhmm+02OZVUlK0AyK4/r4AMdYnVaI4gBHTKRaZlY9SssZPnhCbnPS1AEHxFSQ1g9qxDSzX9Iw==","signatures":[{"sig":"MEYCIQDEDdP/byTUeDdrze1fdaF+eKmvD+loKzCfb02pdrITKAIhAJGfovdWvoydNJ780YcARFTStZiodz1Ghh5R1aKWoR6v","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIKo2CRA9TVsSAnZWagAAhbEQAJmdlfFN+yW8Rp4ujcJb\ndRhy2GSZXiCg4WxU06ahXh+i/PXyGjpkyy7rksaFMeun6EudULSWedrp+zfm\nl1kn7KNZeEa+Xlt0xQnh2Jk+Z1aWGQzfCNh92P2nSIi2crylNeSWYYsBLvEc\nP3dCHOC/ZhsxrrFeW34NLHUS7duvYi+emEUBVVWvu90R/Ld5GGoAc7BZ+CRY\nHnOhasWm91iRyF9l6TGgVhczWC2/NNvK/o/GE4U4Q1JSwkOxUnELKkO2ofs0\n0qNSmThYQ2Sl0MTc+S8MJI1Ia8YSGUWtzuu3kOEHsdfQCbOtvAtbi57NV+fq\nABDiI9XAvYKH1LiG+fYTNOXr6vrx9JVXC4W0z+HkWBzboM49YYAJwMSQwuBB\nZmylLAI9kGZrK4ZNWQmaB6FBKLg+yoAJX41BTRA+iZIuCpLz03KoSnS4HjyF\naSPgz9tlIVSyDMynd9cLg4sfg+RLZ/9j5wiLtFpIRxDJPTBc2m5U+b8bhrja\nAiF46ZfVftIcr2wXt9xuUsqjyklOI0aeiKWRbqrzaI4QVvP4U1H4ebVzoHHe\nnPquT3fUkNPa/22bpY70PyTLHeQs7huyKg0AxvvV3LrQyB2wgwqvCIRKDtkq\nlHgNwWQtme15Lz13MDWuTYu2DTUyCI0BlZcIyUuoISPaAYKtKa7wo47/pDGE\ngFa1\r\n=N5DV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.071a6ab70.0","@material/theme":"5.0.0-canary.071a6ab70.0","@material/animation":"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-indicator_5.0.0-canary.071a6ab70.0_1579199030370_0.6067908211507858","host":"s3://npm-registry-packages"}},"5.0.0-canary.22e0cb618.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.22e0cb618.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"2bc6d6b0cd026b51007eef2f200dbaae72022d88","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.22e0cb618.0.tgz","fileCount":37,"integrity":"sha512-pIj0MmgGGzgqzsKLw1CqGHYtGXknk5yvhn6FLq/MezQ5CDClMBytQvdJi7VwRDc07JvArL90HSgNdBAVZaELhw==","signatures":[{"sig":"MEUCIH/haIYdp+IW09kfeZZRFCrU5fnGOxxS0ZoxTPhDgWMwAiEA5cJ6MUzK9njmG6HaoxmPtgy/6axAhP+iny/1pE5XN6o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIK+fCRA9TVsSAnZWagAAwqEP/Rb02mlLuPpPxXvhXcxb\nPawbLYPD6tAAH2+arGjHp3g2qUsdFjmk2mwUEBuXFW9Ryvzs9z7eOOlMBpNM\nUWFLv/k45+RLyXnhQ9DLdkD+6eTFpc3TlZoSYUuSj+cRdcrYdAZzDaGsGnu1\nViurshfXdGTsXeHBxMjadx+E4KS8f5nBYrXVjWkXHNad9B27ozV/dgahA3Cw\nC5lMF6sncE7VbxzbFnEAYIrVj3E1puh7bSAUE7BzWAlAE19vz/DLfFswDzOE\ndhMl3WvgtNPhnlbB2ORoxvAvsdb5GNssbnBr3vq/ZbsHatMalxeJJmGHP40L\nTWuIYvdiWM3BVDDeG8eNxF2R9kSXkcCziP3MaH+HjBSpneRrKEJxa2R+35ER\nwDTcGZOhC/P1AaaK+sBMbvB9mzJFpr2OSB5u7GwhYto7rsjk8w2DqAr/SAXF\njuxHcna3+xCe5gOKqn2RJDUkGvGWpmXAHxP1CAnWKc6/uN1zHywccq1CkjJ2\n0PPrarDAvTHeAvVpi6g9sh2VeSjlz6/fb0tx2joRINALLsziUQ89YGz1cCvP\nVMqhZFPsOT6tsPvuaMHmSGP8C80VhP9htPAC0zNAa06hmxtXSw4Mw31VV9Kt\nKsddhG4UC6v2pivIhIBJpTYCHujjbCUr4Nt34IqclSJbn25a02JmYghq8FHq\n1JNP\r\n=vPQ3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.22e0cb618.0","@material/theme":"5.0.0-canary.22e0cb618.0","@material/animation":"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-indicator_5.0.0-canary.22e0cb618.0_1579200415458_0.36155956637721753","host":"s3://npm-registry-packages"}},"5.0.0-canary.f16f15b8f.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.f16f15b8f.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"451e78740c61e6dd10b69a4ae88b287f27f9d119","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.f16f15b8f.0.tgz","fileCount":37,"integrity":"sha512-qvuI49pQN5MFV0BoEFvFXPZRLEmB5I2ZfxNLd665WRY5D3ZGcEFcJPG4VKf4bai2jtMYKayivnDWAw3FYob7aw==","signatures":[{"sig":"MEUCIG9T4TNZZyfNjD9xC74KbGyQh98MqoO2sT0G6TdaVi1fAiEAkRRhJOIj1BoryRrhNFSlmhocoAb/LL5r5jCn13RopLo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIPqbCRA9TVsSAnZWagAAvsoP/RbCqmDCGSiOO0oSrcbL\n7RE3psoRIdCnRnAQORb5wZDy+nbfFSnrR4Gb3jdHw+OEYHEwCKn3mNw/bqzM\nioZiiD23ni7YgVE6Vzs0Ui6dGwa0aF3cQSHIEG8cmDt0RxjvczBFH7LcBbp/\nW0KnGREX3aCb0tK+T+84eMIeLhpEuDx/7tTlUaEAEdIf5PLZ1ScnA+RVYa2D\nCkE5ZjS2TKZZ4H48CXsTMBI+AeAFKKUyWP5EW6QgsrK1s4/cTrPgZXyeoxGM\n2GzVW7cXXML5zbRNvYK9NeoxPnFy5CjJmve09TLfHwGNVO/YsYlwUU11eMeF\n7loLtj8Mnt2fWUgazyeU1Kyb2RPZtJQ7GAQIrHWLW5aiwu5ntM5NnMcIxa1E\nVn5MEYh2lzoi5wy1aefhlqBgR+AWJpAH0oUVdKrCneTPEK8EqeuscNeTRAj8\niC6SGmXRIbZ0iTumJ/cg5vYkSIuTPUu5cIuMuh2NLUeo6izmCGEh2hMriTkV\nBeQL412u0jfP+BK/SDHHhY70qFLGun5OIdZW30hX4Ix9RCPj6ksTBn6AmnWG\nMyeihUlPMckMna+tf1VsEl5w7VQadMoqZapH03VPrEZFcx4/e8PElOgI5rJW\nrUPuOW/IHEOdfNbtoRL8h+xwHaf+oEY+tiQUGzE4y9biDTMhE1imc9PuEXb3\nFNu6\r\n=ONyF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.f16f15b8f.0","@material/theme":"5.0.0-canary.f16f15b8f.0","@material/animation":"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-indicator_5.0.0-canary.f16f15b8f.0_1579219610969_0.13305834557080432","host":"s3://npm-registry-packages"}},"5.0.0-canary.aa8e43e9a.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.aa8e43e9a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"41b0611f725da2a07f02a2356d403fd7099b848f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.aa8e43e9a.0.tgz","fileCount":37,"integrity":"sha512-qE1hIpM3B2n2PrrhoGbLB07yBxQBL5OLS/9z4CczCG2ToYVuaOwHGCktzFD7fX3+gjCReBfcRIkJKAd+Os87Pw==","signatures":[{"sig":"MEUCIQDt3YBlNJk/P+1BrgyBK3oW3FT7HWaOsXvRxU4IGnayYQIgGxP5GbyHE4pzxIS1Zil0aP0cLnN6WlO4IDpGk10KuP0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIQGVCRA9TVsSAnZWagAA8ccP/1Oa//Qb8b3V4JEatwVl\nn4+IaxR6ow/ETzfvH2swGyYFFlzo6/iob9wJTN4iALksWHkAxa8dygKqGcM6\nR+yVK1NdyqzRLLPAEao3stKTmadfKUl5J+C7RnGQa2qsf1yJhFz3i4nyYixj\nJkneuQ5HznrS1cGDmcn+Og1vAfEZrbxD6+AN4muRSigWWNl8wi5KljuZHYif\nl7eoIL4oSdYh0WhxdCXdzSDukEEDhT40t1+cK3QZMk7ONm9IY6E6IDQvDxMM\nzrrgfdkDbcflz1VCb4W2Doj1gtQxQ0Cf8J9XFVIPgJQOg91DZMYUGR7X3Sip\nWG7UAt32Im6NVT3DcxjdhxXDN5rI+FcI852neqfukktQT53yo+KCkIQmR0eR\nV3VUxOPNiS8QAnfbZzYWC0ZdVyfylSUU9uGR2z0RQBKTqRvSvUQV9f4LWRIs\nD7nkrOQMlne4NnXhPewTP3pfpMci7wtsBXCL3MgHG5AYjltwC8Ta9wbZBth2\nBm75q/ESyPoQOFDWfgt4ifQnNZGloGHYvQsb5FomyF5Xv5PFDDF/Tzk2HZyc\nrMDJFISXGK1X7qA8dBi7bA4oBdYsaV7MHHt5+i9p2LUVEip3U05D+AR6YV/P\ndWnBzJ+nd8O7hGZCcDcDLMPK6wnIJl7qG2xIADlxGsKsIz/i4BQTaSZM493h\n/GB6\r\n=X4DH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.aa8e43e9a.0","@material/theme":"5.0.0-canary.aa8e43e9a.0","@material/animation":"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-indicator_5.0.0-canary.aa8e43e9a.0_1579221396965_0.013625247961746467","host":"s3://npm-registry-packages"}},"5.0.0-canary.fe1f3ca07.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.fe1f3ca07.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"28c7ad9665092e70aa2fbe83f742e29bb0d1c94b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.fe1f3ca07.0.tgz","fileCount":37,"integrity":"sha512-vrF9ZW9XfvEOElpoafqTEmVueEXjHAoJpW+gI1lTJWe9/v6KSZ2xMA7Lg1fhv5Cm7bb4huL6rw6DUnA/x4Kkxg==","signatures":[{"sig":"MEUCIQCjOtlwEX82DpEAU75+Ir3XC/ghdsDx8cCBsNMGA614zAIgZXeUlq2lvJPEzksPLV0wcqxa+DZrEH1kw3UEqLhMSxo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIQcdCRA9TVsSAnZWagAAgNMP/jEqKtZjzGxAESQ++xXI\nc4hoGwH8ReEWMFO/BBYxk4P/BjgwuaBzKeMMC6Ul07u7w6M1m4bD5SNbuqJd\n4H6uab3tN1C+UfHPoAf9//pm1d4m/Dp+2N27sc1TJ3tkalPSyTpUc+F72UKI\nrvGVDCm2sLl8o32UnHlFaKHGmnUuDUakCag6gefovxMDI13m/KIgW7PzEYvI\nvoxS2FTzVDm3yF9Te5yAwb5ickDZvxqD+Rcc88ejpeh4Z1OxTJHhPz8dAVgK\nhC7BYY29sBwFqsrebVelphfGtfUJko66nOA39lIuLk8+lE5oCMLMeWymmU6i\nDaP9hMrZWCzSU5TEBnJS9pbvD1Nthth18qiRARWlHb1fdniyFORnscuQ3Vy6\n9in8s29uJCiJ9ZH7bks33JA6EAdib4ve9Gpl7893xT+MvVuSkRldJrXsm+rT\n/SmLPHnEb9Md+KOgAXHY6Y0HoqdODsTBDzxuoX70nJ0fPpHRR2fxtFohBd9X\nXJxOc2QzYcEtgleO+0i/Zz+B8lcXAAKUqE+T7DmBSw7uTzLXOwn8eJXVJ80K\nrOt6G6k4NAM2rsnx0b2AUGRFkrkpJ7/52EBC/hPUjhLXRBqNOL/CoC7qoA2W\n+JAxzuaj+K1rfiWlLm0u3pkhKT9DJOYF/liy0rQwA4f+BQF+vzVUjM5imn11\nhd/D\r\n=zyMf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.fe1f3ca07.0","@material/theme":"5.0.0-canary.fe1f3ca07.0","@material/animation":"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-indicator_5.0.0-canary.fe1f3ca07.0_1579222812960_0.21242299153409516","host":"s3://npm-registry-packages"}},"5.0.0-canary.d405af26b.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.d405af26b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0ec06bb9018f283fa6bb913117c211d179994fb5","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.d405af26b.0.tgz","fileCount":37,"integrity":"sha512-8ZCGjmN2WHnJcVKTqDjmKukXx9WtfnLvCsC/LUdzA2PPqFDR7L6NWrXa6GeKzQwEDNX30sKaP2W2wsGgssOGyw==","signatures":[{"sig":"MEYCIQDIX6j14sn0Hl9P+avn4/alMGIoUC2yfRB3CecP7MjsdQIhAOIKdvtlxO5kJYAiFPkwVMtXe+cSSOgG8hRGeYpZfCD9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIfokCRA9TVsSAnZWagAA2agP/R/aBmccX86DArr3q545\ntdP73bbNM3UpjCQMtPyUxVx9ARi+rgewFibwbp4AdH9D/yCFIt382SyVGXQM\nNMmR30K6vBJs3IgcSYzGz2ARwGVFgFDJDjfoLeDv6tAN+ZYe41rJNEkEvGw6\nihhdgPvvsbwwCYz/2zeydW8T1QTlatML++vnf2bCNt9fHKwA9qsDQCQS2B/m\nUHamWZz5PY9cHiUwQd+P313hb49hGgazTbbYkl2+mf3KQr3ewN9N2pBF3MCj\nZucfvZLSqYlDE8Q+7chFS6aochRaxO7oTcizMOQCHb7/d/g5MC79Irhn/OBc\nPgfVKgalpk8Ml0m9SPyIfb9/oBcb33auqJAN0UQUx4dfCtupAsrcBqWxAnuw\na2rQurLmooFtW7iaveaUItE5SXAYv0Xp1aRzjtyqtCshN0ZFqAyjfj8OKIcU\nQj+sYTTzAb9FAGfKwo1HSCrTRf+GcX2PxOo38LznB/OaTj1f98OEjeDrg/9P\n9/CVMDIdMcSzDDq1XerYob2vfIi5qxuGdZDZlNqLVtiL0yqz7MvJ2WGiqn/f\nR+bCky7lRvKcrA/Wg1uE9WFGHmBdDpp+PlsBplP2IHUqYMaaXWev/kKnV9g0\nqsPljKv0bYnC8N4+quusCYxVhguUUXnfnkENkQns51/O0tzoJEKhhOeoP5Q6\nhIgl\r\n=GjEj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.d405af26b.0","@material/theme":"5.0.0-canary.d405af26b.0","@material/animation":"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-indicator_5.0.0-canary.d405af26b.0_1579285027327_0.8085574546558358","host":"s3://npm-registry-packages"}},"5.0.0-canary.6e857aae2.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.6e857aae2.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"eda79c608f951a58b8d63e72559edf756cb7fcd8","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.6e857aae2.0.tgz","fileCount":37,"integrity":"sha512-jmO6C3562cGIIiBUANR7CvIhW2vl1QLooRcFoH7Gsmq317xfKUwy5rQG7acqn8RGOqv+YCOmJ4xiyyn5XWNd/A==","signatures":[{"sig":"MEUCIQCAEem4nb/bS/VE34jiEa2QlZr+U3xC1DnHfd8QpywGzgIgHZjciBuobbqgj7zSkFADnU1Y0l6lKjXnGjBuzpKsXbY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIfr5CRA9TVsSAnZWagAAXvoP/0Z1VDd0o08LEdrEm/0I\nKYe/tM0ygeGf4eiYJClm32x0WJaogjf6heFmOPMKBfEDDTPL4k7wSPBXl7LG\nRPHEIB0G50rBCmYJwTjZ+H7dkcRly57ZkWZ2R4mPHcJ8MWzDuKKFgeuKiTXW\n3NZkpJEMbbJRX3mKxowmXRBojZpFLdrUw7Fujb6sAf8alZUuxrNjXU/4j0+Y\niwz6YV+YxnhGp1x2ECzqu2IQ+4TZwmTa6C76lxBqBmkxmIEe/ON2qjGP+Dbw\n0yrM/v4Szgvi0ALisCrBb5tZMnE2tHxVhmkxcyA5AhIKi0LORFb9zjzy/1AR\nSqNRJlb+nGqIoP3KFnuGEqvTFTLDDV2iQpLsgxCfeU3oD2NVAHTD7DUtXYbe\ngXn22xGwC7ObM+f6Zh4pwqlQbITEqMRTLudIq9UVl9G3qHJGC8/fwLR2CQFh\nNhj2tXf6/o0kCqd4bn09KMpxcoiAyrxEK8Jm+1dXO2wu4nw60UatKoznJ2RL\n5+COhWf4wFGz5LwXBLQscpP+ePXGuZaomLqnFtpSzMuy9zZJ1c58SX14aMzH\nVGru0M60o+uRxoM5X2qzPSxeYuJI+LBvKQXHXVT43HwR2w3/oQREW0wwKS1x\nmC7yDyz6VxkUWlJ+ZoinqdQKN532WVlllAYUWLs4/srXOSIPAdVMddXutblr\nRTd5\r\n=BDFe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.6e857aae2.0","@material/theme":"5.0.0-canary.6e857aae2.0","@material/animation":"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-indicator_5.0.0-canary.6e857aae2.0_1579285241318_0.6797242485018391","host":"s3://npm-registry-packages"}},"5.0.0-canary.e2e764f7c.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.e2e764f7c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"f35651710fa33bd3dab1d059cc0b2c1eec289482","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.e2e764f7c.0.tgz","fileCount":37,"integrity":"sha512-Zg6vAp4ET844/eINmzIWM9ImIWYJzRwq8xelk6JQ5o0vat35IsJ6Jlrnw0b67DRxkleJ6LoMgzcJzKI0HWVPtA==","signatures":[{"sig":"MEQCIGmqm5+niWwU8mJOLCO7n9ShrCtJ+1mhKthrn4TTUkVbAiAQvR0MtCXZdijiXrwiPD96aHEKpUQ2f6AOq5IMonZOYg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIf6KCRA9TVsSAnZWagAACv0P/2sa4bgiunu5x687u4tN\nGDOaTNsuDzrU0igaBFn27MKBwsHjaPojnHozsyvhHGnj0hCbG/Pn6ISDsVhn\nHIRXCT5L2MgPv2JqwhVZVGrHp+UD7BGgJJ35vDkuANZ1oZD4x2UNIcErAfNK\nChLDCzVpQ3TDdoRN3JmOJTleqZUzyFarnPNfuk4OX9ccHY25Q9tQgGqZ9/sf\nVyD3jt5klm2/lYUoMRHkDnrTg/3jmXpe1PO9nF6kXZnvgpDko0OTU/c540cb\nS/ougU0IGuMrB5NYYvFq25akYwetf60AMrvSHOj0d4ha52p3TiBjNEdTM93t\nPizi+P6rCOMo/Xh7Rt+kmaLwpFrWh9xRnRZRDT8wdn8UV9i48L9ir2Fgh11B\niFRSzqPZgaianFb7fRGqcaMCrt8hVPmoAGmXcoDvHZL3cPTHhT/zZ4EgO7WL\nJxzvAegwzMdjXJjce7ku6t2ZyOTkTmDv9e5qBDTPmYiExhOilH8RcTMsbI26\n/yGLjMEE1OTbhSs1pdhm0AOp3ziUoVM2WUyjyLT4RT5MakIwT63cG1HCL1dV\nqO2W3FHzg5Z7IIALi3HSdK/p4xxhZy5VVK7fLT0Vu+cvePL7MakV4iahFwo5\ntwShpmVyGIgMsXJ6Wi6V/zzuVKdMtBbnXRnnnaG64Qx7crFT/ky52SwJ2R8f\nsB+x\r\n=6XXn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.e2e764f7c.0","@material/theme":"5.0.0-canary.e2e764f7c.0","@material/animation":"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-indicator_5.0.0-canary.e2e764f7c.0_1579286153753_0.24750954907163525","host":"s3://npm-registry-packages"}},"5.0.0-canary.7ef986a87.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.7ef986a87.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"00e510b67d90b91697ccfd862183211ad4b085df","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.7ef986a87.0.tgz","fileCount":37,"integrity":"sha512-UqZ/2vhfdi5lshKCRmgMGxkzNMmBS7TymmWQWaVv+Voe30uBDnRUCRd0ojpMZsuKsiLL+8Le6MycFB59wQoG/Q==","signatures":[{"sig":"MEYCIQC4WIDuld3bJW8IUu/jDrEleNMb+YBO+Dbi6T2xhpjehAIhAP6XROXAM6GGaPmWewq97lFdxpNv47ASZq7rWysdO4Dc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIgtlCRA9TVsSAnZWagAAOxgP/jMchIdIZ1SWPuJYnNlp\nsJF+RgOrg2XfJRGoI0r1f6Pl5hr7uIFGbHqbBrB9TN+R1UnVXOUzKbAJmPIl\nYcg1CItZ3KpSm0pXnOWXXCHxTWXmtavdySzPgCsYc9e1yJKSMSqPjuIEZwLz\nq3ASuZRyTlt0hUgSPIpHeLxJnzCm02+lIYIQ9rxItyyCMijwYbkK6sDvcaAS\nxd9Zsol7hHKI0PBm58pRSZr0h9k7V3Ww0PCE3yl68PrHXECdP0gIPCDRKnQe\nZs0HfztWrVeKB/ME4fYMwFSMvEuQy35m/9UmKXZP9ul+wtjiqiFsGPumwka7\nsDgcIBBgqYZuba0vP1JKk0ys2wLm699ZrUBeIy1hHPt+DNLmcf1XRnohhnDb\nuTVN7mEKQ3/gCi6CHuQOmGURDq5cWbbPyRgo3B39rCgOJtmZCvDQer3gg+sY\nmNMQC3lFLReZUOdgKGLYK8lcqsnNNfdt0dwEh3iBnf+8NVOx47GywaziHVBr\nelBUcTBVzecj4WTSF7IuDo7hPB+tZ1M9/7Hj8MyL0jlfpF3SWTfHGC1Fe5Uv\nDXRtZbqLoSDiBaAWG1VmZG5b3V7IvNlU1fQ61TMgYmrdisUuoqSI+5qmfxyO\nC+FOqsEJKv40AUaq5E7KlsKFrGSnRsiYnL6vmscqjM/NAiByBX5SWxBafZaf\nBh5m\r\n=T7S/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.7ef986a87.0","@material/theme":"5.0.0-canary.7ef986a87.0","@material/animation":"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-indicator_5.0.0-canary.7ef986a87.0_1579289445238_0.47489683197077825","host":"s3://npm-registry-packages"}},"5.0.0-canary.29402e2d4.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.29402e2d4.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"68fea22b1344e58d20652fb93cd98814c417547d","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.29402e2d4.0.tgz","fileCount":37,"integrity":"sha512-dwywz5Zh+7O8hkKbJAT+NoAV/2aA1LbjgtCfudnZqxrDNHuO6lvgJ5fplGsRGZMDCxDPSZ8KCqM+40R483H8dg==","signatures":[{"sig":"MEYCIQDlpTx89nFOHEJ0fNoTbpOC25UOI8nED/r4+AY5Nmf2ZgIhAKFoqNjPQ40irYfT0IoLPAsHcenilFkjBSUxUjDG6u6X","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIhuOCRA9TVsSAnZWagAAI0sP/RLafHGqT5NwQxI/RvID\nDDQXZ8uW5j+RyUKnJqK1pZBAzU5HW07kOSw0/QIyaWt1vSwbtoIk+7sB5ajN\n/CYE2Md7Vf1oYiwGwZrZU1s5bI72BLnLN2bYk7198oBXUs5czoQG2tb/zsGm\nL3X/RYCODXlG36gaYxoiEHbPj/8X4i2/HPmOqP8Uux90lCveA7DJatjz+xbe\n2RLN4DoRcabPknoZvXMSE7TygHr36eaatsEkI81Aav8+sPIWVhuoUi8nj6V/\naNzg07MPAVqzbg7bWZZzQ15W7OxvzR/iI1FsCRFIJDePZc1EbOYD3qyJrZ6b\nTZKcKSMWOyx/5HabJDUzXHGR5wO5BVNOkrhgrCmnDwNwYB8e8NiRCjH9Q1hR\nxab2rKWrUtevHRsvg+H+fXe0mhO1I0UsokqMKyPyRGAMJiu1C2iXpPTigjNE\nOMp2YGjYzTGAgx/7q2KOr3z1I2Ec0vwaIR4BQGfBYYeU57thOn8cNWXK5WdO\nSPkrhJOawjLtptMegX5Rz5KEtKTPC2DGsAwz28WL+UXuguSMebBz3KaVlqrC\n2QYcTcgkrg6MtdXqAaB4FWng8dL/KfWY7vo0mefBp0ZKawaQkppPAntm2ZQ1\ne1b4IMXEtscPaVLgjxJ71LlDT4DJqld/A7h3WEglAJMlP51Id0Vg/3jfK38v\n4Lcd\r\n=Oq5X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.29402e2d4.0","@material/theme":"5.0.0-canary.29402e2d4.0","@material/animation":"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-indicator_5.0.0-canary.29402e2d4.0_1579293581940_0.7461966032087322","host":"s3://npm-registry-packages"}},"5.0.0-canary.2b3ec563c.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.2b3ec563c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"cb532e18dc2d8b57b73ebf7f1918432af8a1ca1c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.2b3ec563c.0.tgz","fileCount":37,"integrity":"sha512-urTtSkk/gZ+zujPSzgVkezpDRMerpeB9ZWR3hYwyRBUn7yIbIGefalwrDeUKPahlKh7/ZgxumOMm+08OfF0JJw==","signatures":[{"sig":"MEYCIQCRkXp0SdP+LJJg/5gDl3IShH5Eoq6vyWZgkb8TJG/8fAIhAMUdwGL3h09uC12UIgcYv374/UKCsE0ES0GFZ2Kjfdhk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIj8dCRA9TVsSAnZWagAAnH0P/Rgd4/TU4NO6FAkYCkrf\n3/iFbtZOVnrpworYeijC+mG6/iofbiQB/JOvpVrs27a3gHwxzysvOK25H5eY\nUKjIXuNDyO9Bdy9Ky9sGJhwqs5DXijAbGrGx0D7u0gIZA8iVMvRGSKjPH0F8\nzDU5+YtcPThTqivMwmflA4uIP68SlRVu6ccldNujcd1197ixYcZuLbZxm3oB\nMwAqkueMOFrbvLq1+Hk+ojzvpjV3gDXBSIDPYRFAnsQ+XZwKSVrAw/Awrgt7\nSl4SmhRjIhFDw4jPb4aXWcUBzruvCCrOdr+ZVWg7M1bbeLVyWiUFp/XGC7GY\nbA4VeqXFyyxmbUZdmKPPFyNDMW8dHq7tWn5v+dU0fXvgbdJMQXFj1gGJHRo+\nz9v5Ery4bpl3/Xf1SY+4z+7b3mE7BrQlgc9OVvzjtZHTZZkK64Xsaq+r+SLh\nmvJ9Wj3RUEKgWJ20cpk8/VygrdnIvUOVDq0g/zeTIJ1l9kiWtpna0ZJFkoGi\n3t/vwSiOv3kQZk9wwfOQurfmpzhOPk+cdhlvZNNKiuwwE7LHkLuMasdmeFyy\nKwBM5lwMvGr7WwsthfKP3D2Lb087XLMvi8FfInhVNfc+XHmZNqJboKLhzoyK\njSoqz+mkljLtZ6YeR9jBUZDmsAt2iP9ouUVIW32IkAOufSh/PrWhU1CANxK9\nUHYz\r\n=+CZp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.2b3ec563c.0","@material/theme":"5.0.0-canary.2b3ec563c.0","@material/animation":"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-indicator_5.0.0-canary.2b3ec563c.0_1579302685014_0.21779550827394","host":"s3://npm-registry-packages"}},"5.0.0-canary.e8a993677.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.e8a993677.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"171133a8a0d630a094c2c6661a91dd8efbcc1dad","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.e8a993677.0.tgz","fileCount":37,"integrity":"sha512-Tk3ueuKTh1gVri4XXZc/vLbvYl7N2qSMq4BUUvatdxdopHPrYKrk2QDJmn4SiCfXN/OA+I8mr+0wLBPKJnWKhw==","signatures":[{"sig":"MEYCIQDB4wB5DAjbwY71iQ3Lr0+NGS4lXcmt42bcHXcaZU25JgIhAO3I9z1Gwo4NZXRRsGREPGI7DX//ytCbh9IbkWR6/ri3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJyugCRA9TVsSAnZWagAAKT8P/RRoHBBIVK7TDkqasiMf\nslu4QuipECxhLH7NKtJP2MgEbU6c2PYvvUCnFmI3LyEmvxY89MEekoOhuimm\n7IXaKLTvSkBhUNg0PNoYa43lHqCvXP9YtA8Iwr017sYub+lPkC3o8hqIVx53\nz+865OhEtMJu35QgmoHNhLplGXKScujPBqIpm7V9pwA1d/n5VFnrk4NS0rZk\nBgCe1FSGhSW3DQ0v84KUjjtDB/lvp+foBgd+FeP0eXsSDURnNCj1jZa1gyv1\n2BsYkMBn29hM1+UV6Io2ALDkStqhZP4NiVw0YCYs/kzLNEcDRU3LzsxZI4vc\nHq4I5b/NeQywwUih2LwcrgJsFlDKmDhvLcW4MaKPZCc1QdOR6cfgq1bFFBvx\nJXp0RIxi+tXxBDTDXsSBCAsv2Wxsf28maA3jP5AYQV+LC+8n4XyX2b4/A5dg\nAlbBE7laijmgYJdPH67AxNGMs3IfAY2Hefjd47hIRBmHmbynoERnf1XTu3lb\n8dtO/VgbrNRXYzH+dLJ0SNJg4XBuaCYcJGhsBZzfgd4KvMOGwf2xMiBwoJjj\nrNmq3RSXIK+Qws8TCzbS/KWGhpxxCaAZ+FFtv0KECEDtR6mSeSRXdRXZ32HA\nFqrgYNZIi89boeKl/fPQ+RNiUSh0xmmglcXjoOOdYgXWhJ+kCCd8BbhBvCUr\n0odc\r\n=b/5p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.e8a993677.0","@material/theme":"5.0.0-canary.e8a993677.0","@material/animation":"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-indicator_5.0.0-canary.e8a993677.0_1579625376076_0.36818793329760857","host":"s3://npm-registry-packages"}},"5.0.0-canary.cd4903304.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.cd4903304.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"002c95a2256542eb10e238b99e0b16097deb90c4","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.cd4903304.0.tgz","fileCount":37,"integrity":"sha512-fcYt4U6480Ip6Ki+EuLceGTKR0jh3DECpFKMaFdgYemtJBc4tYB3g29vqlldKHDWoAJT27uNZJKiC0+t7rImcw==","signatures":[{"sig":"MEYCIQDiGDVWmUUzI+o9iUjNDVEX1Wg1lUhjlkxtd5tHm3CWmAIhAPjqHUuYiUutbpChMZXJkpr34+p3D2QzB/U8qOfey6IP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ28LCRA9TVsSAnZWagAAmggP/3s2VpdHyj725LotIOjL\nDOnAZTX/77gAhqesLHyX2OkQfkI7J/znNqQroXqek4wan3m1wN4/N7VOgpTW\nDBxE1pKKoWrxGAHhIrps8CzfwP5rgPInUOfGN+rBIMQVp0sNYzoZorqNgqjJ\n0ifCtxQRj0p0LkImgmuV2dZY1ooDdbApg7CYmCMNINC0paFABaWccmzsJ75+\n+QEy9kZABpZUCmgUl8GzdTTP8OS0EFXwsygODDcmn0xtiXWSgEUVpDFTUZ3/\n0aSmtE71b97Gc3q5gOkpbmanqJuHQdqCPqVz4aS7KSZrqmmxKWeaXnX5U9Uw\nIYAuV+Hm7cS4HeNhgYd6GuaQqKto4hjW7Il/6mVmYz9AetOoYXxqnrIuEJUV\ntoT8FRoVD57QsKoQzEAHtqGyC/dQOEuXP5tMDOEj0lEnugM72QyEuIa9hoyk\nwmbrE56e4CpIdrl6d8WKc/4hj8h930kzwGKT30ncLS5IPdVka2n/GAmwr1Z8\nLLGMM1bJ56R527SzlZ1NNstxi5xuY2UufT+6ZxEH6NHQ6SFdRnjLBpr5PFPT\nBTOFtbJ+r6Mm0VPxnXZuDazlB8pdtNCigIkLJvp9KVPFFIT7Q26QU633R8+d\n1qwtTSiUBSwgn1hkp1/hYlgcE7xSVLQErXH+8xHzwuLKnYtSf7p6fIkeu45v\nQu2I\r\n=ujam\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.cd4903304.0","@material/theme":"5.0.0-canary.cd4903304.0","@material/animation":"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-indicator_5.0.0-canary.cd4903304.0_1579642634703_0.9802696288833883","host":"s3://npm-registry-packages"}},"5.0.0-canary.7e4b04b25.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.7e4b04b25.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"6cbc12c9dbc0ff881c0ea7699af81b5e2ca3698b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.7e4b04b25.0.tgz","fileCount":37,"integrity":"sha512-VSyN2hx1uFGwyZnbX0Go3YBfhPR09ffl4Za7ld/9Q5O4Xlo8r83Nr7Y4uPhrUdkvI8YTc26TAUqntcQxAZbXuw==","signatures":[{"sig":"MEUCIFp888nSBAH+U/LecuFrIHv7PBcbRi2SAM18lUAoqMIAAiEA6tdo4GIFv0S1QgPIUlbzWu2nhO0vdS7r14skhbisxY0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ38jCRA9TVsSAnZWagAAXRkP/3Ajcm1SleXt05N9fjzH\nme3CGZaiRTwzNirrKTLE4lPHwnnrzqYXMkzTZENou4xqEZyriyJp5ga8QJ04\nRbpK0dZh2PZ7MxeLmzSp1A3ww1m/IFvcBRMMzWZDnhmCy0/1AWyN4Kj15Wpu\nlbBmPr12hahmZv9bR/WtAonydVA9Xyz/ttsgWsbdYcI5F4cLR2DM1EYg5OYT\nShjasmK6qo7WN6KJg64VB0kfgFzuM5xLLdbSsX+lgVRKv3ZzqCew7zf9YS1w\nQ7FODyQVXi4inNxhexNMAeTNybrqxWoGDE4zYvM4vsrlsKaGey+Iz+n+eCF2\n1LPRhBOm/t4xRfqCIy6O5kgBZnIbhhfQ/WcPZKWBTOiuXdTz5GmfIqQFaSqW\nNtbqf9TJ+iyxtkYwjcCreTFmWkpRfA0kWXTwCoDKdOmbG7h77PXkHk+R/npz\nwuwWO5yGpHT5ijg+4NkWB76go++iAqhfteVHg0BRaipYCOhTLmx58kQv1yfb\nLHofIWQNAVogY9aFroSWYUmKk8TBQW4lZNif75bcQRn5Oq30+s7b6WkoWKRg\nEDtqosoKqFGP1LVmfArPHBaNAAeA1DDSuaT7mAAd3OQtfyl7c0B8bIZgBa0k\ni99uXtNnxWhFkWEMFTpXosa6d8t3WWaSkEI45J3K1TJ/qKruAb8dDlJHIvS+\nKDoX\r\n=Ts2h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.7e4b04b25.0","@material/theme":"5.0.0-canary.7e4b04b25.0","@material/animation":"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-indicator_5.0.0-canary.7e4b04b25.0_1579646753683_0.5442928973403309","host":"s3://npm-registry-packages"}},"5.0.0-canary.ebc296937.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.ebc296937.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"220159d43c8536de372fdbc4765d73865484dfb8","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.ebc296937.0.tgz","fileCount":37,"integrity":"sha512-tv5QeBAdPJHiJGg1SST7PuxCo5omW6yHiT/JPo28cH4aUJ7d09Hg/oFyVmaozityXyjFtLhPBny4qCf5c3zqWg==","signatures":[{"sig":"MEQCIH0w8MaFgM0LBNjX8x09Tr+g381y/n/phLw2+r029yCkAiAaukBWwpRD9R10aBJNKBPMje0H9UKQiQqcutCAUW80EA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ4z2CRA9TVsSAnZWagAAduIP/ivHMjEI6mqE0UxKT5AX\nqSoZvsMw48KkdXB3IQq58f26FP+GoE0yAEu5eDTbs5al+vsWDeFfU8nD6+dP\nEt3KZ2VxOWlDKyiwCIcA8IuNDGbqIpw/iDoDSROOhXEobDXN/CgWTgOoPPEy\nlvNuj3v84pzJry/+aCEF9qAe/hNI8vyHyT45XGdq2DwRkHuNiiwWGnmDjqu3\n3Jxx3jZS5vIpsc89qCbj6isoIlTx8LtvhNF2Mva+ycGVOQhPLPgEXoJ2BJDV\nMO+b0KOVzfSIGW2qEBuwYDHjoVqn3zk0qVb0pMrMV2CaxwjxbmklMJaizzke\n8JOkxFGS5UL5AUSY9VkKmmd1NcAHKvuOjzBVPGMGmIFZDuWXgMcHz6iCzglM\ngT6wNDp4XFN34cm0KOm1xl8ZQnoVT+q5cpzv+jIcjhBym+DCS8cJ2E3xhNTi\n5v8c4NfBKj1rMD46gn9CJBk80Bw2mOXeOwaF4EylRzTf20vlS794UJngxxfb\nFadM1xrC0T/8BJBI7Z9wx96XxG6bhrr3IF1gkM6bXfpoJzDUJ3A8h7Y+G+30\n1kSJ4S8ofUoTQ6vXJ3GJ1Yd260zhSIdWtZ5322IJDom6eIRFfEM2ReLSELb+\n4hm5QDT4mwcT2iOOYzyt3URmSU1ooFu4SCRNl48/tN2wlqnql4cvS52JFSm7\nT++p\r\n=K94s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.ebc296937.0","@material/theme":"5.0.0-canary.ebc296937.0","@material/animation":"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-indicator_5.0.0-canary.ebc296937.0_1579650293921_0.8730475608893595","host":"s3://npm-registry-packages"}},"5.0.0-canary.cf33f113d.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.cf33f113d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"8d2ed0c4bb6c5e6265d3ded292f148ec24e01cb8","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.cf33f113d.0.tgz","fileCount":37,"integrity":"sha512-zDLEgeWNszX0EGiSrbV/oj+2mhozDVUENFVuld/WE5uX+bmx8j29ZHsv1Ryl2X9Muew649iSOwupoHqe2TDaQA==","signatures":[{"sig":"MEYCIQDBGCAi+djegTpXfRQ9k5X3BAe0SrR/D3wS4mfhy697JQIhAOGYQwVFV32+C1H/ywI74TPwPP6w2nKckzUv6ElJQQBd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ6PGCRA9TVsSAnZWagAAO9cP/2dU0dK0f/mN7Oi59Xsd\nX9MlNiu0mFgF1FFa/Q1j2Zrw8DKuT9SKGjrJNx3z5RH3Ji5UtZyJGBbaEBE5\nEO5g5nhdK+4WfpV7UNhyZoX/aAwxfRWqV+PJf3FTtKENjRcVeJdkKxLxNg5I\nBzTHJzQr64TKMWjxo26N6uuO3fbl1NYZ+30aco3E/dem8S8YoJ541ajCp8u9\naFw3SkFhFvrm77QkpqVRJFvBW5omwQ4fko1LXVP2rf9oW9jy4gklV7lwYVKd\nRa2vN7uGeVS6nUGc7i7M/0PhI3vvoBp8pIwmMiP+DcwSMeFPmw1aIr351njK\ntOAha29xRI3Z9Un/IZ8DymI6IGrJce6vO7PN0MQJOPR0Q2q3ghYd0jwuwUcO\nfLJoz0/xCwn9yYUyj7JzypQHbyxzC8wOzrWI2yqhd3A4Vfdhh7B4aA1tQnv2\n866u5HA5pcUNWGwVE2ZLeWq6ud6mKjZAITz7zrOZnyKoKLR+AGTqQ2Rt7NUN\nkDK73y/tzBr0Z7HVGneJcpUtnPv92KeI62jhNKZ3THGNkm0TYwQWPOjFMhGY\ncVUBVpBywaCvW6bA6ZdFE/lUGORWy5Hg7MLHjC+Dbxqlir53Cmd5VRpFiT3z\nzdEwLOiXD3emo2qvLcRvpBAVSqHKifPJTe5VrprO2P4pDlM0tmVlFs8VoLzc\nhlrS\r\n=Xn0H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.cf33f113d.0","@material/theme":"5.0.0-canary.cf33f113d.0","@material/animation":"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-indicator_5.0.0-canary.cf33f113d.0_1579656134269_0.42044044178152484","host":"s3://npm-registry-packages"}},"5.0.0-canary.e1d5f1be5.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.e1d5f1be5.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"aea076bb5f7bbcbe8aefdcc5b6ffec645b4cb252","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.e1d5f1be5.0.tgz","fileCount":39,"integrity":"sha512-v87hGImWv9beioTgjhix/VwM5qGVvoUp0N77wLj396Lw7QD0AaaBStwaV6C4ixvTz0DW2TawmZ8vPFdnU6iLxA==","signatures":[{"sig":"MEQCICxsWWqU3A2VBXQmMBMOO/sjia6imtZnNvxFhp8q2hoSAiBa8/tHQNaRocS3urWXe+7evAtTRUNRIT6IZMduzm+H0Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163248,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKH53CRA9TVsSAnZWagAAbEsP/R4mU/jSomVcrE1rGNoF\nJI5yRGOTrVsvYYukE8Lr6aZrU2eP9BGkAKLBckCyNNfqHb1ntHFJFjwYQvn9\nCjx3N68biFIN8JAAWrhK3gkPUNZb92i87W9Rrqyo4Asv8P2F4C0yCMbC3Hdc\nqN5Mqd3cyO1qnuJgBaGfVcEb1v6fIbobMBcg32ZocQKrcHp4GCOn0TL9BJjj\n/ftk0aWwOMCJV8Zjrug9D0NRyDEegm4cyGbxpBOexw+B1r4KexDbjA8vAHKz\n+3nPHEkJwddYvyovdcb4BY+q52bK4sJTU5hZj50fp+PMzGQSgdrTLXHEF7vH\nHxhltLvlW1VJ4KyNnUl1Ve4ANsXt2KSCC1NLF22C/62Mb7zHIBcru47go9bj\nuwV61dyijzaEsyRKJflFQ8Xv7njhe2XOZI9yL6SL7lnrsFDBledcZfnnTr98\nz46UgU8MmVY3dJOZwp8d9ih16e37U0GEX6DJUkflbR17UdqDmswMU2wr3X8m\nzpLP+rg+1Yn1tLdnNA3s5xUDmGMAwziQYBLuacLnjVWDPloXt4YJWt1b16Jt\nY0fOBG1omPH+OWpkzFHKtZpkHGXdnk/ipsYlm43j9inUs8oHSia92p4dziVC\ngSJuVH7g4F4NolFZJVAH/ZECyN0TBDFhVfAkI2wgzEkYIl3SO0+VNyB2KyJR\nb8uz\r\n=75la\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.e1d5f1be5.0","@material/theme":"5.0.0-canary.e1d5f1be5.0","@material/animation":"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-indicator_5.0.0-canary.e1d5f1be5.0_1579712118578_0.6024448038264616","host":"s3://npm-registry-packages"}},"5.0.0-canary.6b6a4ff92.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.6b6a4ff92.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"62317dadcbf6027f88bcd809441b253715b7309f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.6b6a4ff92.0.tgz","fileCount":39,"integrity":"sha512-G19QjIQ99GgNdFr8MC8fSKaA8lHpMbMxz7OIqy1oKQyAh3tjGx9aEZKAJWKZ5A30uG2M7AW4a8qAglVrWj3zxA==","signatures":[{"sig":"MEQCIDw+I+Mh2AUQephqFgqD6BVx26uNR+sMD9ycrc1ykcrAAiBPMOtCP4FjF5pk43Xi50OxaDjrWVd+HRLOBpoohHdzVQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163248,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKI0QCRA9TVsSAnZWagAADO4P/06bk4iMXiF+cJ0SVEYW\n6lvumA3Jwc81f8A5Et1eJYyvC1NTwawyCJbBDJYRNxV6d0euB7a8GY7M+sPQ\nT2gg9Hf8uHZxbUIqPhwLKtTadIIM0fGewZ2t718nh9F0cakzeOQoYYjYEpM8\ndxx6Ax/zULen/C4nImikNPPe4kubV9ugfN9ToXEG9keSTdtndQimHVpB1XJV\nIv/v30/F90aD7p4FVO6XEpa7rY0sz3nXvbgDGCV4RYSp+ZqCuqKdOwbAP1PR\nvTGVJMcUR4nhnABsWAenIrpj8Uyr3TxToKRgjFHcCBClv2T93l8TyJs0JrLU\nbsi3jN4lgYTxXYsxvJGhM0jgOGluRAavyvtXu62dYvFqjnATVHEeiwlaMFn/\nzscu5dgc9UGiOqvdvv0DWd/a7MnT/GB/c5XWgfYlLUPEXhPh/5N7+0yu5mS1\nJ9DXw3EA9pliHb6hFxbp/GGDkwlQW0v1RhI10zbdordkm0pcdFtmkU5YWU9t\nIGGdcGS6WQ+eVQ+cn6YeSVHNmHFqegvGgNNW/U5wngNC5Wurzn8DXFBduJ7G\nga1Xr1GJr9F+6V6t0PEvPb1L9cFCFw8Uw2syH8u34dLi58FR3zGvXJllRh8J\ngNpYgYD8aYmgHIJRqrsnlRsZbQ2QZROBznos6QtqdiU9f97c2cdLYXqagXDu\nd4v7\r\n=3TsB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.6b6a4ff92.0","@material/theme":"5.0.0-canary.6b6a4ff92.0","@material/animation":"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-indicator_5.0.0-canary.6b6a4ff92.0_1579715855888_0.48404667545085633","host":"s3://npm-registry-packages"}},"5.0.0-canary.6092f71ee.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.6092f71ee.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"d99aa923d20336eb2be6f4b59be3a968d301886e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.6092f71ee.0.tgz","fileCount":38,"integrity":"sha512-u090taIKVzFfXeYzIqOlukv2J0lM9aGsWJnWJJ9Xl4cvTEUH4bN+5rezf6w26l9uEDvvLs3o8yOsxPuTV3/MiA==","signatures":[{"sig":"MEUCIQC9Wa8/VHvtE76b//s2TOUG2m66h8imXTC4Ct2PZNVfNwIgDYeW6SsmgINeGhiwnCWvOVKBW4tP7GbEnI69aEtnk80=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKLu/CRA9TVsSAnZWagAAhBsP+wYguQH9pRIlyqUZhVln\nml7qg7egwxUxMFtuU2xBoCfSSF0Ze04THyqT5+rTJ8Q09mYOwGMvhurovAyr\niF9V4JyB9AKxfLrCKFIToQHXStepepcg2vpkiFT/eDZzNfXAkNYL6utgDSoV\nY76DjXuMILEaSmXh2lffz0P4jTW8Kdiw+po9pv7FkIy+tfznWar1Gp0kaVX6\nIeJjeYFH5wqX1l+4fr5wG37ql5c1EnN9cdVVoDGbLjJX2bgFmQ4lL4ojGFZe\nZ9ICwgSSv1U+tuy/OKk891dziKaweswDh9P+m+tNG/FHn0uHSTiXXu4mX/b3\nQlBXwemdxbNI3kqy6O5dhorvFHCF30uo9SoBiJLny8f0So5HG8ZrEtwsm8jk\n8ElEPZ3kMcJf4xgG2oMaxuMMm9X216TAG0DkMSpYVYbCS04gBBy8XoDRAj00\noyB+tJG8qwOCqo6Q5g6R5T3iSVX2L7sl7OGj9f1ayJDsG98wa6SWzCj/uO7m\nZ5sk8T+vQ4KL9b7wj5USYsPJc/qbtBz+eoJ5DNFtXYAFNWl7UG2UJVaLrq6U\nCGS6GOkBg5jntD6j9YQqjxsTBhluZKCP2rr51ATr37vdvUehS18QnxG7hy1E\nsw9KI2FqTdWUXwzZtOBT3Z5fLQXVqMouMRZFfa1yOeebiYNofN54LQ0j69S6\nS4V7\r\n=SkrB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.6092f71ee.0","@material/theme":"5.0.0-canary.6092f71ee.0","@material/animation":"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-indicator_5.0.0-canary.6092f71ee.0_1579727807341_0.40763796463699653","host":"s3://npm-registry-packages"}},"5.0.0-canary.d8d95020f.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.d8d95020f.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"fd0163a56c337e76ed7adf642bdb58981875929e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.d8d95020f.0.tgz","fileCount":38,"integrity":"sha512-5g5BjMzwCwDTWFfpwi+eZIgQjet5baR/CooNGkj8uphd418rBKuTc/1M8RKcJt9H+NQHzIqbqewaCLS5uWG6kw==","signatures":[{"sig":"MEUCIFRQHv7xJgXT6aQTa23+kvg8eJEWm2xdE5AePgXxCDUWAiEAlmbAbOtgurzrfsvQEtZL8vdlQmwLny8Ab6/sCG1Oyr4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKNYiCRA9TVsSAnZWagAADOAQAIrpbjt9KWz4mSXDhkQz\nkrWWkZWKhW5CjOaVGhuINPCeXHBkYBP+r+YxNx8nNifzFLVT07xoJqwsk2/6\nAHO6VLIdwYE+AmetRG3McZP/vrB01dK9PrB5WaU64wRWovPq5mTpTI9RfH/S\nAAuVsbIDAar4NXO38/oDb/V+WicX9cXbAdR5k/28hSAowXvwcAoPDw5bc/OT\nO6IWuejy4+Km2685Oh7Kc63mcprt4iDLfEVzkw/o9lPkbkCEucB7gDf66HLV\nh7hYEdpfO0+MJ+mFlUUWg1zagk9Rqfd0AnV3t5cjbVKfVTFL5AqfqKa36XjA\n/TM+WOcR3gTGi7WOAPv3gmusTPqQZzSnpYnRfQeImAH/ofsnT+Zg9Pf5K4Rg\niM8Dx9AIVajZL9uddPx+dN1eENakzuVc2tHp6YREBrzjrZ0SzvlqC5sH+6lP\n3Z1yghWF6FYOQv6NO0J0gJhRbqPU5etKWLMW5p+WvYXkgrFDu2wI4I488rGh\nG24XrY4SnbZZ1AV32SEXmTcfGzmFmn7X8jUirFtRzMOypHR8IN/yOnmutmN5\n2ZjbMiL/n41UymbsMFGp8gKzLTXV53f4Paj6tPyr1mQMcaFw2xxCgoYHwesx\n+zVVmlggUJQ391smO6aWc+7TF7KuQS2+lFlP70Jf9q/EGidHcq6OhK1Naoa5\n5O9J\r\n=BmLs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.d8d95020f.0","@material/theme":"5.0.0-canary.d8d95020f.0","@material/animation":"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-indicator_5.0.0-canary.d8d95020f.0_1579734561805_0.3492052611786127","host":"s3://npm-registry-packages"}},"5.0.0-canary.b7facc628.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.b7facc628.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"dcd2a45f216cd0aaa9b72d670b329c78746acdaf","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.b7facc628.0.tgz","fileCount":38,"integrity":"sha512-fgyyUqb40+vwqrL80POTdolQMK6705oxDXW7HeUwo2Pyik8oBpAicSzIrwUfx+qd5svViqZjU0Zq2qg5WfEMUQ==","signatures":[{"sig":"MEUCIGlv4nz4H4k6quZLm1PpK1spWFnPy0IkMzIiha5Ll1rHAiEAh/oklPfElV4DZGal42jlPTjebOPoURv9i6LfrbjGCgI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKeISCRA9TVsSAnZWagAAbpIP/icLkY3CDhzcFZV1UO+f\nQ6UrQhY2cOkJuNfiUz/FBwQyxjK2RlC4kiATkkrc9DoLFY7pQ4f/zcyWxSoO\nfbeYW1XKDwuXuAsBb/0wGcHfbRSfvxTjAK5YzLklr//+Dn51z4UcixfiGnfP\nCM4c0z7u0yFX3qpVangOwWpbdw0bKQMfbp7UPn46HIqmZCuH7LBa1cAI+TU0\nO5IBMbG85sKhZysRlxo10zDefeshcJYj6emSGFVbb2snHQ27w5WPYVwDIXML\nRlIkjMELlgJEY9rWgmL+tBadYGkEWpZeGxpDX1OTQsf/IBLDuJ6Cz4YpblFI\nV6QcedfrFzbORTQ34YOIHBG/4m6BHe97R3ubhwz57DcK7fTUMGHk018WZtk5\nCKAJLIRevlTc3iCS5F451U/DkuOGyntQ1Q6vKSy6m8ohAnkdXAYUb6SLvp3V\nFc1oK6pWJfofKTGGQONQO1ylVrvkB/joPyR/uajPowJ4YJyCUbo0Sj23QkaK\ntykpkPd/1wdKZ5PPQxCMnAkasohJGCkm4Oi11KJfFlswoiXZsus6K2QshRmd\nAB7HXRjB48D0Nlo9qjP602NEusg8nEc6CF4GUAA9Vrjhk1VwruVHErOkqwxv\nKf3A8+cz1Sp0oP/Lzy41r3NI22mGfCUukuIa4njyAyYJpCTlKE0jxMpAuhBf\nNvYc\r\n=EGEz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.b7facc628.0","@material/theme":"5.0.0-canary.b7facc628.0","@material/animation":"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-indicator_5.0.0-canary.b7facc628.0_1579803154106_0.07909992554921574","host":"s3://npm-registry-packages"}},"5.0.0-canary.63f357dbf.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.63f357dbf.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"eba9bba8b3b5433020e8cc7e032bee13a8fde545","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.63f357dbf.0.tgz","fileCount":38,"integrity":"sha512-O5jP7UMyzJFEw6QcqxLGNX9Wv/utO6zSb2hCLIZudA5INyD89DGIxjKgzV838HGGD7nVUQjHHyT/lVpbn8Litg==","signatures":[{"sig":"MEYCIQDezvhwbRTAoY2967pWDaxJvccOKTAxj/03nbU0aHvkUwIhAM4RlcWAfPM7cMOjCais3KY6Da/J4/VMj3lfJu/jtGXR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKhY9CRA9TVsSAnZWagAA5z4P/3kw/3NMZ/kQgQ2iTBi8\ng7/EbehUnIfro44DXe38gye1ztB42qO6GAMHe4QoO2KsLJSX9RpUZJENc4wO\nsWrPiq+z6Jt355CL/zoU11ndBGeBbQ8RD1CLAh1FEQrFI7m2MxbG763qB8cJ\nAKFpalL9rPOfL0P3ATv6nYMHJx0dsnqcI+60V97cN4yXle03ebzSUHIL+kk8\ngA4ALj6vNnIFuEffpsA5yIn1M2fL91qtp0VxiJrbcXZjc6PadksGnjv9yUPE\ntl1bg44s6lwnYIDhhMZhOjrlSDUEWbBez/FPR4FP7jIHdG2xJRKa88VnHEAm\ngD4XEXe5WMmO0Cg/cY59PdidS7XNSr/e+ZoXtMvRsvNpqD052uWzu6VS4O5N\nSQJ61zTfOh03TNyNY5hSU0u6jaLOZNDmS0se67A0WYYRYbc9wqmfzzceXd+M\nlk8t7JZPgfF00YXSmqR0qx5+Ch77LXmdBjfj1nqHD9c8FsUJXTlxT1w3TOvu\n2/4Q8Zt00v1uXeT91Z+dy29ErTHf/0C9SP1mVntjX2b0UycwUEhzKXhe5isd\njCG9xvWb+0uiPeLDoobToUQ5qb9UurBFK2qi6924fyY+YYB/VwioNmc9cAsU\n1qE4KLBmex6Ex2dm48B8vNL42cLydsAVSaTy0V8xJijvYXg2pqRzzWM6aHgG\nHEiz\r\n=s4EI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.63f357dbf.0","@material/theme":"5.0.0-canary.63f357dbf.0","@material/animation":"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-indicator_5.0.0-canary.63f357dbf.0_1579816508949_0.7763019246854743","host":"s3://npm-registry-packages"}},"5.0.0-canary.f2426d26e.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.f2426d26e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"96ba199c92c37d74ee8f10525a7bdc0f96e32c9a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.f2426d26e.0.tgz","fileCount":38,"integrity":"sha512-xngwqQ/FOONRLAnXAaXm4Acr0M89LXeIe2Drg2zv1rAz/LYmBVIp+U8yl7zVBXHFGQ8EG1dfCDjscWRHYAL1yg==","signatures":[{"sig":"MEQCIHP9V2t6e79itEzz249Sxjb1C2PSX5ySqoYALmqXxEj4AiB3ZwOP/dNj2KKydIFz1dwAB+lVZqDJt5HQx42z3eUYUg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKjJdCRA9TVsSAnZWagAAV7AP/RMjebI5h08qyfVt4/6g\nfNoMCUplIK1tU5waG7GYiVVBzoIZzIrdrYncycohd/S53pWoi3za+/ODbaO6\nlGgJlyM+VEekWBaqgeZ5bcLKlNT9mBJfJkI9MpWBlMklcqQ6I8ykDVV8aI22\nCwwReS21MyEO0SrCTHjZP0lZyGIHagx9MVG33jbz4nwgUQEdLx6QQxuY4q9B\nscQRF4KGCV+eI14FGCtMnDGta1fwGy7jYtMEzFqCYIPA8H2rOhCHz3bOdeHA\n3Nmx3kWCTNt7bJZEm/5/QOtLdJtr8mJ1ep0ALqMn7MkvYjgHN+PP5l1x0IGx\nQ3Fhx2jW55eEG/PbVgRmFDRFA9PxS+kmK6y1kh2kbu7T9/BzxM4PHA/HAHyg\n03+m85a05sZSB1dSCBvJaa6HWFaN7yZQV1UEgOb2i3ZUu3FkWTSkVmu09vQp\nhgC/CVyQdKyqe3SkwRat5DFntoeZoc2LGnV1XdeoomZDDBPwPETYgxDPgNme\noBnlA7pnW2IMr8rQ4jM+WuNJYugrHPSs4X5702sInxEYbfsM77pzSNTS26+U\n7wN8C/BEpG+nd/cQ9D0izCBMA1J8hTdbaX8y1gd2mDrNnrZMfdG6lAOuM4y/\nZfmnOJqQUB6HnFvuK0gZlHu8H+RJdFptOjo5eLYvHq+uHA+DOrWCnPGAr8F1\nOJUD\r\n=LAUc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.f2426d26e.0","@material/theme":"5.0.0-canary.f2426d26e.0","@material/animation":"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-indicator_5.0.0-canary.f2426d26e.0_1579823708847_0.978096809934548","host":"s3://npm-registry-packages"}},"5.0.0-canary.7f5e0c23f.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.7f5e0c23f.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"b106a3c13855df2409799e1944ab0ab7f8c382ea","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.7f5e0c23f.0.tgz","fileCount":38,"integrity":"sha512-A+p1LYeYNxWeoxU7Ard2JP6YX0L6v7lJkMi1o1KskMrS1izShiq6IepPSzWQ0EfP3ZnTYIkWkS3/kxpFuxHt0g==","signatures":[{"sig":"MEYCIQDBN83lFLnW30aM8U1nbQkvk0J5D794VrbPbw+88QK7lAIhANyiGQAmcp2Xj1lr8u5beyRNkcxkTiUjAE9zsoo7+O0u","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKx+hCRA9TVsSAnZWagAAs+8P/0D0MIZF9cUT8xU/4tMt\nnAeIoASvWIYFmMy06AyoXFClyTZUs00gtjGrop5HMmLBMcSty33CvxP3JawF\n9GOVx0QCmrFT0c5o3McxxcIYvC/FaCZV5O55ittQk+qvnAVGCzqqjmdKQ7R1\nTtt76wLG6b7dfQ3uQlMDNirPwFbjhIpadUftahKHUOzp+egrOv4dlIf1DDp2\n7LMHac1oRXp88HAsbfHjE+7DnlWJ68s0Di/+57fCJLHHKdhY7Zy2V5wikQLH\nuY2TdUQIP7IMlp6zPqMYcETyUVFWPiydKkxiRvJtkzQO77uuMV8tnU5TaGhu\nK0IAlYC28SL422kwxtGa7u/bYy7AlZGI0KDewfWFwsd0BiIpJ5gUZ1UGOZ3V\n+G0wBEAzpdpXnHwkgNUYbM08m1uUEurKdJkoCsasBHVrkLGv2U8AmDSlWeQ0\n7NY666+0gi2v9XsYgclglZ9z6NEXvfRThOMhBvj2WA9p8InfFTmyVtiZrhPI\nW0W+AFRIdqSzIsQp88FZe3i9SYa/XHHzMCyZMzIJ0jPoQctjb43Hy6Ql0DU1\n6z824E8c2Z3QVfopB8pNt3+L82gahDI3kGSzsb80NhzljDtiJeEGgfJRsY5W\ncvjiumLnba+svPSHdNrY+LpWbhIKGznWj3L7gA9D9f7Aa9Cu4XLG3ARInT6i\n0URi\r\n=V1rg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.7f5e0c23f.0","@material/theme":"5.0.0-canary.7f5e0c23f.0","@material/animation":"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-indicator_5.0.0-canary.7f5e0c23f.0_1579884448714_0.08658312164318094","host":"s3://npm-registry-packages"}},"5.0.0-canary.3fc3ab520.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.3fc3ab520.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"a71cd787ac82a9f76333cf3a8bcccd8fe5f3b006","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.3fc3ab520.0.tgz","fileCount":38,"integrity":"sha512-vueTUSkpRokh6w2rGSE+9YPcqpG/0lbwJH3TfrliyF1iZgxn62y1lnuGniFl5HdPPIMKQ36UTdnugb7Y4c22pw==","signatures":[{"sig":"MEYCIQC4IkjVFcHUsT+VbaciPrLVsNNaD2pXCKm3ss+ke7y1YAIhAO8Q4CLkAVUApsRceU+mNedARJ/J7DLt34sKPyVr4Sy3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKydqCRA9TVsSAnZWagAA6+4P+QDSoe1mQifmimIV6Pc6\n1ZH0VQP6sZOSaqS8RYkoof0wrKl4igtE1vv08CL2S2q8cH0hdIbGDWmnoU//\nrO/xlA0NbvPl2LqBEykNNHG40tJV6IOFmQf9cOGQIPC//kLnigpPOEStTqM+\nUPZEDiNH0nGDlJy7mwFGViQjCJNAaT1EWGymoGiHcoO6TtIPQfjMFIE5lOzS\nIlLzi5MYJXn3XWBdB0oD17e3zS3Vi63qGjd1vpVu/q+nBTShfjOKNjGVLFGJ\n9hdapF4FUBSPKfG9Ic5zRne8O28nzPJTqtqP3t9LGpF0hTiX+cP1jqOSOYuV\n+X2njI+mZDZspMTfoMi1YKwHCVbBBZxanE/7oAeSMreZ1uYijbEhrrUE6Wwy\n6/BktNPuMA1oOQn2XjZNMuFyJqMIU8aRNgO0vzLskaJ23tfpeOw2JVZJ5pWt\nZkp4hLsU+XUBVJCdc03dmD0sP7iadxtdTZFEIXMj6YYTetjlHd+y2ssYoFbO\nH9ne54FhCG7vMlRZMi2k1cJ08Q63b8HAWXRmF4OgBf3qXHyAAXaVyU888ARG\n3540wzQDFIY/FOwWFBdZJDv0S4LtgIH2qgT+/bFrQyckL6MsD1dM4gayKcY5\nHBGVGdLBsSdvzE2qJMsoOR2cVRbVzO31tAcLqJ7vs1KwNwtNFvaMCCDYEiT8\nBX6t\r\n=vYgS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.3fc3ab520.0","@material/theme":"5.0.0-canary.3fc3ab520.0","@material/animation":"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-indicator_5.0.0-canary.3fc3ab520.0_1579886442097_0.005616708307647933","host":"s3://npm-registry-packages"}},"5.0.0-canary.80a4d326f.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.80a4d326f.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"db5dea32e0c6060535bc1179cd4d7733004e6b5b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.80a4d326f.0.tgz","fileCount":38,"integrity":"sha512-2lD0N+AMlpNUtgCpHilW4960dLu/k25i1WQVukZ5uns14mpGaqAiGb2BRTu/D7HN4fa+GzvxsF4E+JEn9m2mFw==","signatures":[{"sig":"MEUCIQC3Y57IUEWXTTI6cvRVdFjzkg36+9ThAQSMllvcQNALqAIgHP2OW6hK3kC9H3jhvOFcnzpFdEG7jVJjmB0II2qGM+0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeK1d2CRA9TVsSAnZWagAAYLwP/0cPTraGqVcU96Tnm0yH\nauRtTDnbC4lG1BaV8HJqhzgEN9zra5M+9NPOKTLqSCMD2klgwalk6g9zVa4X\n5yCsozZbL7QVA0MrsfhRIYoIh2DZxcDTwz9dL8nm3iBsX80cYR0WifT6Rgvj\nLtHLi8/opezLCNm/fpKLCrZW4FhpNsTmxrEXkQvTwu1EOtiHPX/JrA5T9njG\nsukgJ+XATlv49ydeOXyj1edZ8uZZs5xo7ft/nxGczLj/nawcqex1ix5G8fO+\nxr0A/WOGymmaB15EbEm4ayaZ7eeiMzkv//A3Tvotib9SL3wlqcU+BoL0rBxG\n/TFExLGM7rocr50cERZkIk28HAc2caeZ494Yl725U9Wi1V2vM2QBHkbKverX\nGwyOB0deNiy8WQSb9giDG7JE8Qx9dZF19/72LsDtb/EYtBI8ZZBVIOaRbfWh\nfeFb4SoZesNR/0v7Y0n+QybDwTOC87W2GNw4opAxIFJJOiUCivKJT0sey30k\nyqkkzN9x/t7OHAklZXGRngKrV7BOUiu3Jj1FKqqnAR9XbYvVlUrn0Kmy3UEK\n4Loz4LMN2GiGKjb99RDZoo9Bun8MdMyO0OHfo4YUJD0pD/l1ZZmFwbF/k+a2\nRedZ4Qhf25DAT68QKgCZz7/vq/EArZb7b631LIi6fGXwvggR9J7CEXMmsGc8\nxmyt\r\n=XDrK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.80a4d326f.0","@material/theme":"5.0.0-canary.80a4d326f.0","@material/animation":"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-indicator_5.0.0-canary.80a4d326f.0_1579898742431_0.47313777818461733","host":"s3://npm-registry-packages"}},"5.0.0-canary.ef7de4def.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.ef7de4def.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"060238d1c9ba9d31ca419bb6e8282d8f09f44733","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.ef7de4def.0.tgz","fileCount":38,"integrity":"sha512-m3Zv49/7JyJyOcCF6PJuNtumxb0GL7YoIbCREzHMmGFT5/wXYWm+jKf4FcOw6OHM7DJoG0bhI5LH1MLQQZRxMw==","signatures":[{"sig":"MEUCIBGOqVcM96H77+rj775286H+kbIuPgiEhU8PSNeDxRooAiEAxHZbf4kRo+RWVwSxQi2s6YNQ8grbTRVh2QIfW8zaES4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeK2JbCRA9TVsSAnZWagAAI+IQAKL3av4lmp60LXBp1TI9\nqEMaAqtl4Lrh9rCACUBhXnE1DpKSMioae4IygLNpfEqN/eeEINl9FyppI8SO\nOGA57W2sxTkP6cebPelHGtwG/xRq6GON3pgOou4X8NWq2JBGnUjYIYGfaPJ2\nqH1jC2lZiWWUYN84XRiFcbovhFiGohq1N2XtLYGRYTTX718Fjq+IQf2S905m\nFTHuFTuH46+FLh/AzqiqC3/ggEseepemsRswzzotjAA0APonyNlxpBy/q1w3\npUZIouSjl9JOL5SwpecXbbbxEzH/l410NUSRce8B44IPQ2slW4MnnIvnqW1c\nxSTaiXifQnsaKDmCBQlZVfwz1Qr6N6HEhRVMk7Pi7AV4iDEPYHYNZWsI6IyX\nV+jqlsNgne3TcYJqYyIEf3Xaq3f4O3paqKhNVhZ0+8OZ8maTPmFpwz6Pjm9h\nYeN7NQC/QAY4/WOOw2n/OT7AmzkXTRBuhsx9AhwWWznW37lgMu2HFbLhnc1k\nL+YnOmHFz0fxcS/Vyr2JzJ2AexBF9Hn9URzXhnNStVUcNp5bPAV/ndXnQ2Dw\n+rfheCuHVDoBmbNMPQifSHKqpLhzR/iCSShBnmkqdLgdy+Kqf5krrCuHK1VH\n/0h+vcVvdOhXpDsBaL8p5v2oObdg7787iVGfTIAJXC5eSgpbjywRoPmOx6RF\n22lK\r\n=ZnnC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.ef7de4def.0","@material/theme":"5.0.0-canary.ef7de4def.0","@material/animation":"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-indicator_5.0.0-canary.ef7de4def.0_1579901530855_0.16902862112236994","host":"s3://npm-registry-packages"}},"5.0.0-canary.93e2288b6.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.93e2288b6.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"67ab183ff325178b6c3d105ca9102a207a01b786","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.93e2288b6.0.tgz","fileCount":38,"integrity":"sha512-JGF2+SmS56t7S8+h0bp4HX3OZZ543/a1Hy/8ZYiXPA0DItRr7ECvWDs8LOj5zuYrqvyMzrrlf8nAwwY99KfVuw==","signatures":[{"sig":"MEYCIQC7NfMBYDkXa2OWj96AUd2b8GadfDbJywJRCfe3Tr4mzQIhAO+Wu1SpyWhWUKMllmM6u3k8MX9OdBhz9KYjgbMQsNIQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMGefCRA9TVsSAnZWagAAcDwP/07aqBf4tANxsB0JoBRI\nmB8SJDMdMcDz6uOWdM0g1+foQdzGFnlKr5sq4dj7gsfpxqhjZSt4DEEcXHgm\nG/MQKBdg4NQAxVaK1D3SFkJZvBqtfTgdGJ3kBr/TsfDc7+yAJKX3AwveIrrm\nMyYavEWxDjR1XSr4iZLCc0FFo54YD6adoH3uMX+KeD/0Yp0fFgkb+QjwHrMU\naKnjIabeghdqbwi/7GCCBXMaErQQcBRNTBkN0N8PHOSio6+INDLOaRMxLKQS\nWJ4OLe/E9LIb0ydfbrX3ebt/ZJxajicHGSuqc00gZqGzvdp6CRI7GPSwtedv\nj2lUtlqxlNZoIdEz6ZLlsJwJrAjCrrP8VbqaKaRajcCJjC16v36B9JGL05VR\n63wVJpLq2XJ2dJY09I4Bxc2DLtdUYdNemgQ/r4LYz655VdFH6MaMIX1Bj0rg\nnHJNCoZtUkLQkhj03Z9r51XLe+bGj8qYK4Cr6Hd2usTa9eNzTWHmZtNawUQ/\nyQXbpS9ih717rzQlSVMjG4hMCM7aA6MSMr9vqzMGhQWNj3HW18SBWtIH1dcC\noyBMnF30eZfCGPQ9hZAhpiU2SUMuEsZwu5qECoLwVj/ty6+lW4h7hFX+YZ7u\nvOffCiiCkv4LO7JYCMNw93q4wimUUjpy4E+TMNzdFu8ZyPMyqK+Ze/EZy4XU\ncxwP\r\n=ns+i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.93e2288b6.0","@material/theme":"5.0.0-canary.93e2288b6.0","@material/animation":"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-indicator_5.0.0-canary.93e2288b6.0_1580230559348_0.08291751181837514","host":"s3://npm-registry-packages"}},"5.0.0-canary.34ef15f67.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.34ef15f67.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"2eed7bddcfeb6da24e144e10c87ae4c6944be14a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.34ef15f67.0.tgz","fileCount":38,"integrity":"sha512-9KR9hWfZ1yruiJhceZcaAFhzUCJ50gRYX/PvPoiULkDeJ52XgTNNjCSlpCUxfst0SdGu6hruWK34zeG9aoQwYA==","signatures":[{"sig":"MEYCIQCq/2doK/+wsVvAQrvuXrHccSETnpdtjN6q6uHt4FLmmAIhAK8pFbxsAiMwiIbEeDGPO8zsn1sF6AIwaHyXlTMpIQLY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMG48CRA9TVsSAnZWagAApTgQAJzzWXTaZNRqxX8MI4lU\nn7bWzc9wxzmHmgDT6Mw1RYO0AIbO8ynB/4jVnmMDA3j0xNGjlgSDjLh5lags\n0dSBTsj6RmyIl1Fb39/HMKaCDW5nIUqELIYmNTmphMTKTSk5QxTuAzm159rt\nK29fUsb5hm76pBZeHP3uxzhTDbwBJdGJOeo8OvUC7nYng5TaIM1zZy/89M6W\npjnpX/eL6KNfXleh28P4TBQ64PQKiI3fFII8RAX/0PzweXqdyf9wZ8gHeY1X\nscCvY6KjupHM+8o6txkT5t1tOWBHVngZxKWsaxBsJDuCs81Us6a1/UOgkUiW\nLpt+YaSuLzy/1fj+8jbHIjUtJtbDt5KB4198niEQlsOIlIFaKvZvbHuFh2Be\nkwTmsqclJ3Z4EE/QteUPVbMCm1eA4zde5pT7HtwQraH4zpqd1BWNAfTZQt/u\nCBgR7MjD5QWvBSANXsaBWzVdFhh56qHVtEjNuBQJCmR8sXSJGZjHGzTqfvv8\nGANPZWAZ6EiydLvXEcCdMvLxurxRNLNDNjrOpZU8Z9nGP98LQI67uG9QGkDq\nWndQomVSw+61y3WB/0pKZ/zngQjCRsbebpNkebuC86l5pjssIrc9PYM9jFJD\n6bvo4UMHWd7rMKO8OLhCXhQteSzOJd+48tZFebfxkKtRyWsg3d+S5z4mWgqU\nbMnk\r\n=wxKA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.34ef15f67.0","@material/theme":"5.0.0-canary.34ef15f67.0","@material/animation":"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-indicator_5.0.0-canary.34ef15f67.0_1580232252546_0.7667534324222582","host":"s3://npm-registry-packages"}},"5.0.0-canary.d3d176ba5.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.d3d176ba5.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e16ceab4fa2375f4f0340e4f98e519696bae1a40","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.d3d176ba5.0.tgz","fileCount":38,"integrity":"sha512-cE1KMWRfJncjmN/DI4UOvU4OHKN/nesa4ycKq37DetsgJbBRzm0G0LvAXgv1dbwNC+EUjddFkz1RE+oeGAZdnQ==","signatures":[{"sig":"MEQCICAL6eBlm1sKixGFiUS3Yw4dvv0YXybxjBqbIMCZOsfWAiASomgk7lzzNVmU1836PDVYh6GcWR9YquIowyzqCjmqPw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMG9vCRA9TVsSAnZWagAAOIkP/iwpErwDejFLKI6D7RMA\nblg9CbWyW+dUeNon3HgJHnZnodNHCj6HUJ1GJ8fG8PWoNK5Ik8VN+yevSl6i\n36+fxMCEC0zKpdhCbADKrsAgtWrxSM8T4WnnW3XU+Px0bZksRljs+zZ27KXn\n6fY9y0nk0YGZHpKi+AoSK40sfIfYYu0s/9DOgJMMu3PQsEnBsQD44wqUEQ/E\n7Q8boqzyPBV1DzO3e4kupJccWVr0C+be9gn5u+TB1/O0J8Su51kKOzqPjLnY\nnWkcgCu3s18EUyYE0MweH+BtQN3OQih4GA3u2ykjgvqFqQgSPWoig4OkAgHS\nc5jT0DWTufdaoL/PT1MhdVix2mGcBkugd8SjolAAUijhxJOwULYDtbOYvb9z\nlN+4D0qR2gvQV8AHOH78qAgR5ZXd9Np8T4UvgnHLtuwiGzQytLprHxKQRv6i\nRZm2qLfFAsVXhJ/iKakZbtxVDmsYKKwgxjNSPy66bBUOWp30sIOjv1iNG2oM\nMXKQqkDEF9VhTbGTYU7/pwL6Zfc0Kp/mjVfwscgkscPQi+kRXQcszSztYK0Z\nE4BwoW7GTjTyGPqTAP8ihdZsPsiLaeWhUe89LC28Pw6/hA/7HwgiZejdl1jb\ntLhLsnUX8nkLHiiXR6oYc5kYfsqeXQvWL0NtWLuYPAipdWuAWGNxpiyphs0p\n6HnS\r\n=Bpcc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.d3d176ba5.0","@material/theme":"5.0.0-canary.d3d176ba5.0","@material/animation":"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-indicator_5.0.0-canary.d3d176ba5.0_1580232558683_0.30822707551301187","host":"s3://npm-registry-packages"}},"5.0.0-canary.32c1df133.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.32c1df133.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0f412b1fd232bdaf8d62c21757fdf9256ecb25de","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.32c1df133.0.tgz","fileCount":38,"integrity":"sha512-EO3hUXn6XI4JdsiwFHP1RTgPoIWwrSgIXc6Itqxpdf2CKXBNFMtmqUQ2daAxiPYfpi4XjxnknjAX5zRA/N1AoA==","signatures":[{"sig":"MEUCIQCvIBlV4RbKocdjpMAGsGSrwX9Tj2D6xXm0DbZm2HZoWwIgXLky7cOlVoyY76tfiKu8++XCBPQTaA7VDviLiL6tJGU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMI7TCRA9TVsSAnZWagAAatYP/iIE6t0cUMptIX1dxXhX\nRyQHIgKHVwdOh3ifMhjd1PL60YlvEL+8cto4ULl9j3hY5swsVcMJTK7Fk8QZ\n6zgivSGT0v3Kf2oJxiNd7zh8KdgP4+3L+kDcsrK4didAjF6xlhDOo9MbjoFp\n7Z9Yep17ligdh+FrM/+8AM1YrHwCVNKawBG7pm8cKosJxfmU0eHRmy9VClyG\n2Fh+aywUTU+qzVrJgghwBdw9UOtrphJlu3FrnmeOih8qn8xVC4PG+QuryNm+\nfp9GsX8Qi2kKtH+DO4idz/LGeH7Mxju3OOTlp2Y+Fbflxq21G5qrJhz0wRfK\neBjcKdYP8Lu5wsVLIYIkQkuORlkG/X4MOfO5LxQkFY+ZB4yxnvbxsr8U3MN1\nUQwkLHPo14/69I34+x7P2vbjs8mmajdJjgbQ1SOgFg/Ak6aSR1K/z8DoLCJ1\nnk0hRB7KTAocrRA61/pLD2bY2bOfHEeCrzY058M3rdkMOK5YEnKWHt1+CbZ/\nqVCgdyEzHsgFHn0KeMXDCHtUXnzBt4+UFnBxLDHs7aRiLn1Xj5Y2oAPIpPKo\nkoUiuryLQEmr0UP3XRk2Z4BF6pNspwjNZ1JlR6TgkI9vsU4qcchIKto5ESp8\n3+KfQFJplggrXUE9o4grL7a8YLSON5kacd/9p3vZGXkBGb6KjIPVDx309Boy\nnU98\r\n=W1xR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.32c1df133.0","@material/theme":"5.0.0-canary.32c1df133.0","@material/animation":"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-indicator_5.0.0-canary.32c1df133.0_1580240594660_0.08015420258797268","host":"s3://npm-registry-packages"}},"5.0.0-canary.f3adce86f.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.f3adce86f.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0c45cd712c7985857a6141d17ea1931bc901c82e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.f3adce86f.0.tgz","fileCount":38,"integrity":"sha512-UsSOyZKr42Jy7/DXSmfgfZHK0KyF3iHb8SHmfuwEBPlMZCTZSxUr8iX8ewnVpthLf6mGWQPAbOa/UBO/xQToyQ==","signatures":[{"sig":"MEYCIQDd41U+kgCmF4/WXw9SR/QdLhcJ2CIBfCOoXtgIt4r3YgIhAPolW6mfEhwU2wsIj1ZXdOq1kfENmy9aOLoW96kF7EJS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMKxICRA9TVsSAnZWagAAwMsP/jgpc4Mev2JVF941pTRs\ns75T68dHQjrgopc2Gx60mPV+xKQaVpDMykksHW1fkrJnhHYkRxOkucxkJjWx\ngW6ncex9VK2M3K5BhZHUTqyihWg3qc+BtlFPbm8u5Le+pbZS0m1kv3pzGP42\nPQ00NaOjVAYQQ0JhUQ0VVNQXi/vftLtx2se4gDTf+8MIz/y8zJazC11fkrpi\n3NGAUxdUo7TFLk9dzEdIBM8nE3qvqbWNwY0YidtmSn/DfOZEutk3RU8r7Elw\nd0pjYQX8v3+0ziEa6qGQpZmvoL/mluWp+GM4FEdCEESDYx+PmeXQYJEETFeD\nJEaAZLXnXLQZmFMObAJqXpmb9N0wJQEACkkgeiCr0kAj19DC8hyXVsVOyTha\nTbeIiUp5DGEqT//7pLtcSeUdkikFb47qs498iYDUOr2+j01OotKtgtHaZ2ju\nYhbV36M3KNPGDye7hRq9s7JRWmm6iUo2c3UPUv6Wc2FVPO6FftmWbbzKoFrl\n8w44w3rl6NQQq28LBmRsEaP/a7xj+vV+gmD5upj3MaCX0dBwrPmS0BbTCsGu\nOi8iHeKTJYKhep9ozFPMpR1DJcxa7GjvhhlguEljGr2mAzkdmTSWwFLXdcd3\nWbdeFJlTXF1qnU4DmX4kLUc47HMst4kY6TVC+tgRwOK2Dd90FybfBvAm9IAU\nnnC4\r\n=rDJc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.f3adce86f.0","@material/theme":"5.0.0-canary.f3adce86f.0","@material/animation":"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-indicator_5.0.0-canary.f3adce86f.0_1580248136266_0.9304396909247279","host":"s3://npm-registry-packages"}},"5.0.0-canary.a4423f890.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.a4423f890.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ae5fd8f1b7db7ecb9de42fee6196b0a69f791edf","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.a4423f890.0.tgz","fileCount":38,"integrity":"sha512-ma7PauKTK2nTjFooPugUtjjkRi2vX8dh7pXFzjG+nubT/spvbhVVAsXQIq6RhaNOgsYAbvfkys+HRFhU4I39Pw==","signatures":[{"sig":"MEUCIQCs/rO5zT7wfF3xk3NR1rg6F4z3SpXFqtBFMIKZbB4XiQIgNuQvhg/2VV6VZlXdVLhnUCxxRec5BNPOabZ6Yd5rFRU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMfSHCRA9TVsSAnZWagAAybsP/Rai4dBL6X490j49Dgun\n4j7qVTflo8/CH1882s4ZG4zeNuqvNdKopCqDHk18jzK//DCiGYkQK5yrDRS/\nsaPRbsGnanObhRN5G4x/a5SYMnqij4dDkmilVvxFlh949j4hBrNwNRHkvMP8\ncZU6CQHZ+5kVNvV/sFsyQ7yi0k6/N4AKrhw2Qk3sSJPUY8y4/wT8f8/BwI2L\n0svl7KGjaPMzKvVWTrnXLttqt5c12ozx1R9XKKTmGD1byCifRxNxH4d/MWoo\nBVCS0yqW9QkyX1rBWKTMQe67bn6YBl56DdS5g5Two5x78hL31WSagWea4Ds9\n3wvHqwxhCUC4Y4KQfykBTu0UPabbP3M7OuGyeWI1FsO9tGCqwRD6lhNP2Dth\nEUyDh+294JBPtiuqSskNBRBz+96fq1Pe5UGZKuXiwuOgaTBG4CsX59NHRw8S\nfJ7dqQNtFD3ImW0xyLIB3DDXqXvnEYrPgzi4+dr3qwf3I9krt5uglz9PJZEE\nBp4nD5WjY+35LRR70FzR5jNvqK758SNM6eZjh5nSNvAVL2mZfeQgD87GkU6O\n+IioDC99LU4u4s071gepJ2EPNwBKjphk2O8BlVEExiNlBQJtvAmn5tNr7gTc\nQuv6PJOaORGpA2ZW1OfND4D+hFyI6Hh+mN2fk9VLLDjEvWduxYaAyKzgq58p\nH7lT\r\n=pokT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.a4423f890.0","@material/theme":"5.0.0-canary.a4423f890.0","@material/animation":"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-indicator_5.0.0-canary.a4423f890.0_1580332166842_0.8727060127349466","host":"s3://npm-registry-packages"}},"5.0.0-canary.9351f167d.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.9351f167d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"a72a7b5bf794827ae28c9be55e68c12ed8e5653b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.9351f167d.0.tgz","fileCount":38,"integrity":"sha512-3+/bQaKfME0KDV7T2MJ3flUtaIlcJqu2eMnWynjxVUv65N0Ri1bB33BRoOiaDnFi6HTYye0FHgP2Ta/0b9C+FA==","signatures":[{"sig":"MEQCIFYhwmX5IWds1IOVlGJZR0qXFOT7NjDA/zLN8VD7/aoAAiBQ9UTXpfMckqzR7HVmjWvJL03Ox7z1U1zVC4gQGIzK5Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMf9SCRA9TVsSAnZWagAAiQEP/0XMsE/dRlfqoXqyRfv7\nzXkJmw8VxkYSnkmtvORL/55Wf9M7cpVIV6QkJqWAlxIT7X2gPnvJW/1lM1Lt\neqw7807Cy5gENQf4v8vQ08P7HvAlnA6Et3TlqUoLYY87oHk4k44S/fDolyXI\nR+tA579cF6nt5NCPPOK+ZXTPGe5H6NPHJ/2O22uMUwCzcWqkH6fu4e9WDVWG\ns8dBB+Hv9mXJ7KwnfEyfi5NppWpJ9JwCJbTK4fJk3nxYBNgoArN4WI+z+7bG\n5jZkYKO+pgMLzd9x6T0lICKqQdRJL+knoZp9CqoU7oMzphKhDWNslSsfEdgg\n6MzVsJFh7wSjlAAQVpPTXAmuLeFbMJcBHxMni89ckuFW/lhoFPRimOnKAPnV\nqcrMX8FLUpqZHqzkyJn0oSI7k25EFy80LPBPPvOat95p1l6nUr+xKKPRykhc\nxcgkQe409a9s28jv781QHgUgRp+q+0aKL6VAYcJNFyNs9bD/DoX5alFdA4X4\nUl+UlbPc8eXzXJCTPfelqCjG2Xq/QaKooh1m0GPdj2IPj1s4i8URcKDtPcbJ\nc0xq5SfUoSNi4Y85/stS280y7iIAC8eJ69iDCjzGeLykcMkDM1dt5OTNXNfj\nBzWZaFRrMobElsanFtkFlKlR7/ByjJm6soWFA4FzmciF15PbxYeTbN3rLrm9\noDf7\r\n=7jzo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.9351f167d.0","@material/theme":"5.0.0-canary.9351f167d.0","@material/animation":"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-indicator_5.0.0-canary.9351f167d.0_1580334930287_0.9985963530687254","host":"s3://npm-registry-packages"}},"5.0.0-canary.29b89dbc1.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.29b89dbc1.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"44f0cf8382aae4e50185e3d21b385ab5c686626b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.29b89dbc1.0.tgz","fileCount":38,"integrity":"sha512-kH4QDVvUcgZ8GSaikyphem7GPq371szds7VPBVJtOP0r5fnTVFm+CzGigTS7+2thITNBTb7OyO3lAjmCWhZpKw==","signatures":[{"sig":"MEUCIEoj6VtSIZ1k64CvfGTaOBY4gOeMrhbKOEqtkLaPS6dLAiEA2q3DxSvbYHpl5orBzkwCdvlGFMPcHA4ATwr1/pkzanc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMgRNCRA9TVsSAnZWagAALLEP/RUSZGs8xjSax0QxN2rF\nqWTqeQcPtAQD7AmMCnqaC2lj+f2FaRfrWTU2Xw9rPTxjqRLj3NdUVj4FKwrp\nrkxNjO6+enkc4ebrPRsXXCdFhA064ISYzXfdRaSsJJnqhMczo9MitMZRCo7S\n3l5cmc0QNG6bxiWeoxpn9M3kQVeBgAqS0LMEZUlgyp36atb6AGX5+dmpyR01\ndLD2oT1kUdiVbVRLpFySQ00GCxvec1HdRQXskkeiMxf09xJMGJB3KQOadgdp\nnoBf+VVW5SVWKhE5IGBBlmOT/nqGIHyByB9UXewrbT0QK1fgGqSXiDB/8ysn\nciL9kcMqxnAywk5uaTzShF16KCUJc7IBLd4H/v/l5PpfJPaqxi9lRqhXmKxB\nqP3+3O2TXjNqxHjpm39oYHio1upLSDicGTcN8/jurOkA9AYsUju9QFCY3SMS\nUi/YYcpNuJG42UyMhVrdHHbNIJl0C0NzH0UqaJSFnLjDztUCpCB/GdUs46GY\ncdjFbdHWDCts1zRZyfD2DAhczcPhxyy5VouwtzcTCtd+24i80NoE3lyaWoW9\nr8mNVMCr6vMr0PKuPLPTaJEc3TcoDHTW0HfqjMf80fQTfLdMdM0a+RW/wLkr\nqcnw0uMJAe9FzXaNK9WW/61wxtBMAKeZ2PgCdx8QDs8Y4ufiZPNXH0KH7GxF\nN0u3\r\n=/u9m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.29b89dbc1.0","@material/theme":"5.0.0-canary.29b89dbc1.0","@material/animation":"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-indicator_5.0.0-canary.29b89dbc1.0_1580336204262_0.5065727981092663","host":"s3://npm-registry-packages"}},"5.0.0-canary.45985457b.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.45985457b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c65403c68c84ab7fd57d8f487d87714594248f20","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.45985457b.0.tgz","fileCount":38,"integrity":"sha512-kTQIXFUK+WTGDr+JSL3NRM1tTbCoL+QaFQMzcW54IVdjpgX+LVIVUvVj9oDqF8sEf5BT8NdSnOPj/+95hR89PQ==","signatures":[{"sig":"MEQCID8W51ZTw62DoGNprgUjARq/SA2mMt54wH6ZdhegPrT4AiBpAUUnvdqMfrgAhNhYGuKorj661Y/XbwcYi4eHDIAikQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMhYiCRA9TVsSAnZWagAASukP/2bQ7WfHw5a9goH6IZmQ\nkYMUllKnKeyKYYUNRhk8hKgEgFW8lU2h0t1pPeNk9SM1ezrXk16FwptHADCc\nS+haTqVpnP1HYwW7bfZHNOQwipmR4zDPjtTdPbLE7TAFXpPHWAlOo5668alD\nlTG8IsD4ihqUVuEVBASbShbePs6043WrVy1tYUGSUvnG61vCPzG9KDfZOqs0\nTKFB2ipPiZqVd6nOAp3bGFPN/TNIAcN6Wf2siYQjVimeQcA9YQaRtVFPYCMl\nhiiX8771M2f1+DXd6re8L4PK+MrvQ894nF96+hRdXe2DEXn2W8LZLq6Jqyoa\nb8BroayIlOjcPzhuI3XdDhW9oaJa81lgRWZKLGM/G2w1lfvRFTFz4kGLeIQP\nOZ9JjxUZ+l4YlZlxyd0AJQyHZSpSUC6eR5CPfDPKLuOvejOBQ7LVsrXL3u+T\nLlh6IFh7Q9QxBbiFBBG1EN8jvtf5nEsZPAsDGuTN8cKyNbko0FULHErjmD4S\nFja+vPGcTx2gCjDVERjvAqURxf0hS0YfuWqXt4vGBCFdjoA+2ikz8c8VVLyx\nmzQszmTwuD4+J4LMEdCj/A24JgNX6I/bA2RB2T9rTQuMe3zKzl/5VuqObHqB\ngC0YFOSK+t1e7gYpL5QE0vCUgflALjmkyyigwmMO8P9hTiyua+tws3qcNBkO\nnlro\r\n=Jvgk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.45985457b.0","@material/theme":"5.0.0-canary.45985457b.0","@material/animation":"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-indicator_5.0.0-canary.45985457b.0_1580340770221_0.103347003164455","host":"s3://npm-registry-packages"}},"5.0.0-canary.a1a0deb3e.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.a1a0deb3e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e52e284a41a7742decf5c4021f9518c68bef051a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.a1a0deb3e.0.tgz","fileCount":38,"integrity":"sha512-5uIL22d1cc3951PsDSoXguMYut/3P7+t4rtXQ0GRacoJNjawHDIGk+J3/4/P3Pcy7qWsm0bNFOUN6J8/S+tX2w==","signatures":[{"sig":"MEQCIAlZXmMgMfMSKKxU6XrMtaM1knGVdv2GvsOWTwJ4BR1yAiB/ho9CA3MOt68bLq3l+fd0HQnJSicZ/1okCLi4omgbpg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMxRDCRA9TVsSAnZWagAAeioP/2DnHIbpD+8lg63UyhOZ\nlxKovQr8er+uKPgGDaJaAJanMBnIRh0rTn/TQUu/m9xFkbkUt2l9XzgOLJEk\nZV35ftViWhGFNeUNft8PN0KMDT01ofljihmoIv+6iaPzTyPQtTOIPN5qGes/\nmsjfui2B01L90DX5v7T9SJPIN9PYr130S7U04ih+3tSsQfOpfIBxZUromWzM\nHLueIg69SlFlhpqJQUmgors/if8h5vFlPYcYfpTiIjkAFtI0vwB26mcEOa2h\nMzJnyfo9AKCvgB+yftOvxkvzv4QjhCLbQS7wB5vw5wTPOIWb0BP5CuxAobH0\nFyvMoW9nvOsuCX1Q8eVriK1LVTPpfjydzfSJ+tVciZ0olrnseAHafiwVLjyB\nxMvbSTDozrCKwn/rJ9xXTtUwa9SFWmEWx5o536TE/2noVhHMqsx1Vzy3Ignn\n1jOtXLxmhHwxrgmn2ykMEtX2EVnNcNBppZdujU0lrXVSNupaTp5S4j8TU8l2\n6RyKJKs8lwDFR9Ra3pVOmvXA0N6koXoKBKk8fgsKXWg5zV7oYqMBrTXSc1aR\n5n+JI+82+eyZRMMwuL5c/UjoYyk+f4+/80Nr4f1wtbc4JFxaWkmBLbRHCNdL\nSD5rs7cvwlLZa9aRtIeDyWhey6XV66FI4PWbRGjYyOAyx0OgzLT8tVjSRmTK\nZqXF\r\n=rbdo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.a1a0deb3e.0","@material/theme":"5.0.0-canary.a1a0deb3e.0","@material/animation":"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-indicator_5.0.0-canary.a1a0deb3e.0_1580405827486_0.2694606639786252","host":"s3://npm-registry-packages"}},"5.0.0-canary.181486643.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.181486643.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"a9fe4dd6d79f52d5df8b6536b77a7605805fa43b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.181486643.0.tgz","fileCount":39,"integrity":"sha512-Z9Sm1VV7AtIXgn77o+M6bJ5lCD8d+2sgFVz91Ro/YZcP+Xh/9Zl4ZIfhmCIOrGdkYBWN3trC9xE3r0d1nGy5AQ==","signatures":[{"sig":"MEYCIQCLaigHkSQJNXoKXa9jHMtgQ6d43vneoJCVhG/OCLBHggIhALW8nyndgtZA1dDTHUu5R0SP70neuRPu85tB1+SlrCaZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169013,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeM0LhCRA9TVsSAnZWagAAmCoP/3gObZUjRa2bFg4MJhiq\nHbMQX0/Uph1oG1nP6Y5ubpnaAfOej4ASpw4QyoUxeP0YeZEqTIzkN4rYluP0\nzms2175MHWj9UwyCtFU8OOUtwSGf0slcydKzF2pbWGfFvWj/e8ovD4KlmHrx\nR6bCX3i7Op89v66J72UoVJy010sWkYSUW6BDn4ZfhELpXYnMhfQ9LQtqluRz\nDkCdGYkX6ohVnDZvdlqSy7fx6Ude2fr+b8T5uqtekov2mgjLfEHtt6xduvSg\nwEKP3+wPRBJUDiVatrgGOnmQTpabyhKc1YBGUNe5LnMNK7hFXrAcUmlIw5d6\nMvG6d87Qe5m+WUgS2pSUpKvrYI3UmJhlAeaDHXLUzPninuqwsnFeky438YzF\ncvMYK0pca5vboJ1umfIQylfL0sNQBQtvRCIMV76QglI9LbgHhXbwZAiLd9Dk\nqU/sGgPjudFQ6jjUxZMGmQZ7qeFWcmZHX6PdJOBXhd+eaZ/BxOkpFyGN626e\ndE1gMFADkrWh1N8mQL6zNCyK1CL1u6Y+sAH/R7OMuxfQkaZAt7lKYXdW5igP\nKOZZBkhttCN+rs2WopCuccUQGWnq/PXOP0nVI6jj9D+7iuoXDse6gb/SuULW\nnf2pkjF3w0gM+mNfG8vVM0E7i50cEblVXcfpKLmbGtr/ZdsnkI653nWTEV85\n+RJR\r\n=rl2D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.181486643.0","@material/theme":"5.0.0-canary.181486643.0","@material/animation":"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-indicator_5.0.0-canary.181486643.0_1580417761447_0.06631059178744136","host":"s3://npm-registry-packages"}},"5.0.0-canary.3a85313ac.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.3a85313ac.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c0465b3f21071763aef6bab3e07527606e77206c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.3a85313ac.0.tgz","fileCount":39,"integrity":"sha512-MkZ0CmGo9kgXJayLrv/9rwa9SoPRFqr/9gFvbMHSzSjiknglvsc+eqTIzGKRCo7tCBfinvUZQVfsVafkUcu7dA==","signatures":[{"sig":"MEUCIQCPY1ftu0ZFScba4zWBWL7PS11edOXrW/fpIWD1Qiis8QIgEm4oTZ84Wguyij1VkdN2CNn3Oy9+XeHctbSCv2dlgwM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169013,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNFRlCRA9TVsSAnZWagAAib8P/1BAU0v2lFMmooIJwUwi\nZNWbbN1MUeUn38dDIpzM3oL7gOlWMWvUnqzjl1odPauv5Ng8SFgKvCeZ7qRy\nVjp03wVbj68b6WlPxA7kvXvDvSXuupYhP/qsAmkFQBbxCV0gS0s1Na2MmdQo\njUEEHE7nxwlfrsWCVk95SnjUu/7psfSRtOlhOou/KoiO5YJ+yYSXaTI/O2Z9\nNsPl9jiXxukkKdXQSCuH7KLChDlqSI0tqK0vwV018mjxqITjtirc/TsTimid\nnzQUY9lyP82i4Esgfd4pMZwLxUFcu76H7a48qM8Up7uPOQhQMiruunL3GeDt\nunrqK6FXiLa9YNkWLi1pzgaATEJeS+jP9hKx2mzkwuYW9MJioOgZK/66BX4q\nA+cA9/zw1EIWGXWtJuT0r/5oAsq5rhRftZBcZ/3L5nV/4ihTwcIU8MNvldIf\n5yip/NIi4OzaXQO8Lg6lPlceom1PnW8AriwhbykzfJhzgaEMr33nmlqL35Rv\n4sl5k7OCbpr+QTs/mYtPbQ3nuMgncq0wLOVeQZctCzfhPbchfCwSfdncCyLM\naIl2ImK1u8r+MtEFDZIuurECuyOKTmXo2ed+NMLzi827kX3Id3OCDsGOgxwI\nlqYxz/lJD5ESkfE6IchKd2ODQwmNqhZiPr1MJji155s3coUJ2SvSjZFVOHjy\nu0H0\r\n=2dzK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.3a85313ac.0","@material/theme":"5.0.0-canary.3a85313ac.0","@material/animation":"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-indicator_5.0.0-canary.3a85313ac.0_1580487781075_0.3638181183524418","host":"s3://npm-registry-packages"}},"5.0.0-canary.b6c7f624b.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.b6c7f624b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"304376e2242da2582da31807b042444a05905922","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.b6c7f624b.0.tgz","fileCount":39,"integrity":"sha512-qyON78ffORazHph6DJUHQr0FcuxmZeFE92oqw7CCIfIe5ZsxdlnZ9VYZQwkMJRQ1gGRAI+zQDaj4BFCSUucHDg==","signatures":[{"sig":"MEUCIBkh8g7m4DAbAhQnjW95EhzKRkLTXA2c0qmZoBVA5+ObAiEA3bPELmeIMEMhMOowCp7lOHe76ALyWbLzmz6Hh6V2l38=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169013,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNF2/CRA9TVsSAnZWagAAdlwP/irywWHduLy1UQgTlXxf\nMdR454OZzCFmWGdj4gn99EoYtXeFuhMMh3gEHxqWjUNFdu4BmaloKguRLuT6\neBeVl+y9eT02Va8o00q5Upx+0OzNKhWPSsOQ6txieT+tYDiBEM/CRR4sIB2J\nZ/VbUw0FTNl03zEdkqDEPQ5oEdFRD39OFG/+U5+EavgWn44fuNSvESCDhd28\nKoipxnLkFgQGje0TvKjjsoZ8CXMlTmOaRqXpC4JTyaTVTK3Q7BlwaYYidS2v\n38TKNMJJDtrEZOJVIdas69QOYSBPbnIhRE3GcuUTxNH/qRC6L2JBzLqXvJd4\nwP+tAeI/S7kLOAvU6vCyN17M1noojnO65OIYLT+mctIfRHRnV+qgQBF3zhEu\nDUgUg2IU87NbmuB8Ww+/xYVj1ts4rYBL36NMONDEhZDYxkaLMI/HWgvnoNJ9\nzJLEZVCSyhRduwXfXgn8NuLVLPzVridrh9VrlDYiCJi1/23hgLpOKuCdsZuU\nh50FngZBIKG1oeYbJ31jh2eaImwmZhYhE7s5J72rxOSH5zbQe+prYuIhVKOo\nCHzNx/SvJ8JphzwcUa70apxvMUJLzLFyjc/2aJZGUTZbLu+8wUdH6bDzqFV6\n0HzVhDhheK9ltXZo/jO6YzUhzxDp2NKL7wTlFY8iXv1tsIKqPtm6Oii9cAOp\nqrCy\r\n=Mnjn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.b6c7f624b.0","@material/theme":"5.0.0-canary.b6c7f624b.0","@material/animation":"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-indicator_5.0.0-canary.b6c7f624b.0_1580490174855_0.452288680118224","host":"s3://npm-registry-packages"}},"5.0.0-canary.b3f70ebde.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.b3f70ebde.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ae74750a3d891bcb0e4925e61d08534a7c4af561","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.b3f70ebde.0.tgz","fileCount":39,"integrity":"sha512-Rggul7f03hwF7+8Rxdij9J7yGgwzW6TWXSSpwoom8RqavgpXw3DWF2INWG5P6WuoUAiE77D4Aq1anlZKEVCEAA==","signatures":[{"sig":"MEUCIGbH+8oFCRrkv//ihcpJ19+gSmP5NDHZHROyiqVC0QYKAiEAxu4X0cpVbz0g3Fcm4XJyi6P8Vjs0Xzzghp1diiNvt00=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169013,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNImaCRA9TVsSAnZWagAAqUoQAJVjrb/QlI1WQU8y08+h\nqHpw18740WgMBqiwuiLoAgTUA9D/AbhIH1Nqdz7Zko1Bc8yWniplUYdjJk79\nBPzAIIIPD4A43OFtlUJWAWfq3tgT9l6WYRkL+3diLThTPHPpikLBxD65CeRo\nyXH1cURz3JxVt3bUx0RNsYDAnQcyAIzzWNOcseikv3CViAPB/qRTzz8rtVIJ\nb4TnETHDFaLbTpRmnVL0dbxUbXibdD2dYy+VVHQ9oLxOxHLi6dSdlrEt+3Vd\n0O3QC5akBeZdVAkugFhyudlshl32eYUMUIxEKF1pdZUsmFxCoh4hIoFSto0G\nQJOe0X5C1wa1Kl3VnVZLBQXU3sTlJGtTrrg1AokAd3bCE4vpgjF44juWn/Xn\nmCY9Cpo/tnAek6FeIOOHKhQu8KLKbt6elKho/aYF0RTR0+2yMmw8Gg5bmu0N\n+VIbLZ7dBr/SzuCa9pi+4rGWc7vlbFD3FP9kQRxud4vUUfafPKBUboJZYJuj\n5UOWrqd7G8JD/oHC9etLMGrnANVOlwBWYDW8c0t63vninVBbD3LPOpl8qiGh\nsic51fbmhK8MNSd5yPgR2wpdOsAj9BCr1yXy5+5Ms5EMBKzAjlcLDjfFAoLT\npszCtp2mYNzNzFPwUT55zf1nj+KdGwzRSTNHqX9AKpn2mRSF4iQmfoRZkHL+\nHpEd\r\n=yCJ8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.b3f70ebde.0","@material/theme":"5.0.0-canary.b3f70ebde.0","@material/animation":"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-indicator_5.0.0-canary.b3f70ebde.0_1580501401162_0.4920597699976683","host":"s3://npm-registry-packages"}},"5.0.0-canary.3e782d8f8.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.3e782d8f8.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"1f4822d5d46fc5c1b450ed4a1d72a946aa6f9683","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.3e782d8f8.0.tgz","fileCount":39,"integrity":"sha512-U/cLBnUjzSfT+a3x9shtnIl4ItZWg7XWjwWgtEc65eEL1fCGkdTv3ADMVqRwUaGBZ+ZOnw9UFz+UKVixCXTKcw==","signatures":[{"sig":"MEUCIDMPL+ill5w2JKeB09WDxzYN1mBZv9/Hho1OC6L+2hSjAiEA4z6v6PTDFVfGZ6bU6kzMKzWjpYqxEhX6FHRYGOMrReo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169013,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNiIDCRA9TVsSAnZWagAAvmgP+wTfOjxEm9S+S3ivVYms\nD7ty0iTXtmufRXoiR8TTpRMXTxSwsum9FqCfjhHOJnsS9CmOhnNOFp9jIlg0\nE+Q1wLs2Xl42/yFmuuFcYcyiGjohndsJoLY321wSkSkS+uS7oln8IA/72bfM\ndBd/28014hVNNtx6hLUhA4mW2IHWvkWJgLags4mwRCEKLswt6zm3Q61hjrGE\nhV5O0svCxhCqJ5H1jVkUyBoEsAJf/x6np63R/fELQaDxVVMvYpCXiwMoXZzH\nutqB7qERVoveOFNVqDfqHn1Xl/aEbSe84WWvCfEGo6c+mRPRGFD9kb2dQ+JW\npT+gEuskgw6FipWDDmrmDU4Z5W7n+qhYmjxHkbOCdbJ4NePGT1tCThTgHkj8\nGr9ypmKs3vkdOQzbuDScw68CCyeinLLo1fGcepNCEymkHMnQ68Q1LQmMVUVq\n4OCL06POozywOb2s1hWGlFp2GrJpCR1h/jbC8lxhzVndHr4/f/gfirRS29we\n6tlmZSotmeHUDIFroyru5zlLAO1nyxys+qZ/DLgd9jOvtPuqdA2geXy3KMSG\ngm+sXG/mh+JOPP8n68qi23Bou/Xi1Bqq067luFEvJApim7e3TqlPUXikHDux\nzEIF9oTOpgt07nXGHVjLvR3ZnknXjvLItEkGIfo1SXy6MihTSgRx8K5IePCf\nYkAW\r\n=nGZZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.3e782d8f8.0","@material/theme":"5.0.0-canary.3e782d8f8.0","@material/animation":"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-indicator_5.0.0-canary.3e782d8f8.0_1580605954686_0.982036248509264","host":"s3://npm-registry-packages"}},"5.0.0-canary.535398572.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.535398572.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"24d89a459827807656641270c5e4b62f43567871","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.535398572.0.tgz","fileCount":39,"integrity":"sha512-BTC3IE3WXw7VEweC8G8UB+ougu30tWXV4zp9i245ADRpRpcqj3Ydzk0nywGWf6RO92j8FxPnYT/nRlNi04mkpA==","signatures":[{"sig":"MEUCICRXhJ6ycJEe85d4yRMDqC++lQCGTIFa30DfNVLj9SqKAiEA9ywo3uRNIBe5wRsHgY2gdabpwDWeXGqA74t2MJED7eo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169013,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOGJ2CRA9TVsSAnZWagAA5z4QAJtspUBlzBJ4D0d3G3vj\n12+fMZGo0jw42Kyl8JpzpQlZ4YyXmwnJWmJe07BlIjJqRXdCW9kuzFI5E0uV\nSsg8z2EAlGPUJS3hg4o8sozKzf/S1Mo/fQZnZ3cE7p6svLhaP/i2h2i4URz1\nfbbSj7NbIzE8KePv4W9w1nDQLks5Z4HpKInYBKPddtsxF+tWSTIUYGFWjy4a\nueTBhrXtqQL3Dl76QxcnCutibmlGvrhG6Ei+YT8WuK54yhsxoJNxNTHYhkMl\n7/y2DzPXuxVE9g1TuFUIlJ0qp+MUrNZwZecvbtLG2v6lZRPJc4tO9AFAlOv5\n0/SJ7KlIJT3kLfvd3l4octprMSHVUuoTxyZEH/r7tvrvAyRpicvutck4q8I8\nwMuz0CRsB1KqXNH/vF3aCfMpqDFi6b2SWkhM5wyQ3dCNPKYK28QfvZKupMHC\nVtLqB9yKeL3fqWTx3/hxzeaUGx0moxIeAYmMJB+NtKX4YKoWQ2LbSRZ6dA27\nNn3mv7BBib3TZcwidsS14SLqDb2PxK/0NCa1XtIMm6orQA3DZGn9EsUJVRzu\n5+oPQhLrl5PHitH+u/tk2ha15VHMo+xcPD7qzMbmh6z32XXMuBQTkol0Ir5y\nNtt1uz/r+if52rlOg6YdrXA9vZmfQzMSVBw7EzjgJd7dnAz7UAaJ0Ccf3PDX\nf8Ro\r\n=pi5R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.535398572.0","@material/theme":"5.0.0-canary.535398572.0","@material/animation":"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-indicator_5.0.0-canary.535398572.0_1580753526329_0.024428323393556495","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ff33802c.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.5ff33802c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"7ce6966780b141556ee986a29ad320f2b819f9a2","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.5ff33802c.0.tgz","fileCount":39,"integrity":"sha512-mtMefGy1621JWP0ynZVXg8P2WYiTqnnhspqN5XD+jSdACJKOv4fphIrmmsUkAFQgHL8QkdThcrVZqhGosqs+fQ==","signatures":[{"sig":"MEQCIFb3I0oUkWKnKPf1afd2jLiqa3X+Tlob0oGCxURwfmArAiB0JByoNeDrkV25wyzZMKTdzhryxwA0ABboP2Ag9VE2OQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169013,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeObH+CRA9TVsSAnZWagAAhRwP/20PRnqrGiBK4FhiKi0r\nE9sZvGvbaKnqvLuICA9IUYyEwT+/nM8XtjAVP3qpr3SaPPy/+yo8mmDvBnee\nO9GUQqdiRYk7D1KxcEaBuw9zqvedSgWY0/rdawSCnENFtrOQGrLpbo8BKIU9\n5wlWH8TDL64fJbcir+syAAq35NY95k2eNp/XMqQRb6gVq8rprXQnaaWLNrN7\nH684gWYrkvJRpgcInw2XrG5IG1qgpSI7LELdw9bweE/tk5rwWK0pT/6jod9U\nvB9d3/I+vUwH6JK8pxDrxas1FfVrblZT7LIQXrXsmzAWEKv9khXReS5OFkYb\n1LJvbko81Dq33bZUri1yWM1BDMuMtvwB0xtSrDv6cSU/ANcf7xhulFisqrs6\nSfLTfwtYfREZo8Y+8k3fTvnf12z53VvJgzWC/XMxNPjppOoDwoLYnQRUMIk1\n1x5hxtBkQTsnH+BzW+65U+BzffU5ssJap4GxNqhWyCHYRiu26g2IAWJnEn6m\nEb14I5mypIHnpaVl7tL6zm0KWv58OHLrxPhNC/zpe0Icb9jyHWsYRoNDBX0j\neT0MepXn8PI0x/P01Mc3PmfGZrPZKOC4DqLIU4Fnc0e9lQoJOkAYSSAOueTs\nvS0/l4ItsO9QgGoc+DZ+RBGl2coN6Z1Hdvfjkbfp4BznO/ZUkcVyUJji+Hfe\n08k+\r\n=UBjU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.5ff33802c.0","@material/theme":"5.0.0-canary.5ff33802c.0","@material/animation":"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-indicator_5.0.0-canary.5ff33802c.0_1580839422145_0.3859548712549241","host":"s3://npm-registry-packages"}},"5.0.0-canary.1eb29491c.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.1eb29491c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"f506b66930af350e9b4483018a2a5788bc01ac1e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.1eb29491c.0.tgz","fileCount":39,"integrity":"sha512-V3xvnzg1L0RGDEnOgWpU4fuuvc05FxSOdk4nWsySbOrj8SZP3ipbfrMkFIUmCqkoWZZJ9qUQDBc0quoUGwbODg==","signatures":[{"sig":"MEQCIDN21zJr0peKSaiNwYIG1SGeNF5+9h2and3Hs5+X5l/eAiBvHYwrzDG97SOMeoCdujcUiKTliEn72F2hy76aGKYzrg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169013,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOdthCRA9TVsSAnZWagAA3qkP/A9bT3IResTVOYxINwoe\naCm0r647afnh8KYlMr1YzgopPTduYjw0kRZaIq8GW1ghyS8jX5uCgaAnQs94\nNqewp2dlsH7Kph7LOZ7zfAfphZOEvyUPeNyLSPSgEQOs9kZljG+44oVQe2kj\nnVGZZkL5UKcMMgvsaql/M8ioEM7rn+wFrXsU2DkRflr3wAERGA2BdCyMmGju\neGWHmCWPBwefxeNA2g/xcqi3yfh9pBgyAHdUbq3xluXMLLEQngEE7zc1IbBi\nW0+6N+Ml2GSMMkUln6OqZhWWjOaVGAskee37ZRYgzcMDLDhNI63xAUiI1gTj\nwq4j9XLURSsca3KDR7bHWEbewSqkRcPUsa0qJWkz9dammCN13mNyFewbsRzh\nCbU4MjaxHvPQm4lL6TXODwwWd9JSNdW+7UpZ4yBQe0F0MEe/nAz6dDxePCfl\nzXpe+0pKcAKFw8kt+ABfyQupCi3seLPWVpx6ylvPMIvAr2M/vy/WLL7HzSX4\nhwtfSsIbNjPSI7kzZcgfbeSfWmtn+XLF8h/9JytetOkpV/Z32xLYwAkz88pB\nAYTBOVuXZwE9UWPb9+Ry/wmh1heuppmIyFyTLhR2C5IIvjUil2y8Ns6MOarG\nFf21mLyfI4Sv1fUk2Z0cNTARYdRNdSLlTS1NF9Sc7TYktvhz7eG0gKSPkfCg\n1Mr1\r\n=RDUK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.1eb29491c.0","@material/theme":"5.0.0-canary.1eb29491c.0","@material/animation":"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-indicator_5.0.0-canary.1eb29491c.0_1580850016724_0.6863037159849401","host":"s3://npm-registry-packages"}},"5.0.0-canary.4c7154b26.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.4c7154b26.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e0c48c7dbe011419730075358dfe51025578f839","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.4c7154b26.0.tgz","fileCount":39,"integrity":"sha512-zklVv+26WKQzwUCmja3Hwe4osr+HsJ2UoQDcfuQBAqV/6vv0CizW6H3tGAGGU44RmSMXwM1nN0rovxv9MSbAgQ==","signatures":[{"sig":"MEYCIQD5WwWzTtcfM53rNmD532XUk86XENmkvQCuawZsLNUBGAIhAKoOjGM+vUTdJu2XqpxxN74P0gJrwe3s0G+qWmbkvntt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169013,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOuceCRA9TVsSAnZWagAAnMsP/i5pWZoSsdmnmaDc1Dr/\n29aeNpxmIuwCR9CD93ZelEG0JFfJqiP0TeBGaSCDP4BeqxIabzntUvfin6zw\nPlmHQKUDI8kyzeAWPq9cySj69AJIKPuyqLNyWmky64XlDh3MjZqI2OmVGT0M\noVulFu1G0xtT335uZt0LXSSf5gXFfCH0E0YRw7Z6cKTG6Z8BzBezDHVaoBvh\nQ5ZCRIZAiFw3/JJ2kPtQgi5h0W6KSfKrsYR/aQBiiU8/VeD+u4oyCHRwz4Qm\ncPxUvybNuRTuRt4tUZOeUiOAfxtiinv96chkI+HQmCU3Cja/wTUB48baUr8N\nA5mpnuBdI4g/d2pRGiO2TbsCKKXFCzFUIaPWb5OFr2H0uonAuHq2/JEDhZ8c\ns8wU9fD+j9xvN1cH1Q3B077okPR1wD1W7nTE8Yd3SwoS7E9/+ZWR5vmc9Ad2\nf85ivxFMV4GleC/WJ8R8NLsUAH3e1tpTRdR4rUtVOS4oKSJpTeK9SzezJoPp\nl1t1iC/5YElCnqifUwWDJFArM6m5LpaLugnBFZrghvys2MpXa4+RjSaRs+Qu\nwJvJvrg3S2Ej/POsVSiJvp0mAl4Js01BiczoGHtOMRKD3kD2NBMa14CjRBA2\n4xVY4c1Fw1f6GR+f/hxsLraMoQ+jFjoOqLFe6G2wH7d8N5PhcGx7L3g44YQz\nuXiD\r\n=9HW2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.4c7154b26.0","@material/theme":"5.0.0-canary.4c7154b26.0","@material/animation":"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-indicator_5.0.0-canary.4c7154b26.0_1580918558471_0.04691731855814574","host":"s3://npm-registry-packages"}},"5.0.0-canary.ab5f49a2c.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.ab5f49a2c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"63d3163a81251c39768b6e3a33e2c06fb19f8cbe","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.ab5f49a2c.0.tgz","fileCount":39,"integrity":"sha512-o4ZQVkR6EMnc4X145TJsWl2Guw0O8BKQboGIv9RxrlTHN0K99guuAvJ6cuTAwhp4McD+JCacmEslMgnodhl5ag==","signatures":[{"sig":"MEYCIQCI9AgTHkeBXSzFr9HLs1sSB+Py171l7GMt5yDV8Vn0cAIhAP2qc3wthclbwv6CzZFU5hgK+FrNclGFO2BxIJ5vI+8z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169013,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeO1CrCRA9TVsSAnZWagAAYncP/iq04K87lGThJS0WOIw6\nsLMV0eEXPxN9UemulbhTQ7NwQzqSF36Jc2Xkf2ABgyE1ZaRI6K6R2gnrfwsD\n4qO7dTUkPtegW2B1idCdm/Pa/UmmaV1wZkhwEJiapeifYLAlnT8PAkctX0Xo\n7+eF1ZInAt++xwPqrbzNNU2SoJfA1jagsip0KGB94dDWZk4FO7vWJyTwVdwx\no9eHh0o+o47uk1aYsWhr2OLFcspn1q8ZQnb+F+l+L0hEebIgcfVghZTVa6qx\nt7PgNKQquizMPfMhTrtuDwTfWWJi3JMY4PO6wAsyWYmJ/AwoPf1zru7yM0Qg\nHgJJ+T5KwIRxtsR+H4332Uu4S6DxdnJQ3PR/b4JKZbGNVfyDLUYinWeDELJX\nulkZURWCRhrpPcjzUfbYGZumOdDqR9Efl+d0h1qnU79nu4yJVYWoApu4pNwu\nzl8iBrAq+iStweEYUcUaOLh5bpblenazzVHinxdlo1f65nArDKtZpNg7yB7u\nnLLUq65xVd98XpnBpK8WXU0x3LuEIzY9DXEOyMKZAeNV5SDvtYWBQ2ce22MD\nbAo9hQRwHgXEHP3BdrAZKsHG2uFP/KjjB+Ee4D100+9BpD7xeAFtjZBziMIB\narOnZdJzNINidnq3IC26ztkQicAtrHC6zIL9yM0ClAl3mT5wDKt3s6eGogv4\n50sB\r\n=0C8E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.ab5f49a2c.0","@material/theme":"5.0.0-canary.ab5f49a2c.0","@material/animation":"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-indicator_5.0.0-canary.ab5f49a2c.0_1580945578697_0.10299791922317092","host":"s3://npm-registry-packages"}},"5.0.0-canary.c541ebe15.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.c541ebe15.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"b0a89c6d17817c0a1e276dcfa78c7ac0d8aaab2a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.c541ebe15.0.tgz","fileCount":39,"integrity":"sha512-Ja8+4eLzsLXoAF6QHsGkVvYK4zHF7IWiqUV7+nnZ5Mz4qJtQkbNUtOUckm3n9CzAHNcQZYMzM/JMjtRO5aYJkA==","signatures":[{"sig":"MEQCICcPUwxm2Xxw4m98OIegJxhcE3unCWEZuJ58Zyk7182rAiAmB4Ler4SPKP781UcWiG1GmUrUHsFOuifM6kcip2P/SA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169013,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePJNaCRA9TVsSAnZWagAANckP/3zOHCqf5/9bXU359RYL\nRUHYOje597eQfUHCWwH2v1g1aIQWsyuaCfqrXZU6KFBFypSyhGjj+y824fy9\nRpDTvcvR8gu/5p4Zawt7xytDjc3ABb9Q7rROCC7sHGe354nn0HAEtLuPRa/3\naPY+sxhCuBtmaX5Sze6o6EYgWCqBYiutmJ6Ti/OEDWIRU8gs7CCQ/+ZiG4uQ\nVpg1SK0s553h+rOQ3nJcs1tBxKYnotSumAf9khreboZBUnGaDF9U9MFqVeOJ\nQUcdqm3T75FYuXw1Zn8OpOsR4oo8vTu5MXj/UTzBhZxweINZR0ui4fxN2LEQ\nH3BD1dFnpWfr2spwe1V0sztsKtT8TNMf0eg30n00EbEQgbFq0Y0S2ES7ygzZ\n5jw5CiEsBMP0dqodC6EDLsgIf9z14+rxeYNSX2TVcMSYrwrLC/2Oyt2xGkhD\n2Znu2/4IN4zRoR4g6fJkyVFryW/MsDWt8Ee4letHxLVhxjcyyplFCCZGlf8p\n7meCc+pmbhAe2po375c36VJXcrdKpIwuq0KI6Er5m+jd4MCpqZqsoRCyHuQB\n3AwBlL7Z8jWyz3avXhehgNLIYZIBNxNg3rG3N05SybBBo7A1yTVwSDLVbDgY\n+L5UagBwFI6344dRBoTBBMbpHxo2piBZCswevQlOM8Q5Yo1HQNvBmx/IJoGg\ncO4x\r\n=m69P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.c541ebe15.0","@material/theme":"5.0.0-canary.c541ebe15.0","@material/animation":"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-indicator_5.0.0-canary.c541ebe15.0_1581028185791_0.8509106939228857","host":"s3://npm-registry-packages"}},"5.0.0-canary.98f7faa05.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.98f7faa05.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"cb03ff80ceeca966d4f8443679e3ee8cfecba04d","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.98f7faa05.0.tgz","fileCount":39,"integrity":"sha512-rNA22TLHMhyyz6ioZfoCxPd8aTJ1f9iFJDmR20xGsZqLyeUnkv3GhNZUAEBjsvXc6DNL+uGyHNHnm+UWfwymXA==","signatures":[{"sig":"MEYCIQCIKaqLDLbmPNUyys3g5rlYw4myTiW397yoIt9SheDx2gIhANdpZo/n8DZbpXFk29QeuJNOtnxtXqoTqqFSfcq0letf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168902,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePbikCRA9TVsSAnZWagAA+mcP/0sOfzDUgvz2ln7AeZse\nngMjijMN+ZntByCqgqv6aYg2H7kD3/cOcExGMadQLt8bA+kvzZqXOCQBAJKA\nwcDdTo+rxmjuMIjpo9C9GdHotzSFJe9+96FMRWc2wDDTfKM/se2furKfppaZ\n2HcTdgMt37aE3Q/SZFvDYRJJJu94kYIh86N6CkLe8//h7xklI6QiK19n6XQn\n5OjXBKnYfDa3s6e4Xa4XPhjb1/L1zxYGC/bvmiaE8bbErstZSOirjBRNS9tb\nxDlbj73MYxOk9S/FAXu8iMtnbgz0kd1fi/HzdxZFZi1M+kO/pw83eGl5L5cE\n5rqqJSgUS/bJgby3BggV3qS8edsRAv4ZZYrmxiNPUOOF3L+6G0/aMhEAC11c\nByBKs3gYSc6o4sLYDiiyQxiYk5Zg2YHe9jbDAVR/8hogsZaBuyk7OKDrEImE\nzVe1cOAwl+ASgw+Qj5jYeWzPsL1dduneuYQmP9mGuwCb4ns/31lLzJPNuWI3\nLSX3JXQDFQHFY/m6ni68WmM/t7XpuBOf9RGbDtbShwyBvwYhWeuhWVNFEEq+\noy1SvhQr1pmsXfkQxE9eUdLMB/3l8qGPkBIU8J7opqRv91prA3gachSoO9Nr\nzpnvY3LQOFC5BaIRdVNVMyMFHSUfFTLG5Vw1SkoWO0SfAe+45zcs2u8V10y2\naap9\r\n=ojyn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.98f7faa05.0","@material/theme":"5.0.0-canary.98f7faa05.0","@material/animation":"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-indicator_5.0.0-canary.98f7faa05.0_1581103268280_0.15398312652612312","host":"s3://npm-registry-packages"}},"5.0.0-canary.b4727e43a.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.b4727e43a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0cc0908eeb0778799b2dece4fb5d39534976cc51","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.b4727e43a.0.tgz","fileCount":39,"integrity":"sha512-bKnw35iWyKY4hBQ2Ew4/rinZaqEkdqUvo2H/XvSij5y1VbfO6/4ztHHENv4ASsQUU0FFIocIsvAnNreYWRPdTw==","signatures":[{"sig":"MEUCIFL4J5I43EF2ehKsaNbGePZSCMZo0dGMQomYT4pDauVmAiEA1gU5Xa/bJSPbLCLJ75RHw7qFkGMQ5sd3ULDBG7XsyTA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168902,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePcCqCRA9TVsSAnZWagAABfMP/3MnMU8ZYpz45jxsyhco\nescjmi/kFFPYS/PCdm3JeCRrbDBof1jqrkQQIEo34lySAaFllB2gMwbzzJWW\ndjE+WQwN60tL5KNJF42UeXcgKc0n+6feZ5hOuRXua5meF8mCGVCt+u4+uMGM\nrfjQi+918+3Udyf+dxftXvLE/yXtemh7HRy1p37XUd166TmKAbCyz7edldqo\nTyS8LwLcwweUT5OsBpXUiUN5Tz0rsM6tBz0S8zMrr6RHHA6jPLMwHQwawJCP\nYL6rhzej1pKuC0Tx4iUN4j3A8KzFQIzdb4i3NQ/yCmBJtexDK70gIz6pdsjQ\nOn/FlgUGDBSZKoZytK7gXteF7Zh6E6iK2GMRHt4OJ2UBztzaG83EJ3yBRVjL\nNczFLSXg1ZVGIukeT8PpeyK6kSYDNqL3J8Lp/cfgIZb2HwsX+M8Ls2s0RxkB\nUITCcsVdINfvJGad9Iz5WEe+80fwRE4KhOkLPDDit7Dh2jzJMoRLHEOlt1p1\nevf2/EYzoCBkclF7nOK+x4uiDFBf2scFcL4YY87FdUZwl3/pnQ1wCHW1HvBm\n7qdeuXa2xQeY0PjCAewxCrB6ZqZtF2ztpZIx4yAtEKMC55TVBK4sk5kLM20X\nTunX2+4CZwgIMPHERVQvBMSw821oG6p0NWbukzwtB7j0n16mtHvTLLIHCDon\n7Na6\r\n=aeyP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.b4727e43a.0","@material/theme":"5.0.0-canary.b4727e43a.0","@material/animation":"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-indicator_5.0.0-canary.b4727e43a.0_1581105321682_0.7910606099081969","host":"s3://npm-registry-packages"}},"5.0.0-canary.91d9d5a65.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.91d9d5a65.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"6c6be6c16283b9ffbc8b962c1791aba4ebce39a0","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.91d9d5a65.0.tgz","fileCount":39,"integrity":"sha512-i0MiEHTkvuig/kr0Ip2qBFeUluR/FiIaGB2FmPF4rKQ8tnEoy5S6P2vRq/42ZBSLgK4DijoatKvmgCnQq7NcNQ==","signatures":[{"sig":"MEQCIBbr7HhFTMCwcOA460hXBAI+YvbfscFWco8QkQ039NMGAiBXtmTlxnn3RGJtZ0T3Jqfs/CAyyn0BjsP4xfi2lSq7Ow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168902,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePeu/CRA9TVsSAnZWagAAWvcP/3oZpiiZg42aYbAFiCHK\naMIlGJxKpuXDuHbrYLTxkih6vDFq88DhHwsOi7WLNMyn9KhBsf6pVM56oiPZ\neVGIwRF9TLaX04FriTR85f8v7mqpYJzo6rLjUDgfvEstHp/2lRodUvYq5H8J\nDtS/MRqqt4eqLj4zo8PH6q42H2hHAnioNuSFyAmKKU+I4tMVCRxT6KT3g1md\n/PRYOrPKHrscUfDz5fbPqxJU20HNBOgjO7+lsN6Z9EynJ/1+QpFPLWCjmJVI\nW+voO4kQcDcerCVGUJk7Q5fxaMwS86bWxV4bOkYFZ1PGGUmhqmbzkGjfjMal\nNm9fY/xSryTP9hcDrlqVXVSOXWqNtPZjsfHR1zRpwLJqPo55tUbRKV5G/tKP\nvISZ829BlGE3DejnmgDx4x52i0gkxnDCNh9Ydcin+iRm7dEfPQT/Y4+z4xxS\nWJNZluyp+JSfsAdKuhrwZntpM5Cdv+CZ+refV3NEH298XnT8UGPlpZ4v4Q3d\nPYUq1/+q4L7fcSxffLox+Nl6ws7HjZPdObFioLENhjbwuzZH+lTVbD1Q5CU7\nvSmP4IAK9V6UrMYgczEztRGKbLH8kj7DAfiraLcUwBfuFFI8PbXk9PYagjN5\nF0bbl0UAC1tmHUL16hc0taTdsRD5EUYHvyLZ0LQnsq5PP0LWeYZNVXmH7f7U\niFB4\r\n=azRj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.91d9d5a65.0","@material/theme":"5.0.0-canary.91d9d5a65.0","@material/animation":"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-indicator_5.0.0-canary.91d9d5a65.0_1581116351461_0.17195029797842531","host":"s3://npm-registry-packages"}},"5.0.0-canary.d5c006ed1.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.d5c006ed1.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"743e3f69fca7a9e6c3a21a33df4da3c9b9f607e3","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.d5c006ed1.0.tgz","fileCount":39,"integrity":"sha512-UUewXWtOgRpLoEEQpQTehCktVlX/y7RxaNmNy9ye/poAYgtJ9C8weF+HpMp39hzrpuFvQcdwWOkCudWhtQN2wQ==","signatures":[{"sig":"MEQCIE9gkmde8afb0eiGA3XJs4NMy+7zdJ5i47qPuWJEfcgEAiBlwJRKpBC38NQI2s69IYlQsN4nNJHckdM/UHLL1phUNg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168902,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQYldCRA9TVsSAnZWagAAaWsP/1YkvkDP71oPdhNiwTI9\nPppaLT1Zc/+s/sMch1YiOyVRhhQ/qqnIIy/SUYTW1koV4en1SUK6VsH3jBea\nO1X4vdOxZ43MNm0W3tbd1qTEqSxQ+dXDG75nBmtJyLZePlWBYPv+csp1Hc9Q\ny8LSobhprzcTnNpzLJrX/PDP4Anmhw5rYvDvxfOlPyul+OJoj+edHUNj30Vv\nMpxBw79DJGWvskx1K74X6PwlxqVkeUCnlujaoBdQn6vwlpAMoZfxFwpiJNDJ\nAxrF1Ft6zCxBIf29zhsW26ouNEioBs5zSNbwBAAFHcK/ZgaQC+d7kkqpcEgv\nQClXZ2rhENff1Cb7mV++Wjf/Y6HocKldDTFxCeZaIsCUVgysk2L3vJfJ3KBI\n9xfbWUW7oDbpXuR0sWDk7X4m1mfoqamIc1GqHmfVxBt19aGf1c7J2v7MNET2\nlRW5i5qFEEVr0rJKiM14eAQYUhEum04iUYcJLlrfDTQ+cHsnJyRx0UCqX5+g\nJO//0/jGNqsf6rQqmcAJeA/KZHeZwcO8l/k+RjWzA44YPH6+EtwuBh4rGdAI\nbDCsv0BKVFFalXrs+2IE+DEKYiEqA9TGqVbQos1SZEAmHnwyh/YbOmOyYgGI\nnMb+b+TW4nmu8wd1VKz7JV8A75RIdHQ6rlTGxaBw9SGC72g7Dlw/jqhgzwzH\nIBID\r\n=xRoC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.d5c006ed1.0","@material/theme":"5.0.0-canary.d5c006ed1.0","@material/animation":"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-indicator_5.0.0-canary.d5c006ed1.0_1581353309097_0.6243573075808069","host":"s3://npm-registry-packages"}},"5.0.0-canary.559f1a570.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.559f1a570.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"cce06fed086c314747c942b7f5c0c37c308dbb21","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.559f1a570.0.tgz","fileCount":39,"integrity":"sha512-8vS4pUdUdQMhpjKlH3inMckmXXoLvorJ3vu7p/Pt4+bDFKwF9Ez9qllrBa6+/oRLpkg2KjrI2ixyYAALASghZw==","signatures":[{"sig":"MEUCIDnoHB1REF3hGXtauGHVMaBgHspNp2B7CVvDKgkrl4THAiEAkJqKAtv7o/6c/rCDVf5bgYl/LZIURNRbhGsPZq1m74A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168902,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQZHYCRA9TVsSAnZWagAAenAQAJ67yPoLXr+O5SBlCpMM\nUmSaF0qOl3xKTLFujiqF0RW+DQn9Cu5/6MQxqk8sui2nqT2tit3Kr3x3S67p\nYEJWn7ebf5MXjXxB/mlfGo9b1qFI9f2BT8vCC5q7ZmCmJYEHrpv4OMhGQNlm\nFmXvxoKstfDLFAfuJxAcwon7yjaArvcmSdPyxTod7yqqxyxekqAWfZ+YbBC2\ngixGjA1e6ttDJyFsF3FrH03UJt7QkcJ0kUM0Dpq0usoW7r5dY69mPuWcu4KJ\nen0YYmvQGBrpatOrpJpZ4txD4zzXsDnUWkfoKXmnXSM2DMljV2cg0JYTD//F\nSbEaaNAi977HPoTeM7/XE9UEu84SW+0i6raZ0Pu6aiTT/DPcDwgWXvbrOfvG\nELG3BJPt38+7nB1P9kuT9SBbYk8K/Fnv5bVcUFqLIWCTARTbxfON3qqx6/Uw\nXOWGC2ueWdOojKF6+NjZRLf/AhLSaz3ol+penZU+bG54TForKeMuYXS3nJwT\n6ZR1WRyL/xufXIANPH5neIwGPKFlQOWWrqvMjcMC6gkenLQacCEnGBmoy0/U\nEWtrzCF9rvMqz7Xl0pS5n5r1mvgkOqL4edfmlXsimS91Zofq6lri3Hs6N9pl\nI5YZv2YJ0Gg59390uVagQrUJN07ZukCNgSP4szPSZF92kVVXJaaUAH5YLLnZ\nYvFu\r\n=3+jl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.559f1a570.0","@material/theme":"5.0.0-canary.559f1a570.0","@material/animation":"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-indicator_5.0.0-canary.559f1a570.0_1581355480154_0.6380673140789896","host":"s3://npm-registry-packages"}},"5.0.0-canary.ad3bbf782.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.ad3bbf782.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"dac2ebf7a99247e4abe86483c52c54d274693b69","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.ad3bbf782.0.tgz","fileCount":39,"integrity":"sha512-LIk/f1JjCd+GfP7u91vWKzbWYoQEYIptBlCuksfZn9pcde/yYSGoSlICFUDAROmQQ3mbTlSo6a4pliPXWTXaLA==","signatures":[{"sig":"MEUCIQCVzSE5zBusZPi33oSb4eibUjIaIgVnFlK/xtNMwnjCQwIgJzv6lAaIf+o8YaFMfOl2kJF18otFkYe/4LWAYS5VP9c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168902,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQarSCRA9TVsSAnZWagAAcyYQAI9oRcy7lpdjuSWaGEwF\nPNCWv/HcJpBnTU8BWYjAP1w5AY5sfyAnKLgcNxz5d0QRjFoF2czbPoYl9o+y\n7L2Wa+uU/f3yzI9WrgA/eGeAvgHD+crMoJm9pQBeGewHWmxJE2fLdtNzt5sm\n5kQAapwf8R2YxzcRS8gHC8lmdg7okl8Iucf02Na75J+MGvdZL1sa1qtqNG52\nW9SXsu+34F6/hlqLJPFEMsduHxNkdwvYrOcF0dk3A1sAR/4jKe0AE00anfqq\nQc6FNV5zYp3Kk0sQgz0SYl/hqtvCcaVjq2xB3gFMPax4NRxxHVFdKsnuBgE9\npZRF3qIXasdPhmDR1lUw/VeFCMnt+aVmrwsZ//LRmUFFQYRU8OXwGxbMUpuO\nM6yWAfifyAfABkGp84ITldSBIEtMcbzDy/u4RnnlBhEcgdFiACRc2yFRswVS\nuQfsOHsve2l2LIkB+nyxVSvpLL5qMLVpISofJ0egdXK8iGfQ1Z81Hn8AeJQB\n2SDmWTS8KPAHljDaiOMf/xhTPG2qfExIC14/oPzbFo2WFaSb2dxlPtzyUzq4\nfRBH4GeqoSyee4NZxjbdPUYdjptY8qxshQGYpKBy/U+qn0QFUgNVlN2V3CU8\neI5eUQebjHjgYrCp7ATsHF7K5UxxRt3hDoqeyID5ZiXwHpFJ5n9pAOiTXHQF\nDNBH\r\n=CIBT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.ad3bbf782.0","@material/theme":"5.0.0-canary.ad3bbf782.0","@material/animation":"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-indicator_5.0.0-canary.ad3bbf782.0_1581361874079_0.3610573785808433","host":"s3://npm-registry-packages"}},"5.0.0-canary.570d8e49c.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.570d8e49c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"88b2068c1b785fc6ca3632bc2e489f53d29d11c7","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.570d8e49c.0.tgz","fileCount":39,"integrity":"sha512-yLMXrQ+KGHY55oVIvHAUVpnVeZpjAy7pKmlfBfTe1QhZdLBHvcglwx0UzDoAio8etqamdpb6J7xOHHF9vLNs4w==","signatures":[{"sig":"MEUCIDcrxktb34Pj52MCpdWAfrYecCXDEaXfmlgx3GopJRECAiEA+X1ZTcswiDC0SJMnduUl23JTWO7MbftQjvCJmfBlGC4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168902,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQcBkCRA9TVsSAnZWagAAZhkP/iToj1IJO11P1LYfWhJ+\nP5LVQZ/9uRocbYw0fbBiUoxboJIlIfNYqVUQkG09tEXpf1B8DnIsBoZMgAFc\nJSmspI8h5yvaw3BFvtWYVSXmUBBwDxP/UBkgjIr3hkWy2lx4b0B8io14We+/\ncvOv6pF4VivHw2yZqnolKWGVrfBhS1sB7911h0PAZmaaUXM9L8xRhEFRWawh\n+0MQDClaJSYHqvaHE/Td0ovpHQ5RB162cuGffua1gYXMd+Vy9N+Wfg8hDqXD\n4LAFlrCSox6HHPthZoow9bmBwCE0vU2yqkidMwIhOcJhXJdGoYEMW0DZl953\nSfb3ak1V+ONHjtz8MfpwA3LVUNl2X1KjmM09Fq9fKC/aw25svyzEA7lz5yJY\ng+n9O5rofV6ASbDTW8O5rBj+R2XdCOFwjVCh/XIdGVb28dI74rlpKtUi2ltQ\nToQm1o9raFRHqrVKKfCaUYxlVecxe009muQBn6AxEG1g5Yyktji+wwAg1/yM\nw5kIIuQp1v7jJU3aHGlVHi0t8Lq7hBsYwo+ePCuJdkL2k4sykG9Of0w0Pwon\nIYQSHBtEaqpP5ln57HXfS/NblfK16yvjmqhVDzSoOTu+3KxZkK07KMMfyGzo\nCbyP4l8SCW/wvJ+SEVRpyC9DDZjkl0uYE3lDbIdL+zSnexCr4Ew4Jwt59GMn\nPya5\r\n=UxCc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.570d8e49c.0","@material/theme":"5.0.0-canary.570d8e49c.0","@material/animation":"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-indicator_5.0.0-canary.570d8e49c.0_1581367396561_0.15927590410006864","host":"s3://npm-registry-packages"}},"5.0.0-canary.48b06b89a.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.48b06b89a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"64af85728d020f4a709d0921a38e4cd548a1ebe8","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.48b06b89a.0.tgz","fileCount":39,"integrity":"sha512-lPISLrsOb0/pm1xwnb773D1JxFQY4YWe7MVUV/GjneF33bUX+OP+zGmULxFbADW0GDYq/497vmX+NP0k60yyTA==","signatures":[{"sig":"MEQCIBLREYbNBi6axhGxQ+sJw1Q236uTuIogopv8lYhAsCZEAiBO9+4QsSe5oq/acfx3XpBeiYyfkLXOLUdqCu2F3YcRfQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168902,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQvW4CRA9TVsSAnZWagAAfyUP/jq46YnWAVsvYMEcYySz\nvbmNFDRurvOdQ6x5eLw/yr2Rcamqi8Vj1e+cWhIlJRqJsX3DNCNHwkxD6Jyv\nF8VjgxfcaGN5C8c4qMScPSjbTLiFAD18dGSTIBQqKCCEnCbdOUv/bCK9pjlf\n4wNJ4zWTHPKZL9jEO4WAqOam5EIFeFNx5sdCXWZDOXrJfEbQW0fK6J82sB+I\nD9/CtujF6MN+KvxvOglr10ZAqr7OieinxIMnfwfVZ/+6lzLBriFntXQKe5Ls\nq3Ed+uQXrXonKJGskVmHI0PNrtfliqELN4Tux+uIMRwwpLfm7GAlJWi/R/S6\nB8ecS6XclyZHsHH4asS7ITJIkh/S9Yh1kebpGWS1vC6Wo4ffGryLOE9J8zMQ\nSQSrWcPL9wkH5MRkWL1dJTPpecTrQclLCzgir191Hgkt/XxvBHjJf99nhFiT\ni6PEWyMJTiTShsHyXxY5wHktCj7pFZo2f/G+czp1pu21DAn8rfsOWizSIAeq\ncQ6m9KClSoQAzk9wO+xz8VpGYYyMBUSrvu42X7/v66rcJDxFLQn+qrNQ0Y5E\nLTFk6LLfeaGgIEWJVy/MvJDyBbVbdMqgnztpyO7vCmmI8epsGR54R0eEy37k\nL1rF6DDGW6QtBuxhprmJNgjcPE/ezdyKUqIkLj5vKCYQJE8TDpvtc4Exh/bZ\nIu6A\r\n=3XLv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.48b06b89a.0","@material/theme":"5.0.0-canary.48b06b89a.0","@material/animation":"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-indicator_5.0.0-canary.48b06b89a.0_1581446583909_0.6323396692687424","host":"s3://npm-registry-packages"}},"5.0.0-canary.612443dfb.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.612443dfb.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@5.0.0-canary.612443dfb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"267dcd4cd80f5100e00352b68fab9ef51400c279","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.612443dfb.0.tgz","fileCount":39,"integrity":"sha512-Z1+pmyiJBtC2FhCRm3iCC3nPG5Tp4DQAPXNOMpq+fIk04LoDYZcJLoPkA2MuaAfWSoq/O6B9r7QYAMdRczI6Xg==","signatures":[{"sig":"MEYCIQCV28AbrSDrWT7YA0hwmOPK0Ls39hQ+qgAIlZqtk/JkbQIhAPY09EmwAYpWke5+qAZYOir/BEMtjVpaqRT7cHmcXtVK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168902,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQwUmCRA9TVsSAnZWagAAwOkQAIuPddaZ//Pyw7KYGzNT\n7/9poKCOuaGVVpY+7xIer+7P0YO1bgLV4M6cLmuhBYMPb9Q/MkXXsKm2Zeg1\nN1cUwfzPmxsUqFFR0cvY7J6/QqHzn116huDFZPrsPn7XZ84k905eVobobQEZ\nZ3fcptuMSpHid3GJdu2gCWCHiyBgWI5E6wEb1+INZI0T5lve/3Z1jitGN8vK\nG7jvhgNfnV5IkEgO2dKlKNgV18Rkl+qx3/Oyny1HYEOacVi52+DMTu80WZ48\nRufUt3SmYbRud1uZ/x9oHGh52aLz+2mosKI9AiF1W2ZTlLGOXxXfqiL4lPi7\ntnVllEJ5pD65duedWSeiU9/9fS++NuA8bu3GlFa3enRgeaCXwxhg6G5AfasC\n+qCC5HRLXU6KA70SS2hLAVPi+DNmFlJhhhmONh7oIyfWf2QKCrUhDYrwfF2i\n5TO7eQDoNIPEsnPdZNs4YrjyKXIuh3uK5YLRDBIjB3hPO+AwDCxuXvFjEJCw\nBQrS4SjNDEyGCKEsgAp+uAGtqmCVkAcBXcB/UwlLuQBXR8Cg/usTPf/aFgY9\nI2vrEQpmjKGGod33ZzU+Ib3apA38Ka1M59MpKUFYslo6apbiF39tv3LoOFg7\nKSB1GdQXTDroSsgbqLyjU86BSxcJ7MIyN7jU0vPESLpQn1r51b7rMD+42dy/\npCuG\r\n=Cjrt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n","gitHead":"622585006b9702fc93bdf0ae416f6c58e398243a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.612443dfb.0","@material/theme":"5.0.0-canary.612443dfb.0","@material/animation":"5.0.0-canary.612443dfb.0","@material/feature-targeting":"5.0.0-canary.612443dfb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-indicator_5.0.0-canary.612443dfb.0_1581450533876_0.3185812799593293","host":"s3://npm-registry-packages"}},"5.0.0-canary.8c11ea2a3.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.8c11ea2a3.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"3e219226bee55aca89c771677ac81c4089b5c531","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.8c11ea2a3.0.tgz","fileCount":39,"integrity":"sha512-ASlKcV4Qsu+k4PcqKnyCbvSNlT7ESDPGaxQgLRbTUHlL8rMJKIfy/ibjE4X/abtdSmu8AEaWDwo1/qqM9oiEvA==","signatures":[{"sig":"MEUCIQDnpo3AyxOptt96X/3oIOqFL81xCOFzntB6IoNpIdkOZQIgQTtQe5u/I1Uanr7yYid7+6pLrpyqvPNXRpLNajUlnlI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168902,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQ7yGCRA9TVsSAnZWagAAujoQAIoeOCM46NOOl6RUZyEV\nXgUc4gB3OYwi4+ubwZNfVr6oNEGhvU5kumzurf/bi+LpgD6Uj7Vi1F9ay/6O\nOpzIyQF+2fEpRx/tsqr47ygO9oGKpFAqKovKh05D5ND/t6l+uf0wjfTb+8FG\nZB3PDqXnXaf+JrNGU6s2UXPB7fkK69RQunbLn4ilE22eQMXx2FLaAylIulJL\nDfxTcMdaxkZ7DQfbtuvvGmebG+RAfU8D+Y+BNuzhYt05FGWEQHl9JTyfkjor\nf80lbqd7zGXSknEiqcaPuizJrBA3dOJFFXHn8HViXTt4w1pQvaBnjExUQHSF\n8eLXTeimRKDSdf0JbiNzK0uGXzkUzBl1BOrJfPjZsDGv4sxVE/B0VE8n4VrL\nthg4kF+ZFTxxbjuxGZqSrlPS5Rm3a5QIMCtrXBJuUUAbe+m5wZFGh7/L72hN\nitluPtcU9jpjbPh6bENXnZIu+74P6xwaSIcs036K/Yq8dRDOlxYnBX97bL1C\n445Z4OVXnftouNqtw9yCzshVQIur+1UtPMvQxDcjpZhpf4CtvbCozPwNjS3e\n7CrA2gU9v8uKlbdkygChVz+3o+qFaPXE4AuYKdbeCojK6IzFDqfz/qzmuLve\n+jI7jE/VbqXjI3SAJHx1mol3ZazhjsicWKCAC3XyV6i8EIv8P3O4aQ9jDUdC\nov7o\r\n=iuMf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.8c11ea2a3.0","@material/theme":"5.0.0-canary.8c11ea2a3.0","@material/animation":"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-indicator_5.0.0-canary.8c11ea2a3.0_1581497477837_0.7928549190789085","host":"s3://npm-registry-packages"}},"5.0.0-canary.b2f3d311e.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.b2f3d311e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"77478a4a3ec5c9000e1d92fab6f785e2085c23cb","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.b2f3d311e.0.tgz","fileCount":38,"integrity":"sha512-p+bc9YJoOGzjjAJGfrqBy/IgM4VJ1fhPQarCr/zSLQGFtn052p43JgtGWcVBKfXsnFaVcSPMDD1/A5e2JIjc3w==","signatures":[{"sig":"MEUCIQCmfu/ACFNl7YbOQ42nVEuPDaU601AFiLy4TZy5mQfu/gIgXovSqnGmGIwm5CYFtUCJk7q0cJ+/GmIV69gVNfMzH/U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168650,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRcMOCRA9TVsSAnZWagAAoL0P/jRLbOGBgeg0E54eOc06\npZr1ik2URiIEc6SUwiEviTDbnGcu7PHg/lYaM1aPZe3XxiPFxXwakmOnR/Kg\ncFqls2lSxqtb6jHYztwmYNhISiRKOqhdwaum1GMWd3x1NA8ap5T18yZgt8D4\nh39OFnMBLA9tQv9/qAR/8SyJqce8W9RAmtYzY4MRdJO1bX//a0xhdLRlApLh\nIj9lCOqC1HosKsypaeTlzSyrjRTMYIYRXRe/RcNxUnZFuxK7B47OOUiYHMnE\n131TDdVhoMkvVhih5qpc+UN4JV72cYqZEJejY2H5USWAV5X5rh0iiVK85MLz\n2eVsIWwELVNB3sdjBvwPj08Xpvm0x8NG8/35bM+aBY5/Cd0iiGLZMSEIA8Zo\nXlS1Y1tf/LCQ5ZrC1kND0n2jCa1nh7/JfFpVvMmS3Mz5LezJ8B20jdGpNO7G\nyWG1iITQLvh41W610Ync32RKZ1VYqIIut7V4s9+3eSaasus4MIY8OxBz5Gm/\n6sHja046JPALlGZwCmudg05N1KEtgCPAbken56jQE06yialebinewf9BZLdo\nnuvdwEVFbiMziXcTk5B8rCd8IMPR/U81ljwNGpTY68PqyisSaqDq3M9aUZ1X\ntZcNdDK/a4f6NOniILEUnGLttL19UlsD1Fap26wYuavu0vk9AuaNptwVUCoH\nxK6k\r\n=W/k3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.b2f3d311e.0","@material/theme":"5.0.0-canary.b2f3d311e.0","@material/animation":"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-indicator_5.0.0-canary.b2f3d311e.0_1581630222419_0.8587338437180903","host":"s3://npm-registry-packages"}},"5.0.0-canary.4f488d0ee.0":{"name":"@material/tab-indicator","version":"5.0.0-canary.4f488d0ee.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"396445591bdb2b7b72d92403b836816136c75647","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0-canary.4f488d0ee.0.tgz","fileCount":38,"integrity":"sha512-ca/Lhv9CyQ1FE406EhSXNMZSWxdJ003mu1/ZW2zHSev4s+i9BvzZ7qQxRdlXVJ9e5OMXkFK7Ch/rLqk0UPis7w==","signatures":[{"sig":"MEUCIEaTUL9P/WGE68HTMQW8x118argDKdQrc2oW2CtT4LA0AiEAltFGYO4HEoC6sZZ5jHfphCkSSA1X9QUZtG8T8oRDIJg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168650,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRdZbCRA9TVsSAnZWagAAT0QP/R7xFXH1SoDCklbWwajx\nppgZdVkVUofpl6ZaDA6gGXzNIatA1qx1ieirM3AlsSgsYdo32P6SODMuUgT3\nFojtM99ER2leDluxa/kgyoscKEKny558EsQqGCg8FNNBKQoekV1c8wna6OH1\na1gxwuEZX6ZsK2wWmJwL0Il8eGNc8Ri+KUwz+7b9jchEbp4YCSNlWdp7xGNZ\nbVXV0GGCuDW8wpWstdy8TKUhhLs3yygiGOkHJWewJeRRXYJUpmdRhgW3szgV\nhjBpEZZ3EMY+MLwkI68n/ihggJX25YCm6yaj090NiCqHby86HivBa1rymuXn\nVqf3ugv+cQkr5wVdDNlWWuJDG/n3hm2Wid8kHfGw0ROuigYTBbOAb/qEWm1s\nxyNeoLdzWStj+5VMKXO4L9Bqd8JTAwzQqzq6GtTsiRwiajAI1dQWZvLRy50p\ncjk3ZMcUZXZUwZAp+0eY4vWNHbuCB8BeMLjf9odf2L/fcDTOKL5XQ/XZTK1P\nJ8h6pS244ix+7VNERCuUKYvx6Wn3OZpH/NKVP2xu3jHD/qnSjiNdcEAyg9Wb\nMjh0fYk1ZjG5frXmXjCywhijdLGww9hg1mlsUOIjHXBjVydRmFRMfRnlK1lS\n3uaXIPQmxTzGVOuv3AbQO6kvbY4rSPYLuhC6RNlyQtK1Cgao/v3hk9kW1tlt\nraAv\r\n=1PgZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.4f488d0ee.0","@material/theme":"5.0.0-canary.4f488d0ee.0","@material/animation":"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-indicator_5.0.0-canary.4f488d0ee.0_1581635163358_0.2255433225942971","host":"s3://npm-registry-packages"}},"6.0.0-canary.fe79de07d.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.fe79de07d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"bbbefe84bd65907f61b7e157d2fa6bf662b15726","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.fe79de07d.0.tgz","fileCount":38,"integrity":"sha512-3G6KQqrSmYY9xwXP5JImMvrIQ296P/w5JgH7xUvqQV3O9MLq9WY63vm72OOzVeHnLfZos927K0JZvMh0QMy+Kg==","signatures":[{"sig":"MEQCIB51D8xtwabxpVfB+raTXtPjz5DnGOFjmL5q9mKhP5IcAiBwnfTw6z+cR92beyM9O2fFjha9yO6Z5Mfa0rcIBnSx9Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168650,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRdp4CRA9TVsSAnZWagAA+3wP/jwjz/abNHEP1KbtrX7s\nH5uAovZuyxH2m7CgIlqJHPEnELuTwTn0AvKIeZcHgvSjgDp13gWZrXhVkMPu\n5gQqcgCMZwRurmRhjrTXvyK68bR2QSfaDcVLhhdgMq4HlYl6e0XDowySt+JZ\nysek23/SXXpOTNSagdjPabmu5hl8ST9ng/VaB9h3aNsem+VXrI+mhOK0u8Dt\nnldgqXzkzecdiQ7O703pKqguPgNrLIaJXvoWWgRtMEjreLXcw1++ITINqxOZ\n23a/X/DL8VN9VTWHAoOfnMnTMo89qNavTWbv76oC6X5di2sJ5fjS1LwYhRAL\nZv+DYVJKpG54DaRVxJuKMqsMZ774f7OwyzBMzvbAEcrA+9uemlZ0xrb3Fn15\nfy6Jlp16IqG2ngBRziqJJnkAl31e0xiWGyUBIWttb3vOrj+aBbC9eRfVopDe\nkewa3etrQfvrPI5OlL03aqoVmZ0kOPcYl/EH65YLqVlkjF1TgzZXbC2jpChu\nmMht+scqnxIM+JvvdY8aWR6QZEjtfv94sXQYiiny+iXH7HQiEXcXlCSeoHFR\n5Gx9agQQfoMOY8tjDRVhHy+gInoJmkNRNGMgldcdW595MLAnjDnu8LGUroa/\nwjLHrtOaW9hYuh6XEFHLCnL3b5ya4ao1U44iVM+NXqfmjZ8AaQgDFAorv180\neg/i\r\n=CIJ4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.fe79de07d.0","@material/theme":"6.0.0-canary.fe79de07d.0","@material/animation":"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-indicator_6.0.0-canary.fe79de07d.0_1581636215576_0.045587003165945994","host":"s3://npm-registry-packages"}},"5.0.0":{"name":"@material/tab-indicator","version":"5.0.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e3ae890431db4e3e82b5a567e849c115d25f2020","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.0.0.tgz","fileCount":37,"integrity":"sha512-qgQL4dq5+cg0c0IVFfuKKg9vlUUcxkxfHzLqHiuoondYoXhrNRIHKtxGwoYZ6AAWE1ai42r22X2hJgBGr+ZzkQ==","signatures":[{"sig":"MEUCIDO1jyX+CkXPEtE1s/TSD0usarFumdqQ7/xwdJP3iSf8AiEA+Drb12JYh3zITScDjEphUSM0yDCVcdhGrofeX9L9EPI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167539,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeReULCRA9TVsSAnZWagAAc/kP/1gDEF7ZtUR7JDUZE6Kk\n8ea2W2S27Hz5PaCwyjgM52OKHl2lYn6BWEktmDAYuJzl0dS7giNwN9tVUkqj\n84N2/5rgJdd9Dp/N/Hmwewf+AoIKLh2noL4z7T9SmkfRBBEGZvGkEtigZkl4\nI8oV1THOSz4umKBjuhVKuhlc6r0VGHKL7j1QgR8TNauZlnoAfyxoUrtHynJF\nJU/kLoOTwxuT1H+FQXUrpM51sEDY6tRoReNpnGmL2wOR3XbA5fxVzv5udjKf\ncG/xdIm0FisWZ/zUIs9wAqyaj9XyulT0Ii0lHJEX6nnIL6vZKz6OcByjB6LR\nI/tb/NJHXSBhzwkrHvLIuELsOMtXN21BKdv6TzuVYwFdFYO8yN+Zo0lxgfbF\nhY4vr5hTuGMbragJE/vXRACnsT3SLlNCfosGk2sS4qTPOr83QJKHm46JAeFe\ngmLMkNwg5BozG1TyQQA8JyiC9f4LvIw3Js8qYcF7y/+SfRyP92FdPtGFKvwZ\nmUONAwtw3JfUpziw3So1Z6StAlsuHlc8W+Y5cHkf82AmMB9uAia7rCMpYW7N\nqIbwHMBjkN7kcmoJ2J5zLxOhVMYkbZfpwQ35dFfBZmQi9vxHJGgjPqDUarRW\n1RKLIGYfRmVlPEvv1JzTazTWMfbtYFJy19vqO2Rdr4nuXaK0c9WsUXTlpI8j\nl21p\r\n=Oe/G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"^5.0.0","@material/theme":"^5.0.0","@material/animation":"^5.0.0","@material/feature-targeting":"^5.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-indicator_5.0.0_1581638923089_0.6563931707615596","host":"s3://npm-registry-packages"}},"6.0.0-canary.5e313b1f2.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.5e313b1f2.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"6522e948cf69f989aa674b6b1f30bae13d7d452a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.5e313b1f2.0.tgz","fileCount":38,"integrity":"sha512-m0GZUGUU40Db2g4whX06GK9W1OzjFR1cF0MexlVLOLj0v6sukmOP5+nhnJGOs98QFzbpf21H9Ri2MkeclOJR9w==","signatures":[{"sig":"MEQCIDd76+dhhf+wPGf5Jc3e90dSYI1uxZ1a+DX3qoKVQ3xhAiAkDMkLjsegu7T/nsc6B+VfYWfLJbFVgEaceY1YT232jw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRzGvCRA9TVsSAnZWagAAMF0QAJOcWUMwgxR+V2ZSL1NA\nJoJaZCxx0OU0LXv1awJuft2c6wPMTsHHWeMYpEL/7uso7jb67HyfBks96EQ8\nRoRy1iNFIlE8UEIp8YUFMKHOKsJCYLWS/uH6Cu9pTtcTrzIpPA98XhWLxrp9\nTF+4B+bKz2wT4+Yv3+08MNz7+Yuj5YEWBe6gtR6fxEzGk9i133NGdPnasdgO\nog6JWbumKPegU8dO2p1XcOUlYK8bSeFukr+DB+WqvpQtOL9sMLORVqYTh50t\nJdzO41ZceSv1OdHPqIXbARA41rr8HRRn4ZtIaIeIO2dh0EdoCeWDG9jQAlxA\nsWzNWcJ22IMNyfu50BT37YKf7ydluqGzF9KJPDFqC1hZ7ywi1vztlVNdeFTW\nKsBUpFAJrqfp3sp6garROrj0WPyoDIgmW3f5jr4YxO8+/DJPpF42ci6MjMGz\nWn/sGvcILmBS/Md0jAlKnKr1xtUHO0d/slpm4cJ6qEx3wrJJ5JLB4HGbHx9q\nGbfiVszKdDe1L5zfDuGjRWmsjAUfgpR1WMmboW7SBQXwnSGPW/rX/RIqw9kb\nmvzCEWK+4CpRYKI8S2fRNLnuqAsMoN/T8VMNnGeGqyhjwBjEBHb4eLkZLF3P\n8La8FZyfLEiBbglQbXFlTqsxtBuluw7OlbKeJPgen43l9PPRXq9SQkmSV0KL\nMZWw\r\n=H0iu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.5e313b1f2.0","@material/theme":"6.0.0-canary.5e313b1f2.0","@material/animation":"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-indicator_6.0.0-canary.5e313b1f2.0_1581724078867_0.9735629150998291","host":"s3://npm-registry-packages"}},"6.0.0-canary.6a56f387c.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.6a56f387c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"1e188a7c6c8c50e0287e1721856c1e016194e461","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.6a56f387c.0.tgz","fileCount":38,"integrity":"sha512-eLiOYWh4fyB+IESMUC0lSqFIqungtxfAwmKpZZWNVbe5YXelDCAjo33nDhBnBhEjH6rQgcX27HGhjzRRlGLlcg==","signatures":[{"sig":"MEQCIE0xS+63/7cyOYvQ18hNq+k7LAN21GA53j4UlODbap1UAiBJ3+2gc9d4oanD9pC2nrZNcMiO3vezbj/I8s5RmmWdHQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTD5cCRA9TVsSAnZWagAATowP/1sbuyvsdbTyPOAAb4MU\nIWlY6eNgCULLAI0xgQPIG+IHF/2s7YtzkrN91JcWOeqLdDKSIVup7OAzB1MH\nzxqCPS68PXYrCiLHc/NVmUxOLcuMDFBBlvVRjon8Wuivp4hSm2+gRZQ7jU+X\ntYaIpDwILMqsV3NMnNmG4rPnR5k1I5W3NKgyMCVxqR2kyVwU/xoh/vbzEwuC\naf+yDpC7dPnptBsKL4RdH0d7rKYrvYANe+1i9CXEuuWZZEHmf6StkZ4vBbCr\nies094dHo/xUslv6oygZcEoU028A//nbFJ2CG1sVfAGdHG04Ix8g9s23rHnw\n/AeM36VbiQnUMqbg/VfyDhBz++/O4KZQqvrM8GvyKWv6EP7FTx4G8tMnBsnG\nX5ei1RAqQDssBToqSqs5f/LR7NIOKeXL4768tNvIfqf6H3DaXaXP1UAzyE4z\nQIkVrROt09Yib/O/neZO5Zfu7T5Rjao8XFMRJTZom/gihEv+FFtpdRhhjNQq\nUpHIZ4AWFL80BbqzGLLJ0/LNIRfh9w9lx2xLHy5p07tSljE8s22DS8/1HV2U\nlKtzer6VP3eSkbMHktvOnRT0K5BJWuytTuBA8yGyq+hXhbJMrT8z7iEKBEEQ\nSXs4GAzWW76s+eW5JQ0a94V/hG/YQZzC3xKEYNdg9l8Y5igk8kXoeXd5JlqU\n6ywc\r\n=/1mq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.6a56f387c.0","@material/theme":"6.0.0-canary.6a56f387c.0","@material/animation":"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-indicator_6.0.0-canary.6a56f387c.0_1582055003703_0.32832680287617655","host":"s3://npm-registry-packages"}},"6.0.0-canary.bdfd52632.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.bdfd52632.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"2de6feff7e857f05c8e633d0d9988fb6de8f2b2b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.bdfd52632.0.tgz","fileCount":38,"integrity":"sha512-MuHW0Cm++FBKgqHiEx/EQ1O1YIcxsEpXgLHGlZQoeqq6zboCUhclz4qsFtQVOT0hy2pivoHY1/6dKNxv7cKIWA==","signatures":[{"sig":"MEYCIQCnUm55Oy4A8uRblOhQ5hL86T2l4U0Q9oQWtA81xhNxGQIhALAIih0UZxKK2lk/2lv2KtzZihxHIno2hkzi5x3c5hth","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTZj+CRA9TVsSAnZWagAAZHMP/3weEdo3zDN/7+SmLChq\naB/8jEKMA7wGGo7ySjlFBXQiUusYz822aUtvfFi6c3vhHTdOr8Pt/7YAo6Ou\ntCp+ri8MxRE99QiMy/UjW5/pyhPJ6jvFUSmbtJfTvt3Y4QyOYw3uafYOAE3w\nC//jOM8VEXz3yUtDUAWutnP/89nHUg4ZysnURKPQGGQS+Ag86BUMMvpMXmhB\na6Y+8h9IRRtQ0Rk/MdYd3myEq/CkFWQaIoN4J+2OFAqKho1T7I8gDsgRkYU5\nugOOXuA1Km8cgKc3WLJVO0a1PBPqYg57jWRirkHVxT/flRtd5H7wg0CSJVwE\nB5lfp4nxwSAYr+u4oQEMa7eqKNhQCs3NnE/pmL09G/NCmqav8Gu3XNREfQfS\nKD60JZl1WcaTzEJ4cTv4DwHBbfS5vgpYtCnZgvlqWuZ5XniJPkcartLA5cBU\nq/6TN9e2kfgkTki/0a4qkRMLbUq7D+o4cgHFYtqtKxp8XuRt3kOYT/Y0Pzjh\nLXfc4DE0KHZWfMnyEatgilGZ6nOwRuUSFvVX9m6WnQ+KXtZP/VlZJBWA+zkB\nVTo5LDPCL+YAccUfM6XFplw50s4kPynZd41ChUohZWyBgy11YtcePTDW74Bv\n+uYK66f8wiH62GbLMW1L0jgii1jwvZibmNZllf98U7ZLzF6iZGlG8FOwtofT\nptgE\r\n=9+6S\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.bdfd52632.0","@material/theme":"6.0.0-canary.bdfd52632.0","@material/animation":"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-indicator_6.0.0-canary.bdfd52632.0_1582143741829_0.4709779473147979","host":"s3://npm-registry-packages"}},"6.0.0-canary.ad2e4376a.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.ad2e4376a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"a4e4213fe4d243860a91f4431f5697bf57e43f75","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.ad2e4376a.0.tgz","fileCount":38,"integrity":"sha512-qgudrB6LeOG5PwS8ldbs58CWd5CuHrXTvqEPY9+3DrIrtwHfq4RCCageEwY4bAhdMYSwayY7LYCzK8OWKSM7Ig==","signatures":[{"sig":"MEYCIQCn/eYlhdilCKynUWIqGvqmpro16bX0LEAfrzd+nPhxNwIhAMqA72w5lRxYF+4galbW/OJlKAy1iwIWyv1S2QpjPY+9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTxMsCRA9TVsSAnZWagAAGUQP/A20ST1NjvKecK+/3R6v\nQ1utF5oyhtetkAtdduotoAloZtspSAun9K05lDGIMvNQP8jbmMpazQ5KataL\n/mX51wrSatWJnUSNulzzBQB2NVkkBzhZYifLcwovU4NH4P2zk82tw/kLNDO7\nwzfiu4ovR10rhfwkVCfUrSBpjqmHm2/YnKuoEZ0t6Uk7j45XmmsjWembL84V\nIF2pCTz/wcjj65st5kck0S/9+2OXv6rOo10Ijko2nRaZwYv+AIc4kQojP7aJ\nqIGeALW2dDswOS+YSv9W3Y5YjZ8s3Vcry4LYdvw0mYtiywKMQQ7Xz8NuUIA6\njP5twcxseQj8mq/HPVKzxHB9xDIO/0PiM2w5Z4rj4mGfAUO3Q1FNj7bGeQH0\nq2zkbGAdepfGlTY19mvOk4C+JcEAeE/O93h8vb61GmCk8lknqC0Ep1yC1RLL\nejHXTiI8UKJleowyqnlHTIz6ox6bslCKWhS2Zl4lumFhApTkVWoHtakwu1Xs\nu8Td9HJiVcn35OG1bcqmhBfdqwP3K8+00GfLIrB2ZI+g4V9i1mCKG0PwFHpC\nO0/Z1e8FYkzr3PgzQphwIHjSwn2FUKs17oVCoajrxWQ+W9+73qnT55I9Guwb\nj0X2Yc8/Gz20QJmer4LWuvylOXOS+0itaz7dHJikdz8bR8t3OzUpnx2YLd/y\nMuZY\r\n=o9mC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.ad2e4376a.0","@material/theme":"6.0.0-canary.ad2e4376a.0","@material/animation":"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-indicator_6.0.0-canary.ad2e4376a.0_1582240556427_0.5113937529794601","host":"s3://npm-registry-packages"}},"6.0.0-canary.765caef18.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.765caef18.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"3b93eef140d7372e1f6384e4d52be3a0aad762ef","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.765caef18.0.tgz","fileCount":38,"integrity":"sha512-DAwtJvAElMnHlaEA0nMBdEJNw11NkcCessbOEyNN2CU3crhEGkhdSm9d02zS6blJKCsqAI2Bh7zoEPQAbgpsvg==","signatures":[{"sig":"MEYCIQDRiP8mdL7vIhPYy2cyVCWOvo01jBaRKQ43SyM+7LkUmwIhAIaD3HHzif68l2sRG/f34qpfcymp8MOeBbtLsxb5XBNJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUBQ+CRA9TVsSAnZWagAAucwP/1t0W0GYA3rvTli3atz/\nx2n4PUNY6EEIQn5k0A8u6j9txoSs7Wt9g6wwrx2bI+i7km+BGB72QF39SD9d\nV8JxbedOb0CzWHYScbrc2Pe/tf9wDdzpJf13qeZwaBgxtwqoPICGWWtqESId\nu9J26zsFzRpbjR/+NEKVBCYwSyHom9fnXAixgUAhuWtIVhS6Td6DLDHUuNEz\nfs++l3eOfgaXcgyWMtwfL0Ti0V3xXF4exYQIlHWidJql9Zw2CwszLZy4t7tO\nP78gKcYw51SZWsc6WwVjuPN7rVOlYCBtj5ZI8ITI2m9iC8aze7dHmRsw5ZZo\nqQITfUKJZBLyCH37BsovovY+SKbTB0GJqa0fuWpOrPgoN9jMcrKRm3j41jlE\nYouLRFt6YaCiNnNvnuVcxEIm9BypVIREyr3sCdHjAt6MBYwcG8Ttu0oLN9us\nPlQe0bgkjUUrY6E5gX4fm+WpRe9YAEl5ge/IiLaWtSu5GGbn89hVms+JYM7g\nPio7RlpiXQr7Ubxt1A15vezF2048tXEGa3nM2ZtPGHdpXy+c/fCRw9UpIoOg\n4oMOXqCKDc0+kRMtue56pH6l2/r08NBKTcHInHdnY1IoJZ9tOVTTByT4ZDVH\njNllBExlMK2XKB/ooKvjm+K4t0EcPOzueNB+l9u1JwQg4cDrJrEhi+1jr1or\neSbs\r\n=H8XO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.765caef18.0","@material/theme":"6.0.0-canary.765caef18.0","@material/animation":"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-indicator_6.0.0-canary.765caef18.0_1582306365857_0.06745574188136794","host":"s3://npm-registry-packages"}},"6.0.0-canary.949562303.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.949562303.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"2bde5a298f9efd5718681ad5a661f9b6c0549271","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.949562303.0.tgz","fileCount":38,"integrity":"sha512-m92nRizvQad2AKTs2PDc0OTHeNHUJd2PEt5ncC8/EIEp+1/fDJpg5OBL44hdd/plkQyVtBPokBogAm5muCWHvg==","signatures":[{"sig":"MEUCIQDF5uVnpSmZtBYA3+livuh10dPrCKhrD8AjDzRdXfyWegIgYGFFdN6CgE0IJv4NQ3WdAqfh5IahVn7/uHRltFDNy7E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUD+ICRA9TVsSAnZWagAAX8sP+QEIoo+hZubZ4v4D0o2d\nbqyGkq0py1iupygzZJEydaerr1oxtHqayAhB3VJKt0YBNQ81GL9EUpSDPTeq\nnGUIA15Qk1N4I0/7+i35/b2XRtHDDTMj/H1pDPIL3ZzvebiHcKayMgoKUD+b\ne1lTTlKIc2HYq3oFH4zaRUJ7G5tl2b7VsiHRNuwWVscGhEUqMJH8H8CU2RrQ\n3IsNCY4WR09CY6ix8yvu1YhuspVN25aOg9pl8eDkCpLbAXuwt1bbt0sS3+3Q\nDRZ6vw50tbHY/kFUCn99eppuLz9rRS/wKmRcTKr1Vdh9RivXgNC1EFaoAP+C\ny6fFyLmwSimyXaKQ8KP3vHNN4RQani3D7r3hX/0ebeUI+qVPf3L/6NdJvo5p\nD6Y8l2Lkk24OKfGpQXRyNuktxuSwOEMJ+F/QqSIoLoD2ahdP/v2oKQ2dWb8L\nwmaaGBS0nwQwjcaO90Rz9JJv4LXXFQDrp3gcMYHOJmJmKWva/8AkKK7C43Tq\nRdiyYiyZvU8tRDpdimsTm0xDFtFWIQbX3x8l8gHwAt9TNYe/BocuUxF4dzd8\nM98L/HCvS85rS5fmsQRL66NPNt+8s2m+ux1D4SoLFzhOjscw5IY81thNsZoY\nn/eIfvYHDqvu7NPsJZYLqwT1/ssP5Bcanxhn6jIKIoTcuUdLz/hhA7mIIzYw\nMn9S\r\n=36EN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.949562303.0","@material/theme":"6.0.0-canary.949562303.0","@material/animation":"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-indicator_6.0.0-canary.949562303.0_1582317448201_0.11600881806058738","host":"s3://npm-registry-packages"}},"6.0.0-canary.7ec96974e.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.7ec96974e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c9285ad3a2f2a1fc74d3a8beeb45ef7e86ed3e5e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.7ec96974e.0.tgz","fileCount":38,"integrity":"sha512-9Ly+ky7C4ikU0SPPgPAHb/dAFm2BUN0xdR+U31I53Cbvuor6mMU50GLELCN/kbM/Z2j8ol3uC2AElbQhkFus9A==","signatures":[{"sig":"MEUCIQDWvDf4im8YMNCseC6bpGXRraKfEbQn3P2TVj+ir1xkyAIge7d1Jd3NpfK33SLGuyjknuieGT6SPhfuTO6ssjQqejc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVBytCRA9TVsSAnZWagAAgvQP+wdmGNbRMgQuKjZTow+p\nnr1AoQLKAVX0y1HaHdzrTzC89DV2NmxprGe5f2wVjTd7bee929i/C78TA886\nxhtwWN0+JQx1TRDQ+gUDiMSIQxo2klz+cE0Pl3dJjNI1p50793Gpw8UdldhZ\nAXOeSZ7wIl6MqbgygNQoEiPsbmSVi+ASjEOQmq9HF0R8xbzacl3dJIFdAe4w\nh6SGGcsf4Ra5PE9oagnORLO2DMUQg9z46y2vz8iTq3J/8lf2qvQeLIbpZMks\nXiSdtYVHqA1mgPwQ/i+KToUASNAh0gtC3N5ojwtiJ7ELBEVngRKMLb8r/z3d\nI2vxcTSXLsSdkLXUbm2WdXU1GeQ2UyTd9ggw8J6aqur1qYmFfEPUuuyRTJlO\nNNNuwVxArEvMOxpO9G2axoAop9whkeV/mvziG7BTcd+ffm0JUNnyHkv2yxcY\n3u7yJe2RFqa22JXd1GP44a7IlYUADsISVcKhppmA/2XnyrtZwVjHg47Faqvg\nuiHn5gzJV8QNkK8XYfbuTORKNpiZRI0cAZKEvSZEoMLficmAx843iKiJDEVN\nKYSEq6i0eGa9DDMUshZ5OMSnoyVQWatQZdNROoA0Eh6pWr5DINIRj52O7y02\nEtwpoX2ZuJnltQW7x4w4abHjYZI38Yu0Nm1+INxJNmywzsf9Of+pJJcFdAFo\nvlcP\r\n=LV6q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.7ec96974e.0","@material/theme":"6.0.0-canary.7ec96974e.0","@material/animation":"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-indicator_6.0.0-canary.7ec96974e.0_1582570669564_0.5136236493279369","host":"s3://npm-registry-packages"}},"6.0.0-canary.265ecbad5.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.265ecbad5.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0adf7c12ea7c4b917b6583977af47d9e0da75038","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.265ecbad5.0.tgz","fileCount":38,"integrity":"sha512-SBEVDw6f7kmjyNv3kZxtBQvrh19l3etyy5+ni6tX2hATgq1BA6Xh+AsAqCGSyFg7iCcfiDHD9porh+oQpUgsag==","signatures":[{"sig":"MEYCIQDEmNWUnvBPdooacZJv54b/xCMkGgaFSupElLpKqy3WYQIhAJo4iq2gc4YJTXmfajZ4+Mtg7DkRpD6hqOJQpshaIqPy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVYrxCRA9TVsSAnZWagAA8bAP/2a+vCGfP/q3UNp+/c6q\npCZsV3/Zm0AeAWCF7NxaRhp6Q0MawxiPfOc1C9OIyiNhkjty1RYElvnuSVIn\nE4EpH1tQgZwBLAm8Gs97ZcXd4DNnUpDLGubv/+T9THs1yagLozZWlI7SR04t\n5zzHn5BewyhViPj0Eg8R4vZ8vLV/ntRHNcSrJnd3DFtsFLh5a2SHfKKxJdtO\nbCestrrayDPCt1cxDT51xy8T2Dk8rLPiRDfv1UDfbau/YNlcdWIzWD1ozdeT\n1695/O/c4Gr5ASPg3JXvkd2Y31IC+HwMAwp+IqagiCRNdPfsdIyp9KEyEiav\nMtt/plEZ6BGfcdcY5M/tBHvmLjuVfbuwuPLoCYnORiWNsvPFbFLtwtI2/6XO\njDX1tmoJt6OcxqUgfxcHGDatcBGaNRXxPSMiHitejCrY1N7fSNJ2pIPeTf1L\nffa0XwesNNqnOaWMmY3dFbQ4GzT8WpC20+23CE3w5Qboct3Sy1I2yOFOpVe5\nCjWW0lJDxWDIHkAQ+/k/fqTEOwtXT7KqNUkiUcuPEXDDmgbXyIKnUPRqUZBh\nWiLkrQRxCPeruFgG5mSe+mu7klun3j3ny7lB5KzWWnd5NhZYkfMSAaIm0F2x\n9zybHFLqKhL2HN8e2BWodoLaSARjft1YBdhOnid8PWkLiWrl2PP4YAp9IiE0\nJOdj\r\n=sFnM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.265ecbad5.0","@material/theme":"6.0.0-canary.265ecbad5.0","@material/animation":"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-indicator_6.0.0-canary.265ecbad5.0_1582664433065_0.003958501511478474","host":"s3://npm-registry-packages"}},"5.1.0":{"name":"@material/tab-indicator","version":"5.1.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"1af7ce885bf2b64af4057acb3a736ae2b993b925","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-5.1.0.tgz","fileCount":37,"integrity":"sha512-vy/oBsvRQaQ2EscsgFp9xu7tZM6UBECmNxcC1k2eQGhNjy7olkoL9bX/ymiN4xAjQYqvP6BnC3LN3IywvKMTxQ==","signatures":[{"sig":"MEUCIDDwC3VlX4APowdIfMR8c6St4aSygFFrlD0z0K2x02DyAiEA1ZZOLDm/tbJiq6IND67ShpCOriACu/686we3DMsNu80=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167539,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVZOpCRA9TVsSAnZWagAAEYQP/1w2FljfBpppSc3xmZFo\nfBEnWuw/k34i/+jKF1qM9WRwTHpK0pLf1o35qcj8nP4/o+MFC97YNbQQKbDi\n/h8kazJRwHjpHaltrxVXgpzx3X5aa62R7AwYhbgEni2XOHqU0ENOMIMePZr5\nv8dU83fxf5l2TpL1nLmOeH9KXpZxugx5Me5fUZrMPEr16gtgiA4C6ZKcg0d6\nex7fAJ49UXLTfKHfb0dMX1tIgiJebV5h2XQ177ChGvU8zDXGwO0FXLo/PYy7\nS++eZO/L253hbbTc+lwIWb6YlDRVds63oQrm+7lsReXOP7hwo7lAsGbIUe3m\nJFFzpt/Baf6lbBl8GK5dhGTb3e7OymUFcBFtM9Pl7WWC4AKYE09pVHr4GJLv\nswiW0/y8Y4RlkDvfTELGzq2QO380oHBYzdZxDU9FnJXii50IGEqA2WniUowW\nJlF4390zjDLEwHGtHb1LBfUrb2YmYX6MWfXJa1wsD0BH09dYIBKbBk21ZZNX\nX8yByOEw/cnFlDOk1pf0HlVEAeOFgoOXvU/e1TrvJGFjKv0ldB0+F57A3Yg0\ndT0FNzGQQtdpPRe2LyOra7ms7qbleJ3b3faQQLRmDOLGatepUWWuXrTOJWqs\nxOjibM2UP+CiBdmW7amN1xSdfQVdmq3hSGULPyK1UoOL5L0BbcYSHz0DUxyE\n5vn4\r\n=zi0/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"^5.1.0","@material/theme":"^5.1.0","@material/animation":"^5.1.0","@material/feature-targeting":"^5.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-indicator_5.1.0_1582666664690_0.45226664706019015","host":"s3://npm-registry-packages"}},"6.0.0-canary.2cf87456f.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.2cf87456f.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"397abb3c7005b0511dc699d1ff36854ebebb0648","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.2cf87456f.0.tgz","fileCount":38,"integrity":"sha512-Fs76RVJr32K4yFPQkLkTTaS9StuBcrvRZyPlViqeIIWhzp7i3HE3icNVOJWbY6XAdcs05CEhRvE14KYuv182Dw==","signatures":[{"sig":"MEQCIFvHdgjW2YoNlX1dtrbFaleEpCGXXsw5x2OEHOuJBkSqAiB9JU5h6uUW3KbdVBcxCzlEKQC7IK15YAsnK7P1tDYwew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVZPTCRA9TVsSAnZWagAA2uoP/3YnW8/9q7k0hKne3YMY\ndvxyhIloQGLxR0h/Na1STwPRW0Ac6CFt8qTIUi3T9zv+AbFQjUF/rNZsBJeV\ngLgR5IrzokkWSocX1EtcEmeiWAzjSsJr76+NOz2kSUlVhjKz8m2VrBJllu9H\ncGFHJu5vt+s+hvQFHYdG5BcWtUJaEPypsYNfR6b2PQr29TVMV1Adf6VegSPp\n0ZFzUg/JqOE754b2tnTZG7mKCCgHfxzoqQDnDlG5fCvhVaq097gaaaN4GG6A\n1moxVz5b0CX9K/ytJ6GX+CUts6T61uxVOVRkPRLpqN1JLuXOsQVzHwx/z1/q\nO5hmRHsfRxyY2BzZWvDi3HJ8Y5WFdqnnE80k45JNXbjqliK84mMz/FwX6gLd\nKrTmC5OAraARB+9dGTXtTI4EKxELALZUjvqJ6tvJg7H5gNCe7US6sM1/Lukr\nKpz3Ovpqd7yOushvwtHdI8j5XEJ9eMRVh9eXR164ek2B6kAng7kasPs3bEzM\nuRWTh1QM1AybNDj6Tg8PDoYCRVpfB0vELO7a7f8PFrL3orOq4eOHSBpxpHTh\n4eBNsiY+ckStT7zgdFTteEXP4xtCOxXg41Uzf+b6UHtGj+ekAP1Mw5kmJHTv\n6Y56DkqgVJwiM/jC47myil3xfkecSxPuYvz6pJIFEmoT9xovw3C1FXW5NlPu\n/088\r\n=i4D6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.2cf87456f.0","@material/theme":"6.0.0-canary.2cf87456f.0","@material/animation":"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-indicator_6.0.0-canary.2cf87456f.0_1582666707531_0.2486045047940011","host":"s3://npm-registry-packages"}},"6.0.0-canary.781434a92.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.781434a92.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"44341cab65c23816200eb6e917cb10346c823a13","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.781434a92.0.tgz","fileCount":38,"integrity":"sha512-MgeiJr6B0hXkaWsjfZAHC0BiDgILnzCUHOf6DBKkC+q6AIpMuQfvHqDAKu8Wra0LnJErne9gr6bay6hD9vY70A==","signatures":[{"sig":"MEYCIQCVTqay/x4zEbMDYMtnxKjc2wwO+uT64LlJTZIOaQcVvAIhAP/2ck87hklcAStJiyAGMjetBzqVt0DiIqgByEGvf+Bj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVa1yCRA9TVsSAnZWagAAyiYP/RpwD7bjZK/CsVzE9yOt\nA/Hf4SQT+1BwVW17kBwy7Ccy0J75vC15imM9tn0XUpndoaZIXkJjLPv8OtJY\n5Ro6a32dcd55qysvQcVjsEmKGEGF7Zc0ZtCkOYyU50e/7RELRx5jTDUlfiL4\nCflqQHdfVsV2pkLzfjnBimErY88u0h2BF9HV7yWTQ74kqrtV46K14OWMCoou\n6na2Q1b/ZwtcRFatNFKdb7q0I/8kQ0q/HjclpoGj1Yl1wyWLN6A/wVJxwqg9\n7V2bczxX+tUQFbyA6iZn82IcqYqE3QiP9UsX7BdjaMWwsk6/TMQlACm7cMHc\ngUamgHfrFEcaLfcWJ05o8wZOv5UmxGoNSYzaffqC20W/ro3lXCRGgOmVA3x7\nv1V+rId1wbc3zZwx+qvJIxDT+QcYwkhmRzPH59YZk/ZAVPMCzjh5+fjvFvlY\nCFHZtVnm83BZ8iIc6F3L2k95D5JfBQJBu2xa7Lr1rr0RJQ35CN/jDf5tqiXo\n2oOexlWePzNoLon8vDFmhvn5nyIwTqUEmgzDrcmLJ2l1AXY0M4z3oDip0zQO\n0KiusQef0JCopFD6wMOk5ZhBQbSM/LKF+I2CNLKa70NwY3fYEFgwE/QUOjmY\n6j9uCPo8wCiedw5FM8Lnyo/IEJ3/fSTSix4ikElZka5y7W/COIi6DuoMnmk+\n2feU\r\n=h0py\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.781434a92.0","@material/theme":"6.0.0-canary.781434a92.0","@material/animation":"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-indicator_6.0.0-canary.781434a92.0_1582673265574_0.6676989428155011","host":"s3://npm-registry-packages"}},"6.0.0-canary.d6f60c98b.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.d6f60c98b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"2a5d39bb65756ca1efb5862761ec41cc790471c6","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.d6f60c98b.0.tgz","fileCount":38,"integrity":"sha512-egbhjRz4dlsB050dQaO8b279vkdgigB/tP+JbN/XY3EPafZJZgZ9w8UR9KvuSGzh5huPNJNC32ZmzTVN+/oBPA==","signatures":[{"sig":"MEYCIQDvQmhf1y8hhymGjXAeiauCVxYM+Z5w1T+fHVu17vcmNAIhAMZt+88UocUjvltY+if/knhN3+4TPebR79mHSStnd3+n","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWY4lCRA9TVsSAnZWagAAOs4P/RPvmsdkd/SUZQSl/Bg7\nu3+qMsgHyErYWwQmX3YHEKo8Vij0h+38AjlWtjZOioD0LC15U29Byg8ekNRK\n70/9xBOo0n8ysuiMUbL3lR0YNPRU5emQdf2MlIM2AEqbFTj03IIqZfzCFq0p\nYXa5U6nO+Qu2LKfAR5z1Y/c7wFvAnmyakArCxG5GwLVYH/65ZmDtSr0flwbG\nBvcBVwWMQE/EJ+QJiDU/qQYngLImgSdGrF6tESPosI4craJ2HHLT1CENqiAm\nkBilIeFjwDlavRYxmZ2455eYHNeLkwol14GnOGCBnoak3wc7Y4wdnKuTyw2l\n1aok4w93Zgj3XLFkKUF4qDGiq6Nvqf82tuZqs8XeR1vnx0WXP5FN6fVZjf63\nTROqY4kIpm/2+OgiiNqNy6GYmeJGYz/wL+1eV5+8eEmKRxpUqA6UobmbhJru\nv9sN1b1aHABCVtvFcqyCn+BQJgsBWuEgGQmNVmxSQDf26TdHxZm0g8sxQmSC\nw8kysp+F8yaNK/5bjIY90NKSOsQx2KcqXIClo+DcrSLnXR1W9JCz1yqUh6I8\nqfHDC/G16ZcP+4/FQW5bKJv/GWMek/Qr2ebdoFH6Gv4rGiQDCKSw5plCBBmn\nWVsMKYqx0CtgGgdGgux/Z2NUQizbW5njuzlWZOFv8odSkC4QBFWdOycb8BPR\nUVPd\r\n=Non2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.d6f60c98b.0","@material/theme":"6.0.0-canary.d6f60c98b.0","@material/animation":"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-indicator_6.0.0-canary.d6f60c98b.0_1582927397014_0.8933189299051463","host":"s3://npm-registry-packages"}},"6.0.0-canary.69edc6e28.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.69edc6e28.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"25cc8ab9c7e25c0964bc0207a9fb86627836ee53","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.69edc6e28.0.tgz","fileCount":38,"integrity":"sha512-w5uXLmaw/SRcIF0voQRv8fmbhG6ECjBYgk0KpCWaKjLX5f3b5XbP+0nekJMph0n8g0eUddKtm8SVIiUIGdzi0g==","signatures":[{"sig":"MEQCIEuKJd1y5XfAvXF7uxll2SoXjQPfvuqmepcJUSngnIj9AiBkFaNKuA7DoMqrd1NAQGOEcDXp+leyvFxmDgtm30Z+WA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWZArCRA9TVsSAnZWagAAuUAP/ithL/CUz3yzp5f8XjbY\nykdSiTXkW3LaDZiEg/CTXQN+70Eg2+zekchLIGUl6ntLgAx3pnscYX746Fxv\n5dq19PYN+g86//vncHqNLkUV+o7JcQgzRMFZAJcg7iqjkDW6doGs6V4QznA9\ne7Ju3BfBdsSx384TJloPegld3vyT6k6y8qMEAIhESlNg6LqKRUhcYbEvhU4f\n8d4kusXbbPljDWxKCX2lP3Rfj6jDDBflm+1KeVldxL48JaWJiFsFNSFvyoGJ\nFYUB7GoynLY+J9YXc2Mzaz4OHZCEV2aj6jLDdWzGZZnzeNwdCSPCmZcmmEB2\nSOrT7tquoGEng7qe9+Qa7Msr9K7FnHBngUtQsf1P6RDq90Tjx04qjuQi+lEE\nyubuHqcYcdwrsdUM2Sf8Ghbhjs8fnJbqoySZ/1uQAE+xnC3dR3yirDLIEz9X\nPcf0A5N2Dr3l5CWH9Lui3zi99pBD1IBeBGtnhbmBT3U4xByGoOvyYDOlWJ8s\nA6mvaasIq42+dkOmaApcHqGnd0sOzjKpQWstEq6vKhiMiJom0ovywLbrxAud\njcs19EVbAXpMaTKFpyQmPRHgOpETuS4iseYDENgom5sgvENhXxqmwWdwk1BO\nWnhp7q4aJyuAF1sPJMcMM0luc4e7omsZhTg/40MTrexSopAyaesDT8+/tEYx\n5fYH\r\n=CU4i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.69edc6e28.0","@material/theme":"6.0.0-canary.69edc6e28.0","@material/animation":"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-indicator_6.0.0-canary.69edc6e28.0_1582927914749_0.5934901101181114","host":"s3://npm-registry-packages"}},"6.0.0-canary.9372e4939.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.9372e4939.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"638d8a7db56e30f313abc827c5584cbe32c9e0ba","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.9372e4939.0.tgz","fileCount":38,"integrity":"sha512-eEDFn61CUh8k4kNfRvILbHj3RcL7FyanJgSpeMeOSZbVhhIaHUJjjjzkAxKjhGMWs+pTld2W/Zvd8zsWCMKupw==","signatures":[{"sig":"MEUCIDRndYdBQ8A2k/nMjrHjyFP9gllkWqIDbP4Gbqn8JSs5AiEAzOxWqftZmUXZlkc5C8BMmnlwNvOKH2HvCqpM32A/lPI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXqt+CRA9TVsSAnZWagAAwy8P/jbfKiIV60LCLPIDWkGy\nC2oL5hg9u5j5MOP8bko+Ir5oOQUu29cDk5a/H+bRKRNUbvTHbaFz79AvrV0s\nRLKw7puqaOwTFwj7BlpKwlDT04NnKEWe8qeSWoj9Y/Hdnp3+ChQuYe4d2Rls\n+419rkiZPlSgxjE0hV+UxuXx2NDaV0PyfPjk0zmrVnIoXsjr6OS5XleyOyOm\nJCQDbCp+xNa6ulIsV1JT/2F1tJL2xKIdHO6O0PST+1tK6/n1WGryUoj3BA87\nq8EAHEU8nINazwu8hdMFs2Vob7wosH866lf4vmktAp4Cz7ElanS1NmqgIZEL\nsSy7axohhG4ICXp5eMVbgY246/hsM35jHO3ftWYMSf6uzuACOWHivsC0Knuz\nwmiP7Xs+E6CRLzLSio0YPDxYKg2npkwqEsnNUmw3TnghR5gvERqrWWKdWQM7\njCHTsjlFB2Qbm4pNLUNMNQ4KoXMnOb63xvU8eiJUM2lqHLUAZYEvFcqmf6q8\nFvyp6NfKjiKrK9xvV8QA0uRb21IAOaHogiA1Cda/CvIhK7NZtJTpWS0IusH6\nLaI/euC0g3Z5L57ZWHMAcg4F8iwy9CIakQGbSzud8sn6oKgtbKfZBjQOoSKW\nUeIOeMPZUyR5oqD3sPUT/JHgdagsckoub7WY8pX0A+QykH/mDsl3jZwI0T7h\nAGSW\r\n=ic0r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.9372e4939.0","@material/theme":"6.0.0-canary.9372e4939.0","@material/animation":"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-indicator_6.0.0-canary.9372e4939.0_1583262589824_0.9811228373957792","host":"s3://npm-registry-packages"}},"6.0.0-canary.9cf5e9842.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.9cf5e9842.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c21a1110af65a2679d9cd822a8327b5d07bf93f7","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.9cf5e9842.0.tgz","fileCount":38,"integrity":"sha512-08qOhC0FGY1lPdq/OXGu36fa5usiCYXEEgvfCwNide/6kTEsJ/9c0do1urq6Ye39fs6labxcItzXWyWuf+MqUQ==","signatures":[{"sig":"MEYCIQCl0sgJOMmEPfn6mkJmp/CMGeu91AzDZGtJHuPze1zZyQIhAJN+qKSCKivpysuVFdiyzs0Xw5HotIpXcl4KcTy74Wgh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXudrCRA9TVsSAnZWagAAbtIP/3O1YDFG1EiKTqDNKL0A\nKKBJ2YWOvDXUf28zN/2BeT+Jh0yJAa0Qtnig927k+vFLq0TOMvb5C/oRS0+9\nSJorY7CVUKFo0rwasBdQ5NyKbghUoD0qCDck7g18Jm9fPR22BYDaQbX5AP/D\ntXeYkSam2NBAexd9c/tjxQ/G4p9gjUxamq8UnwIO3b9GBFEc7UTvKa2Rvpcx\nSlAA1kFU3kPf1rpqUSEw+g+fxnMZ+rHc0hECgAQKjwAYBtzwmgQiKIKp3/gg\nM1VrVYcWvpvmm4flyE7CxiZk+pr/ZNjEgdhvkcfiBxo1L2odef4C5JwEQmnQ\nqyKW9RwFWLuZ4M1N38DpjCSd7Cm84+YBz73SoAqRYRVFlGBv0dljoyQyGHOU\nULPvS9PRGjTPGbDGmZ3WfQjDi+8lKdzkIhQWHh7+WFtLuXecG8QiAX0Vde9u\nCRqmIdUKkEHl/gkmv9Mlrxb1Z+y3MzinozdoJrBRRec8erzsbnHFRgbmQ2R2\nd1n/zp9/Q/9cPLyLRd/K2yva2a5CnFKcVe6CcSclcxTJ6mjuKJymQ8SuDHwl\nSjPenX6R8cHAifaCAnl3CPKssGLItiDog7OoJ51XKO/2Iewi3NPqkVPkSqSU\ncOWevY8Y3c2KnMhBwCeKtvy/QfP1E12r6tKqqYyJ5UICBWuPXyhQh1qfe4EF\nfjIZ\r\n=8+vA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.9cf5e9842.0","@material/theme":"6.0.0-canary.9cf5e9842.0","@material/animation":"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-indicator_6.0.0-canary.9cf5e9842.0_1583277930975_0.904102282590109","host":"s3://npm-registry-packages"}},"6.0.0-canary.3657f8863.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.3657f8863.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"8072fa094ae8ea41c4dbc52c60af08e6d1f0947b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.3657f8863.0.tgz","fileCount":38,"integrity":"sha512-hGJ6AQTdVNkYbpfVuXJd2LNfDNE4uu1EC1v18+wEE4lsRYG1CM++Z87w5ty9y5prHvR8wM5iBm5XbdYWgPhI/g==","signatures":[{"sig":"MEQCICbcAbp3I6VbtLWiyTM8DIUTwUcD1YOac0dUcS1FshV/AiB9pfTRYTmjMqO60fYyfyZAZWzAym1ON5CUV4ERKf7n3g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeX+jfCRA9TVsSAnZWagAAiCgP/iybjRrlWRC/nXM/GXpf\nFljBs1ondPuJcu2PydGQybyppOoZpqkAjQeryb3tSyTsh85VvocadhSXWIDR\nUIRPfCUHZP+ynGvfXYjEwYcEKDT+5mMK1gg11UIsXsE09qpLyPU5zbYCLoeT\nIKao0PS4NfyQ2wd0Xt3qOL0Fi7hvB/4IGzRDVdjhYItV2ohKrkCidhfllTiW\ntUKPikVU26Oo+t6GxX5KewKx91KghZJ2P7IsJbcHeRV4vAmuLKO4I7efS2Wv\nnkjMWk5n/b3yI5rcQ2JMDzccvOYjeUNp2MDOS3t/EXnJ3JDKPI2jR2NZtRSg\nloKL6oyneFuQltUL2xkXh9/GLxnAr7N4J6rMlK/tjjM5MDhndg2vNNuTC3SL\nCjSzoVLceAglhypLA8grId0Y7pT0Nxf99hvlQJZ9Y22CtDN2fdJGalSdwgSI\nU/+W05+IXIr8YMqsuZ+qdeUr6GMssm5QXDgDK2uiP7FGW3RbDOon5xD5aTBU\nE1I1TcTA6+Frco3A8wuK//gWaULPMSUHba7MHor68FGcgMVWRxZIR7gnFgcV\nl07Z2Why6j2T7hyzJxrc9yGHiMS58XZDZUWdOsTTHu1JHIcrSnW9cV5oAugT\nSjJlDj9Yp2mr5LvtykZfn5vgy7ugYPEZnSOymrjQ3dDOJw8Yo+1BwEbPTloT\nj8pn\r\n=52vb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.3657f8863.0","@material/theme":"6.0.0-canary.3657f8863.0","@material/animation":"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-indicator_6.0.0-canary.3657f8863.0_1583343838808_0.37394081187326345","host":"s3://npm-registry-packages"}},"6.0.0-canary.98b843417.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.98b843417.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"773868f5e1ac04656ed97a7c7d84f71ca8b1865d","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.98b843417.0.tgz","fileCount":38,"integrity":"sha512-JxOnzZqAggJumojDCE3a0+fLtSUfH1xGQFHERd0OjIttaeMMjx/Rf+vWG4wjoZkLS7zHleVdxtZ5K7aU2AchAA==","signatures":[{"sig":"MEUCIQCc1u0zO4fs6/69LjEs9VR/FpD7QuxJhpw3OiOLSrQtFwIgQhLCqaFKUNPCV8HoO5NRx6sjlEl1+kECV3ml0AsbxvE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYUVXCRA9TVsSAnZWagAA8KUQAJCJI73mRxkwWZODknLe\nUTvl/B+vTsLsnI8a0eJ9K1bSFqU12zWjtaKsgwl8kTq0LpCFr5TCEb/Vnbd/\n3RQpnjtqsFCsp/0Rek3cLC4fC7kgEvNP1exIqlkSTs0uOZJpZ48sQQ4gKA5N\nYOfVpR93toop2wODuHWN1v8NV3astqjD7v7wQdaBQuMa9GTPdio9CIAbWQos\n95aSMC2YE+qx/Re9dE+A69hQCFRifWOjagm1U2aGJ3F0lW5bCoKh8zBnM9gA\n1P/J1rWQtqu/fzzFsnHfMTFe0F1JubypCFIGYdaxMQjZ8opp4K2LpsMDtiVz\nzsKjIbEdVKNhtB1aR9PWMpX0V85RDhvz9Czw6zE+FBVPTuY+LDofV0Ku34Of\nTrLTxrOBBLViNyHrTRrpIsR6hh51sA/yVgun6OjzUqvdp+fg23Dm09eRHQjK\n/G98SC5Dk8Mr5P6+jg+LjTO5dLiKcSob5o/jwhlunY0qMxPLB9QS0mqcWx60\nwNvGuZrVvhtPgw1tO2BkiPhGB50O/M8ZrYW2KO5FrCiABaJYaRfEGu90CwFw\nMJfOnmwIZM2HeD1VkssbvQhmts/oiWNAhSOb297ozet9k4aQGBFTW1xGtfxp\nJcoWwmgvVb7vJFSC8j5uQFJAckVthOvLmluROW99TTAso+mEfoAiLsZLYTV3\nQcpv\r\n=SQvO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.98b843417.0","@material/theme":"6.0.0-canary.98b843417.0","@material/animation":"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-indicator_6.0.0-canary.98b843417.0_1583433047090_0.3810837540808989","host":"s3://npm-registry-packages"}},"6.0.0-canary.17b9699c4.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.17b9699c4.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"596202ead8a9a94b2622ed010390b1f7886eff8a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.17b9699c4.0.tgz","fileCount":38,"integrity":"sha512-kf7gNwmS5Cfb5SllNYehJzlVQGEOBf8PucDGkNckhjXpTrx5UzAuMhyj13XNvA8h4nPx+NCtjGZfYWf2nm8tSg==","signatures":[{"sig":"MEYCIQC0GeyQxkexD/OCpwgAf8swEL5m7cYVhrZ4e3/OjlAopQIhAKo0CUImEseH+PSIcXEcr8+OiLmsSPSbWfxusJ3Tk6XE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYVFeCRA9TVsSAnZWagAA1isP/Ri0cTQPe+36EM8IG1x9\npkAMvB2sFcMtU+ksVVuMIbKTLlAS+97O1iy2gUQm6L2o7kzFRpFiuFe5xE9H\nzbukWOtg96zbvLKkAvppH4tmKRvmPNtNQb/hCCEvGMPMnl2q3aSwczEnCM4E\nprfNEYxmxNAW0QXVQNO8FJXrU1YVWXC4Fr4fz6KxTxCf2xhbk4/EXmaUDdru\nLA+jQYtIp2U/RdXCWypU+uM36veaY2rVDamLmoeEC6iSv8jaZM6vVWpKVQO3\nwXBzlHoxalLIqE9s7xHz9CP986Skc4uNTFp4nJvqy2OIfupJ1RpsyV+ElSWo\nn5oeYNMHE9Lsnu1wsKeXRFzneHd63ikn+tQw09m3dlZTBu1xJqiQ9VpZM/Ib\nqM/CUliFldHmMLHUUCLNsZLlu79hakV/Zf8RscKl0RYknftEaf5JozUUpgTm\nEwS+6gTQ5ngtBisgAMZBmSqq6+b4E3JFRNCN/Kh6Wm51SJe67/PdGYc7TUjR\nezd3qx5+5/O7ONbkosAWWNTUa6l9w/3PTz4eQSKxTir20wlSKRqGHsZi/VUG\ngyM0+hOtQ566fbtfQrcPKSanIKvZK0uD7cAL8Tx1C15MvoSBadAn8yxGL1GQ\narHkzVfFrrhysUWYNu19BxbysldPuGd7X0oyBTUj6z/kJi5wVpQZHd1Qv4di\n6yzm\r\n=2eaq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.17b9699c4.0","@material/theme":"6.0.0-canary.17b9699c4.0","@material/animation":"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-indicator_6.0.0-canary.17b9699c4.0_1583436125756_0.7227727198451182","host":"s3://npm-registry-packages"}},"6.0.0-canary.6ee035572.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.6ee035572.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ff3bdcf3709a8b574c20912ebb74fb9fd8edc7b9","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.6ee035572.0.tgz","fileCount":38,"integrity":"sha512-BPylde8i5dleZoliJM3QRLiKsiyftgq/OJyILuZ0yQ0YLR9z2H3rqPISUHb9gXApE7ZZVbcjtAYoSIXvF+jLgQ==","signatures":[{"sig":"MEQCIFLsYPPb9TUT+N+Ut7/Wc84+NQzZvfq9WtWfcC650mqrAiBE5utwcKtBCyvyWyK07zPU66bAoFuSk/fW7KbmlgQVRA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZnLaCRA9TVsSAnZWagAA7XEP/iYBOWIVD28dxiKupgv5\n4FKsC4sU1T8QpDEogy26DjL2qtpm1SzLnRhOxG/JKKjpvjSmo7TAJfS5Qgkw\niVvSQGCmnySA0gy687qIj3LnjusGf4AwseHYKB5yPAMp+9D+Y8tpEsskpeUJ\nGKNWGqanP0OA1vrZcHe2EHDbNQwHsG41hGzQoQJl99I95udSY92GrfxJlSVj\n8Vc+GJE4J8K+FZIo2rMRRpzEWvQRRQlQbVNSxJUAvLBPqsQIy6evt9WL+UPA\nfqfv8FBCTm3nGjaqbnM+dQ1yZ8bggSMMOrVdsa7lrRulhVdMVWMxPttlqJ/0\nR1pY+tY6VSNQAoroYUjzQXTllVLFKZg8kH1N8TITotC/zWFFcL/5hDk5cFD7\nleLMjHcHOvlif0CW0tY4yIneQ/oIEEYJj0BS8pW1pOTPs8E9eqChQffJ11vN\nU2BM2Km/uOULdJmogL5mKQYPJN3at2Cq4fbuien3zENUIBPzTeSwZ2wwSyD5\n92V3Z3yxcf9vGt0OtFZ+v+q0xSGYCJCDLZOdwYfE1kUCfbyinmx5mkbTtiw3\nr50Brpp6PCQcY3oNa450RHGbCei1G2hsANaKDtMETT6Nzgu7q7TncwA6DikM\nBeF9Tm2Ius6Lu4RvAFubQrfZZxdwKtYMzI5AyWZXJG5kpFpAMbMOoeWQluwv\nmjxW\r\n=hAzM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.6ee035572.0","@material/theme":"6.0.0-canary.6ee035572.0","@material/animation":"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-indicator_6.0.0-canary.6ee035572.0_1583772378587_0.6246591242539639","host":"s3://npm-registry-packages"}},"6.0.0-canary.bd33cb56b.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.bd33cb56b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e13f2c7404646afa0ec9e9287705ad9f03a8a53f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.bd33cb56b.0.tgz","fileCount":38,"integrity":"sha512-3EDqPIyq1RMxZuZM19W/fOUkdup2xazS7q4JQWCMgjN3TOSgj0blwpEGrTJlh1ahu8fLl1xmxJzHwt9cCU1nRw==","signatures":[{"sig":"MEYCIQD+qVlywGOOEf9hsmWQx8Uyw4nUfbQt17W322jqmN2qogIhAMtxSM1zIESOstc/p/Hn4CABz3zzrEuiuT1ABiE3N9OE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZnspCRA9TVsSAnZWagAAT+gP/3Et7luHjLmEkWEbLnXo\n2eYUfIIyyxGh0OI69gfXGuQfTJvMLxIrUbNOkV2vBMKkhX/E+mM96roLYIHx\nPL6H+Gk3n+y3fN5zyIyNeV2z1GRF5tm7eWsYJRvGXgN9vgetWmZRU13ym89j\nWc75pdY2JPeqS9X3YzwDlFBX4PoJhVpSB8Let4pt/d5+QTn/KnvD93ODZPdB\nLJkkfSRUuem19w8ceFxI6Dk9TilOCOlXtRpMAU0fd5DPYPOOiz8JnXGdLkV4\ntmh4BLioe0SxTb7qjpHMXLjMHhsXbnf425/npKNeBfoD2UJmnT1tA1OCplxu\nCVT2CXCBPYAmkLtSIpOKMgw31bq8SvZXBBW9Z4ordVxRwPZJTL+X/PlMJoY/\nMCGXCQXBKU6lTqXLkYLjteGfd359J7UA4rYw++fqXSPSq0ZYr9S92bJ7bxUB\nl9Hv+pXvJwAEFXLKSLckqV8XBE3dCZfuU6WTj4YJH37PgTtD6NUT8cHSi4mx\n8omqEj0c74/S+XHX9b0FGNz1Zzm6j0Yj/ozNIljRQL19XlCwz1/bgusFYf4o\nvpgdKof99Rb4Q2jXAwUCtpeaRfoEgcR9dRdPFr3aBb9+UDal7sYYn4Sde7UW\nli1z/NwvloifDJgQRhYSsmj1hL4dqkSLRd68xwMP/YX735mpw35OMiWF4hTU\nm4tF\r\n=5DeZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.bd33cb56b.0","@material/theme":"6.0.0-canary.bd33cb56b.0","@material/animation":"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-indicator_6.0.0-canary.bd33cb56b.0_1583774504888_0.7014678127417528","host":"s3://npm-registry-packages"}},"6.0.0-canary.26c049afa.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.26c049afa.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"90c3ccef6d1700ddda74c4938531f424c97d4a50","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.26c049afa.0.tgz","fileCount":38,"integrity":"sha512-hLXyXDkiSnSU0NTjqFlmhRb80DKmcZtGuQ2a37uuC9At4Gk2e46vmJDRIbIiFn43eMwxXvQXn5iTlyZOvbh9zw==","signatures":[{"sig":"MEYCIQC0GNCv7iqOuojitP7gMvY8oQ1PtCIPYWrBoGsQ2eIBfgIhALGF2h7l+llvQ5zLWkYzh5PkNfo2GrpTaKg4wtA/bVE8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ8gUCRA9TVsSAnZWagAAikgP/jeLGLlQQ44lR4o3gLFM\nSzVrLjPGTK3rMCpgUN0As7EVn2aFVqYZbyl8StQ6cq6q+lfr0GOLYx97UuJy\nMT6ibQs3yi3MVENR370b82e3tI5O3tp26OC2L7bg6C8rObOH6yhGEBAP4Eh8\n+jIOEiIl9tvPQsyHyKQfk8tcGVPFDj1YYSvc9fxJYAYnBoZAkZJ7TM67o4uO\nuzph4NgihSN6ZXQwbh5BlQRrAAgI1INnLB+KNn4gg9Y5I4iJa20fVa6vm8yI\nbCVvroe6qOLAZIluIrvJiY5dzL1jBRAjJJ/OG3hyNaLo6B/ur/Bxtrj7QaWi\n5B0qLexnD2ZjMrx4fh94XTTHVpuiMT040+8Ub7pKcDWWSXqrCAuHaZ5rcm4x\nqQuDt/gYWLmzv3KXyw8WA0qSs64QDpWllt47QSiuitpux0LseqL2sFIjdYud\nIZKSD5qiL19ZC406AEN/UN/ce+FPDzWGeKDDXvvCDU+DGnjyfaEFtIDpm4vA\njMx+roFw7BXzRs10GSmcqXFejaa0jwM+AacFeFDSNSCN6aU2P1Lq9UZx5j7p\n0qqmBUZgOfuH6SWBjXczD1EkHTDK3taQ5MR9a0oI+yo+PiZqFUEWAcazMclE\nq3ymjA6FF/eq4TxlLlnS4HsfXkqB+Ohkc7yRJ+MnQZq528qrArlMLDWnUxcs\n7o1J\r\n=eFhy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.26c049afa.0","@material/theme":"6.0.0-canary.26c049afa.0","@material/animation":"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-indicator_6.0.0-canary.26c049afa.0_1583859732373_0.01699781573167347","host":"s3://npm-registry-packages"}},"6.0.0-canary.1db5c9fc8.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.1db5c9fc8.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"54ada63e9ac9efb8c5862fbc32a33b0e45067dc8","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.1db5c9fc8.0.tgz","fileCount":38,"integrity":"sha512-xNezy4QW5fO/i5GgurdqMwDSMTlDd4b3Dd7AiCLMRHUzt/wlP/kMqSCo0XeYwg8bA2txuuC9J02NZaki7hf3xA==","signatures":[{"sig":"MEQCIHsb573HA1sTuzmh1oaA+M/TBhVeyETk8J0jgiwzDdxyAiA2jV7b+rEWpIHcDZWEbcBF9XUp4IM2xc8ZGzob99v3cg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ/pICRA9TVsSAnZWagAAAzQP/32ga2uNpfvIf3VitrSW\n4GH6GRolZUXphRMS2DYCeVY/1AzuDk6h7JJ4lONXgVu4Hgf/E5UNTM5iIuGj\nvax6vcUT3WGE+H49TXRAdKTstOiPZUuPh7WcULshmSKP4N1ZWt96fzDjyQby\nAVvkrpxlftvbZdms6GLIhlM/7i+0Bw9JLvNnWtTMiurXfk0johQSOLkvTayA\nAvwvBuPdj5gUN0XWV0Olyd0Gnq7q8L375SlVecv8JegfbN5HBN4gtMDTNbMs\nh7sz7xoITbDAdjlaPm1TKznRoxx1+7ZAHY7DLbh8rmkR77N2OMc6Km8D+rdf\nLe1XoqpVFZkP7eIOSYN7SvYzDJ+MIOlkPrjgWEUhGcXcPWeJ4mA+1wh/dPid\nxTHBu6z3V3sckeJM9VI0+s45/sO5u9bkocmJLB4Nyp7zqQKsrOWfooaK6UEQ\nxfFJ5vpEI5LN1tQLGZT2oL8BOBHdIRGWNh4l/s66Jyl4lizDxpFk6lPoLt3W\nNeu/ULqRzQyvSc3f2vqiGE0IBDd6cMTL3P8ufkorQ8Iu78yVjFwm0Ri/FYtA\ndeQE80KZNv/zBUz5r9YrPh1BUKaPTiW+gqRmosrlsgB4MLv1oCoVgyqLTWz5\na6AjKGg3xx3v4hSGd2XrBPRhqbbkt0ZnFNuX67vmmILCQ0Ptfd2ssZZ7A3Lu\nOGUp\r\n=JT2n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.1db5c9fc8.0","@material/theme":"6.0.0-canary.1db5c9fc8.0","@material/animation":"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-indicator_6.0.0-canary.1db5c9fc8.0_1583872584009_0.7525143827423912","host":"s3://npm-registry-packages"}},"6.0.0-canary.4971637f4.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.4971637f4.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"bd126bfb7c490dd65392ddf96dad45c08584f075","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.4971637f4.0.tgz","fileCount":38,"integrity":"sha512-rVS5gPMiuHYSRrcdvZbSoHVklg+bMHjyakZk8PIAIHkJXd5PgRlYd0b+mMipx/xvVEf6+V+SqInRWJ+xxOAPaA==","signatures":[{"sig":"MEYCIQDnCDXNySRzqWddyYIa/mwWad8BlSxqfd4YeuuVmLpKNAIhAMNKYps2jW5/jggKt28QxIFoVkhh/AvYmplKQ2TYrTbO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaBuBCRA9TVsSAnZWagAAirwP/RfFBuJR65Hr0DXOAa/c\nYdUZFuTxHcHuEmb/QerdIwd1JRgb6hMt0xDVZflTJtXm0DE0yotMPkEVTRO6\nTE1rF0eO9U/AvZaucOolorq+rc5rfUUu475qGuTh6oRO2ZBKlIUiX0DoRVFk\nWSOrYGM2vpwBqhuxAAWlr1tFDGaK9I3eIcBeyNLus2tFV2RVnyhO0VQ3NQIn\nLol3EABUKCSuq7DZ3lQpToKegBwGiXqRmxME4pUrjeXY/gMqyrnNYU0G3CYA\n3cpgZWEjmN8guCfEbq+3pc07W1qd2EyjjgYxdGTLIVlVaETOU4sHmDJIRzgj\nn03HYNQklM0Wv/Gk/KlAoOZlYMcYaVvLTJ3B3TKj7Eu5ZvIw6YZIjdO/Kfee\nSVoVpeld71HVxQD+RhWhyIjyEofTBLzwhD7fDosjxwNy3QepQ5bv0u4t+TZ0\ngY6nKR+s3vr0GOva86Ce2Y2qtkfz6pDvy773gqvoBy/nCJkq4EyjZGzV5rBc\ny/cCU132goe2g+nzAEIcXt5c162FT3WHyhBGlXQFwNS9/dPqI3u+MsCVqKqn\nhYI6S1TqkWqHO9gJeKhArCXEdHMRO74+gb7tCSAmdT9bJvUr0CWHmxmxxfrV\nucTdlEqmaPG6To7uDgXUCxmT1LMK460UyQc43UX2Tss04scq/81k4YFfY9x2\nkKf1\r\n=iDNT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.4971637f4.0","@material/theme":"6.0.0-canary.4971637f4.0","@material/animation":"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-indicator_6.0.0-canary.4971637f4.0_1583881089028_0.5685213471675117","host":"s3://npm-registry-packages"}},"6.0.0-canary.1ae8130ce.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.1ae8130ce.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"f3c79b76d6c045758bc9d4f97002567becf5191c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.1ae8130ce.0.tgz","fileCount":38,"integrity":"sha512-2JTCIGEiaAyIOnZI/vXs+xZNw3keWbPLPB19eSo0luJYC4A9ugXvL2XRsvuDmLHaMHdlbdTMVd/06avVo0azXA==","signatures":[{"sig":"MEQCIDcmSqcaAEJR4VZca1p4s9uW7ZSd5cmDb6KvkEt9cFCPAiB2lr9gEjf4VmM+d5tyj4iEBxfA2AZNgDoMJ59N6uh6Ww==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaB0qCRA9TVsSAnZWagAABCwP+gIKJYF3geLkl64ZENQW\noBN8zzCUuvEyW7mH0DyEYQD8ukDtLpCSsyVTYDqUfj6dR/H9fZcZNYRpaBcr\nnAPmIXsJOGgQgT5tx7eMUpsRhINGPbUyZrhUsjK6VlOhGvjDzzIzKT453fj3\nkqvytjUGTA5Lf571djQ9FIvZfzPsSbglgvUHg/wwFVMUTL3n0OwUHcQlCf8k\nWXXBWZ4QKxZ7CWpvBkPOrvlLTOoaIswNbfCy3hLqoTGMja/vcl3vta3Df9qN\nWBgLUyTx4zkf6uueMDoUTQ7no9LTNplqYErqiTXCLUCbJ7hKTGdHIesrMJlf\npnKAJAqJGr0+5aMVrPHrxKTz67dxUEn9bl+9Y9o1lV9HRrh/XrzYjQLm5B51\nD5DZWfUqBdX0dUxIxqmAHrbPbEqk9kkqzVvHQOZgV2rhsj8IcfjU60pkINgb\nVS6DqMv0uyU3zqhRX8Hh0Uy8LeX27kKvRbABvTEW1oO4GjwjaF1ItL8u5lps\ncJYycd8yaLNjZMG5xqtIAowzLj63879j92B4WJEFGOyLCPgh8k4hH7hcouk3\nv8PM+DbrR/6WbQaGCUfyhIfLV8zC6YgKL10KljSeIaW4LFH7IVl6br56L8ta\nXZB+XW4rj0Om+454l1vxwhHAU0zLuWXcat2DdyDpV6FfUXuK9dlx1UK4sWec\nQnWe\r\n=k7aY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.1ae8130ce.0","@material/theme":"6.0.0-canary.1ae8130ce.0","@material/animation":"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-indicator_6.0.0-canary.1ae8130ce.0_1583881514155_0.5669142858841514","host":"s3://npm-registry-packages"}},"6.0.0-canary.8639c2690.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.8639c2690.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"73aaaea0471d03f7fda0b5660ae7cbf9b5f47aeb","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.8639c2690.0.tgz","fileCount":38,"integrity":"sha512-hlYm4YFFDB90ZqekDFtGa0suwF13TO1XvByQXxlqBt7o454S8LDcu8mLPfFUJt2zsWSYS/a5VwWIrN/OLdxQ6A==","signatures":[{"sig":"MEQCIDkP8ij/g5oPa75gbANe7r7xbPLjRZ8MYSMDQVV5jSbUAiB7IWrKBU/mT/0jZoQvqxNTd93OmQ7xEWMKkUunuZbMQw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaIYeCRA9TVsSAnZWagAAapoP/1IMxfjG9AH6MKmLAmLL\n5j2VrPHsQFQ111+OrFSmC9r8+PZAg/QxHOdle1yUPXtNrMjdBUpdBK5oyCX3\ndcptg+yG1bRV10sY/HsQ20Ls0pusFMyy1ryfm4LLEHEAGJYNGV7AUMQcWTnM\no90E42x/jUpZsMBmqxJ1u3nEXwuDGD0pQBTGCRAZQSaWsjAhUXOApFx5l1YR\nvIBGSMcY9a9LIpME5PhojeRvY8x8m75ufVbt/EYzCaqU7sllvGyF4gp+gx3P\nIqq4LjlwPt67FTTKVvJ3CXZAxPGv+2UhlrALRS8CdqmQbaZ93S0iX92+lH8x\n5A+tTyxT3LFuWf6ayNLRdD8iXYqNS9dml6VO4vs5l0nGwi+uzCXphogHQ+vT\nALtSPNxl6yqBiVnPol4ongl6IGHofrzL8HmmwHqbAoo+ex9klp+l9Z4TMx2g\ntz6+pPfw3qyVFdVro36XBYA2+XPVb2SfdyKoGlCkVv/4Rs+d7FCn76QQisHX\nOli0EaovzQOTg6yNwbMlR0BcKetdJVhZp069cmBnOflrhKen8T2vtBYeYu97\nSn8r0I3eQW87WDy3XEzdpU/tedtYu3LKMc1mTQd/x3SXEchIDRX6LY/J7PCq\nZ9/6khX/ni7617EMgR98UqS/8Bjov/mIS5b+XCsyt6bJ5nBrVyQ//SHtAnSb\ntsbT\r\n=ANTi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.8639c2690.0","@material/theme":"6.0.0-canary.8639c2690.0","@material/animation":"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-indicator_6.0.0-canary.8639c2690.0_1583908382264_0.17807722681465332","host":"s3://npm-registry-packages"}},"6.0.0-canary.d5808057f.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.d5808057f.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"22629abd741b2948f0438d1b1e46437f991c34ba","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.d5808057f.0.tgz","fileCount":38,"integrity":"sha512-cDLQ1Iu4hQpONBPoeXZYjXEYPW0lACelZsNOSn8+7WqVZL9jb/Mu9IH5nnXQXq+t9OQu0rPN4GIWd8wS13psTA==","signatures":[{"sig":"MEUCIDEiVy9dw2naBRfsTj6dvqIJllE/fb32nOmPQAtbeeNHAiEA2stPJJcWodeclY96Zkhuu3qAryq0w5YGAra+xCStmD4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaRDwCRA9TVsSAnZWagAARG0QAJ9H2sRgQvEfIQGjFNCA\nvdNb2CVYQVI7iWyN90b1XnsWp1RxhVCF3XEXmY55vCpP0q5ibF8qYjf5xEYU\ngEu2RHNVVGUTXSIqG6BxuoDIl74v503KHgY+Ul/1bpEBk7gTX8cPLylMjO7m\nuw+xDdQSsBEeL0kux5aMiZYzoDMzIU5nUctluADCAlbf765/2fWVpj9g0u2b\nFqiORxdJmaDGOaMbnjDau+KPWjLKcRcnFpva3F4rtQWHx7MXvc55551G7vcK\nZO7gBQFf8VTeOmd3I19mp7bfDXpasGLMlSS6IdnZtyhbBJ6JwjaJ+pjQI7kL\nHAoTEhIcqf53qi5fAB57czXgJK6GywTCJBrgM3FILjZRbKxyHSyJdNLI94jh\nUGIIquZtGu2ue5bQzQ/+5ZNZ3OhuiWhrKFCH98cosDaV+pd41V+JhT0Xxpnh\nWYiXtc36j7cNqz1VpUdTcwtTO7grPntRkQ0m1Wa7tIqWXRcO5ojxyzGpfjke\nSZgFa9kmxmvI1utSBTy6pjdkd60Vd/VRm1ZBhiG/oeZdSZJRwxVyMtDfGlRO\nUmLQQKJJjL3vaRTROScGJBBkWpb0rGFR9pzFWuy75og282UO7DWPeKeYAFpM\nC2fKjKreIKpHeaUgzvyW95LlDZC/ue5KurzPAG8PPmni+Hkucf8WAy3fwS70\nahsG\r\n=0fhd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.d5808057f.0","@material/theme":"6.0.0-canary.d5808057f.0","@material/animation":"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-indicator_6.0.0-canary.d5808057f.0_1583943920305_0.19829524673325327","host":"s3://npm-registry-packages"}},"6.0.0-canary.b3f58203d.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.b3f58203d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"bcb9d99cf32318bd2b7915d438892b94079c7bfc","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.b3f58203d.0.tgz","fileCount":38,"integrity":"sha512-OwXa47bPGBqcZL56QgTXuR/OQsF9qFqOlwGec+Ro5k2RT/uOQuQ+xWo0PkwWPNhHM+LzWTA0i0ItIRC4QnbTSg==","signatures":[{"sig":"MEQCID5wzcedxZrGSlVhna10So+5MrFMdiyZ1ElrvUBI7z81AiAS+tWufVLqx5+23RtdyLI45J3ooBUb8olJOrTfOI6jDw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaT4RCRA9TVsSAnZWagAAURQP/insybMtErkxdgF0dAQ5\naslk2q5BACK9YDdbYLZE+Us33s+ywwvPXNf6OGnV7wJX9DrnVLjWnR6+waMp\nOD1m+Xlilkv3jF5F5iZ/7BzVzOMtpQt6a8WrHK6W2RLnIdbwcymDypwqfUXi\n8Y1Zm7agY5HNOZYO+cZywPRDNQI0RWfSrPBetc9/+Pz56WpWL7ue38HFcGnB\nDiBdQwoUrFmiP2rWr4yGsEAnUEadG7rDcpbQmpQggXsglMNiPw0lh+OzOBQK\nwTReKxKPijo4kdF0j9HCR7WtD3Zlclse0L8R9b4P6Pgsk/Z3MXA1pXVTdSnt\nfZc5dLc3Xul54bK/8dKQh7l+bRAsqdQIHS9ELpmbnalOD0QNJ09CzaYzwXly\n2Kjc9/MHaXrM85lrDQerQ+ggNAqSYahT1rZamKpc0qaBMwPXpWl0d7UJNK2k\nCgjgY5nCCNq3CObREO6RN96yCiPHRsmj5iiO/qzuMN+CKBXhLBdn/Z3rQiQ7\nvKgmnti+/mwWxJjVRr8bm2xVKHjMPbzXuQii/JwEAKjzvI6pBWU04LL1phJ2\nzlQ5Jm5T6XFqwEQoOcgQHeIbXWFJYBVwuLNmWIbdGngBAnOvf8hRJ16XC+Kg\nNbvbnaZuiOqNG27brFMlrZ94guQ0Aq1OeGmMYPLuM33eqIGiVtJqofrxEx8E\ngc+v\r\n=AKcb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.b3f58203d.0","@material/theme":"6.0.0-canary.b3f58203d.0","@material/animation":"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-indicator_6.0.0-canary.b3f58203d.0_1583955472775_0.6065664360451317","host":"s3://npm-registry-packages"}},"6.0.0-canary.bec065920.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.bec065920.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"90eeabca9b397b720b23fb2fae87c1ccdd8961b2","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.bec065920.0.tgz","fileCount":38,"integrity":"sha512-v56IKwwCvBockXrR5aWHVPWkijsaGeaQ4zn0cJh12gEQs7w0EAiCOrvv4FYHW9naH9fpfMiAnH7iJHLD+2GSQQ==","signatures":[{"sig":"MEYCIQCj4w+xWUa5QoHlZQGn9FZJ0WOZuNYiLjYZHk+/mSDcBgIhAK0B61VdYm6FHV/noYDAZQtmt7YliuUWz9fHAKGHfR+W","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaplyCRA9TVsSAnZWagAAi9YP/illjxL0OjYyDJyvzy7F\nbBJOuv5NdrY7gzx+MdicwzisFJAaHbHcwotbXRsj8Tof8lMk1q4Gc/bOKar1\nwYpALN4pL9HgmzF+klWtXzghfS+rCT0SB98jbA5x1c64JQI8wLMglmbnWFlJ\nbTOGYy80b34tggrFQJAQsXg1HTqTiL7M1UdNJ0YBmVBW2d6p2kVVuOnRFiBx\nCusnPub7iDA6/3W9sjqsnYPTYFPus39hdlf7XKu2EMShP96Un7sy5O6MvqPc\nZP2FIZla2hLjyqlqcB8cqNUaVrzPXYJwJy1Wgsk6VQkJVcjIqrb2zVrZA4kB\nkydBeXe3CnQ6i+V/jzxTDszv57pFZ6WWRbhV0SB7qiPFa6sc8Ezvs+khSY+i\no3ekVYCqKx2BzfMmEif+DdN4qcYTLGZT4ruTylcdToJCUF69xEM5bg89sHij\nxVQ7RG0qaxkvCMcYOBRP9jUVOhp+nEeMs/X6EX+9nXc7kc+sCZbBUYVlzOVk\nnRNLFWDPOiYZ9W0kxcbqaToEU9AJlLJBNh9PzDbo67Yxvd3LV+bi+yundkrL\ny1ppDgbqN6UGFemE/+D1j2qK7Ki1NSafR7V2KKg1qex0JD98DqGTbRRh7rGy\niXRqQvDm6NTKe6Qt4plVCydiS0pwDwO+2Do3nYHR5tLncbjMRoaEfP763Qyt\n33o4\r\n=eWp4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.bec065920.0","@material/theme":"6.0.0-canary.bec065920.0","@material/animation":"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-indicator_6.0.0-canary.bec065920.0_1584044401361_0.09728909006445385","host":"s3://npm-registry-packages"}},"6.0.0-canary.776291ef0.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.776291ef0.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"73484a913d23b34e54b4cc6f90854c136abf1cc5","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.776291ef0.0.tgz","fileCount":38,"integrity":"sha512-Aow0l1pfFtx8oElk0T7jc1Jlkaao7Ld6V32g1tBH5rQRZxXz38rZtypDSd1dYrSohD0L3Z6fF28cj9mgJxNhOA==","signatures":[{"sig":"MEYCIQDHiVtoXJ/2rrTTgrUaYGRBpSJdy7pXiJoKnxxSZvM1QwIhAN2UE+mHKc/S4yyRNjw6FkgfBGOf8j1nxfaFgFRcT9R4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecSMACRA9TVsSAnZWagAA7agQAKDZk93ldCAoaj9yA1I8\n+wTAw3sjhiYk+jJ8BvqnUBQ5WLFIqo/rOf0BH6eSIK7+BtwPYHU4q8UG8y5Z\nVJDszbmpcDiFldlaWNZDAAmZ8EZ3G1JSV5KUjORTuquGwgal+OLb/W/nyrmQ\nfFRIi4g8II7QzwHuOZ8LXstHCcJ0MEdCUmm9q/3Ti8qgOIVHXNIpSmwDiVHM\nNIDdz9PJGNU/mGervyX6aSaMuMb+/1eSKIEm7iyAbfElaeRTGNzV9a8yFa7L\nzpL9AtBongFS6+jElQg24w9IOJrszYdMXeEhq7xggyvvVhjGu92/vwmNXt4n\nz9zVMtTOlRSsW/GhobiIr9APuBXOTObvdC4i34NszokXGsYAzyk9rFP4foIX\nhnAMG46vX0cF4z8W3/u7Irc6cJYyzjIS36lM+qDmV85k5oxKLihbPqitvS9F\nEvfzx5qOC0d+8/RkCDVEDYFHnH0Of95qaFbYwwosgEkKTbKDEqJkYJcsXLJv\nhMJ4Jut0Z0MZXGkYnlUN8JGtQ5xSJ5n7ZIXywj4WrMMRJnHTEGK8QnUi/rhz\n08C+h07FvdhKZXTRxqrsRNyjr0H5sedmIUg17v1Jvmrn4rr64uqeK6j03WPK\nAPlijT4gF3rkkWONnr52Ohi1RGbLTi0FfJIQxAWv5ab5omp95r3BEvXeDXFQ\nfPb+\r\n=x17H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.776291ef0.0","@material/theme":"6.0.0-canary.776291ef0.0","@material/animation":"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-indicator_6.0.0-canary.776291ef0.0_1584472832390_0.34461409915756236","host":"s3://npm-registry-packages"}},"6.0.0-canary.ece19f3dd.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.ece19f3dd.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"fa33ab0f99225b998fcd11e5221831fb1f6ec38a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.ece19f3dd.0.tgz","fileCount":38,"integrity":"sha512-MSg2bDQcTwqp+5hqCe9bblzBtqat2ZZ3Bdvnc3SRzN4reEZxIwMgzRuCzx14GOGP9QPs/UkMP4RCsMYLE+1xZA==","signatures":[{"sig":"MEUCIDGNVfP/Pei6NuwaYED9Ri5S7N/jDkDG1+gwed49+TbxAiEAg+nJL69nR7PdOdjCLbYoDhygMBR1d7D/9XXNSqzts6c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecUihCRA9TVsSAnZWagAARSAP/iYTjFScg3i0cQWhHJ/0\nTQjQSxavm3GsR2gbZHD/41git63ZjIS1WOHCNml4HfEVkn6Z7uNjNFXd2KQJ\nzlOPQxTLRrLnChP7OqyRRIDmAburkXksz+isuVCcXN5DhqmebpLQzxYlk5uA\nYj/dQX5wZx5zHhcbTRG4wQNYAem94L9+JUyteD3wGrLlpPvKiFh0ctG617OM\noRU2wwz0JQs3wKRmIhbJc3L/atT+2lVywyrq46XIhejwUw0jzyOfTxUvvzCq\nPGwdtokbaguRTo062u+objqmCN8DR+Vrc2NOJO4p5DPdRhZP7ZRQlNmaEn4Y\nuYWCHynsvmW5kFiTFMjUS2m8OL2OuHu1/g1Ng4dThLs5tNbWPmcbwt8ZAmk3\ndGLRrKg1GYW+ggJyH6dsdC9/lcIJhVGgwFmBHNB2KfA0e6L8M+MnCx37wNRb\nd7Q3CfcOWfRFAFF0F6qy4j/nJ8NbHBw1NJsufoHgtEaLP8a7dSEa4rtDIO3k\nMI03Y+ZqOw7rOYbrz4Zj0sezTfb0HwUAA0BzOYoMFr+o6lssLBS2ZbEml94C\nQiAjbEedyPMTSfAvQR4dtorOZQMRKK92eyWLQbBR9ywWNv3H9dijyuU+TJxC\nRn93s95aq40CY4snVm2SJXjdp5lrX4IPhFKgpBzwrG0puVgEtB4pt4Ch5VcM\nfg9+\r\n=LdB3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.ece19f3dd.0","@material/theme":"6.0.0-canary.ece19f3dd.0","@material/animation":"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-indicator_6.0.0-canary.ece19f3dd.0_1584482465479_0.08819338529285381","host":"s3://npm-registry-packages"}},"6.0.0-canary.4dc45af6c.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.4dc45af6c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"af5a4b79241d4bc9166bf68063e33eaf44289998","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.4dc45af6c.0.tgz","fileCount":38,"integrity":"sha512-6j/sT+1IBRyCq0+cglkYEg8/EZbysbjUNBBN1OrD8QKTss6mwTaSwm/6N3/jCBmwWqGVo4b4LKYXOVixHsw/qw==","signatures":[{"sig":"MEYCIQDw4fwwK0nw+EFJanMJyXCHtb4G1tXOOYVPa9UiZaborQIhAMh4KmwftNO3tzw1fnXaQYlCHX1Vd29ExcZp1NI96428","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecX3CCRA9TVsSAnZWagAA2sgP/2HkV+ViVapzFrpSDZEg\n8TJFjL+jTOFWWxMWw7g9yEFXQujGlRFyqFQ62mS8qAOI3G1grrEjO2Ro0Mxu\n+A4J/D/QxjZOEdueAowrG4jo9eKFxud5LT0kIqJaTlS2zW7pxT6XFDoaRw9R\nkUO7uKPE+18SqSqtEhI7WcPkEMcEF9xUDKYY9xpCHZ+gu9X1/dQYRI6vxPwO\n5bBTtt77KIms/unSEYAeeztKKHDJS2e2BiaKuBfezbFU2YCXJWamiW3FRqUZ\n56tfhTPJmnaIl/4y3t4rguURKwuZSgXMlFBEl8R+/isvlOnHKfmsdW/nspxC\nMUtAzHXtVgys0wsrbvFuDH+nGztLWxaC4rJFpaMJvnhBbK4BH2yK77OBrCsI\nAbHHOWTRzhiHpG/d/wTgAVu1+cEzzPeeKrR2nrfcF+a3FWLELswvDzlHOEjW\nhSL5g/mcWjNrnVFD1FvvOG9Vuo7X6elAKEzPjE8IAZB6QCpWKMx+IknnDGMP\nYgRSmBlEgu5Yi0J95iun41zHhA+NYgt3S+H/8k5tXznhNO6sgKrN4FlFguqw\nOtCkrmKjkLA8IR9KlbUAHIkGcpqRvT7U6NVMk8gXdwo7WksvU6N9QQwSPaHR\nC0SLZ0S2gIfawBaDSlTFrD9C6m7lstJWiFpKvuutwWJ8RPPnzvkA7DqpeiIq\nwtOt\r\n=zRfR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.4dc45af6c.0","@material/theme":"6.0.0-canary.4dc45af6c.0","@material/animation":"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-indicator_6.0.0-canary.4dc45af6c.0_1584496065720_0.030771958166476487","host":"s3://npm-registry-packages"}},"6.0.0-canary.6b48781bf.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.6b48781bf.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"552815df671bbdc8e55a653d60c19bc4cf382e12","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.6b48781bf.0.tgz","fileCount":38,"integrity":"sha512-GLlgb8dWN7jCVSySWeygaV6L/s0B5elRRRQY/DEzU9hgWOULw9b+oAXTBLwK/jmsOh9zyzojGxAIWyQpQskdHQ==","signatures":[{"sig":"MEQCIACwRoudhM8lqFbmxJ5pX+wQLuA/VfSiZBT9gPBKXcRQAiB15/ynpUDmmy45cihOXjR74kabAKwStHf7g6icL1wNAQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecj+KCRA9TVsSAnZWagAA/b0P/0JRRzJYPrXhlKEwkBwY\nEmZteHnSXrXuT/CvKeRLD5zWM0zuedrA5MxJX+o9un0KJ41beD8AWqOqcvtO\najMnzDCoKUSmLLvI4hWk7iMNkJF4/n7lY0GWGilnC8e2KHLH09wknW9RMPpR\nKYlaXmj/LADLBa0VnhLJHI720hbvxO4Lw8IL4P9bl4I1qrDwwqfYqUppHg/C\nKXOc/6tpp91FdhcY6ohtY05JfjdYKca75rPXGtHrLlDM8yAxprwtM40GgXir\n18Fix9HanGW5RuccxQYfHDr3xDZIgH3Htu44RbqskMw+1xIOLsKLcla8woLs\nhXfdJs2d29pAYcpl/t/BNQJcxDoWpGcUqhbd6IKNXxJgi0U3fXq3yHwvcjJg\noHGSwVjcFl4NdXNCX9IorXMXPyZDw9WsSFzDQxMuXPZg1EdnMEijZuBCNT6W\nxE/bRP/y8nibTUdkFjfAeZKSCLOXSAk6v99lSZVCA/3GZ6KSfb5SCDs9CeXR\n5TizsdP0TESpC4Xy5ecUlLYJf4XL+MoW4pmP611v6K4Hsj3Ut64fMGRzjpNq\nzJH22vuAYLKQ7n1sWohVLqf42pVlLsYlNYlnn4UX7uJ9DqQ8AoeLGzUxgsbY\nkZ5qbK1cYM5yVSdIVhiZ+iYQ3wVbQtr9d6FACejTa8z5fLuWqAU7oHMHYDZk\niDO6\r\n=oiT1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.6b48781bf.0","@material/theme":"6.0.0-canary.6b48781bf.0","@material/animation":"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-indicator_6.0.0-canary.6b48781bf.0_1584545673770_0.9618070175912612","host":"s3://npm-registry-packages"}},"6.0.0-canary.a88c8e4dc.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.a88c8e4dc.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"a516967777e78c211cef182f3fd812ab183278db","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.a88c8e4dc.0.tgz","fileCount":38,"integrity":"sha512-c4E9TFGujXfuVLqS8dLlK3yJLvy7mcqUw6QVFzAK/AyVNLavC3L+alcuW8WXZJYPFBw9S4DzWuT0uhbWQZ/xvg==","signatures":[{"sig":"MEYCIQD+haj+qw5IPIJwGSEvDbTEsPXgCdNEkmp8X+0D1dONVwIhAKvdZ3LzOpGgOBf75zdH9yfkw4MpoXJj7F9AKuHjpSVT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec61vCRA9TVsSAnZWagAAR2oP/1uqEsApzfY51Kq63+RB\nNR3XlOV1hx4sEj9UFcoYcQl3M3LrFR260m9IUraR+51aOzanUhI5zApPIWnt\nQugvPkwphJKfmYqc2O1dk8RKI90twf+AEvHY3yPmS2ajPfTMwEtoCRdRPOG2\nZSCbah7Jz055K7JlKg7hUXh5z5fhSCJt28qzwICOCjUwofuA1KO7u/6dp0B8\nMdJ8PaAVps8nZyNDMbi/7nkaULrBxlPys9zSnjIplloyyLadj5Ow0eFppvvM\ngcfhvS2OOXCGQ3HcXNpOD1tDm/xI3I2RArUyoYzH767//ftdCPAPAKLa2MSE\ngxri6+Fx8vEPs1i+ZCfoWmM1ZTs35g+2wWpRE+eaZpX7isQXkAafHT5N0nn5\nvq0lrJj6pLqCfHQxQYCchk28C2rzn87tH7u4oLYwsiucSQCuYwuiPRRs17cS\nxWW9FzVjSkMcLMQtT/cskyVE8YKslUfH/4p3oULTMjA80cRa6RkyLtRPP9S4\nGhK5qow1nfIcVpL0wkj4xt4VOhVXFYW151uk7qaC23cIMuNLXAPv83YjwO1G\nQkqvRTUWyweadZy9kL1RQWADPyt3mbUgeFhGcQB8Y6LEOBZ//OLRV+Dx67iA\nS3tV7eQlWhVU/5gD03T2Sfhn/RwvSu66HyYoSBHnbu7lOKeJgC5PYIb7/1lC\nh2uU\r\n=z7ux\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.a88c8e4dc.0","@material/theme":"6.0.0-canary.a88c8e4dc.0","@material/animation":"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-indicator_6.0.0-canary.a88c8e4dc.0_1584639342509_0.7788488542558212","host":"s3://npm-registry-packages"}},"6.0.0-canary.cafe18860.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.cafe18860.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"b2990acbe6f364e9f27f7ba6f6fd891f2c11c18f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.cafe18860.0.tgz","fileCount":38,"integrity":"sha512-SH2AjqJQkabPGOCqaUA8Vohi6AxeVCAisciwD224FHrMmc7IpF5uMLjYQRQcPlWC9R7/FFgUM0VkGsDTXxzdKA==","signatures":[{"sig":"MEYCIQDJrPpORkBu5gci4TeT6bPONohIhbMjy4XamfgVSJm9GQIhAPCj0aG5uS/qDGpzbsLIJFehsbmoQ19zrF5WgzPmO48r","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedNjeCRA9TVsSAnZWagAAU7kQAJHBUSIYJcKX1FbUFMd5\nxpKW3D9/nuD815fLJkeS8O45zbI3bSqUPTAQekbOPSadIx7Ymn8D1VhZadWj\nBkCd3I8DTGQv9z2tY5oQC62bwlkGIHIkmGfq/OttdZUJv24g/+2yGfBB6pKY\nMJPkqZJuNv+yDgy298jKbLXEZZdBem7lKJ+nxdLJd+PGt59ZzhQDJnCU61yD\nl0GoCVhgve7PXW+3UhBAzO97GGTyRmm0eaovvEyDsGgi1az4mZnMjP5t4yQ+\nfTVqFqfGK16YkNrnTLMfIaq+2+DTJoEia4o8lVjj84HiD3YgH9jWey4E1JIs\nRIhRWIMs37Ew3DRaEq1Pwnthjs9WrN8zZAy2n4b/aVGty1W96fX3pMaDBYQV\nyr23z0LofSXkVTfIdIXQJzKT7DhH8VXHLI7gbKdlPOlXxf7IdM1ZuVTnrnbi\nIO6DNdiWSpFzuWkcURxetAzOTrmW+G2h/nV6LDz+5p4FdXshTUmINa9qbHog\nCVNmj4d7Qtpks5lH91yXyXUvQXHmOhZeznKB8PE12QyA2ZNbClxKvmE2ptCX\nnJElSq+1e96GG+F8JZCIpEDRrVR4mtGzH76Ip88ZoVAthcKLGMUZkfRv6YCM\nLVVlJwu+EHdWYJZagvd2lRDzovZ5H6nihtpar1/njSAXmRc4ZoJYLD+CXvGm\nFngi\r\n=U4CP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.cafe18860.0","@material/theme":"6.0.0-canary.cafe18860.0","@material/animation":"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-indicator_6.0.0-canary.cafe18860.0_1584715998485_0.8735213555200378","host":"s3://npm-registry-packages"}},"6.0.0-canary.35a32aaea.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.35a32aaea.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"33f1dc03447430d7302429ba3ebdfa535724e6d4","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.35a32aaea.0.tgz","fileCount":38,"integrity":"sha512-oMkFm72Hn6aHqvhD/+dN/qOvaUqr7StK+PbseesRi2SwENZyH4lELNsO6LCnc95eCcPDfSBX5AAYmtWeuc8IVQ==","signatures":[{"sig":"MEUCIF55YgzaA0z0VlGNA4gUo5o69lnJIrZd2tbyZsRZpYqCAiEA7uKHZKRK4C6qqeeytMyNJ51rwLlY2sB9L5BqOM2Ev8s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedSCLCRA9TVsSAnZWagAA87MQAJCytG/ruaibA1+mszEQ\nE3LO90l1etTaoUEeeJYhWqAmnrnrKvNH46S0usNeWDhhX41B34/GYwMz9aM/\nIqaVyQZrzuiRnK6K8z9gDaBh68+bCNPASicC7++pkiobk3MaLkNOtFn7Qlnv\n1aqQBWHUdO20UZV4I10/o30AhaV530H7klcsQy/g+cwVNBdRffmt8JesG1Lf\nActFDkb5HxN8Jo8Wktxv0viGJ1qi4ZBC+0WSyvfzpIS4ty+RodGDQitT64Sg\nu2Qnc7a7u0VxgiDu6hLJLNcfsE1kfRfX94IQ9A90FbTu/c56mKMmUKATLI/C\nfQV8+yO6nVGM4JqBDnc6iGch8b5YGTUjOjTO/Ua2a8egrz7Xbur1leG70YE1\nLGZqEPOtzeDIZtlBqR2l3cl0m6Yb90D72vzntszKbUKW9y/5rABM7KY4C29B\nbY6KC5AiKJbVeFhrRPIA6xHii2rTEQJ0wu/QO5SFIWjn/cJgevn35yJ60iif\nWFpBOJGb6IjAiJFxwqyrASykAQhf8x3UlzoCGhmB+bME1O9yoSwJQ5pLxR8R\npypkrVjx0Pw+f39FhSCcsygppZj2/wq7yDZua7DDyWnuZiy/+UciUJc7+oCh\n9AxN+NXxaQJ2p4OcOfyPuYqjAVfMaTPKYaYJIn/sdbx9uFlLSb+MEYjod2Fn\nJjyC\r\n=/Scs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.35a32aaea.0","@material/theme":"6.0.0-canary.35a32aaea.0","@material/animation":"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-indicator_6.0.0-canary.35a32aaea.0_1584734347164_0.9322400377689255","host":"s3://npm-registry-packages"}},"6.0.0-canary.e75deb854.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.e75deb854.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"07af73b0a4824891d6b2aacf2fd2dbbe1cd7c336","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.e75deb854.0.tgz","fileCount":38,"integrity":"sha512-hJ6/7hLa8CM8lbLd7aREPs8epvkh764Fq/4Rt/vmX16twRLOQr4SKuUg4CZ1XiEnA7/h9Xz8JLBL41GM0c8X4w==","signatures":[{"sig":"MEUCIQCEGAv9IU21JxmuKbcLtHGiZSxNTSXAz8A/TxTsl75KQQIgX2UqiVlliC2RNCtWaUt5dQ1QgMfPWOv4k8JNmXYqoMU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedUBiCRA9TVsSAnZWagAAaUAQAJin0miAOVdLevPPyrvh\nEeRPPpzCRUkPESlcQUXq/NPhLQpnxWv3aU7SZpx+dj4B6DJnClmbOmJjX72F\npDyAooBmJ/2V74wodWSvW4c7QDS9LezXYai+uWPp2pdCJSkO9fa9sR6zuYhb\nhfuv0ToNipOmhUBMGUmrXWWDNJEoG9r+R1SiRLDgT9N9FCzYztgI/UrYokf9\n2Jap80PV/bsFZXPTfw3iD7b43iR6PNzUfwQ3jDq6sMFZ72iBT8BdMfp9PVmz\nuKqTgK236ORNKMYi4QUbTktoqKFh4juce8GB4IFM78hKJYdLdh4sl5YnjkhO\npFTlLTakLwcUEYL3hDXS0KiICJeqeRXToQCmZeXTROYHpH/ypBxsgu5RKGjI\npZGatZ/9sRDe1eSCX/ycB/zL8ronZuWLj/WVHGc+IkYJB0k3dkvOy+fRXWhp\n1xTSZvGmgIwUH70TyznVIgDg7+/3jfk69C8mnIkORjKKhLa3MXVyy9j8+A8d\nbNXXByywfjLRfbGjaNVbrUce2MTQjhzH2dYjJCPH5coz/VhwMa1MmWP6F53A\n7dZmOFpJc9DAwGBEUwGQwTZ74E6wdHuOeF+SxDbp3uUT5JP3OFPq6sBiaAN5\nsI8RNq/aSXc/GqK9bFYq8D3FX/uv69t/9xvYE2iwu8dff49dARwIv2o/00k2\nvJKF\r\n=Wi4/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.e75deb854.0","@material/theme":"6.0.0-canary.e75deb854.0","@material/animation":"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-indicator_6.0.0-canary.e75deb854.0_1584742498508_0.06078977022746379","host":"s3://npm-registry-packages"}},"6.0.0-canary.2cc6966f6.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.2cc6966f6.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"5feaa208e2044994c15109b1e73bde5b2500a93e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.2cc6966f6.0.tgz","fileCount":38,"integrity":"sha512-P/XrZn3so8yu4aqrSa2VCx4MK+gd05MzmYVJm7c7xEQLbvO8zaXzPL9bhhOBoWKyg5mQDts9rRMBMC8zI56gYA==","signatures":[{"sig":"MEQCIG/KHWL+sR2k6+YYmiBvlciOBM1uoWd7lc4FFm9XF1cyAiAN/G1Ud/Izmq0Jxay79q0PR+ASAulu2veJVmzcClXWWQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeelTFCRA9TVsSAnZWagAAiF4QAKPJCKm9lMQlhiNgbd2X\neGAmRRXJmiX/P6QnLiDV58kYsR9J2VevrtMgSwTjQuQJL8ekzBInkZ8oJ4Cg\nsepzHd5IImkc1e8DVfRxAvAUAjDGL1vu5S6Zs7Ca/Z99qON/LgWePjY850OT\nkvYz3WTZgCSpU47RDJbHfZ53q9veUG9OQQIovio0CcmiGeqGnQ7XPYyvWZj/\nyzpgfu2Fnrdmpqu/aQXwLJ4ihlvHty1o/OIWi48hrVU/HnbYJHz3wiyt6k7b\naTqwI7+o+xhOsmj5izvsF0fixymwdecnqUEdhedJNYE1r+pkfzIE8gywTv/b\nEMWzLdcTrmKJ1OtHVR1FAWsrrjrTfEnuqozF5U6ddfh4z/GdHyvURF1XJ1Ih\n4aYiT6f0UVoKCGP19O+TQxJF22RYK/CUlwEPQIYeinQfh04WaFnyZQktOTy2\nVHXzopaEUwYNnbgTLCESp90hbbRSDQewmjKFSmi0wW5y61zTXn6n0ixJYtd5\nQpVqVwZ9JobRbvHhy14QWPn9FNL+Vau0TtQZXN7q0fZV0N3onw0Gr6Gvi9QM\nCnrNiTM53s7LrDVOVuUQ+zTYnTjUusUQK7bR9mL+REyUBBWLNezgEzYWmbqj\nmieRj1Da2w7VibmVBzYaY+iDWtNWyPLjhb/aoWE9Du9nnvoWMt3lbO76Qq4h\nZh69\r\n=QlfN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.2cc6966f6.0","@material/theme":"6.0.0-canary.2cc6966f6.0","@material/animation":"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-indicator_6.0.0-canary.2cc6966f6.0_1585075397079_0.9066972724349267","host":"s3://npm-registry-packages"}},"6.0.0-canary.8707953b6.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.8707953b6.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"5b9126cd89edc16941e529d6a588db60f728c915","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.8707953b6.0.tgz","fileCount":38,"integrity":"sha512-sbjCs2S4caxfgk3HcqHNiTJgRGLttIwmbvyMB1tAVZzTFiSGSGp+/jZzJBDomwWXy+pqT+sMZxtrA6dqs3EeTg==","signatures":[{"sig":"MEYCIQCvr1I6aSv6qzo1rMEx8HlLmVKgg9/kApencoIT2Iem7QIhAJUBpEXWKIJWkQpgXQLN27F+LL6+TZIlp/aR+aSRTExl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeelWfCRA9TVsSAnZWagAAjWsP/Rex92m6t1x71n7IbaVf\nRXl3LjdmdrGRRavmlaThl723cI+DCXZLmoDKzYLvdQ9xUYi/ooNw26SZfL3a\ngi8fQHv9GnajBzIkl/MR5oXD2YmB5XawGE/vNdNNq2kSFqBH3kCVN4Gxb5O8\nf1lphH6zY1CwzuHbWZ6NQI5I8HgPHXK9fwlfXpmd7klS1RqbopAoJaepbexP\nFt61bZGsg9rgtUKl1Et6rKFKBSEBu1vs1wpDp2XsitZNpk45Oj9GlAq53Tg8\nK1meTJiYEw6v0x+7cFioq0rUcdFTiBwtqSLs1CUCxWB/9ZB5P6/4cNGT4ezv\ngJCpbe5N8tqdmFUCupL1TxFhDUiMf+hht4DP87cvnY8fsMFmYpnZYbI6DG94\nQT9yFYtY5Hprk34TVAmRUzCbi3VVB43J/GXDOiKM/Od569fUFZV+6/ttpSZ+\n8iS1tuNA5fGHP+Hg6ys9IRpurCMqJJyIC1Q1CIWVQYroI59KKduxhMIsGGRu\nhbxqRVY/f/BKwXvdZgH+3r2me7wtcVL+ALiR8d7ciVoj0Xcldx3ILnPJxJnH\nfm03Fa+sVZsRLajuqz38SqxGU23MkJS80t1ba4acJM+4szEbjGNcnUJujjjL\nP779eEzo/rA0dM6++KO544WXn/jBkou41CLvT5I/0vFBjVchQSJixBPChG4y\nteOk\r\n=iEqB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.8707953b6.0","@material/theme":"6.0.0-canary.8707953b6.0","@material/animation":"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-indicator_6.0.0-canary.8707953b6.0_1585075614912_0.8988795065934518","host":"s3://npm-registry-packages"}},"6.0.0-canary.10af6cf39.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.10af6cf39.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"6c2b466a2edef666402ea0d912ef52f99fe435ee","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.10af6cf39.0.tgz","fileCount":38,"integrity":"sha512-UcJGv/+2JNWfvUCAEPwes6S+hT6xLsYY0SO5xFc3XKQtRVOpQeBLFX4/yZuCG5Gvmk+Y3vJb8WsIymoKsxr1NQ==","signatures":[{"sig":"MEYCIQDux1U+m7gdlKypRpzNnNsYACDMfDb13MHYgZRYBtUuFQIhALX9JY1EitiyznBu1dlgEoZVhUUX9s77+Ia6miOlERWC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJee6BmCRA9TVsSAnZWagAAIOMP/2aawMSau/zjCnAyaf0K\nS+f7jTuwjjn/1C/jr8s9TXMHHzABN6DsWiV47XvqVMBrhmS7llKeJopYD/6y\nrgK8BLw/hTX7qCf5C41iOKm7boxO/7BAwR8tgPIdIzjEnew9ZNN+9tZ/IXyD\nZ+OAOkVhXCbYqjAa6MvSP/it+XShpgZiHcI0NX+hZRdQ2mimc1SKuKEYPrtg\nAuS05xM+zYDJNK0iQ2OJGm03qM3NleXqcpwxLQz2+qkoMQisdx5sqk7s4Gsp\nNKOrApE+Z01e7LdqHrb8HOTe+eUb3/0G6QAXnUAqJHYp+vCoZtoU0EdoSdQt\nxLXQiQLvKauqj1koo4rgU+RXV1luHNqKEpuv+CiDdcMx+tBJMSpKP+ehMy92\nFMYmGitl087PEFTEzs/EIrPLV20Cn0EIBMOqAnolhRUC4ur19uLkM2MblPkA\nflvEH2Al6W/a96DsiFsF5juYTf9tljCY7cfzXokCYSncSIITntpH+KRJ3fmI\nBY7K2KRCObaBbzj1mmZdIVv+RdRivPKvhO81nD8AuPSfGrqBkMlLItHKrSQW\nvh1NL2gd3Vz8qbOLBd4GH5LurHHFMqfqCZqrQikqG63CTJzAp8C6NxQXztN9\noYvSfiB7s1fnbeaierRPjKwixMWhiDpyl4863ZYw1xAQZWbeCMOeEhECJeYm\nxKpH\r\n=cieY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.10af6cf39.0","@material/theme":"6.0.0-canary.10af6cf39.0","@material/animation":"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-indicator_6.0.0-canary.10af6cf39.0_1585160294346_0.01364764077378644","host":"s3://npm-registry-packages"}},"6.0.0-canary.7d8f9c8d7.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.7d8f9c8d7.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"329764c60e4da31805b0969b6ecc0f6ed711645d","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.7d8f9c8d7.0.tgz","fileCount":38,"integrity":"sha512-p8d+El02TjT8Q00tTZcopfnu1bXcr/nlBeOUZ3qDGL5FKr+Rgd3kcp1kj3e+7pbgjqWAL0zjC8C8U4NUmbbY9w==","signatures":[{"sig":"MEQCIEhcmM3mUo7DlIATTp82Adkmmv6WD99tVbUKry53cc+NAiBXNRYOdQxc3RMSldZ19YzfQOfD2CxUFnzGjmMw68Yhyg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefkBBCRA9TVsSAnZWagAA0v8P/0srY0OADF63vp9HK1cN\nFLyZ9ovqh/+jhzIWteiEBYMsjnGCkLpFHcg2BvFtlc/zWtS6USdG+WQzl3tW\nC7yso5VwCGGbswHQerHYgdtKIlzYMOIdBISidmBs/SF7zOiMSBdQwnVkKVcM\nbiNmJOcajvx+iaB64KchuaqnIaowOCPZw6f98yeLH3PF15hiSQ8NprV9l6lU\nJjR8q2D+NV5T57WytQh4H5O67POO7pSyOgj3aIEC5fwUTGWa0cKvrk7DAO5v\nkY25OcyEmchUvrvNm0SjWFzBngdTxwcpDjwC2cLGgkk/W1kyTl9WJHNwPZJt\nmpinpVtqxA1D4Afz6j5eihpVIMfiJ6jZez1IR06pg7LuAKutUtuxpbrDDDra\nvqIZWPyt/tOgC4ZfLFOHzvw6VYhHftnq9d4I4s0ODPfqlCNLnqFVeOsVw/jl\nAv+dmXtWCjGZ4172whBmEbbA1g8mXPwBvDHYLrdzglc0qbinuW52Maf7jyOL\njoBMsoZ2A5uYZcGyZGydOZZWBDmRXH0sOqr8X0g0MKGxhdANeuY0Yu+T89cJ\nR+o4YNPCDRl0RE4lpCfdJ9eIIC4/uZZBS0Aw1Ph/g/XLj8Qj710f+FqFg/S3\nHLrgkOnncESXqawh6LTEA5FXSJdTFav8iugEPGF95AVYb3FCNMI/tqLSwkra\nn4E5\r\n=6DlC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.7d8f9c8d7.0","@material/theme":"6.0.0-canary.7d8f9c8d7.0","@material/animation":"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-indicator_6.0.0-canary.7d8f9c8d7.0_1585332288745_0.8063338653283341","host":"s3://npm-registry-packages"}},"6.0.0-canary.d6315efe2.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.d6315efe2.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"385d8b7d2399dcd3249943e90b2a51a010a2d099","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.d6315efe2.0.tgz","fileCount":38,"integrity":"sha512-rFE6R6A9SlBTDEgrIXQW5EbPNMt1cis26uNQ/mxvVwvPx1nr5vbBef6170/ZlLXlJhcXhGw9C7zydeWlwLolow==","signatures":[{"sig":"MEQCIH6PZBBM/cXpWehJdpps/60GluVKL6aSza29OpHxaJsBAiBCpYRxnLnEFdDOzWJaE3iUACCcYsIPlPsIjlUgNbQOaw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeflpjCRA9TVsSAnZWagAACZsP/2pA8udzK5CNKRSygw33\ncp7erCX6yigi9fbHoNe+rknuwXCkuG1x4sZ7IAXEJAAy3ymMwxRi1KvwGopn\nltJQn+DG4sV1EusT0jX0LpbXkJVqtjHO5lgYa2n90mD97RKbY4gm7NqRLRWL\nMKGi1a0OJcVe+7VE+N0bVxNObagLECZHz924HOFp4hcIz+JFDC/rhbLs4Wbp\ni32hm5aXjfvrIqeneFuJBqmJRmSDMavQd3bJVzqlrFFbNKd3g4kUEFDrApKm\nKrD6zFw1XloDNLvLbOMjLwtyOIHJwjGwDW0lWlgccqgmJP57MlM4J6www0lu\nEI/FIGG5I3oWEHE22hZmHxb5EQf+FJAzw57EPMp6AGt9yKikI6uqrFL9nhfC\nEq26Qy88cLrm0K+rPl/xk4SxnqJx1F7fLvUdRpS9mt2hXZfu5l2biOPWAfIz\nzTerTiEcP8N1tB4MrnF0OszvEcTEGuy0EQgSMrdRepy/QniYEEloERz31IWY\n7q7ftFeYE54k5+PZjW4Y3SfQdnY0c70hhqGy7j/7cGrW5WRTlrXmxmsfjQK0\nd4OZpNmyqOOEf/QUvI/jdOkc8xWH0sSki5YrkP8aeNvjDgXIrClAaIEMg1ck\nF4IdNFFjU5jn7A5Ve7pVsUWcu9iLQ6Z/dhrsoID3qdZtqhHtGaEbuK9kYstO\nw1Ek\r\n=wi7p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.d6315efe2.0","@material/theme":"6.0.0-canary.d6315efe2.0","@material/animation":"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-indicator_6.0.0-canary.d6315efe2.0_1585338979168_0.7330948122980685","host":"s3://npm-registry-packages"}},"6.0.0-canary.a3016368d.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.a3016368d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"72fe76cb1a711ac80e07ba3fd6ae162f02d3e6c1","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.a3016368d.0.tgz","fileCount":38,"integrity":"sha512-FOnK5G5Gx4oYOs6BXXc8L0NLFDGpijs/Mh3YIgG/XkHMemKiGgqzdC9yaTUoGCf74bjw18Y+t3GL8ckBV039pQ==","signatures":[{"sig":"MEUCIQDc709axQ47PzghD1e4Gf7CS+DsPCLQh7cEGQTHExB6rQIgVbYWFTi6d4N5qQP8zoZeo/RVLZWjV2HfRF73DvpFBpY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefm3cCRA9TVsSAnZWagAAOzYP/3UTXzX9Fi7eNRHpzcnz\n0b6ignMIjun9IEVH4/iscj1Bl54VQbeHZTtHjL64rj0VX/4uBUV+mGZlQAlq\njjoxB/ZuYasQU4PawdwUaHZDWIYRuixMkNCis5qt8q5eLUrIrYjlQ4gat8ob\nxbxbSdVHdSr+0GKnBwJQKakEen69RPuY/UrOT+O6eDxGLlVb+ZGtyLKCkH9r\nc0gOp16RhtyoL9G9/dAHvgjv3qGAX7PuYZxLOg2QmCWqZsORdW/nPrjfbGA/\nLXnmizvrvKQrqhFNauE2ODrNI8RKMYOPdgH+GTdhG7KP1lK8HIctjU+0zPjB\nkeXM/w1vtY9Wt7g+cKy0Et1XqnyR30G6t0WmoHzpw7EtejjU5t1s6u3yjzc+\nKOnp32gu8QpXXcHoXhDRQdOmueEUc8VcIFWqNbnvO4MA15wcY6+dW1IaIK0F\nFMCzqQvf5Byj5kLMrDn85o8fqEst3OIxtsL95huLh6ZgJ8AFXaXZjRkr52cJ\nl3er3IQXGdNivX/CbBKNUJ+ly65bYPxZZHA/J62vb/VJi9hjlDMW6T4Ja4ls\nCg1JMhFFkZEc4PoM1a/7i4JwtCdz9Sm78Mdg54r+pkhgao915e3kv/Pn3EDR\nXri4KK8+hJAT7JvSpcnjLVmxWcyqbZLQTkCo8aFsAk7rVJs7voQIz2KbVLhW\nGK2M\r\n=26dL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.a3016368d.0","@material/theme":"6.0.0-canary.a3016368d.0","@material/animation":"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-indicator_6.0.0-canary.a3016368d.0_1585343964377_0.5460906000125014","host":"s3://npm-registry-packages"}},"6.0.0-canary.4b45b6620.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.4b45b6620.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"20a5d1ad6a30420cd8a0758b5aa9c41b5d6f76d1","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.4b45b6620.0.tgz","fileCount":38,"integrity":"sha512-NPMUrOrqKMqDhLxjqE6WfLygEP/HlJM2TFNNwguLhJlkTlM+nqj6q45JC3PD5MDfCDYKnoDQVGDS7gTWT+e9fg==","signatures":[{"sig":"MEQCIE/jDUiJCoDYd7XGU5KAx9aMxd1qEJw0BwTA0M531apgAiBmeYbpYETooZU0/b7hWKsRl/1gILY/txlHXAvVjYMV0A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg2gWCRA9TVsSAnZWagAAyxIP/i7XeAfvGFd7Kx0piFyi\ntWmBj7R8OSuHS9m2uxVolWeuBIE5IuQf5OwFNSLnP4ccv4OWxX1GDaAu3vFW\nBCb2E+VcL92HVqD9iBSx59WfWJU38dVheG7NoFwM2CocvX9uCaBz4TQK+LvD\nd3UzCoOAtRLB1Xmvis0vB12Pd2BNhGnmaKnZG2X0TnHlSev8Nve9jCctjpOI\nRdTh9+5M8M5BVVtT/+AkuXLv+Q0EkJEvvtlnjy4vico6nCvdD7mF9/061evr\nFuTgJC15W1RaQ+qsQKXGaj6kh2gn1QZ/s3MXt6DIPqrBytDxdGeW7Qgg0iMG\nXU+0fu9I6FPBvHUD7mVCNu6rIKntM0btUt9klZFf1sgUulZ0icb82rIzEWJQ\n5PEjaYPuvnSCA5qybjimtuXygX8wKLpzjtPS9qgo9IgMMj7RHkwcVdj+hftH\nkJOByNvhG3Fjl6gjz0tvjflSx0CygLmq5yeYkVS7fhasP20n9gHnFPhWc5aN\nsVPuZ7fr/9zsGRCZacR5lo9wo//6Z2OokDj2bHDv8r9Jj9HUksB5svbRBHdX\nbO9Q8+l6pH3fjqhOWfX0X03JD6ujtNckiQmEBoi7hyiqVmxYbBxGQg3NpMbt\neSZakLr+AptzHaDQUjseV960lhxZmLz7QljHk0Nc+r0gOyPDW46fHIQktRg3\nl7Kz\r\n=j2GR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.4b45b6620.0","@material/theme":"6.0.0-canary.4b45b6620.0","@material/animation":"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-indicator_6.0.0-canary.4b45b6620.0_1585670165984_0.13526386082578523","host":"s3://npm-registry-packages"}},"6.0.0-canary.e84b9c8.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.e84b9c8.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"17a67bafdf21f29abf24f4390cb4aa8779607cdf","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.e84b9c8.0.tgz","fileCount":38,"integrity":"sha512-RRB/qVQOqjYGRF086W7N/nTuLyXYV0Bz6SUauH1Jp3oWvnBOqEhkxhV7Oo0FoH4rC25vtbqPNjrCciT3R9JNrQ==","signatures":[{"sig":"MEQCIEGprpi2o+aivk0DrBD32eEfTi6OxvYOnk3sz4QsMbdLAiByKBPhat6caDgp1Q4ojiNiL1LKeQwTSzrVwltfCk2Psw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168084,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehMeVCRA9TVsSAnZWagAA9EEP/jlMDJF4MRZ6ozNtyp25\n2agvvzlycl04CwIAEqTwxyrkDU7umgAv4kBqZw7bmZxMB5IMDOvC7B1vDBWS\n/4Td0v0O7B/NAUoR4A+HrD4yaJTRMfjQ0wv/AH6j2L3YiZLPuRLb0hUrRTMf\nF0g3uHh8GU7OXTi8uDL6tC04tvrcIk16MCC6TBaA7J9GH7L3jXqjEI8AJHFN\naGUpOXAZSgdf6Ow8r1TBR1GKygMmHrqgCdw719636JwF+tD3TPE9z9KLmZ8/\n4im02qImYHZCBDWOPwMdnu51BCmGyF5oHUPpzi980gn0HTpKpwT0tjOSaiJ/\nQbCNtOXFjbusSTUzRvMFKt+MlaUt7HQfIrZipq6xxxJF988oMkCERyQBB/V2\nZqtoE/l4Yn+zTNcieSDMMEpzCpk2J0Gj2i0nW//8/md+blRavPu1Q6bpAUYd\nbVsuwtf2uQNXwY7VyznhoXvqrcOaK5FkFXExWWQarGVcdd5ZX78U950+1q62\nBRoux6uqy/BKVvL1ZS3a5qGwlvAzvFDCFFQSq9qOpJmGMw+abC8lGk8QkMYn\nWqvQ7DS2HbPcfw4U8qNwEkhpRbIR2IK3kd4MbvNp9YeSqpmZPKQfFBjVwqXU\nJLRJKonFs8Hl1UjB5fiOMyRdMWaPCL8hTI0DRFwWwKmuIAPD9hMmeH76cAxN\neB+B\r\n=ZBQ2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.e84b9c8.0","@material/theme":"6.0.0-canary.e84b9c8.0","@material/animation":"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-indicator_6.0.0-canary.e84b9c8.0_1585760148803_0.6602659975143765","host":"s3://npm-registry-packages"}},"6.0.0-canary.e33c49e.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.e33c49e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"417665f6f0f73f4b871a293c342d8018b2bf1abb","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.e33c49e.0.tgz","fileCount":38,"integrity":"sha512-IutfVeDjpWtkXHDgP47KzMVKlJJbchCZ02vfAQWbFdwfsuRqc0dH/NYwTKN/7crhrVBTSkNUqdUfyzlYt4waHQ==","signatures":[{"sig":"MEYCIQCZUsUiwgAAAYW8w59fmWSAbFNvqXLRv09Im+moXvxZRAIhAKBgVPoAAClQ6R/vRf/olmdXKzttyz0rd2/ysYagmmBD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehS0tCRA9TVsSAnZWagAAaiMP/2W50UbSJ9RYq75BWpJk\nySxpCqOddoV+F3MIeQMZ9fM+zXgSGKeNGbC8g+UXUErDyzHb6+ZIrP5XyWRR\nkU6b5N1njIxMT2qw2Ian5JeuX02wDeXML7P2hWjVZs9DCcKShhB/zhW+qBTS\nXI3mKm2vPzOwDgTQg56R90ZbM4WkKPlisdcnj1i+LzeI70b3Z7euFrlQMVcj\nkh3zuND7Wv/ZN3yaqPcO7TUYI6jLeVa8osiSGnxbuoxhfp3S4BCEov82xe8N\n6ite8oq0C3Su/CQfH1dS/a9y2/Wqr4Q0/5wNdL03f+aFOZq8CpQcWjDXdEPk\nynoa/xjEhSPbDduEcZGR4ZcIu+kXpP5k4EbkFvbA7QZt3PCzs476iXJzbmVz\nUijb35fnqqOVDCE4VPknv+uMaGe7EiNaIyX1txhnVUaqMAPV6E4Ehwu9y2Av\n5bTNkQqK1taKrZ5/MCeEsY3y8ofCOyf5/V7px++n8xguL7UtUY2x8nSDzC5j\ngFNaKxFyG46uZc8l4Bo0qgBCKSBNwUEYtTL81v59SSa4hVGqrh87su1ERRHK\nyLTJ2C4sxjm9gd0IE2xJHwDv7CbzBKZnKNiOAOQEH/7EC/LRlwA5Siw/W1Zm\ntUUdJ9aQaxpDKDWHrJVQl+8ntdYSG9ZJYK29ETEQkhw9vh3Kzv/lJn4e4ARI\nZYLv\r\n=LEMM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.e33c49e.0","@material/theme":"6.0.0-canary.e33c49e.0","@material/animation":"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-indicator_6.0.0-canary.e33c49e.0_1585786156670_0.32006148134677614","host":"s3://npm-registry-packages"}},"6.0.0-canary.f1f8e60.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.f1f8e60.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"f2246af0b2cdfc3b7422358c5f189bdbb5b9ce5d","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.f1f8e60.0.tgz","fileCount":38,"integrity":"sha512-sfo01rq7ItFxqRmSujyXBDnxnRSuwq21+8uM0mCHbhwMHSj1PbjxRV1LPdcLnVBZKTM3pcsJe1VuOlohIfTcXg==","signatures":[{"sig":"MEUCIQD4WeF4ulaRvIjX/yMte6kwkPI7aFluzil/V+3Ui7pcrQIgR2GSE5In6H9HjH6mO+WX/Qd27TWcxINDOFg2WEQkY3o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167869,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehjljCRA9TVsSAnZWagAAApwP+wSA5FqiHS3JmVqcRQWV\nU4tqceediHYCtJUcqWgTSGkmWQT0XAWxaXiNfJjR0AQyNEM9UgQvDt2/fiTp\nrOCQpaSAhCTj9QzRsKcdGHVaYy+Dxg70qKy40xbWUZLPqSidnrQnzzqBdliN\nQlNCkeQja5HgcoGI/gSmIlre63KaiS4U9dlN9fetzUcc2DCgdi3NBykopoPr\nT0bbLEjhoq8Q7J6yTPrRoWzgyoL0/nAvLSg0AJz5+Lvat/0fIe5fkbAXXfRc\nVjBj9EHF556A7M+5zbW6DYTB9JwQmsNmBf/Mxn2uUZDpNzCwVygD9KuQGi8S\n7e7b1NadLWf763fRhMOxlCrNzg83dhmSSAmsQEjozHAVP3FUTdflYmcymMfu\nR08zMIjRsLlpLAOT+00Lj7OzFapPS2splLAQyE7bycRT3oCHCIenK8gIBoxV\nN2aGfvpDvxYayvcOmMcO6GzVPB+Dh1iVwtXpiOz3KmIFRzwAxsgmff9dQXlT\nMOp8m0SbQyVYDQ3uD50+bE0EOsSH8FGEFBbDk0owaDyKFz0O+CoHqgXNl4Yy\nozoxXLlwwdKJwlRQe/hI6V072+I65M5vOF4EKdRVFoD3/evqVRt+11RTKonC\n1Ltz1JvwCnP93hIIzT7beeKI+w8bTNfYu4uD5nGvSgubcq5Nw4svq6Ie7kWP\neSjy\r\n=J2w+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.f1f8e60.0","@material/theme":"6.0.0-canary.f1f8e60.0","@material/animation":"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-indicator_6.0.0-canary.f1f8e60.0_1585854819144_0.6602427919179834","host":"s3://npm-registry-packages"}},"6.0.0-canary.1e17c49b3.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.1e17c49b3.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"5723d302b6b5c9a5a804422ba0739cd7836bdeba","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.1e17c49b3.0.tgz","fileCount":38,"integrity":"sha512-t8VXF9ZV2BQcCaSLbpaNnLAgTResKCcycp0dDq8v0du9Gt2t48YiqZ0xfqN0/bYpJhprtwljHOcy3yi2TfhLVw==","signatures":[{"sig":"MEUCIQDkMlm2qO5CpuF3G77g3DlaxNveyBBp2W7G+1EP33sTugIgAvQZrpLR+ixwdAeJsD+yGbm10XFOUJ2QQgX+J1RokTY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh3qBCRA9TVsSAnZWagAAuBsP/0+d3+ZINgpw2d92IcFd\nDDgOdMjtB/QVuNibtiffde7dhZeyMKFx0KP/0CEjxQ3XWayEWO7Q7ygLIVKo\nS+K6gJvY2OhGz+yeCVr2cNRHEH+g8EhETE8CJY7vlYIKKqWb4BR3d/aO0t0h\nTj9YRdw/REOOLSrBz1WQinuiFM97B+8kgksitZ/tg1FhpmKYB4S9SapE3k9H\nmRhOvzDZSv9IzaLlNbnS2rfQqyV4EbVwbvpMC97FjyfjaJvRHGXkyyk9asKV\nX+Tj3rtYR0KkLgEQGEU7PfEqETCtUwiC9lib7tgc7sjDWLJtRXJPcQYEMNc/\nKL4YQqgJnX42nKWSoyhjxim/3Yy1/HDJHqxvkdk9ZQB9SuxbQunBncegAPEY\n5SmmwbAv7TZHUUAYXqYqb0vrBqkkJwHJspMSpP4h7utR8BGHRxvRKD26GM4r\nnrZecMLvGP7FHyyQMqFcKsTDL82MFsq08F/UA6YaAFN36/Pith3mCR182c67\nGi7GxtRu+zb1oXhn07epiyVPldvyCNhBN4pwyj3OgtVGlFG/LVuOW8njrjml\nUNxiiVNjWTo0loESLiIgQoku9e3/ydUVLQYFUf6taCQus15KE/YX8qwpykQX\nnIHzgDASxcztsdoZHDMoQG218aLjtxX1HhvuFmsEGOsz41dueKyqOGwwmKLT\noEY1\r\n=90wz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.1e17c49b3.0","@material/theme":"6.0.0-canary.1e17c49b3.0","@material/animation":"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-indicator_6.0.0-canary.1e17c49b3.0_1585937025131_0.5836587388516488","host":"s3://npm-registry-packages"}},"6.0.0-canary.6a40ef217.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.6a40ef217.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"08ee50c8a1c83ae51f7bd76d574fba4acb17f260","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.6a40ef217.0.tgz","fileCount":38,"integrity":"sha512-Hoi4VV03sAY9O/4Qpu7W+C1H7Zbi2dfwEdSJ3O/NZOWJGx9EhmxrdYjQOROAaFhkMbLhoy4tpwuyuiGsxT63gQ==","signatures":[{"sig":"MEYCIQCHMfwlnSxdcoLw09bgL215RxQSKXmc2ufJXr2JgWF4cQIhAIa+YrLn4hG14ChUN4/JT9xYR1E99dBvmQC9Iu2ci4lX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh41xCRA9TVsSAnZWagAAiOIP/RT7j7Q9DqugCrZ0tD49\nYhrZxcJDn76mxXARbb2XON0VhBJ5c+P4jcj8XEIvn1QzvJ577nZPx5GgcGmN\neJt6F7yOxWGSUM8xHv9OH1Mfqv1vfDzOGLG8HmJUO5WwNGCOerADtoaeTUzT\nTZ07yL3ZgGgtnjQNn9YoZB8pNfxNY2RzLTY1ywYeHiZS1QHf+7vOqlhsxO7D\ntG/7JzAyxbhyO388yUKBJbI9yzOtAjxzP0qnIuVZ5oY61lgGBD81S15fOamu\nkGTLJ6JQy/cR5MQmLfwfNfhUztW1kN7d5OAa1g6aXm41xczDCEOQdDWZKbfi\nSO7tPHVdnb2AbrWWziADuoftldAdWntlEAeGx9ERwf9hYNh8GKiBXRKlHsfO\nhws2QfH8lqTQuFxSdr/s1p7+myOCN051rDg2gtsbPpwtZGD/WKqrrkkZJtTU\nHlqVJbRFlx9SI+YQbdsfwyVP3AUY5hpMothzYx1F8ddvi0cjQaC0E1tYd6OW\n4xnLvupFsN902ney9F14kT18484Zma5pNHotr5mkXbL0x/pR767yHRFi7niq\nSjs80iagbU4+ww8qoYE8Oipo5ZrtOF6StKG/aYFMT+dH6GwhhGKCAuh9HnBX\nczVK+qG1t6dEEqCI+kFAuiTtZtoTg2x+bjDUtmiq2mogiNh+P3ko+DN0/J9O\nsuhn\r\n=R+V6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.6a40ef217.0","@material/theme":"6.0.0-canary.6a40ef217.0","@material/animation":"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-indicator_6.0.0-canary.6a40ef217.0_1585941873151_0.6336081652783994","host":"s3://npm-registry-packages"}},"6.0.0-canary.5f24faacb.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.5f24faacb.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"84d0ff9e1d05df98e2f7c6d71a00788850b435d3","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.5f24faacb.0.tgz","fileCount":38,"integrity":"sha512-dwdxcc3815Zj4Dn55TdmLv8qTmEDNUHDTOoa9tmqiJEI6VQZpA6FKJQr8+ch1izRd3sjt2xHKQhPHntuByf71A==","signatures":[{"sig":"MEYCIQDvM+sRyMRaGZnZ/42NQ/MYSpPTRMcuJXRXLHB9OxOK9gIhAOK1KxJwrUtMB5Aaj/srxQShUxshi45jkJt8cjfjCs/x","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeje9gCRA9TVsSAnZWagAAISsP/j/nHPO6u5wBT70Ff8qN\ndWW6xqzOUfV1YpjteaXVDunUNhMQO/xgvbj+V873t4/EIzJwYSokDE5GzAzQ\n4IZQXPM3+mnIq2i+NhjRQOS++ebyWMRFgVP6ivOt6I4TWDo7jLM29GMYPMW5\nqc0WzC2DFu1iOfLdOM9WG9GILJ7dOr/CCLarqRH2nfIqRXsudFAAeBJUmTte\nYBvPT6s9rk50WL1UKjwURpAClFxMuaMMq2TrlL0QshOJz5mFk9pAC1ZzJmky\ncBL5IcgCWErtZD2IZP+SMR9soPEunKQQlUowGgTvSY3w3ztMCarXixbzDc2v\nTD7QCcz+Bh8mczO6yBVEI0qFiFuSaJKmdtfa09DhHuprF/gyj/zJkeuEIe+O\n2tPSWPCE50MKRm60iSsG1PWRd5gPHlioZUBEZD8jJSnMeRBR12cAYHUWWgow\nzKDIgw5dwGf/b97njMu/4fMvM2Xg4tKZdWXl3C+pty7oUULZjgeRkIGWwBtF\npBQ+TuvBdH0lHNj0UaRruyZl0extZtqBNiHBTjToTjXLWwuToXCldz4jVGtA\nfk+7s8ncevGA9RGGyYrKorRClU+INmS9rB6a23lEnEloHQSsm7V8+HyDwbiD\nfHVT9DuokyH2n5xl8tBrChXsBYgpjip4z+BXhZzj2rgo1+v7GdW8VSyuWBbQ\nbpwh\r\n=7/V5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.5f24faacb.0","@material/theme":"6.0.0-canary.5f24faacb.0","@material/animation":"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-indicator_6.0.0-canary.5f24faacb.0_1586360160107_0.08374280753998087","host":"s3://npm-registry-packages"}},"6.0.0-canary.82fa986b9.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.82fa986b9.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"981100844b4ef1b4e6bcaf7bb069688e51549fd8","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.82fa986b9.0.tgz","fileCount":38,"integrity":"sha512-FQXWIYE++0NcjygHGxctaDPglac0OpOWNjYPSgS0Z6u2lr3EMl7x5Ocwml2yLh2Wpu980x90XAUMughbw9K1Kw==","signatures":[{"sig":"MEQCIB9Q1eu8VIZBN2Lu5EuYVBn/G+02e3ApEShRYqYNFLN1AiAd9gkhfga1IGzfwgPAka+wUqXZPnmYHoXfC3gG93KXlA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejfCrCRA9TVsSAnZWagAANtEP/1cegv+rYMTT+oNTfG2u\nX+8MRBeTunvsL5N1l/3d3xeJUi2mbjlQ3sHq5rsi4woEdba2TogNtQ1BPCgr\n89XW9ux6teBNnq28jpUEQZZZfWrroEVMGRLbT0fh1d+JAgP4P1a9lvg3H+uA\nxlUnkRYMBfVB9TfuH3uyG0Dv+hLP6frw7x3N/zMWhYpK1m/W59iao9Wmtgnw\nMqHHLBdy6IatZMqizoqs2wWvqHx9iGk/DY7bu/64YbYwzThaKfqF+TDvLQHd\n4nNsELhuk5mqV0Ki6QXB4MSBAqq1an1qMYgnZUZkyVwbpjDDTv2AE88Re4KJ\nRlZJqfhWpdSE1mU73KmeHwo9RFnZB08KgqXlJkRR0R6OlIZSHi0rYTctB7qi\nJce7zdCZTlBxji3xhTiJ34WzxHK0yYEV0qsygv8FJBcgpYsKxC1/Jq/RmN+3\nE+2BVVQrIKZKwMsiH9V//i1QJFi/cg4kO3sy4SqrkF0IaFAdHFvyW8EsWyEN\n259+0dyv0LxYNmfD/KZT3O0wDCVJmUOuEwk9C+IOgE0NJlH84RCaa3rFKhDc\nLGpCw1crAwd9xyyaEV1LIQgnkRV8b3uBnkDreyeECRrZXQ2BvFjLdPvsJlf1\nmYd3ZHtAiPx20wY9cbavko0DqApxvT5ru9ra6B74OZasH0xfype7pAfS36Kf\nyQY7\r\n=owM/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.82fa986b9.0","@material/theme":"6.0.0-canary.82fa986b9.0","@material/animation":"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-indicator_6.0.0-canary.82fa986b9.0_1586360490917_0.5441442003629882","host":"s3://npm-registry-packages"}},"6.0.0-canary.9930d9cc5.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.9930d9cc5.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"54ae1ff734da9ff83bd5f30ab73497cc366877b2","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.9930d9cc5.0.tgz","fileCount":38,"integrity":"sha512-OuEwBGogiWM3HWXLroi+CRkN0R7gJJcZ9ldEmXntOY+eE8wPdvo0MbIVC3HddiqPwLUxm4vNflu7ayCJDYAnSw==","signatures":[{"sig":"MEYCIQDeUJyEdwoNoHjzJOI1MhmSmEANnTm5kec667wbIp2vcQIhAJBSNaLaWFN0I1Vp+ESmzV8HC+B+U48InANVVkf/QbDb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejibECRA9TVsSAnZWagAAhE0P/RwYk5JN5DhC2fw1Uo3E\nWG7BGR8Egk/sD60mk0Sd9hrZNl+CR53HKT286NrenwuogawFQgTmTIA3nyse\n1Q8UYx2z3ECkTs703YHH3QFAXhvjC/Jedhksw8jb1AFJbvVkf7j6PY/WYjPa\nEPCvlC61DdnH9b+ShO1s+yvA9kcG99Pp8zk72IX6GyCNQmLwwWYf5/8izOgc\nM8vOw1TPp831yIKH4+hpzf0A2OJoMH5r5UgJgwQE6izljN74lTvo+oIYGMr0\nUbpfYn0VyNSu2RXCLquS5TT4/wG4aDt4Os1wsSP1XruFWUI3TN3rhuPi7VMg\nbCVu5SI9Jcl0S5SfoCbdyvuSvF07mVvSzLEiuPhjxmSXUhMsPglt8qRMmoSr\n7fLA+c5XHKTA6W4tJDNTa1fiVOOSJaEt4WeBvdEMwLbX4G20+P9Z9N7jjgCq\nBOIenUDMIrhyk1jDY54OYS4w6jzcCFoZ9nGFlC5C3oZrvtMMYZoNaTags+L4\nwarAZGbtGhN2OFpl37fBIt0D6xopKrRURtK0ReP3THSGKDkgfynFDndnWJoM\nlidSghhsveMp45MvPco6+W0sS7NuAgv4QgHcm8v4ukYbmzp43oK9EUrstQ+b\nyWGpqfPoexbqtznnKtd40dFL8yAHl+bP+1WO3Al9XFeuGac6+8Egmpq+bob6\n8t3X\r\n=dLs4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.9930d9cc5.0","@material/theme":"6.0.0-canary.9930d9cc5.0","@material/animation":"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-indicator_6.0.0-canary.9930d9cc5.0_1586374339715_0.03080776546194186","host":"s3://npm-registry-packages"}},"6.0.0-canary.6601d24af.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.6601d24af.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"bd2f0443964c4747907cb93eca4a3a24acb763ef","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.6601d24af.0.tgz","fileCount":38,"integrity":"sha512-38soZbLM6Uilm2cCt0HE78eRbJ1qvAXJ/3RM/rDNe/wCLcnsd1fUUzr9aKBPDJbbx+80Qrve6pd8Zyr++rd8rw==","signatures":[{"sig":"MEQCIFcp6v2t23qV+MDbKByMiOoxd+OW+9LJA/0OGBSnObP5AiB82+YxXqe6wO1bi3p1lQwbD3edzxj/Teo1ibypIRz1fw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejmx7CRA9TVsSAnZWagAAsgMP/iF+13MB9TwwQ1W6/MdM\neg2iunrI5BNwuKGOiMY3653ZtS0ToMOR58CLnsJWnmAIlmUofeek/zKdQCWK\nszwtr1wrTqUrwNlRK6EDNURwKdfhYgeNcUAkiWfhabA5EfXTjs20iSp7yoC5\nym/tDF3vIXApFTdIjMuMjGHOQ5u7uc8PL9ppUwJ2uYHBa2nFxLXXG/NpJIp5\nP3x6wnav3PU0dYUlGalrPM8//ivqzdx1AVUdPOMOy4zoJVCfc/tlBiXUUXtb\nruR5NC9yArHNTFgLatFxgiyNYjOWVblDoF+0HIz6qjgn6voj90gx4bG6BcsY\nLqFw0Jxp740A7WSe1j8841Ofmai1/NZE2KX1umHkr0bqwe56OO+t1qlViEDZ\n5a6ZVUdMPK4F1Eo9Yji1mBGwu5ZND2wOq6pyGcZoY70l7+oWYoUzbI+KO/aV\nkETNAGH47+Q0PZYfB3iDIaGGtYwaSfWY/spae+doC79Br2g5eIAuYdOKB1A1\nOkrv8fXHDtRN8ICOZ/JMNcoC/vVhSK3VEUKM+b03C0Ir8YlxASNeJx4fYDj0\ntTRDbYu9JmmnZTdJR6Wx9KrpSm47qLdXxa03OHzYv8Ipq+A2FHd4g34GsjlE\nWoV/1cdEPRuY6VtgJ/sq0zw2dVd5XHpgHRPQgaT+mAINvM4tqRzYUlHLZAY0\ncakj\r\n=JV28\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.6601d24af.0","@material/theme":"6.0.0-canary.6601d24af.0","@material/animation":"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-indicator_6.0.0-canary.6601d24af.0_1586392187291_0.7772547340078519","host":"s3://npm-registry-packages"}},"6.0.0-canary.05f5e1583.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.05f5e1583.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"b3d7ef598b5c5e631071206b0b23711c7b9fa407","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.05f5e1583.0.tgz","fileCount":38,"integrity":"sha512-IZ/RMlWlxVlDNqEWVRAABADPXvnyT40Q5PdYIxqrmgy2CtGj3SvW2V72qTE2MBa+HCZKEYDOUDMKCNGk76GvXg==","signatures":[{"sig":"MEUCIQDXQXyIUAp6dZnryHFyW2b6ALy2tUyhQGUc2pXdcEz0RwIgfRnOZfh92hX4i7awifh916OREfABqXwDaxEMszvGnTE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejnCJCRA9TVsSAnZWagAAGDgP/AwLSAYzWfDWCmYiZpts\nNnswZvouEnk8P9rZT9raZkfAFEidy8uVwvZGTBXZszgOFWa9ju4lIOu2Y1gM\nmlg46ctY/9yNL1U8QPuyz1PWaorZhsy/XjWmC+aG9st9iND0B5MipTI7uZBa\nlRs6aXNhbgAxjTmL72t03CrGEhHNEoV+r8q77AGEhmweoRLLNd5GrE5OJRhz\n7fRoUSCTOfKY3ZfPE9nVDCJvfzpBPHIpsq/Fw/LXw3vYB7/KTAohGO5qUjwc\n5V5iD8KUbX919W4GJxlWCXP64an51JdogbK2Da9F+kQ5mqTORofA3OwimEy4\npXmNNbosP6LsKkgx0dGU/VX0hdrfl4TD1FBQl+j7IXR4bZzPxlzMPCK/PKwC\ntlGsuKYeWCBv4nDpn1S6n8lqVcaoSLOg5NjV3X/CCyA8WdvFiLUBrc1aSsn+\njMGTDdGAd6xQuA5qAROYyxFfuTDbgjeKX65K6If7Y5mDJsq/kI6D7ZnxZBKp\nlgcjV0TUh1kyZsV0BkA8aWtvcIuXlDEhCrvVivoCK/xMyJieDBkzjjKYjMhJ\nrTTfDmX9Fr0ZRnzZacXyopTowKX7pyyhOmhv2mn5xKP37lMlBYnNtU3JT73t\nKa6ME1ZKqhNjcf2UsEVGTw9LMsJkKeifMRVbjdkWm/hCEVfcXODF1QorDZJr\nSAe7\r\n=zhaR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.05f5e1583.0","@material/theme":"6.0.0-canary.05f5e1583.0","@material/animation":"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-indicator_6.0.0-canary.05f5e1583.0_1586393225522_0.5704759097331744","host":"s3://npm-registry-packages"}},"6.0.0-canary.bce00e186.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.bce00e186.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"9c22ac239fcf310b9cab3b7bcddc16911db314e8","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.bce00e186.0.tgz","fileCount":38,"integrity":"sha512-CGmcY11EhGJqcaY+RLNhQ6H2MZ1MzNjlPUCfGeu2xa3ikcODDq4712JQN6WbdAG3eSi6IFUNXK2T8/dvyyL+5g==","signatures":[{"sig":"MEQCIEFv7yvlHqdDobpxilwrXy5cxcJqR9mW9qFVO4c20WT6AiBU9zZzdX2ky9mYEAOJEJxjSJztJ6a2aX7M0b7kTZ6YCA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejz21CRA9TVsSAnZWagAAW2kQAKTFaU15czvQh3M7Wamd\noZtQl04zjXS1c7UAhXJ9YfU1AbkTpU060F6SpZILsZz5nvD7oiEPfFb0Sy6U\n6/hnoOSV2/WdByKPCPv4DH2WLDnBjcZQf4G1Cninn00AXD/idbFDEqfAaVL0\ne6/fhYXrefc6+yzYegmOKPeK38wv7aX5CBvHFjuD/ZuQLtjiDnUp2DhSpL1D\nXFR2Pbwd9KKEMMfg8a9oCDd6h59HczVGWwljsGFdjYLi4TlnTvBadxOA6+71\nC/7Qxn0Y4TXPKIcCk2OuQm3iNzlmxcTmasFtbjw4cLcdZ2r0JVfdfInLgvJC\n5+X+HIBVYgYZ7Q1/vyTlrmkMHzE9MB9BVdXgxMGqV7+IEnJPCjvhH+vbYrLW\n/LI5UswbW483u1Euz6Is0/WGaMmBJZYoyC+1r6ie/1xeXJSYlePacoOfyn/9\n3/7X1nFeZUqsUMDKj5qbaPIwdQy2CUOBO7yedmlkXIRMw/gOnTyLld1sTEUe\nWY+d83iG9csjeIC+ayDbCtthJmW0YNEVwXHhMk5r6Og97e0xLsbNilR5oj3e\nKjCEuRupPHArxXPwzRtre8Au0glwSqsOBV8NjoSOQcQo1hjWWvjP0uHmxTM1\nBdUma283qs8Tc92aqM418b8BxMl78zsWeCND0koE/YUp+LGSknOtIBwxd3az\notS6\r\n=pLXL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.bce00e186.0","@material/theme":"6.0.0-canary.bce00e186.0","@material/animation":"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-indicator_6.0.0-canary.bce00e186.0_1586445749300_0.6062542811026503","host":"s3://npm-registry-packages"}},"6.0.0-canary.927fa902c.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.927fa902c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0f481dc7b50c27ce3e6be2c20471b75826d2a282","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.927fa902c.0.tgz","fileCount":38,"integrity":"sha512-Ki9msOavlAICjKzrooYXxBQPHt+9QLYmCTVEFCDdUNXv4U+y7yEPV4LMV/XVagscW5LZluUQ4X7sVwU6z5btkg==","signatures":[{"sig":"MEUCIQDh6C5EIFejIIZCdWuyfvtpOiEPR92eagoWzggSY4yISgIgfzTBfeWTDOt1G/AcoHBzxAzwQMRCgsBXxKmDTpazlIA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJej218CRA9TVsSAnZWagAAfnEP/0ebDEPuwg2hSTCKx9NA\nUd5O/jx4WJY03dqrblBe6W7x/Z71fwTavmJmGKA/QGaBts/LMdz03lWdY0Dd\nfmudLKUtbpPkUQ6RcExwiUsRLabDY8YJWxq3dujT8NxfrR+ncEthCYzG1Zpg\nfqYHGDn4sRaWpc2pqn0T3dMYqEJCf/7/CY8XZogYIyVKt0BEZKlj3UjMedJ9\n+1I3J5UPh8kF6tP/OhpCbgF6UVzEIJWPWuS0EkPEr+UgFqMwCnidbDRddBCE\n/BTaw3hOeBIQfcgBnTqTUiOvWgbloH7Svufo+sm1QaufNgVGCRIC+nzSgtxx\nXEcPMXuMdtIYP6u1miaHHKM7rXC7uC+3wMfjBgowpB8wIACXf39MkLMCNQuu\nl3TGLJ8OHM8e6fYesLd4rjBcEDTgKq7UvtvBUFewEDXMa597O6sjFg9mFudk\nEoAb2MPhfUygwvDGvMV/+52V815ks4GyRnNi2q932qZySsG6ozkW51niEOOE\nQHG1PqTyiRtEB6v+704cHIFZnVsv3J2VIHZMaZADKSNtyI5B39Mf5YeffPN4\noqdUZmflT7mM8xsxauoQKf0SN5TrzKR8ybQodAwPkiAXBZPEubptlqTiSCjt\n0pqoq3bQQJYUj+Vsp21j/1egKogQO8si6uc34ExFDLhMtoV3ciEGuUxnXdyq\nCw+K\r\n=g22R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.927fa902c.0","@material/theme":"6.0.0-canary.927fa902c.0","@material/animation":"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-indicator_6.0.0-canary.927fa902c.0_1586457979550_0.8031522289982957","host":"s3://npm-registry-packages"}},"6.0.0-canary.eb28b6ecc.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.eb28b6ecc.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"4d70ad005243d3d369fe27fd3fbb85506517dde9","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.eb28b6ecc.0.tgz","fileCount":38,"integrity":"sha512-hq9IfGa6b61dqpXrqDfhNrMCuAJ9PYkcXfNHZm0F+nURb/4z0i3zvpqlp3TkOosdEWeGRd7Xc0CvsdO96av6Dw==","signatures":[{"sig":"MEUCIQCuG2wUb/GIbiikq/q0orZNpeFZCHNVItGn6Fs0RGsvdQIgXntkt3G3DNASQA56W2n6yInctPYEojuswghij0AY74o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekMlsCRA9TVsSAnZWagAAFKUP/RbrfSK03iAoiY2kK1/c\nZtId6z1NzRNz6dibn7jDVK68J3t5JYl/E3idyM5HzlFEjLiwF3p5Gi/mkZ2k\nTwORrJTOJnR3uaDUxQ2/OqGvkEzKBgUaDhUE8c66+NPa2zlo1yY6D50ZmApU\nsys7xpvHGgxVrPlmtOR7W4UdwtlUHMSMlBu3kYvBjvUQMLpopHmUn8KY6ZPI\nHkfE97LXb/8TWmc9HlL0r01fx0/nxxNGPoBYQChIl12mefHrdYUXrcrF4fx5\nPun7Lrhg3hPgO8hMIpEaAVIjJ9Un6vrbLJiBJ69IzTHLJGRHP+s81+LEP7K4\noRFROeRya1Bo235xDI3+51VLRafsC7JrMzFtFaFeQv5OHBvxfcSXga3VflMG\nUO56mzIZy3hQvf9U6tFY3n9ku7FKvAISbUrK1xSE6SqK4q4s/QlU8lkTdNKa\n85DxxByYG5xN6PjhXC6ozSV0If4gz4pOpL4gtgahvd6CEJHBy5V0qmX4MKqV\n9VI6pbJwoLsVJXiuz/mNWSvsGlJXn+oMlO60R7kTu8zYvZauh9AMYmkxfBjJ\nLFglXTkhgetP3N+TeDqAAyrvYyIz20PVTcmrD+E7D5a9kkN18QD0fl23Huzs\niLVYBB4pHCNClcCZ9QLHyr8hNhJMwUNkNRJj0KBj8Rx/LLJ5BfmXb2I/b+Ci\nj9Ph\r\n=KUvW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.eb28b6ecc.0","@material/theme":"6.0.0-canary.eb28b6ecc.0","@material/animation":"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-indicator_6.0.0-canary.eb28b6ecc.0_1586547052170_0.8485286447441938","host":"s3://npm-registry-packages"}},"6.0.0-canary.816a43b42.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.816a43b42.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"b11944aa5531686c72ca99c3249599ce34aee7e2","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.816a43b42.0.tgz","fileCount":38,"integrity":"sha512-4pDDGAWSTCtX1ZypluZjTbZhmeUfJJPSKomJitUZC+NzqnHhFqgEpVYf45LgEAehvhO4MjHSYQ2Kqb3/04ynVw==","signatures":[{"sig":"MEUCIDyrCewy22dtAmJtFPxGf+ISZjKUZhHR9xMuFKzOG1f3AiEAhfDHjyJSFT6Lbd80ghjyLEk3J5UR/9z+B5XtQjpnLQ0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekNyUCRA9TVsSAnZWagAAR7IP/jhpqWqm540FVmLa2R2K\n7vFKAFKjCCAqk7zo7TcNXa58G3eQMLbyDrCS+m9bReE9SxFrA7AkKv31zwW+\nKxnkDxcwIKxNTxo4B3SwYJKM24tvQiuadyXoIvqjO4VbGJtZYkWL+tUTXWAE\ngDL/Nj1VCNphqstr4sJvOA1qWiHRDbok3Ea9y90QVEAsTxMC1JhGXbp4+vRj\nkINUeCUolxf+LqbQYwtLAwAGvHkaCKqVW6wUTQJlrB2XdCLrrIrzAiafDzQo\nhbl/r1oKIElrHOIWtrMG3PtZ+jyS7GXBTXp3uwqwE4dmShe+dfKl4ZAPIwm1\nFzTUYCOSm8ozYPLVrKJ5zTJJJrkBFEpEJxp7PYGzUgvtVeCyKNHzrLvWp33J\nLrsfQh2Ot5g1K9xU+n99cdr9IZh2uVc9Hm/zuAT3KxLMIMaMMRS+IBP3WcEE\nioxr+EdmIztkOxKjO+iZ0fGsOPSQ3luk34ADGiW0FNzdfXkbbf25zcoyIq01\nvcESA+RGzoyTB3gQjlpqyeEFNyFhJwiUiV0mt8co6RKb5swxK9+REEFNwqOF\nsBHNqqRcT4YRNQe+eG4xTw2yAIR4XjniQBWKH9kUUeMYAJStsfJX+LLoM7Cx\nileLepgVEe3ZedSgoqXOAIkP1dXtDY3LrpF9n+mNemcIriTjdVsejLzltpPX\np47z\r\n=ilrc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.816a43b42.0","@material/theme":"6.0.0-canary.816a43b42.0","@material/animation":"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-indicator_6.0.0-canary.816a43b42.0_1586551955867_0.7780551833521292","host":"s3://npm-registry-packages"}},"6.0.0-canary.008c4d319.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.008c4d319.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"fa49d31ba77cb5a7a8286b1969a162e446f39b17","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.008c4d319.0.tgz","fileCount":38,"integrity":"sha512-Xnb36vR+saRNwGMj9g5ybP5OnHufNPHtZsNoXI0lHz8EYRv1+aaPspr9s/U9X8HBIM4cOGER45KRFUXfmR7cTg==","signatures":[{"sig":"MEQCIBSIBD4jAg0vs7j4stXP803YTee09Qbib0hpuIj4TE5wAiBnmq/AqWcwXBQ7Cfwiz8vmvnUsOmN/PLSiGda2znJX6w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelJRqCRA9TVsSAnZWagAAmYAP/3NFvjYH88s5oPk2nvrv\n7di0IkFJfNJgvU9tV+az+inTf0reT5z1RCbKMdFaXgAOZsLZxzZw5pRxkDw4\nQY2f+LRc6J0b5Hd0gJfYARvMabEZEEvCJzb84NtMAlsy4PnPuKnQpGkPqPi8\n3zhHIXSp692CVuRHP3NxaJ2BruexNrcbNTkabugqUbvIxzoN5yRxpoknD1xc\nAPlnb9di9xxTNPAWlN5KyhHeat/CwYuzlbykBY/355FBPJgdgWwpHxEC4BAA\nrAP+8AvAkQv3DVjM7qMes2C4Ls5cthMd2ojEnXKZqQforzinKR+PE9SwOLmV\nrJLQzhUkyyzpa2/hQMS8asSUVOfEYBkfLf4xCJV8dxtiUo17sVPgJeMWri6a\nDYmUkXJbucHDmLsXeas1wbueK68Hn1RgV/58pUcPbktAWELdZxw5i1wkS4kL\nhwaGnbo87GJgImCaYYNWK+U6tFO5W8q5SqK+h6U7GXMRqlufQ7FwyOexs8Ex\nBFaPZjphvTbCbLyETUCRZEuT8DZoEwy+S3qORDRKMQg7JkrWFwI0L+h+fWYk\nLGyTn3iVhzaDPFxHV4aJ+UXeLivu5wgp5Ob6ILEY51ItHL7EFPgrLKx2QptQ\nuadD4gsE8HLbN//qdvHRk1o/qLnZEwV9Rupv08jQYvyRdEnFnj/Hu2ppZP6L\ny6e+\r\n=zNG2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.008c4d319.0","@material/theme":"6.0.0-canary.008c4d319.0","@material/animation":"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-indicator_6.0.0-canary.008c4d319.0_1586795626429_0.47656625099804595","host":"s3://npm-registry-packages"}},"6.0.0-canary.cbb3f28ca.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.cbb3f28ca.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"71c6ebe2f46e79bba1326508c7bc7d5b9db1bad0","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.cbb3f28ca.0.tgz","fileCount":38,"integrity":"sha512-wX5q381zt7ujdlCAJmD1VvbO8GIlKfkO8YyuSyT4iyAs1zkUDAg8N3qzpV4Uso8Ujlz5APJSHx18etuYTrtDwQ==","signatures":[{"sig":"MEUCIQCx4xPl9LsRONSCkBwDnWlfBHz7A+X5OWBdNyNokbRliwIgLPSkJ/N+OkAr75nIlwbo8FK6Q79fPtBdvfdPczFnE2o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelUSxCRA9TVsSAnZWagAAMXAQAI+U6nFgu6he+T3v0am0\nNhMC9LPkh8u3OFux8YCBUwuAnCWFEsgJt9agQf4yvm+vCCOx9plGKRIfkyYg\nbjcg2r9EPFP3jn3iCFAVApohJiN0A7YbXYLIJyJhoj400PeLjFDr3Wl2nz0k\n3NnRNp8jTJlCgosHZI6UtTf8YmCwcKl+LkmiCf/CPGy2XnRYROVB/NorPas+\ntsLaqCPpyJRRGZ1SG4kojniCMhfHEUTUrOee8VXdbwYar239bwXw4/SQ5SBr\nagdVGC3Y93EIDH0d8G9Rbsc6od0IAWf0/p0lPrEO2O6Pfa9WxpkmY+VyLJGN\nvvGOZ/sEf1K3Q4/voygwZQA/9B5HB6xgXokpXxsk4Z2ZqRSDs2aXq+DeN76y\nbd8/tMQo5mlBNNg5UQch/HSjF1YuXT1FRC0MDSG0mQ1YffaZGHh5wOLk9O8z\nb6tuL9gXd1ZjGdNk9BuaSZ9Q2mEk80vww93q0RDOvXPZ2tlwmFvv5ahH78T0\nWr89iLvgv9WTqg3opH6akF+qDVdQwpP20TFqA9utoYWdR8YVtc9l3Txinkz5\njjGjY8wzImnxMefNxExAvdwK1KqJdZJmi5a6oxqAORvhrL9zQeaafaimjtrW\ny0OhJiNju5zCRd98nLwYhtWGgXeHfjAF195oNEvje2NQ/wl5Y32uvkDmUTFN\n5C+J\r\n=K/s5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.cbb3f28ca.0","@material/theme":"6.0.0-canary.cbb3f28ca.0","@material/animation":"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-indicator_6.0.0-canary.cbb3f28ca.0_1586840753271_0.07315361985831403","host":"s3://npm-registry-packages"}},"6.0.0-canary.f172b0f90.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.f172b0f90.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"cec2fe3019a33e9875250392d14c5765ccba75ea","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.f172b0f90.0.tgz","fileCount":38,"integrity":"sha512-Gu0PtdhYVHMxhPSOT55Lh2PnhBnlAZloidjAdWVwgo57ciTpMDFGissjjNhqJG5mFEDnYeB9t52jtTc4+u5uIg==","signatures":[{"sig":"MEUCIGDOhmOUGrERSsaWvihMLw2BVUEuA3zWxO/8LvHgdXJfAiEA8xL+CeqIonPV0RZWMfzemyppgV2UjvQAS4O7QuJYmV8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelkLaCRA9TVsSAnZWagAAt7QP/38DP/heo5KSnJ5rB7jS\n7g2qf0jTfyQS3S3+VGwHgr7WkDGrdxwY9wARQ+fnBqqILFgTY1uvJP6+g/yW\n0Hu+Ix1ffvGppmv6+QbPROSHQc1u9rj9Y0akzJFnCBAsrC+M4+P6HxL2+bqE\nXXD95Lz5x4mBOoJylnMAK6n1l74InqKZfA7VuroHp6DkNS7/atCjeV1trQmw\n1BIweHZLTXUrjcwMqYCqcCO6xZn47Wui+UQqtE7XSgNQ7VtOeuYu1CaVTXtW\n/tug2QYN2+P7ixbZ2wr31NRJpA/xw+8Oj81HKbJZIqkbn+QX74stQEjA9KMh\nd0+VPQG6k3hSytVTAeFxKL8ivRBLZACAQUqM/Zp3ZdQXB2kp1o4qoJIZ8caC\naLY7Xy+y0Q2Ggw42btVoq0kxh3wLu0rCjqpDzIgTY7w7UUq85O2nhS+bwPYn\nNqiPCifXYqPYdENvLhkCRc30tnNySNIUEBLlALz2XaEcIjbvGv86euk/hKeD\n3VhwIzJyJ9r09CIkN+HRKOWnvDz1VaiyJsrGPj0ZG2LlKyWBNYUKnF827b4e\nZEHXFbVO+C2IQwgyKFOof1wzPqx+1d5Y8+RXT36nevpXO+KcGwAsYTs7D9bb\n0cIJGcE7LpBCZ84o/IB8QcpSRYZBe7gn0yrCJxwj0OB+IwpHkqRsGFXQfCvr\nFQow\r\n=t0EA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.f172b0f90.0","@material/theme":"6.0.0-canary.f172b0f90.0","@material/animation":"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-indicator_6.0.0-canary.f172b0f90.0_1586905817989_0.38335689468075596","host":"s3://npm-registry-packages"}},"6.0.0-canary.c02642273.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.c02642273.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c8d74e216b44ca26c18866256209259ff4e30cd6","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.c02642273.0.tgz","fileCount":38,"integrity":"sha512-ofi0veZRjczWPyF3aDbFFjGS+N0txEK277MUukjwB2B1m0ubUp/ta3uB2U6tIF5/aS/5gmJRZCG8AkAQwB3t6g==","signatures":[{"sig":"MEQCIACuCLLqkYX3R5U6p+gw+P5QZC4ZPkN6y7ucRa1aY7MpAiAHw1Y3NgF4DO1C1dEqX6YTcAAzhl9BLiF/21UuHgQ76A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelzOOCRA9TVsSAnZWagAAxSkQAJjXh/UEFjH1AsapI956\nX9y/SCpDyKfK4xQ/vlCbIq+JhVgdYvv0vXlpmwgrrTGj4ybJSU1vV8wMg+lK\nFSN6OPK1u8nQRTrjXOvXJSsIp45mFgBwkgQGbAR4poYtUt5zbgVia225sH63\nAegyzcqtNVuGNxUwzM8hJY+5vHXCk9pQzxgZVg7j4tAEYSydbapbUVJiepyS\n1W2cnSJynzrXD/ZxHVHftqjUY91csxXtx7ZUiD+BbmUaYVXrQ6Hua9UvqtfB\n2e0sL7kewO5IoGZiYZU0yyQpGh1hNCQ4FK3qEINQ9I99yvPdIoNyDwZe8tT6\nG1i1WAXS2C7dz7uQvPRNahdbUw4HMI48s2d53/pueSXO8BIWcXqLlncYP7O/\n9oxX73XgyJF21Y//YCE+JneH/PZl7q6msWOwVyW5tJF9YzabEBANr540uowR\njD44C8pp7lTSz2yPLIbSEuiqjoYfBF+EJetXeTGQWDWKljK4vokp/UfXIy3E\nhbajHjqqt3ck2aFYSise1xqB9C9OQvoMCa6J6A8s+r5tTGmBlGp8Uwvd0otO\n6BCQTyNSkGXTZnJ88syyrfu/bnEVZQPEiQApvLjEuHw1nJVZViKWHPnPsiGl\nsk/nQc5LtilN/c/7N4QX1rVCQRkMgCUC3VPGn5dAuIcEsQq5od/ITfds6zRF\nSozm\r\n=pjX6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.c02642273.0","@material/theme":"6.0.0-canary.c02642273.0","@material/animation":"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-indicator_6.0.0-canary.c02642273.0_1586967437878_0.9425887687496866","host":"s3://npm-registry-packages"}},"6.0.0-canary.8a299b568.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.8a299b568.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"988be48bac227c0e0583dda5a0ead0a02a47334e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.8a299b568.0.tgz","fileCount":38,"integrity":"sha512-pXffLawvHu2Bu1DnFUQRAWXlvvkVysOzMGjqXaj6nMdz5LWtM8SFo3ng4TMTQ+AlIPksPYP4va2bK1Uk4xZLgA==","signatures":[{"sig":"MEUCIQDSCS56R49ZuQj2AxO7Id4soWvHHeLm16BaqnECoG4zgAIgXXmyzF1SAzsMOHRjdRCiN+t2WgWodWYczGpGZwStP10=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel44CCRA9TVsSAnZWagAA09oQAJ5NjW7XiIHKSeK43MoV\n3AdZCYzusP4rHZTEQJBs0xMIEGNahzEH+taQjv14bXzJ50NJiYvuZv75m8tw\n8X6X3F24+drnBqkXVVYGzW0D4Rpb8PD8DHNPYvlabBKY+L8IR3J2UNVp41Zd\n6ciYUd94DIuiKBckjQ6tAZQoLD3PYzLWRGcd3JD5TVIlJ+4GuYPN5gP6m/1I\naQ01rmHgmP6esRgw7DzmMnnD9LUvLfdb8NgkgRILb6mIYOG0OhZsvj0kzJHl\nkFlObM5Di58/M+gaIji0IKu05vN7NK75lH+6Wz/CdPpCGuQnY+p1UPZxobfZ\n2STO0K+UcGD3RYnp2vE46km1sRMEdDcHNyVKS3nl2oB2JJeZavX7PSPkCJah\nx1hDp4uvvxZl7eFZ0lO3o6tSGRVy9RCPUF+Gy1s/b+kalOTF1K575fTnmiUe\ndjzW+fqbGcPMhZkktC+M3oV2FWEVRrasxcG9INzwcS5n2G31y2m5EnFR2Y8Y\n2+Y79m9o5jdvbz13bvOLy+osXnGXx6XY6mV11tNXKXzKeu621O7klNE4yrKJ\niZLVVuP8+37byqQPri/dABzGpw9/BUZb9D8sAejiP4wDfInFkJ2A5eA++iFS\nLPiNT2YA1Xyiy/pwH3BvCSV/pg4OQ5i8xkAOuo7tQXb1ujTO9yK7S6U5YiH/\nBcli\r\n=oQAo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.8a299b568.0","@material/theme":"6.0.0-canary.8a299b568.0","@material/animation":"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-indicator_6.0.0-canary.8a299b568.0_1586990593799_0.573865343418595","host":"s3://npm-registry-packages"}},"6.0.0-canary.490fbdc09.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.490fbdc09.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"746616f5634400a3477e00a44e84ab4419afcdc9","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.490fbdc09.0.tgz","fileCount":38,"integrity":"sha512-KnPwplCvuLn673gpUjT57e6yWDi0UxbU8W0dw2cBaRll/AgQ077AfuxxS5zqlThoGCwi4FUU4XP2iOX8NH+RiQ==","signatures":[{"sig":"MEUCIBnv19NbzhPXlxZCF1FX38ePIE53D0JSS3aJS2vlm2uDAiEAmBIMbleKWTqu83VZ9TuSceeln2gAky5BwKx5DzNPYTw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel/RLCRA9TVsSAnZWagAAWDUP/jcsKhW9aV3Mo5s1MjHU\nfQ958LK+MQUn/x+Xog+d0ybA00wHgLvWb0okw9UWLS4PabBx1tDr8JYekd6Q\nbUEcKrCvrIiEhpS8UhSpg9rs6h3TFMrYP87TaeUrmXyTIVtydr/NdThiQwJt\nOpVtB08cVcH+QS+iiL3A3WgJY65ZCSexn1LbhaT1bwIsrYtgLNAO9/8ms/uz\ne3S0yyGm/NwpCv3x0kfMmJ/mmkZWbOUIqQ3ZgLl6HdBcICQQ0lcYlH/L6liP\nXV83+0tEGx0g806CJPLnmpHerc1KAtKS3bsDxD03QDQOd7zy+meLiTYZqWV4\nfq0aVuF0oKu7vyXad96W7W1g/lYewrIq+3mdEjbZdcMXdatbQnp0TxmWsC6o\nuGSWSIX96faF0jXarC7TrKihQWjYyhqsvQqIjsehaOe9zMzIuDeCHuHMn/uZ\nidz4VRzf4rT2HOgLlkKErOMagbtAJL5Y2Qgk8OBudHWs6HsKkW/PovG2qmeO\nz7ibAspgPI+sT+6imB+WVj+7mEqV4x4WIOBouvkljyuvUB/AaCJeScupjdqX\nBSMtP96XFX8Y3y09v2gYpJn5OFOHv34KZG/Yhrq6RYjdqN1VyamA/fEUyPMj\nzf8qMksT9nW5+saU6wHAhSmNlt/MgYMoD9ZDP13yXbRwkuVlBK1Iffjuwy3/\nU8Tg\r\n=MoDk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.490fbdc09.0","@material/theme":"6.0.0-canary.490fbdc09.0","@material/animation":"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-indicator_6.0.0-canary.490fbdc09.0_1587016778601_0.5357710330096914","host":"s3://npm-registry-packages"}},"6.0.0-canary.f838c6e55.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.f838c6e55.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"3abb89ac28caea07ec52cfa145e7491031189951","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.f838c6e55.0.tgz","fileCount":38,"integrity":"sha512-Bqz8wHJL/Slc49jl1+S3ZCbm/YZjg+ahLLd2y1NtN4WEmv/IP2QL5jHt++e0cqRkWapexbOwZfB+3YcanuUxng==","signatures":[{"sig":"MEUCIHsr3UHRwhg9bY4BUBunCr6Sc/tcH+zBR90CVX0IMvUEAiEA6ScD3gHDMsivNUrqyA3KKJ2Ewwj7gV2Trtv4kgjjmtY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemGsbCRA9TVsSAnZWagAAJeIQAJBTj6spQdJspI6ncb2x\n4VFspVpzLkl8gg7wYCYzXDU2GDLebcgCupDwRrrMc80jbUEREgXSLaJXDrc5\nKvqZO74cJoa4TxCRb4DbfyVuo1O0ZN0rJ9irLyuANl4IBDC7DSOQXy32S44w\nl1QrodkefFROyE1lG9lrrlLAH9rj2w8brke15TSQediBrvkningvo8FYXCGB\nBM/z5PaIyFtMBPClw7VfAP6XnlvGBhefwAn4hv9N+rCHTioMvx20SFVnxkAw\nSJ9CXesTwXXze+I+IsE0cHb+GnMlBCErrobeHHhWzzRjMhjLoyYuy4a9AMwZ\nsW/jYL9wzhdG3oGdKhumKl4O9IqThi9zSuZ95DzEoFe1ezfkrizPJ6sEtE8B\nY9RAFn8GR9B4VDyDb51BHeRy7+tM0qTpCRVX2XWMss9GSdUTqaE4biyWGq1Y\n939QrZ2xkMorsMjNam4Wusy48VO3yrEIcoHMc7mFyWkXwTehS/itHckehs7r\nYXKtfV/jxkXvuOs52pMWHmg9wtHOxgAG3idxLjG6atIE8VVolN9izqWH0LG4\nHN1GPSdgrCnMgRP5/hYQjNVGFLBOieQHMQorE7QW9rZPkTfMPEnF7tQxLj6Q\ntmlAcupwCkelGrURgNGdltw1uRS+SzqOSQCqB8LUaK55SDPRiv/RgPFMYTMq\nDHDW\r\n=K/SF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.f838c6e55.0","@material/theme":"6.0.0-canary.f838c6e55.0","@material/animation":"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-indicator_6.0.0-canary.f838c6e55.0_1587047195246_0.1124027545145263","host":"s3://npm-registry-packages"}},"6.0.0-canary.ce6cb7024.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.ce6cb7024.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"dd0d3f857eb2fac9221842d7542ced78617b1a81","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.ce6cb7024.0.tgz","fileCount":38,"integrity":"sha512-kMoM8JYMip2zE4TNtqQouX13mGhBumYC7ExZF+pZh+UW2WmQfPJQEQaIBDSP/4Tqoz2GUqi/8U+AMRYcP1qkmg==","signatures":[{"sig":"MEYCIQCDIPB0DeTDebrJtDSLDWNNnnHKWPyRZlDtoma8uF206AIhAPzdA4ymHOzF5Ko8RoTwdL4E7ox68HbRRYfsSi7HtQtZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemJOHCRA9TVsSAnZWagAAElMP/0cyiR0KaP2jvfC5fZpt\nzHGVhQO5LRQYcIY3AtPFLmSnQqWcaDH8peDKaeaZANaZR3FV1Lfo6NIqQcO6\nshc3mN90aR08HeLd0GICbvsJzDwhfFAfR6Hk8mxNH77VVLh7JpgWnPE1mXnA\nEiBzM69Brd+x35kQq+6SYyzdjo2zVUFn6/IcgdmkUdGkUb0/YK+0HQdWPM8k\n04mZYYF7IrJgoz8Mkj3WhgPVgu6zwsH+GjhtJEjaqNyEzLTRPTbo5t8kvtvt\nfJMSPN74jAFhkW7yktwX7/MWMA8+Yor+NculEuWiFBQ+v/gTSTiGad3JTnnT\ny7+U1sUBday8oQfx2hrXEZI/yia8rw5nWNEjgca6DCqFE1Vk72Upsmfj7jBR\nV+EDbxrPzYl64VgsHxGpGMWt0/TQipSfRh0iryEv3M6OlQO6RGxYC/IkM0DU\nRDOlSZ5HGmCBaMcvsaPUQUtsqVkKF2BQiVfBQTsYsrOKAf3pFUzwtBS+4Db6\nZMFLMSwtbixz0ETdEyEHOvTq6yOpj8p8luISRVJ5mnnKU7iuLLwtWAcrwsYl\nVQPDQy/T2d+HCMvsTTi75XvCNvClTBDdp0FgE7s69RIQ5vKzf14Z/yjTjqdM\n3ZX6suHHYAu2TxSz2vXJEpwNMdoFlDtoewDFBr7zCBP17onv91G6hECoYIBc\nMF8N\r\n=hcnh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.ce6cb7024.0","@material/theme":"6.0.0-canary.ce6cb7024.0","@material/animation":"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-indicator_6.0.0-canary.ce6cb7024.0_1587057543001_0.21952934569197113","host":"s3://npm-registry-packages"}},"6.0.0-canary.0ab62a65b.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.0ab62a65b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"534f5224ab6b25e21d8b59777278d08cd387070d","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.0ab62a65b.0.tgz","fileCount":38,"integrity":"sha512-wUneVVuPxFY0it755VhXYZBBLfdF3PiV7/Zn5dlypv76LMrFzDDilqQTlTguSsFZZUWNNWzKmCb7ijGkcu1+Jg==","signatures":[{"sig":"MEQCIEaql3qQdFd54qzb2kJ/56JyhRSamQ6Pb3oW75pNhmYtAiBkhPtJ+Xu6KtKsCbaaeQ0a50huGkWmC7SSTJfiktA1ZA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemKnbCRA9TVsSAnZWagAAy84P/3Ccj8GKGmQ8R3zJ9WeO\ngzpXLKQpkie6KFHTFxVycO5ui/DiaW5Jqr1rhyzDcpwB0d6XXMIOl6OCQOpW\nXNr26R4Se+B2u7jC4aKq9Hpyvah51IK/Tr4Wr5JTg3RFxYt7hneqhG4qycyP\nnZwLA6+V2Qa5IBq9doMyxtYdhDYj9L0xtQavXWVEgBx6aDBV3xtbldjiMKbK\nu+9xRFQXeoWkwXxunw0WzK0UOKsDlRgRV3tdLjoDTEUuPw4sqT4jP9ClsdZM\niHI+X4Fn1CK65cA78iA7nIFZ4ap9ObQFwqAcQxpYqaQB7MOARVnEBx+VgQrd\ng+Q1dPhtUnntsLDpNhRQNY6q+1qO1j3MFx0V0nTpZKrvGdxH7ng+6VRkuDgs\nFs6bOmY52HUaTqOS2Tf+11LULV4NCZ9peHTIUhiuMUjEebRXtSYPjCKxwgeq\nTqI/VyAb8q83L4HIq1eC/HaBiyYFYl8aeV7LGxccSfbaz2MJk+NxRXhf9qJX\ntlOd644+23sT8k3oDjFd8sJpkpRs5IEQkCTyHPMHe7/12I6fhUVxCepewv2J\nsINsmJCfZ8/wKb0+lp1jEzOx8i3K8rWskyLbnT5fg4p8qpVBppFHvkH6Mt0L\n3h3l+qsmy4BnlmLRQMaazb72PEB4t9QmuWYzuFneSONd4Q7VEvFEkMd4Ca7r\ntkBd\r\n=YCvh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.0ab62a65b.0","@material/theme":"6.0.0-canary.0ab62a65b.0","@material/animation":"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-indicator_6.0.0-canary.0ab62a65b.0_1587063259274_0.7179631534353399","host":"s3://npm-registry-packages"}},"6.0.0-canary.ca61b656f.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.ca61b656f.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c5f293d119fb91837275e74833039e393ebffdfb","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.ca61b656f.0.tgz","fileCount":38,"integrity":"sha512-/1/4bwbF2cbKXeCEajLFRUatwfOcykph+OMrL0y8M79uJrHfDlWHioYi4k/qwHdshSB/ePIm5EeHArpDFDg5ZA==","signatures":[{"sig":"MEQCIGbYSJwgiIqsRY1iVfEqknnVOy7YKl2c1KZZ4RdoDoYPAiA2hzgs5/581j0tuw690i6qsrYBThX7pdlyXuSoJYbUvQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemLk5CRA9TVsSAnZWagAAIw4P/R/SNRgc77zE38AgGhoO\n3076QIOQ10Pf5/NXo1NsHEr4W9gTyd/a0+oEDslaxuV5X6dYQn1MikTQ5xzF\nFU2DiV4jPI8X3/FVE2E6V/emJ8bxJM3tb4vzrgjEoiopbdoMibfk764+YWzH\nXbMHYu4qZLHlh8mdcSZfIoUtVAMX4cbndwOQ3Ah2k3N9RRRK61CwGwUZeQw5\nEER0i3vymaK6tpBP7i2IoS7Rwcoaim/KtoOXsB3ib2rnG9Ok7basbB9XoDqt\nCE6bihNsWUU79hIXMIu1YpFD/wjux1SqmdvrmZmPBtCmOpU0iKf2cb9fhUYK\nMDQr0agTq46t6c+H/w0spjeM+xBfmHqu8sSiqIsRgWow34ig+t+aQHTO74bj\nFJZp/DVjgbTQNimf3xlxV5F6mVPcYpRuTc79cNi5NL34fboDC9nWDds40+yQ\nFj/L/4D+RAo4epkQqQECTPXroi9B/iWyv0YOEVxuxu3NQCzRABUlfdEV0DYq\nX0aVLv47mbwNLA0rw/kGapQ0Fqi1kZqJoeZMZwfeyiaTk41WBreq5Ys3NvFQ\n6E57/Meh6ILTNWph2IHlIx3F7vporXKNKOcIJhjiGjD/hD8uU6SxE+DxG2FV\nmNlID2p6K+rDf6rvedr26zXrh9tG5xoULxJWsYeK7m3tjPaL2EtQwrJTz0iJ\nJEGA\r\n=fkir\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.ca61b656f.0","@material/theme":"6.0.0-canary.ca61b656f.0","@material/animation":"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-indicator_6.0.0-canary.ca61b656f.0_1587067193189_0.32338317681524065","host":"s3://npm-registry-packages"}},"6.0.0-canary.45a6615e3.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.45a6615e3.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"918d98942a4a6b391a5c8b1b39c793dac78260ce","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.45a6615e3.0.tgz","fileCount":38,"integrity":"sha512-H0U3cUONcypVwe83c5rPeHJIxuqQ5pBCd27I4hFIq5vSAfRTsjcbc2B/Sc3Xsxy8hT3wmPhf9mF+ozzhmciLVA==","signatures":[{"sig":"MEUCIB3O1OVOiJqGG+rqqWRuSerALIPZ2BWodIIeaWBEtWVrAiEAgcSpB/5dOeKqRHUq6XqRGkD+pjjbejtaFWMdwgRNhas=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemMDzCRA9TVsSAnZWagAAX7gP/1IERuHsx+liICFe7vgv\nljLEIFW4eONYgmC/UvyGE3debduOKG0odvg0cVeeZNar+a86NzmxKkzFblpm\nPO5JPi9jTZ1q3QU9p2QnQIyTEdqXzpG9msuE3JDvacH2ToCXKJgnh56VwPIo\n7GEnRbwwZF93Xo1+GzmjZCSdEHc/Ac6XFrmXuHlT5d+MYP4WsLok/YOjuHx6\nKsb57iJ8j3bCTFpyAt3ubSTQxuk2v/TrYIAUE7DkgACDpU8cPDBz52LMaXRH\nZaOoAcA0YzAqKGIW0uWBviXqGXBFwHRuPiTYNGGUUD/CUML1tCR9t74nWWuS\n0ol1VO5QLI6+lMl4N+gCzIiKeFZhxbbw/rTFwGyJ+p5qxN4JjhUvKeH8Nlzd\n2HIyxnbga7LxQesERGxbCGr8xhXUh0PfDalpL4jmRl3m7MSzPO95kGQiAS5g\nZbVA2TNWPyIjnpQ9Aw4AtSCJ1Yg+duCwbuvPxFLmKKu7Nwn8UmKaMymbubpW\nDJiK5kAaUiCNepN4u2YSm0sRuDnBGNJkFr2xS/XuzO5Lxu+B7JXA4UjtGbAx\n5wqxk7MvPCAXPA8xSxRaHtQxCnxt5/W8GTs9PQ9TurAijl4AspGHRxK5xGxx\nK7L7AUvUhmgzODmVHZw65bKOk0BNmU/MEDjtFX+dhn4oyrL9nXPxxteshgTr\nYNs/\r\n=iUz7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.45a6615e3.0","@material/theme":"6.0.0-canary.45a6615e3.0","@material/animation":"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-indicator_6.0.0-canary.45a6615e3.0_1587069170538_0.6634230843337872","host":"s3://npm-registry-packages"}},"6.0.0-canary.4b04cdb0f.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.4b04cdb0f.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"35aa2b6154719c9576ddc1e9ad869df2d5b55510","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.4b04cdb0f.0.tgz","fileCount":38,"integrity":"sha512-Z+uE6CadjC6aiUDr8nQL4e0nqlsGq3ETN3qKwTNifxbBW8pMdLRXtQlTHStsRbaP1pyOakXtZhZD5Jhm5tEovQ==","signatures":[{"sig":"MEUCIQC5zZKTZfMtSvsl4/riiTaUKDw78Nuw6ItnAnD1CIyPNwIgWazJFtEs3/+Y24R/zAA4X9Bn/l1hDWJbV8tpZTI7cOY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemeopCRA9TVsSAnZWagAApcgP/2cI5sv9qPV1v2zW4PrP\nQZQgDdSBUBfpjn3bHCkP4g62xd+85uZsvhd5PWCL9QfHWCrSVfQiwg6JP7tn\nnazyNYhyCS+Cga3blXYdDa93R4+5ZobXtISCLGTUCehjl8jHKogllwzUy7Dy\nxKyXk5/DkMkUx994ORQVP0AlzzuAhfs68ZxRFABu0F65ZGQT29vfFV1uqDTr\nnJfl5hqNhjllNLez2gBNc4leeZH+CL6YQv08vH8eqeX10KqBdlE4bJqNu45e\nMVcBZtpyYnUa3qmXhJXrXwn5MBMS3Al5T034PwqzoAfD7d++5Y/4yxFmB02G\nT1dmyWZ55OglRTK+1dg03S0VSrIY5TtUjF6WlaOID0AgxUyPo9qtSKFWBMXn\n8HUI1tIdfISqC0LCZ2PdijNmoi099s4aiJ16IY/jXFkvZcJqCYphLz+iMLKG\nJFEaKx6LDGeBtT19ob/sw0kz/3DduxipimQjVmS+Tkpn5FYOza0CoH3uEiVI\nUOn5EJe2FQy/uQqat4R3jyUDrzdvRLPt/RV0CuKtgI+0yResHiRJ98W8m5Nu\nf2cvAd0zx6nic0HhcKp5eC9Dflaama5Rjls6acrvdM0hOIXTS2ppic46uluB\npEsRpLy/ew94B4xFxel2R3xqdfXQKF3Aelrq/Wa+hS1xu1LNI5XnNzAT011/\n6wna\r\n=ERIZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.4b04cdb0f.0","@material/theme":"6.0.0-canary.4b04cdb0f.0","@material/animation":"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-indicator_6.0.0-canary.4b04cdb0f.0_1587145257121_0.3502191730609303","host":"s3://npm-registry-packages"}},"6.0.0-canary.b273afa93.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.b273afa93.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"7560171b79c8237bfd3b4ed1d2e4ae50bed42e33","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.b273afa93.0.tgz","fileCount":38,"integrity":"sha512-S0mKraoGpiC1sESHwSi+su+OOXI39od0WArG2qpw+/rVCetj2O00JYMEX+kDzGId/DfDeDkOx7FKh7Px2fkRyg==","signatures":[{"sig":"MEQCIE2RAftfSzldMD5WN73hVmGQaLhY5jMO47n/Ak5JYdg0AiARLCyJGxf0GKXWqlhr0ZDSCSEHkWQWIlxkv6L7oBxdcw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjWbCRA9TVsSAnZWagAAVbwQAIyY8MChLAakURCMa4Ah\n9RrFjYrZQoXy/aNHWQT00ed72XEK6+DFk9Wi68RElnKH+muOHxThPq7glEaP\nACBmrp3zKjp/u8D7y2eCUMQzzdW3ztz/XpwH0lWl04xEVZ+aso0ZZdUbYub4\nfMSYrnuHZ2x+ab/cW9VTDEdRne+J6YM2VYiCOYlP3xbzexTceHZwMMsYUUe+\nJxoZbhlHQXxc2zOZaVZ42rYqDd0zXWo9wZLaXBK0q458CdR9Vw0zEUyXWU+8\nX4xAaNy4uhn2xcXjGJAIf5DuFziMry8lPWZRr9CMqkqmDaFptScToa6KgG42\ndex+OWFt8coefLS5BfNP1vqp+ZVCGNgIJHk3AdpzsBDhNdHjDJx7qvnRQsRu\nKIcrBwEEbS1lbFFMvlcuVou6pBV+WVFzuBMIyLqVyCjivPtNv2ck20r0fzY2\nsBndC4UmbF9sh0g+uYoOGzo8dE75jjc5n8+J5KH9j6dRsrsXmP1K/RvUnfBT\nofEB/qhaxqdMafFTBlQ1iTGY15wppLRLOdYxDZzDGXCdzPAJoZOdSnaVvhTE\nUjWAQYGONBMD0C84vUt5NVaKIMqWmiOnYiA8FrM3tCBvS9lRUWcFrGhkwjdb\n9rMtuu6ZIj/w/BpEbZWKrivYbdK6E8DtpfNTYv+5qhWCDI1ucbF6xKu4jpg9\nIFui\r\n=Lr3j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.b273afa93.0","@material/theme":"6.0.0-canary.b273afa93.0","@material/animation":"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-indicator_6.0.0-canary.b273afa93.0_1587164571249_0.7786117484728958","host":"s3://npm-registry-packages"}},"6.0.0-canary.b70bc601e.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.b70bc601e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"d5f3ff5f537ade3453051e86a7a4ceea687ebddf","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.b70bc601e.0.tgz","fileCount":38,"integrity":"sha512-Z1UkAqsAKEm66EEU/GBHpWuNvIKT3BMEBAyep5WU+dN8luOmaPWbw5QB49Km71xgat3V9XAEBqugrXp1RV567w==","signatures":[{"sig":"MEUCIGh1UAm1/6NCpO5wxS1boLqn2ErH/qyzE6Yl9X2h1hhKAiEAw4d74NWT9XSfpvFeZC5BYkw6zgoRSLE/4WgDr16mjJI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjn2CRA9TVsSAnZWagAAswQP/2Iz/vchtypKrzILV23d\nQepcosHTDvaHdTZN6REIVSHjzH2NTaeWuh8DmOCZJL5mBT1uCTDNXDDA83+C\nS/4wl5e/pQ7EopHSu7OBXiCt8n41+6UxjB1/rctIGGhrljR9CbqLYgIKRAV8\nHv8XvqRhxwu9qBDQX6pK9kd1BADraqL/1/ZyucXDMfQ8A4jPz2grwr8eQC8P\nhZz865eOUjeZuECpdpjAsvsjvv0asaMx7pbZWu/FfRb7cK/Jf8tKIWbUJ5UW\nRvxaiBkttu2rC9NK8UL5jKCaqD6bQp9da0CzRV0m/R/5Py1I1hHis7waH9CB\n+pbds+Lz/2zzen//p2QaE9q6tyRcyGsg2qiicglqbTYkJqeZSOQOSNCVd047\nWviSVkdHhZNWJpEBMEbBgdRWopZRTojU0MuzeTYt9FBsX6P5iGoPUxLQcLpb\nxO6rT+z3qczu/JMs995mKYW3/l0SeVboZRVm86MHNm2TSYndRoDMSDI8VuDH\n3sKlvqAExvqU1e7ie1vEqzudmHFx4R6xqva/eDohFQE4Ncnx+VBdEOemBf89\nYAYYjQl3vYjiigOuC8dnYElx0jdK/m48JN76VEfrWla7+lLrXk83Pjr15ZJj\nrcrvfWZUOz0m6Sxb3LKW5Xz/rlBtynpU76PW7iBh5/Hx6FBax2zR8h7e4GTY\nsPfm\r\n=PHFX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.b70bc601e.0","@material/theme":"6.0.0-canary.b70bc601e.0","@material/animation":"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-indicator_6.0.0-canary.b70bc601e.0_1587165686053_0.4870003139241621","host":"s3://npm-registry-packages"}},"6.0.0-canary.c4b4bba96.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.c4b4bba96.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"51ada88cf572d878e5de2fd5754f9ad53e48eda3","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.c4b4bba96.0.tgz","fileCount":38,"integrity":"sha512-3zvVJs/WjyoDhLLdkge/THhiSjRMcA+1m1P9zyKcAn7mjjULlB3OMZXe8A8/FZHuNJDOKK/QaxnLj36cCaSBpg==","signatures":[{"sig":"MEYCIQCbiki1JGdC2CKXgHxSFecQ95UKa04ZrJQy61e6VnzZwAIhAJYD7ECMsVBKb1mYLJFm9hzwvDA4Ve/m8wTqGaMnvses","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemkcwCRA9TVsSAnZWagAAkC0P/j7cCCTPmbMo1ZlTY7el\nPSJsa7jaxPudVgvpLmxktzgzF0zP64pDYgYBu/ohGiHbhF0RKV7jFkKtPDxQ\nzKkdCfCYQsNaqQKTSwkM2ZuZQtRpHLINsHy4bojHVV4M+G6yz7zU3jAIXMFs\nN8whSVcaVkErADSpN/Suev+FRgwaOfB474ldyPAcAeg1kYs2Ad2G+Fgpeh/3\nRuOzMcZQaINi3qM0Idkmh0IpbvaaiGjC4qSWVBwMUDT4AHDMJDPMOLPGkCs0\nKxvivbj+EmaE/PiioU3R6TZ+Gl9RoD6AY9iTDsrSngqVhdlVT5gUgGmAWckG\ncmgA/Mvru3d+QHB6wdXuGQ1HG5cKBSN6ukkZB9KgpTVaa7VCqgj8TNMUJaPL\nI8Yy4kYYhAgKH9H64ncN9tAe+9VSPktiJ5AAckpMGu3OFJag8jJSXuZPc+p8\nnMskqQ6h/ijLZqABdVoV2KmEmd9ML268951zrxkjqqK7ke9svwJzDdBcBtr3\nm6721s8jRgEtJu53FtBL4BundfJ8vOYux/jrioyYh7DV8nSTBSluFU0xOEe8\n9tPMYS1soOlGf5AK4ZNv5ITfv9eJYe3/rav3cDAWb9JrSDcfZB7yPErNE4Q5\n4AkVtGH9GaAwnHABiGtO7YIwVzFi0DrrFRJOTIcniXLvIokp80r4MtAtRVIq\nySj9\r\n=4M7j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.c4b4bba96.0","@material/theme":"6.0.0-canary.c4b4bba96.0","@material/animation":"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-indicator_6.0.0-canary.c4b4bba96.0_1587169072405_0.749169958607985","host":"s3://npm-registry-packages"}},"6.0.0-canary.6c1ebc721.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.6c1ebc721.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"bd20a85719dbfdc1f43e9881c46386d8bfbd881b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.6c1ebc721.0.tgz","fileCount":38,"integrity":"sha512-7VDwjIgOyfbbY5r5cJ0QF+0YRDlGd/7Oxa+9eKV1zwLwraJGRnuqHeeI39ThAObtgH7lbePS8uHw0BC1w9/IHA==","signatures":[{"sig":"MEUCIHx6+hzgzY8H+yepeulNtLq5w4YtB/vSjPP7SQ48w9y7AiEA/tGkiuQ4G6lj5TVb5fS8dxNh4B9pmYndZT/4BHZR/tI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenf7YCRA9TVsSAnZWagAABnwQAIVSA2pi9azc3lu+E3/s\n0pKEgrkhZeXrHfmWmTItwGeVh5yjYDM6TY1oYcqDw0IRe8RLE0mXI9Rn+u0z\nzA1J1dT+2K1B7bnY/imAeh/0Yxalb0VOcMqd9LQpxZAHzsdKgaoZfmmUKp6T\nYU9nIVuv41pCFG+zkh1nOFX0rVBReZwJTYKs9glh/QRZn4E4M4ponKGdPKFb\n6ArafOCeJc8yGkiVXwZKgq09NSFdAEqLnJx+nYBA+wGvpAXEMdfoEmssYNWO\nRZ4Sv7EMwlieGcg8aXeX+AcBxb+Um63PuQHsqe28siJYjSS93K4r1IIcWoE7\nX6BshEz+I+9XePnHG3fJ8XmhSFzxOSQ4kv6R7tNi3SVe0TAbSZyk2oBgsfo5\nlylSv/Jahm2DO7rXsPXSEA3FcqvNWykFwHFVXwdwl/+08yXfqypTrxoZJA8i\nYWg8mbNIGxdsMZwNyrmggx76ZJ4O2eW3+klsNIru+XaxGoIbgLBfSmQ6bRQU\nwrxwDPGAZ5TU0PQHnPxPlU+0YhuC5U3gyi1GUojvAgIho6GZ/l11NG5bUpY3\n1Nga+cLd6eFDc8DyEG2nSRQINmz3BbfOaURonJdmOSQ8UZYfvpDZ3/ahUt5d\nUYcIG4im9j6M6VQoGYMC3EMxyi2s9S/KK1d7n4GCxuy4IfEq7HegFcUoObbo\n/27s\r\n=DVHr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.6c1ebc721.0","@material/theme":"6.0.0-canary.6c1ebc721.0","@material/animation":"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-indicator_6.0.0-canary.6c1ebc721.0_1587412695874_0.8330923617442614","host":"s3://npm-registry-packages"}},"6.0.0-canary.9cff4318f.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.9cff4318f.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e8af0eb7531dade781def4f398e4e8199018ae41","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.9cff4318f.0.tgz","fileCount":38,"integrity":"sha512-Bg1iewZArhdhJbxlOfkIeovl9x3hZyT9HOH2KJIZsCyt83fTbbq+3PgO/v/zW0JjXUchKMgKYsEp/CE3qsPq3A==","signatures":[{"sig":"MEYCIQCBAcA4EZsAHEyzmdVh/iIHDckWSDQxlxgeRoMOASaN3wIhAKSXcA4DlVvSj0Z5ZLTKAptOYNt38mhI1Fd/i+wjQ2UJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJengxSCRA9TVsSAnZWagAAFNwP/iziqi/OQ+0ofUIHn9fd\njUTf5tMEYn/NVoxFobBx8Jl4Pm9mlylFDKpC+t5Rgy//ERX0SwPdsPQN9J2C\nTE022B96M+eRQ3RulbtOk8PsjZQhQMcElQyOIsipmSDKIcUaHh+X/0ykM6fO\nJXZab/unrfWGblnp/X1LdHNPSzHX0tPZm7T/O03KS5IQXZfjHlOPAc61WT3K\nCHUc5j1ufvA1DPpqkMNWPfvcHKM78msVxvFzM0QODxLkH29ao3SaPVRi0ddl\nLmgK5VY0J6MrT1rEMkEkE4h5apVQHkpr9fA2g2l3/DjqZdiOnx6kK7dYxSX2\nC0MhaaRax4m6NB0Y/M1TaryfTeuHvzGP9kVOSQ/Pd7cUL55o8KZdnUxXzBHo\ncxou38cWUaY76ALKwvanAZm3f78t5232uojkpSidFQrQUA8lG9IFksa79/lZ\nQ+opHn/63AZOUMmKPBpIGJkwZW095cR1p41cNRLKwCYQ9n1MdxO8kXdd9kbw\nJD5juI/qQqvQCuMI4OEtOlAb8UZH48YTPEOad8OlO7yC8sVgscu5AngiEv48\ngNNwRPfphV+WiYGYeQbDLf5C1ImrNPaVfw4Jo/QTqKVUBBPiAX6KLInTBZBn\nVX39NTJ0wLvpdDXPVZVJyFiIyCctFc3lUNPe++O+uVKXErQlS+WbVmPn5Dpc\nZSg2\r\n=lckG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.9cff4318f.0","@material/theme":"6.0.0-canary.9cff4318f.0","@material/animation":"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-indicator_6.0.0-canary.9cff4318f.0_1587416145645_0.6801480989761619","host":"s3://npm-registry-packages"}},"6.0.0-canary.7b4482402.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.7b4482402.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"2e27a2857fa80e6883f16878e6e92fb3dc7bd3d5","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.7b4482402.0.tgz","fileCount":38,"integrity":"sha512-lyw79SC6fAIr/2YBHsOhbar4CrSgyuodPXSKrcvnCpSPeZUY+PVN4VzhILILX955K5OehmnpkIVIbSzXJxXmwQ==","signatures":[{"sig":"MEUCIQCzl81BBbMqQfF/U6zHHJm3lMi8lRbqUh5lOyhS25z90gIgC+6b5m9eOOQxJEHLjtKd3VEi9fgt9iRVQAJ4X701HrM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeniAZCRA9TVsSAnZWagAAaeQP+wa/iXWgjAaA7UzycIFt\n9g/fDiqky9eil1h5yXjIFXjECJTSKlb8EmI4r4qlInjCveUq57z2uXDTHOoP\nFGb3UMs81+dBbiq4gJQzPNT8FT979zF7fEG5T8IV+pEJ0+9K4PnkEuV0uFhp\nwZh8f2IwAd0dqsTzxkKSWkJ1YFvZYkgrcCfRCoGbGoJJWUPy6y8k0gmKu5If\nxVxavewlB6YR/BxAcKp1OLb3CL53+lYAdVYuXs/WDfs0eGF54QyD2VwT0sAw\ngw7VxRHhjQI9V1c6xU62COyERxsQQ2V6dY5oB9AHscfUZUh3lgVoDyD2JQ3K\nADFgMsYpeP2eA2XeuTi5qDnWT5oP9YK8Fh7WXvz/b6aVW3CoWHW9Z0UO0e23\ngxVL3/rQ4K7tZGhzNDjP1z4x6Cqv8B2kO3d/6bFk49FbIErIQjDuY8XtKx9q\ntlshFZ2dRIYZevj3metQgLCNVkvl8ZStks7hCUWRST9/Xy6ZirmzSoq1meJT\nftf99zw/Hu8A6+ItMP4iU+BMRy3M4n/1PdZE9NewJEgj8116j2RpGH+IxgKA\np3rbAsFcu/1dmL+XjQfLS/eRWKYjm/Dy+C+7lYjpGegPASQek+1crqqBOIb6\nVBnpNjYGbzSOK5ox/kIEf/3exUo4cw2uf0O98FMaozAqC/sonk85P5E1HZJP\n79jA\r\n=9d0d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.7b4482402.0","@material/theme":"6.0.0-canary.7b4482402.0","@material/animation":"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-indicator_6.0.0-canary.7b4482402.0_1587421208834_0.10389503814902357","host":"s3://npm-registry-packages"}},"6.0.0-canary.deda86d8c.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.deda86d8c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"d6236ae51e4a58d671cff8a9f3301f0a6ae07448","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.deda86d8c.0.tgz","fileCount":38,"integrity":"sha512-OUcQT7Ss72whl1kMdPR2RAednRls8Vp9kgQDeYofgtwNtB6RgVr8srMd1KxTHaFAOdR+oI34hXh8otbkwC2AdA==","signatures":[{"sig":"MEYCIQD+yK7aM4pH4orFzNE3lhfbymVGtsS2lb4Z/BvE/OXqnQIhALRM6VlAfsyqa3ACFo9vuFFEe1EzFvdRA8PXLf2DO6cZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenkkHCRA9TVsSAnZWagAACR4P/3ZhjrBG7mCAdshPvAfM\nW6qis0FHPVeI46TqaIvP58X2rlP7ydzgGKcoJJmEXPjqvrLbelKgxa5WJhub\nNUOi0hRWyjhxqJM/OMaR0bh2+7lnLonz+AGig8mpP/us5+bWX9BRgABDynrb\nRbw4bx2SVtEF8IFQAOKrviChwNm/eQhNKQ5H/NxddpFc7MlbWwVf7hylSwig\nvOmgrzjeAmIkTzhB+PAMAf5PJ+LpDvimGTkuE8R/X8yJxQmXAUnmnl6nEPjA\n6XdL57Oj9CWMT+Zjyjb3F8GOhc69rbLlWID9BsrAFBnYHLhG3PnwWraRH0k2\nWwvyz1deR3/tT0/SWY4wHNdw0zcLuY1EO3UjtN3CLFBeI8gYKmxBLJCmX3Dj\nMbMLhDrqK2cAXapB93eTF+fyUax95WFN90t55tjo9eSUdJKgS3yDOA4ElMxp\nhnFMZRpctCv2a7UwV+a0o/a38RfWc6Wy1l4iokWH2q/S8CAPICj5OlrmkRG6\nvysSuops5VIAN/rrZkAdN7KT6hifnzD8OsI+DKVfzlBbpSF6A+jKbNZ6RraG\nCGt1gvmAlFYiJFA8pbI+WCPYLrwUcvL/FyfJio/yOnpo5nvW9TUU5jq1coN5\n3vYgI+v55SEtun0RuorMcrP320lXTKnvVm3w7/XBfUv3ggvuM+6l3QtH+++3\niZRq\r\n=dHwe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.deda86d8c.0","@material/theme":"6.0.0-canary.deda86d8c.0","@material/animation":"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-indicator_6.0.0-canary.deda86d8c.0_1587431686563_0.2875885559326483","host":"s3://npm-registry-packages"}},"6.0.0-canary.d10412cb2.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.d10412cb2.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"8450d65bfb5a2680eb7f4a6e8a93c93cf3e3f18a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.d10412cb2.0.tgz","fileCount":38,"integrity":"sha512-y8ezt0SfcY+RUbxnhldPFacoqT2KJveYTSKbkCYb8SglIhcq0tSJdSKmXYCzKZTf8YFVk5D6kA3CwPVCBw6Z1Q==","signatures":[{"sig":"MEUCIQCX66fC8FPB+/wpl1MiOvYtQeFQdO3ZpNsv2iUmSPzapQIgdgqKWA6nxtNHopP77vFCx3h3bT0O+JnkllJpmM2TibU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenzjuCRA9TVsSAnZWagAA2lAQAJhiJlwJNy3BsyDFFJXw\nsuyvvIWAwCuJaHBMsV8TGe1QyVTbTdDjhfPizTf1fjeS1Qa2YVMf3kVGQ8zF\nmxdYYCm35m5SLhLSO36i+lwQl0tREH0s5fk0tr9dNiAdRb7VN+cBhls0/5aS\ngU44T2CrU376t5QJZ2Tg/3a52KPfShSgmOJKOacsVEwGwOWidvflvO+Oz6oq\nNBRjJDmFZNIWSpakLcCVa1fUXftZ+KIY2KYqiaet7P9qKWkPmD4BMAgkkx3n\nmXN5lhZKNGEV2wbsYXohy7M2ZUfCbfiC0jRIsyFWuZJ7rek6HTNBsAIeeqCb\nQHdOcxqX4/QiG/l/CipED4mwVAtJ/Ysd2VJac8v/oLab0l5jdn0FCMr/x4+T\nczQA1sU1D3gt+7KMYiE3dSybM0V/iBLeTj+fZLldEnZ2ekRIcB2de8XXhQq/\nFZoMhEOt3615z/wsmSMYVFGahp6U1bGk5l9qDwxaKtXjyyZdLFeNFbQ0GDFi\n2JGj5UUp0Vy5yU+hyuk3ISBgg+Am99Agj+GP43XbMcQjPQFKcc/EMuX5YZBd\nT3IuXAtzozNZKquPC84ZPRPtjrtOXEtbi3dXUDzct3NTA70e0V7y18mElAee\n6j5MZXsYqCWliG15aA9cjZW5uNyZ1GTDUNq4wHKmJfM4XnmkYCG0TWH3+f87\njyAf\r\n=dX59\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.d10412cb2.0","@material/theme":"6.0.0-canary.d10412cb2.0","@material/animation":"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-indicator_6.0.0-canary.d10412cb2.0_1587493101558_0.6386228899295165","host":"s3://npm-registry-packages"}},"6.0.0-canary.c141801d5.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.c141801d5.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"59535d4da464fe3b9bb41d937f9b95ef1adc914b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.c141801d5.0.tgz","fileCount":38,"integrity":"sha512-uUy9OgV07DBbZ3w7cMrSeEd0IOhnaIlRoVCSqfcPoJmQt0nBxW0T55U9pnGLDsngwyCblWnCfJPVlknBQzfAjA==","signatures":[{"sig":"MEQCIHbsMcut3GI4hyC98bNnSTRtJRwkwGyw8RyRminobIeoAiAuWjN5cPI6E+GOybM1rJjHTk9yaHyhXYupdZasGAqd0Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen0yACRA9TVsSAnZWagAA2YAP/0QzI3m+yNqTcs4WpJFV\nj7n8aljtvvCfhOAKaLKQJAaQWe9HNiuc5aSvhUjv+lihHqyQsK8d2wqL87xQ\n1Wg6niRBQ2BMzBEmvNx9Vs6jd5IqjQMIj8xPbh3hLFNFlo7rl5cQvWJWmtod\nFhwly9FMvfxdc5bhWN19oIGsijK7EU5MNPbNN4s+kFJe/Km/vQ3ufWVeO9RQ\nY4BC064AoOx+8iGURLn4xi4I3UNBSWpZMVHgoiHFOsbH+Fodx9KUrf/w7OzC\nXB9WrYTkw0qbZB2GWHtSzqdYZIoyCtNOseiUZ/jQFE1WnranPeH28V11xgUi\n2Fl8kdj7J+kUyE5FyQRpy3zETak4ig1iqy2oeLZkv+PyHPSywpOJ/Qkj9gQn\nzobgpbj2+0lx8IDxpKom+ecbhQ+WP36vTsuED7CrxmtCrTJl9K7sTb60rd/q\nbg6ehtVzZjq22IxJzPXKRwAsrUiMHZkBjoKk6koc2KVioI5SNO0EGl4Ko7k3\nmIDme1cKeyB2ChQFYBqb4gU9Oje3SKSDuEMPNJHGVTdzuiKfIiqoC6xcCVlA\noi8RHn5D5dddJWXBhvIof+bX06jOyuKx+/xfbbffxA3goybPxKEzslLFR5Bo\nwKjAh3DKWuINwbERCFQoCwSWcKQYoNZiNiJGP5Q7tXuXMhlkANPITyAqN+a3\nwlLE\r\n=DuFG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.c141801d5.0","@material/theme":"6.0.0-canary.c141801d5.0","@material/animation":"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-indicator_6.0.0-canary.c141801d5.0_1587498111945_0.18903305478059873","host":"s3://npm-registry-packages"}},"6.0.0-canary.28d10a96e.0":{"name":"@material/tab-indicator","version":"6.0.0-canary.28d10a96e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ace292eac585bb1d0b1d5e0b221f0910adba4b9d","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0-canary.28d10a96e.0.tgz","fileCount":38,"integrity":"sha512-bvcdGxlhEa8/WXPKnheHZn5bAKSN9Z+IGUsZNUAxbkU0oLL3e5Ph4WQcCFMVdRACBrvrN6fjzlnC3LuJjZw+1w==","signatures":[{"sig":"MEUCIQCEXdVewWOI5Dg3fw9GateTd9gswffTRjulmLNv9XglGwIgE/l1A/le0xH+oogrttcPQv0AC8fN7vc/HsZ3CZgxm/w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoMAJCRA9TVsSAnZWagAAtwUP/idvnPIMTdbsPARtQhVR\nkObs2pTE05lCjfcQiqAhFBFAIhgRdcal3Y/REiqjRuu3p5SSfxLb7ZyabqKn\nnf9D2MD23WUZ8Exr2HMStBaDyFcxYIoPrgncriho1JA8XbXLiUfmDJ24rvBe\nOVgofn5mf1e//qwRyGANmPfpA/a75XJk5GUFJhxqc+DtFBfeUkJNxQqwiqtT\nujcJ1UtP1/nVJC9r8cnfSBCCYKq4Hceb88nGg4fB7HLy3j5KIHGLftLRJaMF\n7Dk9p0BZavLzFVx7WLs3VTl3P0r3Ch4F0ZC3VSYYf30kSuFkloGEHDStyF1V\nZQiutVJF//oyZ/qa2Egk5n8W7+WpgENB6+ozdcNV5svlFy/+8lOeAQ7Q0OeE\nrg5NflyP83HHLOYTaF6C2h1+9qPJb+/1GYSvoivXMxCjFA2Xuo97sYEMkQgA\nPhyfEN0HOhjWVMzBZ4JUUbLRwFYwYMTR/+9yYjZAsLRHVKLXPANAJ1qfzaUm\nsEcAFKfxWF5TyAem6kXuxrwuTrm1Ej2pLq9kbkZ+tGQYg4i1jPRx7pfmws1x\nsXHm+hbnP63Vd4HnluRBuQ2qfbS5GKpCotJ9/Tf2ZWq5mMiKMYqwD0HPhN8s\npqFJPaSYr5a90I4RzQ8FbNJE+ygsy4KvI5rB80Pf2TEA03GiqhOPwrKLFwq9\nxKQM\r\n=htTI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.28d10a96e.0","@material/theme":"6.0.0-canary.28d10a96e.0","@material/animation":"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-indicator_6.0.0-canary.28d10a96e.0_1587593225376_0.3481629565844049","host":"s3://npm-registry-packages"}},"7.0.0-canary.8540808be.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.8540808be.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"6b3d882126baf665f81bac07c9e84e3e766dd66c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.8540808be.0.tgz","fileCount":38,"integrity":"sha512-4GcUWxjnPiuaVO4yXyo3raKZryYnAP4MiBTXMYTXPvq25MQKcaiJiiDqU39c2G12+EoYhMCxgYG0qOg16MVUhw==","signatures":[{"sig":"MEYCIQDexsAwhpSCzxzzHlSMt2/eYwmyIOoIG0LoNyXlOwMSBQIhAL9lzb6MP0qfm8RBGXGllwmO5FzxU8MorKb9N0owmYD4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoc+gCRA9TVsSAnZWagAAS8wP/1tXdn1eRtJiIcnb6RLW\nzrOl7iJJBesB5iIyTVBWVhj2fZ/2pvYjciepMDrl5JOS6DqJOmB50LI767rZ\n32AIVlke+y1s7MoF2JnBrvphll2qhrjs1fnkaKCIAZuaRAibClC5vqOKcrSQ\n/pcz6m379oQtoo1t09cguD7+imb5XPtqqq+Q7X71DHjKgrku2fdS5YLW9//X\nlZc5isdPVhC+vW2IMZ5CuzNk4OpbfqRTb1fV4UyBH3H5Yu9A6eFXGgN6bA8L\n6mIECOt+bjaaL1qvxFnx2np0ay+jsnpgyRMEpv6Zb65sScgBAH+28gwyn4wM\nMV3lrRvzNwdjgdwv+KuLPznbutIV0NiIqlKANrQ8B/K8uG+DUkB+A8u+mR9a\ncN0E+16d4Cr2ZDzVazIDt5fIjxLPH8gbQ7jt06ipSROqQpBOkq3CuMouVjxk\nCQ71iHF8/E2oOFj2xpl1dL/awJ/ixs4MRZSp94BsfvnOv5weH6q6cmxs51lL\ntOwHu65xF08oQ6aNoX0gN6v9qZkQmbss17FSe0AYI/shFfCWPZ6nL1LYsql3\nTiGIc9MkO/IaNYWwwTce8GoD71W5o/QYjA7H+pYBzSvKxMiVuDaf9XSlnCmb\nlEhvzvwloEerQ/JLtjwIlUEKcV7MIIsWmXlyfEDPYndEo2e9xGGg6hljBqY+\nRL2B\r\n=FVc9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.8540808be.0","@material/theme":"7.0.0-canary.8540808be.0","@material/animation":"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-indicator_7.0.0-canary.8540808be.0_1587662752211_0.8593151321387982","host":"s3://npm-registry-packages"}},"6.0.0":{"name":"@material/tab-indicator","version":"6.0.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"b54947ff124baa54468a51da65992a081ee034c2","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-6.0.0.tgz","fileCount":37,"integrity":"sha512-/UKc6C54GcClb+bbtxZFgkaOd7VfXcGavJ43x1uw07Yn+YHhxuBt0oh2taaoi2t/dJCL1M1hW4UfcOTDFl8w5A==","signatures":[{"sig":"MEUCIHFSXZHOOd4EjCqKyyxM9hBEwOHdJoDyQ9CTWsXInssJAiEAzE0OHS0S4KKzxMdu+Zcpa0oHqSBHz4uc5bMBzFjCy3w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoc/CCRA9TVsSAnZWagAAkEsP/1Kyu0w30dtttKoTbIXM\njE86zRgby5LqlKObp9zPnTF6XyoVNGvA5QSAECQsF2DK0clgZRvqsfI3ddFe\n+whY1evsU6kWsRbyldOydDRyCr83jsVfhHROLPFK11Opc5AANScjlrujTAeA\nVFh72+5Bd5Sz/pkTsSndRG6mvyM8KHr51v3oKqCSe3dCQ2/XIav0p13mGovP\n4I2+9dTX3th7JJcwcHh+jqF0TPU+ZgrHl+nKrV0OtQzMxF2tf/4Q/TNgdiN+\nIvuhZngXzODFCR6wzwNQiMt/Pj46NwX1D22yt83FTZC7IUaLoTK/a5uj6chZ\nBOLaLyRv4bj44VwNGml9Z2YJXM1B/GI1fLEMmvOpNmcb55iw6stDdHS2MBLN\nXcEZNeLigHWOoDTVcDZ47kC4COUQF64CiwhU+OhH2LZ2/9lLXCvXW3nP6dJZ\nuYrrIFkvL7rqFXTuXAt0YXnFu8VMDatDLmoswVOsbK4m5PqCst9M9WGd7HAn\ngoWXngX8ZwEO8t3/iTorZhzz94Jlbyw4knl/UG4CmTrCTcl9cufasjZ1qX5v\nJFBlMjB9EvTqLtonYBz02jepV1wtkAN4gqpFw0UCK1/f4tkIIWTAh7JDjNGF\nUJHi5fAYTibJh1VYoRXP15sLV0R6UkHDi2AQplgbnfQh8SAlgHCHzigB5m3V\nr5tZ\r\n=nlur\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"^6.0.0","@material/theme":"^6.0.0","@material/animation":"^6.0.0","@material/feature-targeting":"^6.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-indicator_6.0.0_1587662785609_0.48921271079222217","host":"s3://npm-registry-packages"}},"7.0.0-canary.2673adb74.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.2673adb74.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"b70d1149c8def85345361169d6c2fcf3ac249bb1","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.2673adb74.0.tgz","fileCount":38,"integrity":"sha512-MImR1FS+6LMEFY2XnKFYk/8WaOMZ0xBv0j/in36U4u8gI3kK7026dH3RMLV8WF2BE3qpx6aQ+l2ooWkkUshUdw==","signatures":[{"sig":"MEUCIGv0BJgipOUFdwWnz2j9nlMCMNqmkVwgTxMZ3rnFJDONAiEAv223ge+7HzcBozIeHkFmrf77aC+wYX9utX9iyaCELLs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeohqMCRA9TVsSAnZWagAAYi4P/3YQ/eGFdlbJmvLMGsqu\ncvEpN31Wlsa3i4e4SbtWkzipXEiIUjTrHC1Cwi0oWTX/BYfaPPgYjdjFI9Gu\nncDPNnmQRYs/qws9AAKCqqaMSAGZKlsgT0ieJtHe8OYNXyprJy1lw4VvmrQT\nVscvCN+hNrZpJMdCkMUq9zP57k2POHQdQRuNfSHVGo03M4S9Mnze/MvUJZCZ\nWxjJrc9bi1GSb6DrwAlPyeBoDxcInAN6zkCWD1tVmDBamkisfulkDda9p2tn\nZq48l86zR5EgjoicUuM1IP9Aa7oPOeXq4/IXTCy2hdTRcjH4Xbrmvds2isAu\n8Ygw0woC/Ae2kdrdDKzTA2v/a3OartyU7iFI25gfCw7zphW6aHUpAIC45dKo\neVfbqy1T8ki6hcp50CtasK35bO4gtQ3XRkXaqBnAZ6Kc6xDwZs+xxwJF8sD8\ngRfmc/ZHA96qGAyYU3TQHAMQmo+vFVSEln0m9FCd2RqMsY1Ixa3GGvNMFtKq\naVTlCLunGfHUaw6uTz0TuKiFWjfHaxXSCzq4ce8y3mTU5vXIju7lDRnHmxi7\nnW9AowwmcfpN1xuERdxulsDvmpZfrC0vBzqIo1fwykio22hrzrpkRUIB0zK5\npxR8gbGrecbza/G7Cu/4bEvL8Z95cOeR1tbk7RVPTrcKBmGcOnLWQsJ7ftqF\nhIJc\r\n=33S0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.2673adb74.0","@material/theme":"7.0.0-canary.2673adb74.0","@material/animation":"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-indicator_7.0.0-canary.2673adb74.0_1587681932521_0.5321595304524536","host":"s3://npm-registry-packages"}},"7.0.0-canary.b10d0d7f1.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.b10d0d7f1.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"8e043bb2b1a6cb0eb6ded0bf296fbf47062ce0ca","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.b10d0d7f1.0.tgz","fileCount":38,"integrity":"sha512-zTMGRyJ8S/flHpFV4RT3kJ9SsqjPdzv5RH3GYuWb+LlMzyvhtVOaqeOte6ANc9gCwMtL6O6tIVL1BW0IfMHxvQ==","signatures":[{"sig":"MEUCIE5UaKTUPGIg7hiy8gUYhHBTEMAXxov8ZH6kJYgAWV5gAiEA7Ggj3u2PqVj4ItdMhp8MbpTJdQ53Rcxap6XzqFGKx5c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeojDvCRA9TVsSAnZWagAAsEYQAInmltg3jXLlK9hcV81V\nWmrTpByMJ87LsCEme3CErrYam8zAjBI34iCU6Yzt+V0xF8Dqk8L1YQ0UWRwo\nir2J34GpSZmuj2aiSQ7UGcbRPwCfsnU1XwQ7i912OiPgsnVvwTVqf4qSWM95\nkJYDlY1LbW09nXFEwNNlxAywhuy5keugibEsRcyaUJhHDf/1pbtCyYP2wVol\n51+QX4OwLeQcUhBKQY5jBsBtT5nGulCzzuYy0LukxxDB0SpkkGUFe3h0Kt9K\n9l3kYf7NwTdLnKHGcOUsrSD8kZaO/yO0L7RtNBeZMEfe3OFYcYiQLXlfHJLS\nhsqmLs6Xy6DjqRRpuHAbioJ5snJC/YtOIZllznuP5UcuO3Omss6TwHUEO4E5\nyGIXF7i8aMvjSYA734u/8o/O9GkBgn2/LoBQ//rB4mmvXU9Bgn49medP/l7K\n2r9SeFN9G2vh4dd+ppREdFtAhn6XtVLjh2DnoLib+qNDq7SFaBNHrLIGNsFJ\nfVGvGqLmDMp9+jJimMlFLKk/zDgSYf85WEJ+USvfVFVGkgwkmh0nR2sMh+kX\nGNeGh7+E4l7ZyCK/SOHlGY+y6djWcsJnx8kY/GUnaysAOcpUFV10F0rna3lF\nOnVVDbZ2trKLo1kSkXpfM0LST9oEB4IeS0zKTnijJKYTosmNz6eUnbce47OZ\no/CD\r\n=SAEg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.b10d0d7f1.0","@material/theme":"7.0.0-canary.b10d0d7f1.0","@material/animation":"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-indicator_7.0.0-canary.b10d0d7f1.0_1587687663246_0.580338003419093","host":"s3://npm-registry-packages"}},"7.0.0-canary.3bd8c1bac.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.3bd8c1bac.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"7f373db227ff001eb94ea599445e13e778ca02cd","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.3bd8c1bac.0.tgz","fileCount":38,"integrity":"sha512-IkG6OMax4MkLG33DDQu9BRPzv3xPivVxVTLSY18bpssd0xwTU6FeT0td/xrK8lvb6MLel5RJyYMRjcktNMCZZg==","signatures":[{"sig":"MEYCIQCwf0scR8N0/JWBijfbiop/lqF0sTUn0l/Mj86ZZb3JYwIhAMGWsw0zCSJKgYC86QxknWzfHxWqWhsAk1AXLSqOjxkX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo1S2CRA9TVsSAnZWagAAtAIP/iaLFaHaNnTENBrRGozF\nn5brdBNSuIfUdHS++MlRFkopY9lITKHbIICQYD3RyYVc1a/pRzjDea57Z4RV\nLCzOFiKRoy2WMXX6gmWT6InUKps9zzVVZ61tVkx9fVwQoDLuiXgOLjHAliZX\nocsuhx+q6r6KTdq4Nr6NOqfFuT/I1JXsDgimZQMQhWFP2UNq+FCGP7aEOtqY\nvGcpfmzyfPr4UT2HVXeSK8zw0Hjefkz4v5es2Dvhaxhzu7LbTJR4+GN+8L2r\n2tzYhJUbtDlvDyWck0uj3FRZ2JED7TBaoLquoMJwSPe/z2zzGK7jQZ8qC6yG\nTkszw4OY7L3m2bhkxbM0bDqU88CEC93heWcE2gIFsLccsoXGAbnwhJ338Q9s\njm6Wi1BZlkUWnxjhusQOM60YBm6g2Fzax3nu70EAMK8Ra3be+bedVpoaREqn\nFlU5rSV6coDMxlb0YQDlv/mt/XzviP8QV6G/kQqIHqXCY5I+s1sNZJ7Veb3A\n850VARJ3GNzIlHJsCNO/ce675ZAqvvSpRpD2J9op5Ay6oSy8tOFAsYRMVopy\n/4ZIwUraDAE+yF8QaZjqcx5dYFTks18XENeZEP0hIKzvx5PdnqrjqsjY3RNa\nNUkJUJJPgovIgoRmg+ygxnlyjM0u1A+P09pLWJ8ohc15Q3/rrazgisr6J16a\n4Oq5\r\n=5e8G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.3bd8c1bac.0","@material/theme":"7.0.0-canary.3bd8c1bac.0","@material/animation":"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-indicator_7.0.0-canary.3bd8c1bac.0_1587762358373_0.5246952618466283","host":"s3://npm-registry-packages"}},"7.0.0-canary.b83c8dc22.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.b83c8dc22.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"06230f80d49b97b093289d4c7c9558b0cf9fdb89","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.b83c8dc22.0.tgz","fileCount":38,"integrity":"sha512-R7aZ36AwgbWIKA4MxGk9y4wtyE10vjTzOhncY1GnHC8/m/J8Gk/ZZONaKY3MlSWtKy4GDmBW2SsDsAOSthK3iQ==","signatures":[{"sig":"MEUCIQCITm5OKoKb3zlJ4vn9SUmUfV35Lj/ReHZ7+xpoaRFXsQIgFKJ4+0dZrPoterK523GFe6WU3uoKLnIbqPYCgRIM5/U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo1e2CRA9TVsSAnZWagAAaTAQAIqDz0hqI70HU4A6Z7FH\nH13Zww6kiWFe7PqjIATCIObQg1kDH4rNT41RdQ9J7eYA8HNoSHyYDrY5qKHf\nVt0debPpmnCRJtyukYHBiYjKL99muwjBSYCTEK0wIh2PzgLIw9YLBAm6xpqm\nlxsxlSKrEOSAC6Xjg9KeZqo404CT8dTK5ySEr8vVk7Kv4mFYDrNkeG8kYLCB\nkdtwmOEaijmwRPjDg4BkOsCuEjgN7OwMPaRow+tLcB/YsoCl5b9BwKsSMi+U\no/8954Oxok7pTfVxDfvi0yUJJ3hYe4vR3sPhLJKtvs6BlmTkWKmK12JdJHbO\nGCqhraNMJWQeLKCwnZZkbPcnA/IeCZmHzh9txaVHEVnqHikTWmdJ0QNnXIX/\n2t9If4OTvCJxIdcxSefZ1IX5vF8VvExdChV8SyxIPHW1GoXMplJmqe72O+On\nsyR17veH7BVPk5AvDim0zSSTumB1CdSYBcuMYbBM4UYutLQbMHrYWmBXNmwd\nesdvO4GThDPRi5Z2T1j4NZ0YH3pgdCk2CM+vZvdUAVNRH0zO7EqQ3kPC9nMa\nnjUDlSDYJ63IXw2vCd/LdkZ4i8W38MNp4SzwwzL9cpLv9mPUYpWXajOgF8Qd\nPWtIyIhLXhPwYDJsgEq3YMcx2m0T4hTiFxaA1HjmP9dJnHzr3UVxrcSm41ta\noAPf\r\n=MQTO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.b83c8dc22.0","@material/theme":"7.0.0-canary.b83c8dc22.0","@material/animation":"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-indicator_7.0.0-canary.b83c8dc22.0_1587763126140_0.3066499154097855","host":"s3://npm-registry-packages"}},"7.0.0-canary.1b3dd846d.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.1b3dd846d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"a9fef3e78949af830de29a83d8da28be75b0d7ce","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.1b3dd846d.0.tgz","fileCount":38,"integrity":"sha512-eB/sZpuicO6qDC6T523R6Z1Gbc7wmBHszWPIvGh3jeavdVVaNkZZYtI0jzrRjFjrJ++2GATa3rKY5+Xr8WRvWA==","signatures":[{"sig":"MEUCIQDVJNmIALjjK5gH5fcdVqRneyDf1Bmy5RB609gCtyAMhwIgMNfTfpVG0zk+kTYrDWcWPWsr1Hc4CCPvyQPWPEVEwu4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo4fHCRA9TVsSAnZWagAA7boP/2sDjqDXg3Zl6KG2TSlx\nuiQtGv6VxCY3QpDBKoOuw6wgyyoWVBoK0ccioqZcDYEJWK7cwzqhUayyP8aK\nSApbml26LXDGvkN7rWVx+JN241dhRmVMLnHKv+VyiJNgwFIeldyQXInTqIQS\nC9lY2hm5wmkPMzPaCqEhjHs74Xki6YV6jjLQ2s1Hx0fAOB5cqzA403ef1wWS\n5awrRBuGQVK4lhgJkzaPP/Q/YwZc9hyb8BOnDNQbcA+P/uo0XWBm1Uqv0hcQ\npQosZ9BTKt51wdNhXD4c6NFhrXeEIWciYZ4fpVPSSO3lAxWGKJZTRDa8jdpl\nexJxEbXX+KwH+7qjNChsEkoNSxvf3CrhPL48Sf+d8OaZgUPiRrgJoiq8rW6/\ncGN6I+puQSOh7ssGYwocoY0P0UZlTuTKhs8FB7CaVGwgNVWC9Ecn8cXRM3Ug\nveCkxJnFvWM9IPCnUeiK7dUKv57vy1wMer26xdha4lYLasMluBxE6N1u1k2v\ns5sJ5l6qOHz/ES4Qpvjzjcks0xRyD3D4UEDDQWIAUZAS6GPUNyKPvR4EJYAs\nifW31ewki/5THa+yi4hVCdqj/65neGtQsCGFdUtBo4BiZGj25rqlzcSEHcyN\nhvb7rsfQjLuZnPy/gbJrWxiF9y73OyhSu2hkYt6CZtgKq0H5TpHDdoTMriQk\nUugm\r\n=OSJI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.1b3dd846d.0","@material/theme":"7.0.0-canary.1b3dd846d.0","@material/animation":"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-indicator_7.0.0-canary.1b3dd846d.0_1587775430909_0.5701501325526142","host":"s3://npm-registry-packages"}},"7.0.0-canary.29debfea7.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.29debfea7.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"98461922237a73b0d6eed4e9fce1bd2f06045d7d","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.29debfea7.0.tgz","fileCount":38,"integrity":"sha512-FRo/bPZHuIc/EmRE+LzFkJw6H11gzAP0XzjxDFWzRjnBh7widWle9wQtMivOinRjigkpqbUht1+tHYiTemFovQ==","signatures":[{"sig":"MEUCIQDQFybxWxSxeH9vGtPFmFd/e4H6Fzp9xsYxvp3wH1ltygIgEe2vqw7OfQitv800XjTt1QW12OCSqwCZbtEAEqDRpdA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeptDFCRA9TVsSAnZWagAAjLkQAIDmBb3PQfuTGuLUibCn\nujMCOxwTHwE2YiHuSMhMpAUyoyo10MLhPvB/zIV5h/A7hLKU5q1EPuO4PR9v\nyMdDnT/5LDOkApCWU+trKf5+qUUjEJ18cEI7PzXDmwZfHy0+EiCztJ90Q5iM\nQsWYdiWd77XxKd7ZXQ8kC54ckNgD7EoHpPvQrWFx/s/LwjfWdxs4uDWn2/rC\nqFabiAX6aLetOHgP0WFtsVGJWuEq6zQFnINc2xwp/CazF0pKvu7H3KhdW353\nFXloUBM8g8cq63Jlk4BNgOCja6FHzxxbUFQSR6P+3GL9Hq+yES1uWbcKAC/w\nA4prLgd3Ten/treKk9cxtF1uth9BpOlrKl15HBg0KyDAhgFUjWs3bTejSSSo\nLhKBPpc+UrNh/HqzDG0St+bJr7Q1D74zOTPkO5ILndHO/mZMzYIyXPvSXajh\nBIqYkPVhMxRzFtgTXcgh8DLc8Q+pdGFFXzAU1Nubgpc3SSkRLRzay3i5C7qH\nX+TYfxumQkCtZvhsRJql7TPvq8obRyHAfX3FJGTLJCKkJojRuMN2iyS7WbIM\nuP0voD2mLYo2utKmAgyMuq2XKFKUzS9dAWUcYOlIYnTvEE4YQsnXHqnOMNlg\nQu5nfE97oqggqGHf9ncY80h44zSVjbmfZ+x7+UO+8UHboTdTul3L+7IagzCo\nUWmu\r\n=02vc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.29debfea7.0","@material/theme":"7.0.0-canary.29debfea7.0","@material/animation":"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-indicator_7.0.0-canary.29debfea7.0_1587990724961_0.152824427780772","host":"s3://npm-registry-packages"}},"7.0.0-canary.28d32f8e0.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.28d32f8e0.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0918fe330e150622b393b390876967328936ac40","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.28d32f8e0.0.tgz","fileCount":38,"integrity":"sha512-OnzDq0tehLJOzvsIpwi0cbapQP7CVnXBvk+BUn0mhDQBIBFTh+PAiFEk9UfKiEV0BsiPtj8t99X6FNOtYV+GxQ==","signatures":[{"sig":"MEYCIQCcxauf2Y74r6xH5q3kt5DRsc/5xv05v94hTS4vni+Z+wIhAM38noXtX/SOmpJ1GgwsRH7vM8oFwWjGR8b2eXP/Fnc2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJepub2CRA9TVsSAnZWagAAETUQAItA9dmOpD5d5WWgfIJ7\nuy+xe0pd90BraYo3r9VrhmbDi73EMOECWh/xRcChOXw00zTS+r45ZnTPCt05\nzIixg3SA3Q6aMiLB8j7A86MgZph38JyTI8nL0AGWpz13KX/TkGFxTmiLa69V\nOTY5D8rVD4iCw8bVgLStMvIwYcpkmOocGEO/X2WZpVeY39ifS5Ze+VqVycxQ\n59Z3Fffp2t+cPETUs+93lnHjyiNbNf+Fb6dwrbwWDuns+48zNN8LThiUiWqu\nhCKOQCJNH7ItT8qWSiE2gkcNsuyYuzvFH0OaXgmtbR+xvXY2f8+MqRiDyDgb\nI9/79JHTLrSzGm6NG3eiZxflCqQkn2eiN4cPxCp1MxirlMH+Mkwh+o1dDxQs\nbBijH+dwm0ZGKtCtahBzmC2TUTpfDSJvv+rgo1xR55WJHQ8OyFanyCB60RfD\njBV5rtcE8OTqlTkgVwybDQrD/8p1FJfZxff7EEbeVBJ7nghSeA4XEd1q2G3B\nda4drXLo5PumbBvYM6GxLGyDCm4DXTibSToriSGttSKeumigOJtfyoSQICU/\nB3RF500/BpePadJrFE4o54nDLlPjchwPbp7WxC9G/kb/rgJpDwhatLOdnPCB\nDb4DFKiJ2YahDEUKZU7MBjnMZKRH5RXUP15/Ej6wDGr8GGbSTSO3+lJwv7ex\nIw7h\r\n=f4bp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.28d32f8e0.0","@material/theme":"7.0.0-canary.28d32f8e0.0","@material/animation":"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-indicator_7.0.0-canary.28d32f8e0.0_1587996405887_0.2282962716820296","host":"s3://npm-registry-packages"}},"7.0.0-canary.af71cfdd6.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.af71cfdd6.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e32932b8a175e1983fa49899a00de10100ede6a4","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.af71cfdd6.0.tgz","fileCount":38,"integrity":"sha512-Uf4JVaySGC5PehxqzIsu4WukzI54iTEBp1gYRBs94X6pYaGdl+uQGt4heyJ/EYbNERFwn6JJyLNun71Tn8TZmg==","signatures":[{"sig":"MEQCIFygCZMkpqZbvKpi6p0SgSVawymRp/GZcXIIRBqMg+7XAiAk5+3O8kUCJfK0xn2cJ2efDFrrIH3vEljD9j2+eAowQg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqLmDCRA9TVsSAnZWagAAb5YP/1+enr1O8wun+yftA+2t\nRVRSJF/2ha1zcpKdXKG2dSkSI+lkL7cfDUYmfUc8rduJs84fOCnGYaPP5Epx\nuBNDBtt2UoKDgXYQQNdReg75FQX4LjnRsyonVtPTdX2lS+NmvrpTgYWMs6kO\nkNlSNhynjLsxSALqO+qSrqNO8l7bSf5Cq5HMWOoZgkCYVrLKlBHR78egx63J\nlDhDILP+KmKHKIjzbcaBxgsyZV1Ut6QsxlU7t+2/s8BzqWGJ4IvIoyX0JBR3\n1OSGNCejd+QhUxxqA5bZhQZ+KaRwkljI/wG6ojb/A++i5PM2pL0gVUvGHe4c\niampdaq9i/P83yAC5SwOdxCUIzUjizfQi0yFcBuKl3imQ8mjz8hbOu+1mGIE\nwn3DNid7OTCpQ9XtbwWIHvyGF6tNh/CfH+APFsIQyAlTZ+5LLA5uW3ksMVf/\n4fgq0UibNRGchse9zJWexLLGSrvRHdB+XqbkxlYu4vkcnNYyiczxreIin06u\nguSp/XXg6SZhlieeiLasz+jsBM4dsr9iWWiqZBYiB4H7E/0CBXbREbpg0emp\n9L2XPG36OUOrJ2xEvG+nnymBl/WycsG2tXIFxsFOzLbQbYs2dC7N++rx4/ow\ncUcFseysWjtwg8RAFoJ1wVe3ZfGCLxz+GF+rEmm2IqpFDYvqA83b4rEUutEJ\nJ/uw\r\n=v90x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.af71cfdd6.0","@material/theme":"7.0.0-canary.af71cfdd6.0","@material/animation":"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-indicator_7.0.0-canary.af71cfdd6.0_1588115843173_0.8142051480526815","host":"s3://npm-registry-packages"}},"7.0.0-canary.99d2fc961.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.99d2fc961.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"f2027fa6043c8a4159aa09a33a892cce0c7b06f0","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.99d2fc961.0.tgz","fileCount":38,"integrity":"sha512-0IQ/Mp6FbQkDuSh186oTInLEGwUqlCHTnKoJ4F1cXRE35HJxJlSlqJQDyadZyz/pL7DB8bj45fDRMVOtDa3Zgw==","signatures":[{"sig":"MEUCIAhYukW4mQZnGc+U3kQU7vE1IR3xL75BdHKtJ2Tzqzw+AiEAyLqaIklsWhZAWUDty27GtzInGD2m+uzOMrZxKnKWF1w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqVpoCRA9TVsSAnZWagAA6rMP/j4FnOux4CV3Go6ZJXEa\n3CcO+itkJSLABNlr9K7phON9GDvW0LzsC+oK7HjDCw967d0ZagjjIP0LOz57\n181u2ptrsGWNlWWuHff6/AtSdgl5L5rK/PM5aEfn8L7Q1UY/sAK3h9uo3WbN\nez65nn2fOIQTzPqtKxaSxFOhDfmw8Q9VBpkxbhc4i9pt8eHFEylH6Lqy3b6z\n4dXXYKPMBlOYQFUmGoetnp7VoejzNcjlGFz4S0JxK6FGkCYv0Ql/y2ATTWng\nZYnIM+OanynsIvo9WMvDjMEMUAPXZ/sP5ahWtJcXf8FpBASn37iC5qWS/3jn\nb/MFLoF8kQDEIQQBact/J7PtNqZ2zQl08+OIlN+i+YCP6yfXnHiuJF5eGrmB\nC8DQe1dLtbdXZ5Mk4jrtFaDx8okZbdNWIp3k9WrHcTnrWKni/z3qNdde5Z4O\nDk9hB9mxDP11HUsSB17w6X+FirxVxDxD5rfzjc1d1ZAAwPW2ub7h9MCw/jya\nvzdTu3rVql9hkI2+ztkgP2B46v8Ek4OVvYh/Rtw7Rv20l0c0jf28gRa4/1uR\nByEaLJyI5naG1EpVrXcjFmfQHE9tjHgFID70MEpMWEeoVfm/HXS9oA7o+vEm\nOuWylRmxi3hDq3XdMtwmvmJa+0jPi4kI16DP3+mB1Ld8OXqMBxhwMpXIdlM1\nHO+D\r\n=iLSF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.99d2fc961.0","@material/theme":"7.0.0-canary.99d2fc961.0","@material/animation":"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-indicator_7.0.0-canary.99d2fc961.0_1588157031919_0.557686437433808","host":"s3://npm-registry-packages"}},"7.0.0-canary.0e052b24f.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.0e052b24f.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"fc2d43e75aa0a4030d8c76028b1d6956d11908c3","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.0e052b24f.0.tgz","fileCount":38,"integrity":"sha512-yft0CZob9FS6X0Fdu70JcpUkK3/fqfgREnOVCwuB0q9mhIdtzcxP368CoYSbG+SXYWxwWTQV4RC/TsHERUZLOQ==","signatures":[{"sig":"MEQCIGv65BuMYWF3f/7KDVOuAhd/K4N1F93iq3IExz8P9mCxAiAcd8woPv9n3EyvGlzHMISD8I802h4ODf5BqzT9ZpZnbw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqin2CRA9TVsSAnZWagAA058P/0nNHTgJdKlZJWwJuEKJ\nFBVTykdq5nUXKC3htI1aA3UQI6JVYoqLAAQLG/ae9hoiSKh1+MrfcekTjkGf\n7EpVU4pEY82WzdkRatWyIEAYoNLH9k/Io9na5X8zZ0UwRXu0UFytuHiW15Up\nxW5oh5eBY/imv7ObLVHOBmm8jIdhVh7l3poxNWqF+gQS/kZSBIWeUb0VOGq2\nm4dmAeVPYgdMLvvKuYTsMIvYdC1mdUKTA0gvvHpysPXUSj8i2gM0XNEkZocb\nbIgOvc2xLJgTj8L4p8cTN0BqIVXEbM8lRYKyt7vXzjgeOJDcrAEy3WFqfceB\nbvB3JtClKyUC5Hg0SSWAja9qJxmcTEP/Q5JZrdHr9Tu/ilu5+JU/2vNmg8FA\nQjsimUaiACHtkUizTq1THhlvd1ji2wbyAvXinzoxDeGz1igi4uJzg+JHpUXi\nZcdZ86uJf7JK4oQIgg6Nl5Bm9VRa0tJzNHr3oH2wp3U/UqV0v++PUuoYDrYL\n2l2zR0oz01utMnA7bJy3rJWBxvlLH87jE9AKK0eibH/oaJ/nqOckFXfT4L+A\ndIGU6Ad8NaTYIeMBZPcj0vzzFZHdos9a8lB5t75Dh8g/+V9f5uMDDVm37l9w\nnWetnp/7iVoQqD8vaV4fvaeKQTOoGRyhJLdBqTfh+qdM2PdbZUGpf/eDIB2s\nnfap\r\n=TlxS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.0e052b24f.0","@material/theme":"7.0.0-canary.0e052b24f.0","@material/animation":"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-indicator_7.0.0-canary.0e052b24f.0_1588210166233_0.44638720027994294","host":"s3://npm-registry-packages"}},"7.0.0-canary.ff4bc632a.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.ff4bc632a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"862be14e7eca53d4038c379f848580ca3a8aa09e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.ff4bc632a.0.tgz","fileCount":38,"integrity":"sha512-He9OQpbhAKZRaWqHRQmorLiGpQFaIvL4VTnQ0fyHEO4MsiBRQ3r8KxiBFj4SjZ8dgFXcQ/xzxPm2xDpmANesCw==","signatures":[{"sig":"MEUCIQCXPkaC1FCtc5g66SlpWDhgNN+r2fDZcQ9/Lz0Fex8CzQIgWmsRL6V0J4oFXKx503JUUsWVXqOjpBJxIRc58ucypjk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqowACRA9TVsSAnZWagAAL5gP/3ynjVo1BVTa9VnQEkqp\nr0UY205KZxShJ71s3JCp5LBGNCx6K6b1rUsCnTlUUeB4u5OPL5n1c8fY86HC\nVjtLhc1qwdXdGWhNtBB+MvoCl4X0l5VqcSfFkjsFSFGT6SAiH/TPDn/G9XAZ\nxx6Pbf0Ebx/Je8f5NvIadLxaVPX6cnH1BYZ5R5vXJAVvauV2vvzB+Vs2qY7R\nOoPTXnQvCY1qRyYL0936MwZM88TDLC2Okt3NAp2d0mFYfqgSdVhD0h1LUSfx\n1mbZ5oBZ1q0VOEA6SvVDKJlvzgMRhvaaNVHHgkwjXcafZDRdMiqAWLOGRUZH\ngTQSz1WDe5rfOEl6QUJIfjFNEMbFXh7jyxDxMFa9nIEi25TERSgNAvOqJ7Hk\n8Zodu74Oc+mYmqtNGzmV2P2FQz36HB0N+UA1nqNU6KI8e+H+MS5/I7CP8dSe\nImm9fSSE6Ua3SrSAln2GnN449zzyBBXemMXJblxO8Fj9jxvUyF9wl43IRrO0\nXzPXIt924IMkiH0VFRsDZLUx4+ASUHyv0SS7mPS2zOKiRxi6tygOFmkLM/yU\nOaAICghLLkJbdIFigHmejvmzp9t82SNZAlzor9Nzj7z+ctx3YjEtGalo8nH9\nnIEBWjUL3rLd6zVcGqrT2jAOPtBJOWM9mmcmaeJkB3kc9Nj9kkIQ+rF08zDf\nReQ+\r\n=MeX8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.ff4bc632a.0","@material/theme":"7.0.0-canary.ff4bc632a.0","@material/animation":"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-indicator_7.0.0-canary.ff4bc632a.0_1588235263763_0.39818056465040574","host":"s3://npm-registry-packages"}},"7.0.0-canary.b0f83d2fd.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.b0f83d2fd.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"6817feb9654ef388f438ae12b367d8fa8214a201","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.b0f83d2fd.0.tgz","fileCount":38,"integrity":"sha512-hVwGV+c5UiN/iCRNPjDj361CMEMTdb4IwlISuuvme0VretwtbGlTCzNnIYLtoA0njiFGhrpiVVr38NW2YuK4Mg==","signatures":[{"sig":"MEYCIQD5cdOtejht/6woED1wDCraIMUrJG7tIJ9dZgr+VcgH9AIhAMJjwmgK+cvJ61YJnyIDWghHzMxe0SRHTh3K/GFRpv4+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJequGACRA9TVsSAnZWagAAR0AP/A88W6RS+2ReVgVH3avk\ndvv4bci7cKAHCpi/HfF7v0b8ls0FM8Dlv6w4taFiRDbSCPXz1tmdWWOKlRgp\ncQoA+cH3EV/5Ba+f+EKfJa+JkOSb6TYFHL52GKGI+/8PrI1mZw8X5ahOfrx+\nuIeIuh+ZL8EUhS6dkpare2prZGzNxA+T+y9CDy/6ZuL7Ow1fCEmvaf3Ar12m\nWC87CZV/i5tc4GAFTyjOhyt2R53eCr/Ib+JnWB68+NrIl95gTYZPho/tR+jZ\n03kfx6u8JUmghwcqqRKiIWxmQ2EqyBP7X46Jp4/IV2GTmCqy2d2QBbFGuPMT\nPDJ+xdqoxF+KxYVjCzvQR4E89WRQLpCpGa0ypP0MFyRzBIZ/b4CHT4gq4IyG\n7YSkqp2VyZHbPGEgqHHmc97z3aUA0NjBF0ISgp3E7k37i9KDRoJKnmp9C/In\nrGozokpTRr1mexZHjpltmCBX/G5g9ngp+atta49TnyEe+F+4LaHCWp1K0JCe\nqPi4Rfl17Tzo1ouauzwSv6l87BAm2qNR/AvZHRYG1OLVW5JEhmQPtm+05Qhs\nkv/qTtSq50NnW3megE0usUwaIE2hgv2EMi/DOesgqsJhbNB7GI7DiUAOBF59\nAMbU6NWGVYc8DNc2PLRWNRFpqxLYQQl7kZ+WLJSGD9hsJpZHk79oL/SVsnh4\n2rt0\r\n=2Bts\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.b0f83d2fd.0","@material/theme":"7.0.0-canary.b0f83d2fd.0","@material/animation":"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-indicator_7.0.0-canary.b0f83d2fd.0_1588257152367_0.2916606109723803","host":"s3://npm-registry-packages"}},"7.0.0-canary.e59906a57.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.e59906a57.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"f40bb060e23eadedda827bd805da35ac53045866","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.e59906a57.0.tgz","fileCount":38,"integrity":"sha512-vrIEYLKlmbpMQEFPcxzGGTmxWf4PxZNAOy1djl5sc6Vth7LuMMUGPaAsnAvzL1TP6EwTjijA/2BQRrLGFIbo2w==","signatures":[{"sig":"MEUCIFslqG6bzJsbCucb1wONDVps++GWCruOsfhSmKwKyv00AiEA85zpqlDOc5cpM0kJZidbm2k+aKDMOABnAkvE+zIp0tc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerENVCRA9TVsSAnZWagAAERYP/A6a5mOo6eMAv1SoCwis\nEfjKMgypryzSH4ML+PGPPW2cdnQOA8J2IVwj/Yccv+lxcp/j11qdI8NtPeso\nmowOoMXefxmMwQPp4xtzRTPPzdY5H7bDGUoXHe2BZy3zabHwd6MJQ1n796aK\n4fF+XmxR0LVth/Tc8ljDW5UZg07mN5Vc4Mn3coZJEx9FWqavjCIhnOjeyv63\nNKcwGkDTHDlU3mK8JOdx6SPhppLlOZwJ2sj29dNOeUuwb+m0gWlEUPM58Ib3\nRKAzExfZtPBxyQUILhwaKn1eh0d9EynI1LS3iIMae3OlJOnOQFasz7MBCOyl\nr+hXkugBXFNL/2ruQaxQhBtB5qKv0zIAYrv3zEuQbGQsG5aaH89ss/mJKvja\nZRp4sMEyYCWIl3gdGvkJ4+UWIfeVTWb91cMG4z/M8U4OOjWA3DMIqJBoFoEI\nRxpGkoS+kFajKeCZX/XvxNZhX00xfvqRSjpFaVu4rhT9+24NitD1lBfdhOlO\nButOagMSNxkmVrSKjZ4P9Dl4bO7iHa3FI3DZ26Q38ItEQSR4QJSslpdls33t\nkqWxWXjHmtBmwfA6pIyczHd4A2QdbM1pd/5Ba3XYUhqSuks+CNUWA71odpTv\na6OA+odIz53xqqvCIP+y3IEGRRrTAymUpW53wwCrJQQsFhLV5AgVS9UZK8w8\ny8y2\r\n=jEOu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.e59906a57.0","@material/theme":"7.0.0-canary.e59906a57.0","@material/animation":"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-indicator_7.0.0-canary.e59906a57.0_1588347732810_0.10488156665106585","host":"s3://npm-registry-packages"}},"7.0.0-canary.c02712b59.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.c02712b59.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"af75a7be8fd1ecc35de8ec486553dc212f40d1c7","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.c02712b59.0.tgz","fileCount":38,"integrity":"sha512-lrIJoHB4WVIti3JgZBRdMfG9zKE8AoX9e1VYFuz02jlcvRvbVmNs7l55FJ/dcCMIgNNud5qgSVVJtZ8uD2tSWw==","signatures":[{"sig":"MEYCIQDNpBU7tFND2PnE+8Q1miRRcRVNFqIqNUAIPv4ZG/sBXwIhAIo2bHLwKldReNzKsqsrmklP07VMwSUkWgCNYWWLOrfy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerGmkCRA9TVsSAnZWagAAFRkP/jD9nITDwDZx+0cQpa2H\ndVlFmpa3nqdN9v4m3VkbVskKFeLXLocfUnj5c5J0ZfrO/c5vBdXa25AvVOdo\nTrr7FedvJymDhmBY2adJ6l6kWRIfkZtwRQA4iYytxiNHsqLnoOs3TDfTohzM\nWZqHSQzV9ebYPdKLbjrxtR1BObDBQRk2LTDYVHXTnK6dkx+l5zCdYFwB14fK\nCGg4nkUtSggPUJrRCZa8vd+U1lald8AexK4jxPUuzRRp80w7zeSzl0MrqcmB\n8e1jmS6QacNcAU1wydaOBY8lWTDsLdYe5L4EugxFWYD0rW1YTYIr2msO176l\nIbcprTEUwf9IDkc9bDeowcF1ViR1c7sXAPhX6vA7MXog766lNIbfrmnUK2uW\navOT1Sb9baX2U5xUFYi1PC6dI/OjlsWPQDcXFUZWRZ6ZRfBzawh4XXT2Jj5n\nEqtzBbKVejkkm35NM/4a0Lmcox8iAIOGFfQGauBhvwdDL/a5IvQj0UCeiG1k\npfYESqQH1EJPDZRHCbCVXxYsJBGoQwMU2+En9jACDTAliZf6ODYkgutd0brR\nNMZseA0tUldcmTRj7UsvfLr5M4yDZ/homiikSgmM1QL9c2nIeB/9fR0rqsaB\nPRCoop1SPWie+ZYMjzjWBwFLICmWlIEAnLGgBZEt3YtNUHxbhsp3FpelXyyh\nT/Vl\r\n=jPmi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.c02712b59.0","@material/theme":"7.0.0-canary.c02712b59.0","@material/animation":"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-indicator_7.0.0-canary.c02712b59.0_1588357540037_0.42430087596989785","host":"s3://npm-registry-packages"}},"7.0.0-canary.15d65448e.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.15d65448e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"f33b3433d8502670fe3492b968848676ac944373","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.15d65448e.0.tgz","fileCount":38,"integrity":"sha512-Z7I7t78FAnbHRyZBaT0iwZkOxXv3gRLhjGwjtLWDtWNqfjgaiBQ+0Fy3mbWVMJ72uVU0gZbYXdqP8FVNE1Q1Xg==","signatures":[{"sig":"MEUCIQC30Ff0aDPhW13eX5HgbPltU3i8I9K9WyiNTO7c1B3UKAIgPwj1j/17p0UYHQrYYZYRYk5Biat9JBeDp2FNWKUxJSk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerHb0CRA9TVsSAnZWagAAGzYP/0Qmk5PNGwcGIEfjRvBM\nOLFC9dKWBrFsG/rv8KUeAieaKZDPSYiB4Sspjv3oxobfYvQh/1kY6M4Zpt2e\nRXKET4HTNdz1DJUPOI5QkcNHR0H3VIZpgzyIFwhckvsMzxxD9LnUJMPC/NPL\nvUKj3x7BGmzdPBDp4QdzHHdlanT3i95P0p2e9IzFKI350/M6rnIdoA0+Pdnj\nVBlKOOALGuOe9jVrXz7lCfCEiYkJdVN1jW+aBE/694QgiyxTwncM2f6KqPF0\ncEMs86PrC39hM06m49dcuDTWrIzkTnqMdVm4GajIbtLTd21miT8eOCe4Ec/Y\ni6c7cEc4Lz8lQr2P1IrGE3PZVVqyCyWKjzqkEeZtts2RidE4pqmRm2hKOvP6\nUB02B/alDYepVW8IRNaYc+BU8JbytsRXMOxVaHGC4GD59OUVrlTipvjsQdQ6\nSvs7oo/ZR5XhSEI3sPHhHFTNNhTSXDlMK2+cWTscPzzaUEeBWN9wHYsXX4gL\n9RDiGRogW81L5aBsT+jDoyisJdyeYby7RRSpLiwrXcZJtZ6gIYe1MmQHVWmy\n9/5wXX1Vp0Jl5mJlKJdlew3TIlQ1XwWxlW//TJ5iIiupUN+bwsDUk22nCjOH\nT3K9HtvxglDIqsUMROeJTG+Phezok2MDJt7YhocJAB0YTJzdL0+CWhKLRcxs\n9oH/\r\n=B2jq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.15d65448e.0","@material/theme":"7.0.0-canary.15d65448e.0","@material/animation":"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-indicator_7.0.0-canary.15d65448e.0_1588360947601_0.5803987331551215","host":"s3://npm-registry-packages"}},"7.0.0-canary.142b1549e.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.142b1549e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"7bf7feefccc2f6b010bd3a7cf2cb185cdba455b8","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.142b1549e.0.tgz","fileCount":38,"integrity":"sha512-eoYomg5OFwmPOobmM/JwebiADCU273zX8FYHiS7lZzcyPX6cPubmJFyNZ2u3+GFa4ea1IUbOMPEwlGyjlhvDVw==","signatures":[{"sig":"MEUCIGAu+QN1JzVisjKZmiQUeXxM/xggofuVoYVgvrpfGruPAiEAr4LP8/0CmgQLyumDjIiskdbD3fkchnIFh4ONj+reS7Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerKRACRA9TVsSAnZWagAAmyUP/21uM+szIYLHG7C3lLXh\nqumBPL90+OcyB20J9EBP8rT+0Z76KL5cbnlZfQQgVYJSp8MQKWllMvHH69Ud\n2njUB/IOFf/UPJ1GGdB82abd2LIoWGcSpOPr5AqEwSpKT6G17+RNGes1oU0n\nJN8YfDF3RCYvfcYmL4nEe2I3TIdPUqOnA351m17LF/CXIrYR0/vUm2zVCL7J\nh714top29kvvyrTIl0BNw5NzFFpL3ojOUsuRQWmjh8tj8FwASZy0eV1GCUJ/\n809L32YPUj0+5X5InyJNkpN9ebkxF2+34IgapyoTBtSaHbqRoijGa3jKXx5r\nd7MiVyeeWIEJxemjDTapn50CdSxNKUsj93stVNXSdrV9YHHnIzze2z8HpgaK\nAG7Zaj+1+B2ZT2+KTzhTTHZzjhwXbmpiF/J9xvSd6WkrVXJyWiMY7IKfwbau\nbpNwHjMK8PW4iAlbSfk5l5uXkmrT3wtABRD9E14WrwSeVCTCnE6GjZCEj4x1\nFOwvEXJXqm8ABrwRkAjJFULPL+DatgU56Msc+crwEuPYAD5nqR7l2Cvk9TZY\nQuWaM1Mafei3RFbr0SPtvj/PKxZeYyzheYNaAcy7gD+rUA9I1sjRhjbR0Q4k\nViFwl//itr+yLnKN51OGyamh2J+lihvvjO7UPHwcTdE51CPf1iWVJeZvZYN/\nkPPj\r\n=MY7W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.142b1549e.0","@material/theme":"7.0.0-canary.142b1549e.0","@material/animation":"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-indicator_7.0.0-canary.142b1549e.0_1588372543940_0.2296855134664746","host":"s3://npm-registry-packages"}},"7.0.0-canary.524b7b812.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.524b7b812.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"a26e9426924c5f6fb3ee891018b2519e5f05cecb","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.524b7b812.0.tgz","fileCount":38,"integrity":"sha512-gvp+dyyR9UADV355LGRGjLVHQjz3zKowXYhHZgLedXVQR4DGq0bfuxReB4i7Q7aZCXrnl430MVyMwxyySWhBMw==","signatures":[{"sig":"MEQCIQC/LLfcZ9hl97+GCGF8Abj7d6/TZoYqsJw1Mh8/WGEKIwIfOxrxAoFMI/YtomkN3MxN2gyBHd6kZsPdePDRJIYX5g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJery3iCRA9TVsSAnZWagAAZjUP/20aUCosgVdPyN41sQDd\nHfnspzEvUM2g9tJLeTFfBB7dYZ7ldVr2AFNPKlQ2Vy190DRrctfRiaitKPBD\nawiK4s4LLBt4s+CBXF/2KC1AGOEpI4dycanvon/nIexFOVWCRwKKF/PlxoBR\nphp/k78OUArhSkCWHW8mYNmHPS1dfxu2+MPLmZXmNHQn+dgjD8Ci93nzv4p4\nM/uEt2Y3WurisodTjrHxXU/47hNX1YmP9myNdUf6zUKS0AFV838CpzsDfZQs\nEfBIWUG7nYBu01B145WJl2VbRSwV5N8jjKpsmVHj/hFJdtL4nDmaO4qBTFB0\nag/TR6r/lvioLTqBkOQeTCJXBfzVROpEJYRlPIilo2EfZ7eWZ+lq1alkn+yY\nd5TEvFW60Jtr/lzThdokH82gUDCebk8xmPJ9whxqqM7ZAMkvgz9Rxekz5GAg\nsII0PrmU07QDO62xDFuMfYieXYHJVbJyP9IOmCsUPKhlE5QUYtQOTzM6DpIq\nZKcVT5bH/EsuXJ3rNSycNX4fEcAOOey0XAKyKrdnOx0eWTPDlb9Cd3Ms91wO\nV7bRt9t1iG9XLm78h5heP8wqzCWTRrxPLKFDdUpH59GzcrvoQ3vpU9xczO2E\nTxs4CpAJaj4C7ouCEVI6cMALV4mDJJcoyKGU7o9Ez0VMEvVJzy2Z8VGmhO/Y\nHjt4\r\n=FUHK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.524b7b812.0","@material/theme":"7.0.0-canary.524b7b812.0","@material/animation":"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-indicator_7.0.0-canary.524b7b812.0_1588538850331_0.37089672948730334","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd8ca9678.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.bd8ca9678.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"4689d371c3f0fc23750e52e2b11b1da4c82c8bbc","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.bd8ca9678.0.tgz","fileCount":38,"integrity":"sha512-6APxo/ZOfFCufJa5OhvAYhsZ0KgW2olnwIR9sU6H5Zla/OrWlTtKC16g3UkN3kMDIcOyzgyHAHxCJRYCq/qrbg==","signatures":[{"sig":"MEYCIQDIBdNl9hh8kVDYIBemxJWq7D9/9N7mtKfdjYNw6wLtfwIhAMM5pU1Ia0tmOJ62vPHctQGY4rGJM0iCbUJujtQlLvpk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesE6BCRA9TVsSAnZWagAA5L4QAJYQ8Hwj/EdFFOeq5aQ7\nrTJFo6JJk+TNVnYuvAqlra3PE7BOvcQp552sCZqQgQOQy4f9oFTKaZX0iJ3Z\nt1yX0Lt9q56KMEE2Pizvqhr1bfUXuKViG5pQjh0BQffQHK5+JyhI5WzXEUqN\n/5EP+b8R2tBiPKVF/WeKU5x90hQfb3p+xtHH3jvqOnGFga7ZBh11qgE7lgmD\n5UQDMwps39P2CsMYVmrvzDZVcAlDv8/P6gYqJvCVIgUfuXP0Ao0E4+rgNcdT\ny1KlAWSOF/5C4bh5QJidTVd0xCPsd6WNkW4GFVq5vt67KjUh9gKFqZokxQTV\n93VOWLCDHAfGRRxSO5jiUFtRmXR07uhgPE1fgiX/bmuZbUiepkTzCpsg1GWI\nKai78OeLoDgKJoiw2C10MGzKdTjAmRQElq+AREluu1Fw63KN/nLg32mP3/yS\nLOklCuIMhqIJiyhZGD3EmKSac0m+4vxKAOIG/rEuAZvSS8wkol/Quedl7FY9\nuQPxMGcLRR7DC6Jo4npiSXrQ9lBL+nq2h+1XiItYSljtoPpSeht6p7MmFpna\nU0gX0aFeF4Bd37qnVxMB4lPVEkVkm6B8qA3QJBQ3/0nvwKOb+v1pgVrvS+Mv\nMyD8ySSxm6oAucPt15dH0kzdbcMvY/9vjO7SEFrgst/m4f4llR7I6eICbjPm\nOTPY\r\n=MQvj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.bd8ca9678.0","@material/theme":"7.0.0-canary.bd8ca9678.0","@material/animation":"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-indicator_7.0.0-canary.bd8ca9678.0_1588612737375_0.7842982606524052","host":"s3://npm-registry-packages"}},"7.0.0-canary.2553e86fe.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.2553e86fe.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"a3a8d008869f11e7a09f4d79578bb1f049240274","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.2553e86fe.0.tgz","fileCount":38,"integrity":"sha512-kwQ4YdLGdThflfCc5MsvWkTHxb/voCe7AXLC8azjAT93Ene576wr2k75PapQ9iYvRqqDEM9esN7XIpD1KC7f+A==","signatures":[{"sig":"MEUCIQDlANiQTZL6AcqGXtyGeHc3FiYbNqTbh8j2oCeuOwaElgIgE8Pwb5hPPWqojKQo/E8L6VMtsOrwzDqLIO++mqN+yZE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesFFRCRA9TVsSAnZWagAAcRMQAJSoTWgv+KDkyrgEFipO\nXsOdX8IGd/ByYeN0DjX05TB9VuPIwfqF6HItbiFq3eXUdPGDEg3jbdDqULHb\njtdrirPyQdo/Mn/r4xDtVC2uHQsqqrxNptqNooK89YIpt+jiQUIJwY84zrzc\nmgb4vcavkAazKyeDICIEmr39weAf8U9YZogzU3G4yS2Bv2SFTu9FmvU8Tn/o\nROwi1uREbp6gJq/DTJNFKTEGvJ8YGi7wnoe9mBn0G5dEr43uc3cmdWARhnJt\ngZBc17oQakE0p2I1uzTseR52N/y9E1HiHZIaL5vGHNu+DVEvJS7bOYfwN5JX\nv2yk3SRxPalO3JlKwXcJU77E2rkvcFvLu6l4At3Owx+imrbWUYNQkWt5KcNS\ndi4qYzjeshxO0P1BdwypYy47v8H6OM7xofote+orB31i4OmbRAx98+pVqdmq\nL9pmAybhdQ6B9I9+y5jaw8xi9AZy7CxqkfqAo/RyqQLAJ6w/6kTfqPpsL8mA\nvK7hP7/TFdOykEZulRyv/9M/mhtbN6dI0EVWj8A72rInhdZ956MXY1uNZkQL\n0SOwBC4hyUEe2aPyzfUV3Ljx3+FnjxKpj+EJLJFaPbv4t/j2mzf573NTAjwV\ni5EvtGFf1zAHSJx2W4fLnnAGyYdZV64DSv3h8nRfOezy2Vs/usDM1ltPmVog\nV+7o\r\n=40Eu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.2553e86fe.0","@material/theme":"7.0.0-canary.2553e86fe.0","@material/animation":"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-indicator_7.0.0-canary.2553e86fe.0_1588613456803_0.433920599612595","host":"s3://npm-registry-packages"}},"7.0.0-canary.03dec929e.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.03dec929e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"d229d41e2394f38107a43ff445ea0c4b1157bdb1","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.03dec929e.0.tgz","fileCount":38,"integrity":"sha512-VFrR9uge47+AvYRFVbZJnnW6dhMGwZ32gpila5E2A0YIXnTf8HL9bt8tAahsxhFIyo3mf8UYTehsRUtGweYUrg==","signatures":[{"sig":"MEQCIEW/a5iwvIVj29/rnHOwBxm3+wUeflQMQz0w+7q5SHxVAiBL1vbf6U0Fzs4hlU7AfdcCGJV3iCTAfhes5jmwCiP+Yw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesKZaCRA9TVsSAnZWagAAYLAP/0NiP6p60KkTdGXd5Gpa\nFSy8jGpwjcGD7cVwPSbBJFXM8ut8+09HWzUCP5wPpu46xwtTrA7OWMiLBvec\nqe7iR5D0RS+xo9UN3+7sXodIUiT+m5slcQBaprytDrtF+JlU2jADe/+GkG3+\nFB1264yOuqNfOO9v2pfHcgW0dSH7jaVlaI5NDBp1gX8b8Ce/J4JDj/lVXXD3\nLqNLIRgMvGJL2xmV8yimf7vzeqrsh1kaQfEfAn2dOts2YKSCBn3PPKgzZyjf\nb+/BttS+kCipoD88TETh50x4PpKh/B9OwPiCl9W3Krdh3YMqL1WuhiPi0+h7\nCpuEYTnwQmtrzFUUhnrVcWMu42KEfsep/wj8jP61276RHbkCnMXQWaVJHcKX\n4gTN/SzTSfDuicGRqtXKnH8yIcNchJXmDlX9W7wFMbitJ1GVEA6FLQeq/c7L\n29MWSOoRN1+yUlN3WmwSC1qf8Xi2/khw3VaQw6M61hL1wYM/f4zglYc6or4F\nOn+Rc002HRk/uBVb8XKx2vdGNCC0DoXgwQ1OEJ9zk3iv/7ogYMb1DPlWsUMp\nviou0QM/V94ONamgCdzLhm4pX1v+ucaxsDkNfbIoQgSoaB1U0JoZQp50MeKx\nrRIM36HQ0kWj6QTEFWvYJokmG1pJXpEMiTVCQwS3TnYTf90pCLR0pGPiTOlV\nmlB4\r\n=I6G9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.03dec929e.0","@material/theme":"7.0.0-canary.03dec929e.0","@material/animation":"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-indicator_7.0.0-canary.03dec929e.0_1588635226402_0.4281560774829716","host":"s3://npm-registry-packages"}},"7.0.0-canary.d92d8c93e.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.d92d8c93e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"d5b7853aa357c2d17bbb61dee0175191074d7ef9","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.d92d8c93e.0.tgz","fileCount":38,"integrity":"sha512-XHVPNFaruXVTfF2mymc6r0bZVxHe8P5x9SM9y+XIL3E6XnQVVi5REItzhum07Ag5AyfEiSr2giW1RpXk36tiAA==","signatures":[{"sig":"MEYCIQDk5IG4ZZSpaBS87RvH9YVuU/UGlbWkAG/TTfyw/PPVJwIhAKCkwwpcv+6rpN3mk02wVyJE4DA1ugbUONKtw2Bv6PiX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesZtQCRA9TVsSAnZWagAAhicP/2NBtEQfQIGb2zPGuVEd\nZfMf3lf/g75Ro7fQIp1zoAR9zhU3PtUrhs1jtkZRrP+Sc9Ikc6xOMY3hKmyU\nA0/G3klEM7jJWZ5J7QcMx3TBGCqt5Y8Wx0oqFhCT+g3GaffbDyPAUhzEbebB\npZN1FNdUDuqXmDhcAZ2LOrbuWlKgWh/OlI+Sihn+/tFQrGkdjNPd9W6utQZh\nof294qYcnAl24N/mxOQKBq7EKPnM4HYqlKaC+UgUWwLgn2s9FOxpBAoMuSDr\nWuPk70l0cPSUkNVJRg+mqWzdR5UVsExTBOamCBdUt8XKvLQeEy2JIPiV/IbS\nw0YW0vlxjp5/9BwkjnPnjIw4Kb8yPiLnvOOzfPUjPVTn2nc82kwuIR21Tl4M\nYt1khI+U0HfOOufCcLEKEsuKJUH1Z6iRscEL5zI0V5l/Mngk7Nsa7pa4Y3CZ\nXLOdsthm9rJp2MWr/ET6bX6MASr98cqiIKka14ivtuG/m722mRqMDjNK4SEU\nnXe47rsxJQl1Av9Z3wI6RYzQklNFa9OOANV1dHuIQXvpJoc8HlURRKH2RArv\nn90K4HmWxfOSQaGdL+fXfbTvXLb12BT0EOoOdokQ2TtRovA4dMS2fC0vgrib\nqtK3dT0IMxhZhFJnE6+6U238/IFMpMPbx0HHUSflCqovNhDu7Av7240WEX3/\n+CVZ\r\n=YVEN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.d92d8c93e.0","@material/theme":"7.0.0-canary.d92d8c93e.0","@material/animation":"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-indicator_7.0.0-canary.d92d8c93e.0_1588697935706_0.27390902645690773","host":"s3://npm-registry-packages"}},"7.0.0-canary.09f591967.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.09f591967.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"2d82dfb9440bebfedd62c44f3953f9624034432d","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.09f591967.0.tgz","fileCount":38,"integrity":"sha512-2Ob0lyu8JKxWVBsUSby2cwYMfs7YbfT7gfIBu4aUb9fJTloaE7uWf3exmDjLAMufghrK7mf9RwZNPZ4RbMJ+fw==","signatures":[{"sig":"MEUCIQCKQXzad5rCPhCU9xVaMc/d4oDllPw//NxlkTyooXjgQQIgJn7TaMhV4NkKEQxszx0nA90bCpejJMMb3UlANypdG5U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesdTOCRA9TVsSAnZWagAAudUP/AzHmc3TM/z6Lu95RAkv\nOqTZd8eVEt31PN9bjLcPaMO9zUFrelASlK3JiITqx9orTxNyQfgIuIFMU8kT\nLBD/Z4vHuAI9GjWr8PRuC3s7bQG/hxU6vbVERYkMBVbyswshNy9gvFHdAJBX\nYY9Lu38mJAbXhBPSzZseeSoLmZVVxM/YiyjD9L00R6poICHVqKCi+s6fguhO\nhaYbGFpaZ9a6RsVx62ejrYHTJugJNnli+qmrr+G+E0EB/oDiGDMTGhSr56UW\n9qrWRmP2DWHs/T6apGYNzYCg1G4PjlRQAmhUk/MIneG+rkSNdmjpVO0EhouW\nhvhlV0z2fLPgHgPZiB3iAfpvShoXOGCgsYPZYPBt8AgleFSb79n3n49ZFqu5\nk/IbfUsJEupjNh/GeZ3WWObRtnAEchgWzIcJ1B9ntjdHtTzZXd2t5pZvdtox\nrn63MQYewvXfDQ0Nio2MNIhOWVfVOhkDGHzyIdMTjPsvQguQ92C3hytLhZGd\nYnnvoWBbnR/GqdgbVVTh2s4zqD153yIy16iNej2sr9RhsVpSB1ZUT7ur1yM9\niv8pruLGxMeOKx5QoHc172YBatQh+3HGAO5Dv3B8BZxccemXjw5irK1IIjB8\n1+lQ7ixJU+ggDvqe6JJof6bHh09HKYLQQCayxlP0eoDyhe2fnkxGZ4e0PVMo\nvqkS\r\n=9att\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.09f591967.0","@material/theme":"7.0.0-canary.09f591967.0","@material/animation":"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-indicator_7.0.0-canary.09f591967.0_1588712653664_0.26660232671705497","host":"s3://npm-registry-packages"}},"7.0.0-canary.3846ce311.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.3846ce311.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"b06de15b2ce063762b0287d0c69e563981513d38","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.3846ce311.0.tgz","fileCount":38,"integrity":"sha512-wwsHph6ZpmNWIYnRF2x/0KSF7HDztMye0N9dbByQdXbEGAflIu0VGERSxoYU/ezA7y9qjQScA6ftW/GqkW/QiQ==","signatures":[{"sig":"MEUCIDR8z7nEnztGlH/Qdd60n+rZ9XnX0IgwMUksWyrb+mZCAiEAjo3Et6j4T7jFiu0Dp2MJCLK+aiUA0OYYjGAi/F4VvNk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJessUTCRA9TVsSAnZWagAAfbAP/idN1KxcDz27+9jjm1+A\npALlPLwr6QTTPw9V4ZNpb1lgKJPRWy+emDWZqZ4gMRJ5XG4epydDjsYPrPmz\nkDAFzignZE8M2MmbdnjdPiHehgeJjGgUNEwPrhO9mJWkGbpn5aeEspbmRo/I\n4db+4YUhMhcPnTdgjK8hZcpIK1ELu9XSWpnuDpPKHyaTMOXavN6Z1ZIx1HQy\nF4LAW6pQLIje1J4r7MjU8sMbyMOYCYOk3OKjeftXyyCuJrrvMsAv8zL1U9eS\nuCZqOuduTGqd8chrcCBZ7jeC4PqNx5DnM4Zd2QyIv+7TN2pZd7nqgfB2NJSe\nx71jBo2Y6yq2obBXCmTvZVCozM2lhBpfQum6Byv3cwldbV1GjLc05WQFwsW6\nL66FKeSMbY6Dd/Mp3vU+vPzso51TCrWstQJNaf/XT38HFZXKiIsoCvp7REdv\nDJ4eomiHxpPb6QJGB7T+8yxP8i7AkCN+dECKSnbYcBOnIqSRkNSK0Q6jVbob\nvhKOu2w3v3HXcVx+Co1sCefOtMmcVj4+sHmWTh70RPHE+G1c0dYP4lBPvgs1\nfCMRZPJmiD1UXv+eg2LQ5CA6NZnZqEzlwdcRStH0fUdxhMZG8BcOOGMs5M76\n/Y4K5Lvb1zFNLB9GL0pXX8em7oMvcxWK7bfMZvG59p4NcP8pmET+HgIeC641\n/UFq\r\n=xfCq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.3846ce311.0","@material/theme":"7.0.0-canary.3846ce311.0","@material/animation":"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-indicator_7.0.0-canary.3846ce311.0_1588774162312_0.668937631193165","host":"s3://npm-registry-packages"}},"7.0.0-canary.ed7f32463.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.ed7f32463.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"65694f3e980f7a8be54f69e16a39baf400c76196","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.ed7f32463.0.tgz","fileCount":38,"integrity":"sha512-QTEgJ6cSX20FJpeqE8MB+7vt+m4Myu5C4pkhGmRhJlgw0TdbFc7qLTNtc1EyqbbcrZogSEzFWXsJsSuuKrEJlQ==","signatures":[{"sig":"MEYCIQCakbbSl+o30qezFSjWc4MM4kX8FmYG4XwiONrTxL7EdAIhALbhSLN50HL1RbVGxdBQz62xdupsZO9Sj0EJA+G0GwsN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesuDPCRA9TVsSAnZWagAABuEP/3helPMSIC66ApOVyydv\nvaVDPL6q7p5CeirEup7q2b6LFHDEUqfF/Qz/2wj+t7+JMKryFq0i9VPn9hiV\n/x8F8jDshrICmTz+NTxdjFGqBRI0+HVO9H89LiEtGU/b1roOqg9VbA9eTW5i\nwAW09HUCbESck50m1ph7MvGlIkzPzS6OcQf4JPTvzlo+FnqwJeKqpwkEPcel\n+aQJe6iYh441BEGz5FgwZXNe5oE+E2AqGgzuyDksosfUTvFOGhof+Py2Xgua\nDtEABuZACAX4m9M036c1+Qt5aX1Zhdkn2jWe6zxlp//61kcnSueQ//l+XaPm\nFmfbv2rgH4WYBvUI2gyK68HvTP8I1v6wuhpSpMVCdaThMnv8q0pkTr52nhYP\nhi6xeJ+SslvNoDzB5FloMrlXlOcVeQYcKZwVav4Z1hRs73fW+fclBui1Dguf\n+W+Yn4V8H5m3mNGBXQXmdIB8ngqrMlWhN3rzZ4VRz5bbZQTTed7aUkoTWZ/y\njpR42uczpFBBNwRrTIUgHyE4zxi5cvH/+KjdShUp2avqEmeKoQG91xl89As4\nVRCbuzXm/Q/CuPyu+ehapJvMxl1iKZeKcdkbLI8DP1IViqb/dTQJ7dHaC38c\n+xndV4dCipy/9KDxvVccW/1Jc1GV/XQKWLuw07mOSQjdPKlS/HVV4U1PqZd1\n9xy3\r\n=P4YB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.ed7f32463.0","@material/theme":"7.0.0-canary.ed7f32463.0","@material/animation":"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-indicator_7.0.0-canary.ed7f32463.0_1588781262881_0.2507998378404186","host":"s3://npm-registry-packages"}},"7.0.0-canary.8135cc085.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.8135cc085.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"9b71e0476543a351236b0fda64083a7dac7099ed","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.8135cc085.0.tgz","fileCount":38,"integrity":"sha512-TyDt0Vk1JNzb4kiHHgaFnixtboOUtFJpJaS6bof34NIh0loLIa1Q1FadXxWmxD7HK2cmXOk/eckExDiVd5SsCw==","signatures":[{"sig":"MEUCIQDv3SggkQM94CX6olchbdfvgDkeKFAA9ekWGC9yEsrj7wIgMRutajimpgqsBSJIuE0CmvBUzO97CPqUuCrAtDaqGng=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesxYTCRA9TVsSAnZWagAAV2kP/j0OXM4eIkNwo19JTppG\nBWX9F6o+YjSczpRY4q+THBu9/I6OvnDaCKW555xR2UnsJ6DkVbweDs1Clisf\nGCFlq4ngM9CdfPy1jX+J3622l6EVJf3SJm+OvkaDOOuaBU9hoGGKiizOM75E\n5lDOo61gJZzX0C8L+yQeoVYJ42ohd0Rt44PASnmcAENM7y5oR+zqaGlB0sYH\nfIuQsw10g+r3lwgB9q2SU2PmJJnWtqJz2jt1YfkvTz0yarC0sA1EH37Uy3aI\nQ7gB3q6y2CCFWFhMtmYuyOK4GcNwZXqRW/Rr4XOZxgyzPDBCRzefDCZ1ZJTb\nR3YRdWGUvZX2roQh1UVJW1u/yzhW9ugtKZrU0eDlfBT42qQc1O8FJjOeVDQ0\n0Km5ad+7IDyy33yEiBrctJoGVdscPVwB9QbZwW9AnHCjIKO4ZI2Uyumu7YTJ\n8CmUBhdZRnvD0wN2hoQpl4bqvMZf6ef4X8XphEGrlvwj8+2+Tre036E583f6\nXG3mIwK6AJTsM5H4KOh28OtHUJSU261Ogts3xCObtvrushzf+YcyKF0CeJmz\nhNS467DNa84bEDcuktEPfGaiJGZY+KFJsGTtS75lOskEShrXDapb2B4YLc1W\nXyDJqNkfG4RhkdMHGgtotGbCfEwUhJMbNsBHLPN7KqI6QcSH4pBuzAztp/YE\nrmnW\r\n=48KN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.8135cc085.0","@material/theme":"7.0.0-canary.8135cc085.0","@material/animation":"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-indicator_7.0.0-canary.8135cc085.0_1588794898957_0.7449989359385625","host":"s3://npm-registry-packages"}},"7.0.0-canary.deb212de4.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.deb212de4.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"96f1fa3aa3e8719b1e5cf485ac11126ddaa33b38","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.deb212de4.0.tgz","fileCount":38,"integrity":"sha512-A6PYKtr9ZHYTljx4Fq0fDB56WlXJi4H38bJgl3bEvRfhmxseC2p1ZBDVULgI51Ul24L5Q6j2Oi8tPGM1mbP8Cg==","signatures":[{"sig":"MEQCIDccaHvjnl09nbPgAZYylqBiAKDWcoCXlV4e8WjaTojYAiB3oaSnvMYlihahuQJQeQgT0XCIX/bBKT7Cz6k7nG/E3g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesze8CRA9TVsSAnZWagAA9JEP/iCClVtp9QlU2l0GcFef\nOfTaOAKEezRCvecRhgo6F95SYYepU/sNjVCq/UGal7WEHFf5OcoAhh3KwMkk\nH0OiHkWspVLEIhfzju+G9lx3Nsk0VK6moYUSmWA+abdlqafLuMK0CqBdJ4uz\n2ZEkqXpOQeLhOhl/eWZ0C8TgoUseEYCtu7DRr/GMXGzPORW951giDlo+zyby\nm8a8BZ1h2EtLqIUM5jRjEOm2+MCtgrixrU+DtijSFw+r5i5pTzev2mZq5GlI\ncilIEr5ebDZI4WnyZJ9k9opeWJBjZzKzir9TlDJ8fmEZmcsLqJHqjSrbeEv5\n4APC8QRIBHSUxCaQ8gY9VVQ8vDW4IhScNW3pyzepAM0Io592NPCQa1kZIAz2\nLQEDOiifeyX9QsMN7+Ma/f/A5dJEixj8RUu90aPPQF0D0zxHkW2HSxeO4VMM\nqeris9MLs6WIA+0woWYygAIefly39Q+ot782IdiCqCDiXa+fJTL+/FkPmPHl\nXTFpsHgfSuYgUHZEJwKbAl45iZ/bmSGhuONbmoQoM7U4phDd/qVBki1mSSik\nV+bK5nbwYzKF3Juj7Jh2VieFCj4w/yqWl/HBY6iOueOkgN9/+SRlfq9ZoS/q\nXuAIiRStkokE1xTcu3MFYpumM1tuU5ADm9xbqwMS5ytoqRfPErh0NmItkSCT\nVaK4\r\n=2Dbw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.deb212de4.0","@material/theme":"7.0.0-canary.deb212de4.0","@material/animation":"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-indicator_7.0.0-canary.deb212de4.0_1588803515883_0.04699492311944975","host":"s3://npm-registry-packages"}},"7.0.0-canary.f83e00898.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.f83e00898.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"374df9b4823c2564fee6ae2ee442ac9999a2f3d1","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.f83e00898.0.tgz","fileCount":38,"integrity":"sha512-cv4Hz8LtSYWnqENvwKFia9AmD6SbReEV6YvtCenJbX0hzmwCA9DXZqeXTP5whgbnBrali0RydUUWfRFQ9XJ9Rg==","signatures":[{"sig":"MEUCIQDCa44Kiu8St3QwymStpYWLJHp5FozrZQLMP/2SxEg6AQIgDhprQFa8+eY1M66w2fxeddp90Oec7dW/w7BJ7/1cBn8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetDwQCRA9TVsSAnZWagAASW4P/3ILm2rC4sFgPkB4vUzy\nkupFeDse6g96fxSlMGP0ZBrFsu5SUKZPL0nUm1Zddpd/5BPFPWNJLK/yed6O\nZqllUT8BQ3l+YxT0GForK7Ci4szgUo5ODS0K4AKONnGIRI2ncZz8R6xw8lta\n6WRi0ZolzdTnjeXyy00gspdOo8C3zSA7aZBg0sNGXb+RIy+GD9zHMEXrdE5x\nrrVWdL6h60WDnWmEIrr+yx3AWpREBANYlJ+jeP+cPOX6DaVM/Vw/ncrLseBj\nytly9R94A7a/Nlot5VYMKVY53k0yq0f2Bdcmy3RmPBhT0ll4BBlFYxgKDYal\nlGzqi5VEuBi8xLVmcXzD2Mjvwl9KnvqZSrGKmO4x/7noFIiimVMs0PE6q82n\n9PhCm25GJ33vO1SkAEox/+HqFoZEyhmy5RddW0v5XhLMuqXxa3OuCsHBuet/\nDkgR2fwCzFiZGpH4IfnMzOwm5ZwD+j/gVSroLj4XLVMgaCk6WyuvDEzv0beP\nkCz+5oDlj1Bae5JzuGBCqqsXrhXa/GW6a3V8zqRV2eTeBbKNbYAxUvZZoTa+\n9OWTJ84QrcOzg0ZeQ5Rpdwn3PR3WUOIy8pHJe8tPcvl1DE2nrc+4pjGhHit9\ng8nUWVhWAKOswL9FYI7gWIw731Z97UA6mjyik+u8F6dWHbRc0wbYvdEJfJ8j\nDmGo\r\n=QICH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.f83e00898.0","@material/theme":"7.0.0-canary.f83e00898.0","@material/animation":"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-indicator_7.0.0-canary.f83e00898.0_1588870160067_0.4072842665241154","host":"s3://npm-registry-packages"}},"7.0.0-canary.047e6b337.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.047e6b337.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"b0792f5b2214dd216dc8804da4320e470f906faa","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.047e6b337.0.tgz","fileCount":38,"integrity":"sha512-smo8UwoQLZ89bZHpQ2Bx4SczunhYkqacAJ/dKk3W5TRLA/8agIQGv/DdHx1PFQRrdTlNVsqMFv3/RLlow/vQGg==","signatures":[{"sig":"MEQCIE9Ju5R2TRkWyXNjV+tDOo9pzQ4SMeiQe4popdzIO8g1AiBzMP05Q+V0Wd8SnQ8AD5m1OqR2tKtdIDlePKb+koBAUQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetacZCRA9TVsSAnZWagAAOWsQAIcIdwZqIBGAolz3FihL\nNI7sIBxRz+hvRwkg063Ff+vn7fVl/HOuCcjC9u1xQC2rN1mlu76z59Cy4p62\nmvjUq6hdfPGuiQoUzJhORvoCUIkyxnFlx1oxt4NfXIAP+iFvhLGG2AN687tD\ny5kBNcTXZnppTlDgjrxiyJkcID/mvjjv7fKRWMn0y0HSd1iPoZ/wEyJvio4l\nLrPFmXDSZGs/Up8pIo5XA0eNCUqTYEazN8jja89MRRvB7sTTEqjsnap8Nfaz\niDUbETzAPJLmS3/DtClDX3bRx6NwuJLRfwpvt2FvJDJ1k1v9qvQG41QRMT8O\nQANLp838KdYvYjwgw64+fzSMIXGAhzqDzBPfHzwZMP6aIL3stTd8cSF4sJI3\n51ymLh2bH/q96pvPiCwc9WV8DtbkIC2vzhy1XyG/zQzI50Vm/jy0iNzyb2iI\nCHG9kNJ7prYDxyPC+z2SLlNslyEunh1tOAXC69ajotZG8y1jvFpZcXjxmiJK\n9ZGP4YGkgpxfAL1aHY+9XAOIeLZIunqsdlXjx8s8X/f6xiJFo1TrhUNAHBtw\nKCus2tHAL2tfF1y/MNQAaJSJW8rNoEjCxDaoTtzyq7waykS90uQUkDU1BKIw\nDemvK9CJGZ0KLgmrD54fUjFXOAmyKWXJsDf20w+u2q6lZZzZbZGYtVV/jXp/\nZPlx\r\n=EJwF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.047e6b337.0","@material/theme":"7.0.0-canary.047e6b337.0","@material/animation":"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-indicator_7.0.0-canary.047e6b337.0_1588963096838_0.04834254282016248","host":"s3://npm-registry-packages"}},"7.0.0-canary.119e21426.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.119e21426.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0d4c82468d0476a39ac28fba37eb0ba829972c18","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.119e21426.0.tgz","fileCount":38,"integrity":"sha512-n/I9I5nyw4G5vc7oywwcbMbvQjevV6LW7yLa4Q49IzQ2iAHl1sgjNcqgsK4NMZPNSr2sYtF3wD9HaLZRZaqtUg==","signatures":[{"sig":"MEYCIQC2VlvOwIq9o3ZhOFfKvV07RbdvzXKWeMrDyMHsETbl/wIhANXoSFGFAdsWbTIpKWJveAaFvCa6kL8aHwQexp/3iw7N","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetb95CRA9TVsSAnZWagAAOkMP/2sJ1klJ9p4BazHyaCAM\nRzvfmSzQrRG7F4naYTSR3AxdCBXeXpPL5enMMDo4fCnc//khDIguj7azrHj1\nXaSKLRjl2UnoUtjgUmyp2mvBg08sLkD9JYXjuGcgNNOQWs3bLpILlvPglsEh\nL1JSVOW76i0OmKRkqqqmao/yzIrP5YC0pimE3Dmt9yVy8m0jUrk9o+tLC+4i\nKJOUbJeBgIF9t3zwDzxPvyLJuGL07lHSd9OmejFf6BLMRApQyLNu5DTJd6Yn\ns0OP5aOsy6+WUivdLBSr2poY6NbySdMT+rK9M4YyRAiftiPa1rXSbXqAmUev\nQPYZ1Yv8hRj2rZlrEiZQ+IlmLrKUAdrrXLTyMpgGb7++rvi+b0GfeJJKCqsA\nxg6c2g2Nar6K20cMhmT0gbUCjjqV7cbWDo6oTJL9HyuM3IazJFGlvjrH49iD\njLCBfGZrFFiDDTHmNRd3ttt6gjYS8sgGQsXSL5LeEJUZ8MFS/iDHT7Zk5sht\n+3D/9K4FrxR3dx6NtGe+EFiw9DrjM+W2bbeEw3HD0t6gl6pxcscIx5BRWxIU\nzETJJ4I/98lewRfq9h1yfjo45a2pD0/UgglLxTBvLvLpY7nYagwuAuLss2m+\n2lgtMUWpZ4OpBqdp0SO3oeIPmp6ZAt9R/HFgg8bNhlycbW7ANnXY32PDrjsW\npq74\r\n=0pmg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.119e21426.0","@material/theme":"7.0.0-canary.119e21426.0","@material/animation":"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-indicator_7.0.0-canary.119e21426.0_1588969337103_0.06680440814946875","host":"s3://npm-registry-packages"}},"7.0.0-canary.2f052d824.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.2f052d824.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"d9b648e80913e051c5d17da93b45f37e3729eaf8","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.2f052d824.0.tgz","fileCount":38,"integrity":"sha512-F/EMVpKdxjBkA4f2w2Q9M9ZRlj4vtMSm1mqj7ry2p23RN7s2zwlHlXuu7ol39Tl6miN63NsLIIv7Ly+vpnbJrw==","signatures":[{"sig":"MEUCIA+8JLB6x7lKL05CbAsju/9W3VQj7gV4t4FsJgC6r9LHAiEA+DP1WaNtSsUKPdsQ2Fi3UQmHwGnH7/JrxtSHwl5lRms=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetcn6CRA9TVsSAnZWagAAlVMP/RVzeUClzDG7xiV9PqJY\ngbvxyqCgopT6PPUCA5NBdvZ5yrinnQK2btnxlC9z4wYSyXxTj7ymAPSqXgsx\nFXBbWTdOElfs56bdmwdIkwPcA1CeQVXD1BBeEquTcUhHrlW4HXvRRqmEqDaC\n3OMwmlFq9yo++v51WL7Sxf7wJf2h44BfUKHkV+hQI/p1/LaPLaouVpjCh6ho\nB6mZ/SPOK374ytJ4yEEoDIa81dU/RdZ6wzxy9+s9ZWrWcOxZJsUKIFUVd/XP\nCJ4dRjjISHc8+ZrcdvTgfVTXlecBaXB8MAYAdXbhEwflAoGNFHmLTKy+PMgQ\n0X6XF8B0K3n4oLFZrxAqdDYEWI2M1lebXPo8RdFaSerhjD1aOToPSJpS2Gby\nXqUr2Op88AmRfQDZi+xC/X5qkjTYUEhm7NUg6X4cXyNrynPBWyvh5nlB9WNS\n+961fBKSp+3LpXXzRm63dcxLdMIgu3e8mYMS3EaqgsU2NFNQNLdifhV+zvV+\nwIww5K3OgyYbCUN75EiFQu8Yv6HU4161ogQr1paVDpxM8hH08iW6lRlw9Ykj\nVzS2IrjpVcOLGdKMQlGtSKzj+wv4eIXNNBPTj7p1T8UHnM2JUfg0DIRUfBw9\nDSZ2KZ3vBzJU/YIf+lIffOlIyWtwT3OXx3C35VNrWgOvQgAmEJ95eEJsKp4S\nFSO2\r\n=PeE5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.2f052d824.0","@material/theme":"7.0.0-canary.2f052d824.0","@material/animation":"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-indicator_7.0.0-canary.2f052d824.0_1588972026357_0.32801593158602405","host":"s3://npm-registry-packages"}},"7.0.0-canary.e84444387.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.e84444387.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0cbe7848f4ff4a73de0642fc459d624d21313ea7","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.e84444387.0.tgz","fileCount":38,"integrity":"sha512-GItdgeBJLUK9BmAOAHOS9734c6DnejATHaIsUVk1mU45SNHqyqfKOURq/jrMsN6qGpoMvo0v4gqcvBe1b0jkXg==","signatures":[{"sig":"MEQCIHDZZLeC6IDBdfbnb4AFvsbtzYp2k9KXc7BfYaUTXQvAAiAUJRIZ/7cKTB1+b3T49VhHrmnViLEi2yU0Nv1tduuesw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetc+uCRA9TVsSAnZWagAAhjEQAJJsept0OROUCRfg/qgb\n5by6Jg6wLa876lmhXH76XeRUCGsW2Hyd4lAf4PY7uXtozizpGioFihrkcFf6\nWNJumfcx7H0jxbMdU4t5uLa/UhmNCt71cfkmLDkztC6jyJnxeVRZMN/HyzX5\ned9a3ybRaypbjEGEKoAnOQW7Yts0Zaojf8mqdOEf+5Qi89WJb2RKs9VGRs60\n1F29kehUXR+4XvyHz3jPEQjHvt4dhnxhgQWbCtMmB8ij3CBT3ndhvFJF2X9B\nwGnOMUSvSTqyklaJgibN+uuU72RdYh7NmAZOfG5ljibfs370q5zwplpWNaLD\nYdzJDHTP1rRYqPKiNrpcr8O6G38d0yV3dqOvM7LX/eHlbYb32i/vXe23axad\n3u6xHkwTxS8lW0GxlXZbJLH90iQM2VmCST1ONjVD7/t8Qn7L0Wd0MG7cmBnG\ntN47eWEepX2lHTFPP8sAH9ezP1r9vxRsQrxVKfjLXdAphSwT3kylfrECUCVm\n1z6EMq4HB+YbhTWHw/I/lS8PDGNz/VvSTplEI9iy4QKlrhfql9mTfdBOj6jO\nePt70teXtNLhTYEBK1rdnApdCl/E+Oz1B3usBMw3oNRF+gSaWJDYKR4KDCeU\nHxmMnej70Y3CnHGQZqqNcZ2tBfXAet0syT3HLE54lvI9j4CSj4udYfogtumv\n9MH0\r\n=ZCZP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.e84444387.0","@material/theme":"7.0.0-canary.e84444387.0","@material/animation":"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-indicator_7.0.0-canary.e84444387.0_1588973485806_0.25664257445905236","host":"s3://npm-registry-packages"}},"7.0.0-canary.893eb1876.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.893eb1876.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"10b52addfda4ab283b17fda63a9d0032ddf473cb","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.893eb1876.0.tgz","fileCount":38,"integrity":"sha512-NQdUUN3yDX4XSOmXfebol+8f6Jr6JHXuA7Ja/HzuXjFwV7El8FXl+9FvCzxWwEoD9cw00y9CbA5FhIE5ZhvMgg==","signatures":[{"sig":"MEQCICDFT75me4XOVUoGv6O7bpceFdvFQAUVj4ZMnJFIkbJWAiAPPsVNM0eWymm2FgItwJKWiCHk/KKyw7he683JZFpv+A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuV1sCRA9TVsSAnZWagAAllUP/iNqRDa/Zt4dLjMSEx6W\nE565mXDhvOY2zgOjj2NMdWNbmqROAGv6B5Kz5O7ippy9FQd0Hfi6VrfUXNN3\n9KZvdbOpDJ+j17HhUFbctqzKznpKGKKpT8sxxd8r7DQDtF15EnSwR3rmCGGz\ncX6cQKpBt89sBnk8ntC1N4q4VNZtXnleGYHMaknSVDSAUfJJXl0mzjpJmJUG\n3jGlyjh4z4G10sPVqyUHLvG9SJ+fLtIcxiBpnyNF6nwmgUhjHTo4MiDWjVYO\nfsBBUPZXUsrkUibLZnxWZZcfueAm6efrAdMjicLfgK/yHs8M2BQOfOILXZlc\nkclr+rqySWa5h4bgVh8JaazozjNdwgjY9UvL8XwGbMgUhO3orJTLqGSYD+iL\nQHTK09BpZxclF/hhtB6+anModr1/nhv+Dbo9TPqNK/Oi1FiNKXXLl52nfgiF\nuAiZmNoJLBnRD8fLRHqH84QY/mqlBOuc65RJJI8vDfBpCyQLrkyxEdhA+dIV\nEiN4hGZUa3keXEuvm16EGsq14g+5TYfXCotMEGhq2JuvgsH6MSoiA0PL88x+\nlFYvfOwq/eHfrUQB2oRqZ9PM+F3uCZrBnfzDmtosByLZvDfNyB9msHJ+S71t\n8GdxvUhQQYRS3Zg7IpE6zOg0rM/ViHE9Ex70QmF0FJ0Ry375OWaK/nZus9ri\nHSLq\r\n=tNzW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.893eb1876.0","@material/theme":"7.0.0-canary.893eb1876.0","@material/animation":"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-indicator_7.0.0-canary.893eb1876.0_1589206380317_0.7719115354025803","host":"s3://npm-registry-packages"}},"7.0.0-canary.a5aeb3001.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.a5aeb3001.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"351d591e7419c51aceada9c896c25888569bb9fd","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.a5aeb3001.0.tgz","fileCount":38,"integrity":"sha512-m2q/uKsrJSsJenrjDKuTNIR4tLn3U6Ntb39Q6BXQOII6VxuI06ov675eySkjFHXqwxvBYSRxLhmYKw60167TRA==","signatures":[{"sig":"MEYCIQDFWiHbVxmVUTbM8vqcnDCgE2MHhvSFo8/jjde2zsdF0QIhAIS/beGofgnrT3Et7wMiYoLbxi5h7GKsWxyaffu2Xp5o","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuWEjCRA9TVsSAnZWagAAOUQP/0k8/F+6T/O+tOEMIJM0\nvbQctD4Z3dDqTb2rK8ObtyM53SMtJcShdI86nz/T1Dig7/IQjAhGvmO0i/re\n+KbTyuq08F/J5JEAl7z8b7H83xU5GYELEiaYeLYAhq0syAv6JTd3YajZPz05\nQwnhScVpMIF7FLeqaAzdd+n6hcQGIZaUn/Fa8ELd6JZ1bJ8AKMCElaDdysde\nJcyYK/PfqRU1UUERszv33zHUPCGhRv4pqD4f3Msc8M2sCHexVhePiTweK404\nrsckk8Uq8Rtx/lrhi76TVQa4Oa6rLf9HfMIu/7okyU7FoAfxOAGADvnOe0i7\nHoJZ/05RRqym3L8HIFkk3vdtZIqCQf/KFud8yzx7HevBFemU2kgVBc+Mt/v7\ndpo6HQ1APnj5bWh5QJVZVD0BZ6S/ikFr4vyR+a7qZng/lGkq5k0WCXoal631\nYphTGhJPOsZbXGdPrKfLXbBh9HGX2mpd0sZc+cs+Xly0EEasoQG/Bg9xpsaW\neE0+Q2Pa7Q6qZVnPc6Z5I9+sN8Ng7wCXejPEG4/hecoqwZLB4DiUBI8FL7EU\nAolWOVUfM31kwGed67lfMgjNqUKuR86eNUAkx4hoaYzd2BqP2L/HRHE/eluZ\nzwwaTLnPYRAM49vdQq1/vXXxgqTii9znall5NEDTxNeLYWara3Ov/JSqZ6dM\nrbke\r\n=w729\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.a5aeb3001.0","@material/theme":"7.0.0-canary.a5aeb3001.0","@material/animation":"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-indicator_7.0.0-canary.a5aeb3001.0_1589207331028_0.7930580633986659","host":"s3://npm-registry-packages"}},"7.0.0-canary.610c68d97.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.610c68d97.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"41dfc164423c350b526377dd13e517a6952d629f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.610c68d97.0.tgz","fileCount":38,"integrity":"sha512-2cLc2TEHdNOC14mtGixcfyqvwaeO0TRwt9VvCNG2j9oVq+5An+Odtg8EuLxMAlJlw7W32ZLOLnOa3KV56dNDfQ==","signatures":[{"sig":"MEUCIQDTDiJnohGv3qMTEfgnyTEVmDyvhMTHfPj9CMxXXMxfZwIgIdmvQU2tWrGsACfxzlHFSiOreFmFgZJyXTZXPb66x+0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuahFCRA9TVsSAnZWagAAHN4P/1Nz0z+aIyf4cE3gJVVF\nkixfxNddXDxE7MEisv6fi6qq45dzpqECttVVVCuXvq5yiO0AZYcHBz36H/n3\nghYtsMcdnTjIY4Xp9wPMOE7Tm+2R0dqDP/H5RJv8X3OOHW7pcR9HVUoby3mT\n97MR4xZAFwvAybfnADifDZ+Ii38eGHxlc6YjOOoap5vfxwznLaFzOSKlkYHz\nuuuMKXJOeG9/FpKG6kRATMdxSr7VjdQfRzUXqs7MOnnsOBpczPddWeWZ5R5O\nLddKNwPX0eit7QC5fElPHxUquPAMXSgsqozsi7ikcztIfEtgoA5dxQJtFrqj\nPGUgeR8iUlkkMrDzCofa6bCwKOuO64Hq+aLBO+8Ma7cH4Z2Oa4aHU+/VklVM\n/o7q4cgUmbQZTg8QjRiVFA3h+WzhKynRp4SGMlM3m30JtTcTSaXURV3OqxBI\nhjqUrSBMlqyOWdJzpLScTfMdtWeSzpVsVgiD6BbxT4Z+q8ZpQPyM6Dr3zF9B\nyTNr6Egk0I+xD8RBGPhMEn6gs3MZqR1naiSZMfr8Ky4Yo32gNGlf/4S80mcl\nZzAyc+oItn6QH6q9tdWtDkpn0SgKv5ON7CByhYfXyt0jLd0Kzn7yWc/0NaYU\navyNH/PKnYlF9RV7nLFKcr2P7p3vJbKs+87wkWAf5Sw6MPY1G7CrSP4OybsT\nN/dd\r\n=EwDi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.610c68d97.0","@material/theme":"7.0.0-canary.610c68d97.0","@material/animation":"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-indicator_7.0.0-canary.610c68d97.0_1589225540692_0.7371183107007042","host":"s3://npm-registry-packages"}},"7.0.0-canary.ed52af767.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.ed52af767.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"bdc7a53829aa548c0d4b408c00d4d668753f65ab","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.ed52af767.0.tgz","fileCount":38,"integrity":"sha512-l7ElJezJYw1Y+xVOh9csg6jKkMnFwGtOIfITfe40zVhl1godvNwLTs+MeRyXN1CpWR3QvDf42rXy01H3MLrgiA==","signatures":[{"sig":"MEUCIQCnxkkf7jK5RyZTg8UKRb1NrEvwIrc/Nn0XCcKKO00b0AIgA0N9LVrx2N9qQxUsJ4AS8Yk0vgSN1puMNx1gvcyQjUA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeubUbCRA9TVsSAnZWagAABL8P/jIKtEay+j93RbwdQORf\nvRvGhoQNmp/jA4CH3oNSdTCjhUQdn8sTI6IfRhopy3oK+6uGNTNhinTGQTJT\nPbKknGAP13HRW0nkpWu7QXhVnDKUgdHgNnoMVWj3ma5wBiANs3Ef2DiSVZPD\n0nTjRlHpw3nP+/byXSkdZ/ZlkgB8UDldvsi9m64BXXa9fX16Nw+Htft+H/nA\naWXHtPz5ehKqOAI8zR4RJkhPDE1yz2cWBcKAqS/XpZAgKq7h9RJd+80c3Vn0\nkFxQtwIkvqjqTHHvVqF2CrS7xNe4GJACZYhObQfil6OlbiJyxQM5GwXfiTsH\nbrBdR2eMlMQs/kUF5QWug1HplWqdihVjK/yWZdvHlWEOVvqvEu4NfUa0c2+q\nNEdfZ4bo0PljpBPeABKUfrLoWRk1OsCVHZ1THBK8GUvCvnW7jTZYwm4fjGeR\nlgWJ62MQAEwt8U4QeVlKJzD+MmFfntmXLqTSuKytqnU8M5jghS/ygqLA4Gdh\n4Fd8j1vz4NqE/4UzM1uHI9W7YUA4AIUEMByB8fzayVxK9eqkqJSMB2hyUWsR\nTlDz1LJDdj7C8o6XhSiymU/ZgJ8PdCyktEFlwaWZq+y6AJXYB7e3w5pN4HMJ\nw25lf8SgjnWPuBna/j4gP6d7PgvcqqjKMXQuuh0Cg9ORv8pZmxg3KrsvGeiE\nVXYP\r\n=wAZV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.ed52af767.0","@material/theme":"7.0.0-canary.ed52af767.0","@material/animation":"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-indicator_7.0.0-canary.ed52af767.0_1589228827207_0.4712446305564757","host":"s3://npm-registry-packages"}},"7.0.0-canary.058cfd23c.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.058cfd23c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"d843c01ef19813d8cba2a7de485eca8fc9c755ad","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.058cfd23c.0.tgz","fileCount":38,"integrity":"sha512-on3fOThcjUoQErbT+6Oi9IUtZt8j+4ljB2uVLFMbxGrsmbkYHP2bN71lv2Ujh3apCH/bLLP+K7g/Vu9XJy0cnw==","signatures":[{"sig":"MEYCIQDuZ4d8giAuQk86xf/2a1kjXxEkH+HDvdsGwgMqXXvdnAIhAJj8G9VjAYFskIFtp7rONGqG3nSdZKCvnRBIn4CD/uXw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeucKpCRA9TVsSAnZWagAAQJMQAIWUm4o46kauIL7yJ1wl\nX+tMVWSRLkbz55s21AWkBmGJo6DS8Dq9ZzNLpyzhfh+vj8iZjjtrq94v9npq\nhmTX1olY+Pm2c8zMkBrZhZ8e61/9MTl1GkJKzFu8/ohBq4CUOJKlYGSNVN2D\nTfqQW6RIrQesHCFcRKSgYzeG7R88L6HAlWuQOgU9d9PG+hplm8gJgFQLBPXI\nhIFIehBc2NUDn4bMgjEhUOtuujw5+6We/t1/4V3uRUdP/gTvbn7Y/C2Np3lV\nJnqQV26+qzX6Wx3sq8iUV82/KRxbSBK4lLgo6mDxU/UR9bF0SzljCXnB4i2F\nMW8wGBpjN1hZxwtiRapAiEAT+TulVX1iGElAGl/PWCAfTUUIZmOHIJ9yr0r4\nSgBVG7zVbpMCrC9l63v+1SYMxwEcXt9ZoDNBo4RjKJTG29uIuiHluEuAOPFW\nD9yaWX9t8tbCKqqT1ZmMxdwhE52g+VZ9k/Dm60z0RCIy5CPtVfrBEHLD1/6M\nvUnmkOQFItl7yk9Ba4vfqcqCVXo90lBB4fXs++cqjHaJASvpdY5E5hrNnLzf\nF0i4xQogVJyBe6gxNy4Tqj774kfYX2O6pvZUUM4cZ3ktIUy+lihVYdGY2WwG\nzc1t6o3gKahZzXHrXR4o5rqoAoQLoRg+UvluFB98knwbL2ZfsdoXQRB7hNuC\nnHnD\r\n=e+2v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.058cfd23c.0","@material/theme":"7.0.0-canary.058cfd23c.0","@material/animation":"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-indicator_7.0.0-canary.058cfd23c.0_1589232296517_0.7473132742632909","host":"s3://npm-registry-packages"}},"7.0.0-canary.0a371b4fe.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.0a371b4fe.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"1ba2c665353353691b1ac393ea22aa30739dfa32","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.0a371b4fe.0.tgz","fileCount":38,"integrity":"sha512-6rYjQiFEV/tpsBkIDXBiydvzAO0cOjh74qbqtAW+LLWUMPPncbutUxAIQziEmGBd8x775e90kuazvJMa4c/6Ew==","signatures":[{"sig":"MEUCIQCXs8N4ScjttCTESxzHhE/ye1z+cXkuShIysEJam96KywIgcCFga39cr5ZhwQUZO1uLL0buMQQWvpFmVXyHLa/5vy4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuy6mCRA9TVsSAnZWagAAq+8P/01QQHe8CrKV+j39GuL5\nulT81cbr5O0b5HXqIk5Rs1KgjCOP1P9J/eB3L78sR8NZO84pRKR8WaHwqXcT\nNVS45He0MnqBUxuJgewBb5gNVgaLL3aas+Dhr7VuT4FXEYATF7D87zChda7+\nNKtT3PKWZ/wWtUJLWZLfsjqo/n46ST/ajSWB7AHHb7SdHfAit1MGZXtZFPcx\n/HkaZpdzQfb3/+UV0eUog+0ltGhfrvf7h9yBPUqPonyQ+SEx7Erg0QMncGG8\n8BBBShVer1d5HCsNXnBQe0UyIAcFJ7xFw1IOgQH0ACnEUqh+wW+g3xO4oMl3\nCuT9Z23l4S7cLZiTWRvVB2gT38HMwf6XJxLom/aDcPUCtpEG8crXyG47JWvu\nE6kTTRY9YtVdP+FVTXI8SAfJHygSodNlD6H46d9CPQeZFneQ0ifk1oTyxjVZ\nut3+8pZ5v/GC/rcOu66pxJeHhauWFaysH+yaes9J6I2VOz1XJdX0svdOC223\nkVnyhGJ9pBRcgWLA/Hy7e2valvMgXQyWl1Sah7B8E9Ydm9ZNv53OOeaOh/HD\nkpJS6rfS53WK+YgRYSskD8OOXiSPuKPeJsPLmJyZ9LZ9hOisPvpPI7oDKehc\nir15noWsG8tBfUCHxTGhYT91XyYrZbXL+ws9MSQOO53g4ivheMCYsH5ke18T\n4HUt\r\n=W+G6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.0a371b4fe.0","@material/theme":"7.0.0-canary.0a371b4fe.0","@material/animation":"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-indicator_7.0.0-canary.0a371b4fe.0_1589325478294_0.522752136419411","host":"s3://npm-registry-packages"}},"7.0.0-canary.2139200b3.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.2139200b3.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"b16c9b3526507b80da8915832d7c48e507b30a43","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.2139200b3.0.tgz","fileCount":38,"integrity":"sha512-bND8tpZiX+15Nx8NqNX1MZJIsLyUK9n8DuhLTkrqcI9kqQtKDSd/u8VQdHFanlLv8twArEAK/2Sl4yOfRIPTlg==","signatures":[{"sig":"MEYCIQCra51jYOPBd5B3YcREJDcNSJIoex+4byKD2TVl7u8e9gIhANp9H3akgAYVCZGRZsqM72/yxoo+X9nGVT7GdGHvvD2Y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevAhrCRA9TVsSAnZWagAAq40P/jEzbSf8iX2cKF4RBzGq\nASZvWPrvvcgMJQ7txysvUlbE0IGm28NJtwwafU+WgbEN6yEbET3DELXQIQph\nLmxpnQi1GzDLqhMKipK8nBsnFpU25zDclCvp0/MJwYOvpYdIy21RUt8d4R1i\no7Kblb1LF27OvULpZfZDjDbetztG9co4fW0GVyi/HRt8d/MaQ0ROmmkX5H6d\nXBANEkix7zcEfsEdH+hiq2ppt7XRv+68E1jTyJJYmqGa6E4h/cZHLFwTk9MD\nxS7/QUUk0OZQByN5FVr6h2S/PXeoAoAI3uxy0tgrBcmDD7gWp9JMShkwM5vX\nVqbC8bXKUe7l4AJ/OHAyMaBoufulqRY7M9a+BFjGVCuUDu/PrLtPUjqUNgdU\ncehGbLVJMCSwV7b9/K6iP0kPnfOhxueCbivV5yHrpLZmn508sMzHg7LsK9hI\nf2w5sxij7R48jPic1Mxp1olvWFGi+mP1HsDOA4lZ0VbkO3xRd7p/wLbZ0xrp\nLpe9ZPeKS23V7bis/w2J2T+bPdsEICbe/35EVgUKAic5Dz57Z2C+XzR3ePGC\nmhk972uBClxQrylYDnNqvtDy/t2ZtdobNF2Esjxv2Z2t2Y19HVCa7CRVQWtt\ncdhS/Hb02grcc/xlvoORQJShLB4HUXv21YHFp+b04wryX8M+pjdkfahQUx6l\nryeG\r\n=miHB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.2139200b3.0","@material/theme":"7.0.0-canary.2139200b3.0","@material/animation":"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-indicator_7.0.0-canary.2139200b3.0_1589381226712_0.5671841242872966","host":"s3://npm-registry-packages"}},"7.0.0-canary.744d751a0.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.744d751a0.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"324516b1a4f25fe90e4a7c13e4690c938b24570a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.744d751a0.0.tgz","fileCount":38,"integrity":"sha512-6ma8sNV/0jk2MWeXpoOIRky4HomBPQ5bqSZ34G1HvbVUL/oifLcQPPedUiq9jO0aW/1AZWTd1HIrf9qHyBCg6g==","signatures":[{"sig":"MEUCIQDu2Y7LEVY+LDvxU25p+z0gT44O4q9phYW5VRj5Wf/QMwIgRpPimqhFLbquXQ76CAxHKxgGjrRPclQ2u2H4XT5ETFI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevMw/CRA9TVsSAnZWagAAFLIP/A/EJEBy8jcFO8lJuCb7\nYJxOPpzcGgGAc2EnhFh9JdafQ7XBLLk9rZXVaPHZzWbpaH8QTvM0eZ2kIluP\nxgwNViurOuW91bp9C+usX2nZ4GojG9v5Jj4dCtmifQ/T8aC6p9saazKT5bFD\n5YUNed4L5HS3uRqA/9o/h9VxR+iRGne/q+AVYcCnddNDw9Zs1HvkmktLrgzz\nTS/s4TE/FF2y6ZoUn3P1ye5ymPOAYYElBtzwMbTkWhviqAH3JfkM+4L/d63v\nErso7y07p3MuVyS/JwQaD2t8BlZg+nYr3xTPjttnT/0AH5FxmKElDgPPumMW\nyVTR/ElK4rVuREpJphJm/sExyeKweYuDoeYjpKkgXj4lXrMWI13kdHRu4tqU\nhiiVBdZfkuf28iwx5Cr5dUzaHXwhN25SuD4Qwnx7f9ZMyIA9EIfhhlFA+9Y/\n9AYTc/n1FAcTM8OkY/YjboVaDDBH29U2kGmGiK+m3MUIJ4lWA1itxLTTq+u6\noLWc+Zc3F9x0w7wVzvJL6zb/LVO7Ki97JvS3svlGZOaex9Tf8CoEFiERvI+F\nrSFf4MOigsquW4HfqCI8QFqLRigbx2sdJj2eawwZaBSzknPSlb/6pXwsY94S\nfrXssI77FXiLcmc+0IPcKFgwuDGVwNBGpzeDURnowUBZijTjYLSQK2lHF31k\nDsUE\r\n=5zD0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.744d751a0.0","@material/theme":"7.0.0-canary.744d751a0.0","@material/animation":"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-indicator_7.0.0-canary.744d751a0.0_1589431358876_0.8906235835872269","host":"s3://npm-registry-packages"}},"7.0.0-canary.ad0c0c103.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.ad0c0c103.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"d0abddcda483f536d0233491c73b9a96b75f4f0a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.ad0c0c103.0.tgz","fileCount":38,"integrity":"sha512-yuJ5nKg0r1fkRHJgY1LOixOCPux1Htvs23ua3CYPDAbA1L1a4F42hgKsv4gAGXoWT+5qfAnJC8IFG9MrEM+7/Q==","signatures":[{"sig":"MEQCIDn53bro2zsZ8wkw4wXEEf83W4GW5jSzDG3/5xGEJlPpAiAvrOiGtDQkUqTU5co7q9+JmxWFqoQTEVeOqLo+Jhl8vw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevVroCRA9TVsSAnZWagAAcRkP/1PrtWW/fbcSD9O4GXR7\n9fo/D4Pe+CD+L4gp5rUNmJ8w8z5XGZz3rjOZlqkt3H6HddfvKJoGYaWySkbk\nPmlcaWLc5cAT+vVZfO0TJpuh1pIIjYCsaaO2dKrWCBrq5c89ORFnc9nxPOKx\naV0eNNfu4hFvz26YZtErKBoPAywwaS7SIpcJBrSn8ObL8mnpGdB3Gwlb/nOV\nackgB/jcB8XFRUAzUab0pFsG3MKAuu38Q6zfo5483r4PqYAaPnfareOXwACV\nhca1vxzrYOLHVzFw9yLR/JZRKEDkR/NuhbTWxzFJCuc69d0dlMSrOAqB1EMF\n2QMF88lfToGOccWgbIJ8D+MIMmFGskCHFUPX/R8X2eDuut/yRqvAj2AHYRRr\nc4tBIhPjtW1nUOtM1CaG6cD4Jp5BVWcScV42BHWy/o9jlEfcRa7f1f41YNGw\nvcAtvZTsAYmQPkVvFhdilVs8FHb/fxLixRkebrGsdSvLuiwgIY7TZrpcWerd\n40iMXqAh9HYQZK9kZq7F5nvpQ6/7NfTfxdAsGja8x4fEuEnj4vgMpOS5uxTw\nYBcKqrUISyYc66oKPaGJGsxyu3iaNWyhVlVV9CrcX/2xSsDbjZIur2RcwCsf\nSEvmXoioc9sMf7ELCZLtTP5eJqr2yEwoulGBxAKC0JV8zJ1RBCnLFmfRR51a\n6Xwn\r\n=rB6m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.ad0c0c103.0","@material/theme":"7.0.0-canary.ad0c0c103.0","@material/animation":"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-indicator_7.0.0-canary.ad0c0c103.0_1589467879531_0.6607961933994844","host":"s3://npm-registry-packages"}},"7.0.0-canary.fd8f8f2b7.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.fd8f8f2b7.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"738b8fdc77e93d26eaa20c40e89eee1bb8933846","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.fd8f8f2b7.0.tgz","fileCount":38,"integrity":"sha512-suTWXSl/6nI+Jc/PAb2aWRQOu1ga3bJ8AUnxpIY+IKqsOt5bZTv2OOVVM0rcJ+jbvdhYOH3wrIjmYEIEAzJdtA==","signatures":[{"sig":"MEUCICoWmGm2psbfe0QsCp7Ii5w98lqN9yiKVuWlZXyuTizrAiEAvE8golBfwjs91/WIfDv6f2sgCNP0AMClQAR5+mdT8Xc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewsuaCRA9TVsSAnZWagAAHrMP/i5/rVTAvz0Wm9FdzqBS\nvC+N3Y41Uyt9Bcq5LBFP0gRArKXnUbg4MmPJVDREGEzSFJKOdmSSY0068T9O\nWV7S+uB/VFJ30HdRgwMmHPsiLWI4F/p5FI20TapHUi3rLkkTsFrrHpihfDo3\nruKFdQEb+Z7SidbMlaUnLjiHlvV3ll04+pkiPOO2LUINnyp8yb09o5m/NXdE\n7tmbFlfmUp4xGfrYaHPHKGYMkrwd2OHOsxm+LbeaXtijlmzr/+BlCBkXqtiI\nFsrxq4J6NqkD6VNF6Tog/5e/rzytrch4/Y9ByJVIGBZqs+JotST2WHsh6d5z\nEFwN+GaZShVamLyN6xGqBPelR9MkCO9Fb0SqWl71u6Xj9LN1A+KxSK1LNTaM\nn74hmtXgyezdmqBW5/YAQAMn+7QcECU9cKEl3lltZnU+PtkNC7KX22oFENSW\nbtfBGRXJVSe4HJWvjByfosdIx9ld6HltXRHK7rDUSpYZw3sj+kQtjTCVdcGC\nj7mh/KrgThgxxRNhgx2+FEcH0bjdEfhD9ebl/DCCET5hMFhp4kCD/o1XW2CB\nwoEAJvWZw+ifGCWZQHzL9drmeKjqchXW58eLLR4hTHkNec2k29ZjlcdPoYxN\nnCvE5bUOVi+mTWUb/EOqOrGfYV40uae3KfMaSVCSejoH1z3aOJggqJ118C//\nxQ5o\r\n=7uOM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.fd8f8f2b7.0","@material/theme":"7.0.0-canary.fd8f8f2b7.0","@material/animation":"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-indicator_7.0.0-canary.fd8f8f2b7.0_1589824409512_0.7929921833069926","host":"s3://npm-registry-packages"}},"7.0.0-canary.730920fbb.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.730920fbb.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e274f9d2df5b22434e0f33c5bf4989c5d298ec66","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.730920fbb.0.tgz","fileCount":38,"integrity":"sha512-W1oGEGwmZOB8n4JZ0MiaR139gLQpB2z+jJWH1YS888WCyF3CLAPRhGiDfV/7G6hdUgolITzdwq5INBQ/UVgtGA==","signatures":[{"sig":"MEQCIHFVshGUPM0HBKqZOhE1KJzZC3yOhr6PlzuB2hbCpU1DAiBaHc1WuYwPEsuugXEKlFjlpmjTLkTtSMmT633XE6ID8Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewuV9CRA9TVsSAnZWagAAHkYP/A4fNSEmT/0a3H+KIp79\nNxzTdTTUnQlAa9sFc+PSl91uG6VKgSUHKjGmmNFMkhFfYmlbROz/K9Qyr3F7\n8vZgmdk4nj09WMjb5IHHzBvmg7IO9YWoGeZUL0CJfMoX++xas/UeIfhug4Vq\nlpGoXgW4QfC/gfG8FRRzlXvHJxf1C2DhAiXcxge17ktZdKh9XZd61v+/+zWw\n9AJMo2ytZGe/RUdovoKPjOijxALeKycM39BfXIJ2iCQJ7MNCkPZJ0zAocH1T\n7geClSPKEQAyPXD7RMm6EwRMZWSaxZ2ir42ObLqSj33Kjzku+C7Fg7ntWHf9\nM++IefeKux7BguAvn5xB+F4e7Aoo49Um8a8ueYW1efU1k4sdy6vKw+x8aVF5\ngtkTsG+QYdIbJ1hchFljq81amsuIPGI3K8NBslWnkDESNVhqzoDSAMiSespj\nL2Flz+pgly2MN2plPqbi4VNCa/0bwf/TWZEW8kNSly++y3haVp13hPWCuo+j\na3Q+QriwmBEKZozqbihxD8W02ctdNQsAMeMGrvT4xpR2W4PAwTjhb5PFv3nw\nX6nQ2sLN3Miq6RnnzAzvEslEsBQCbFUgXxMD0htWqtdqLtNAS2q4bZaIU9+Q\nksE5HraVjpxg0u7B409XWYIbXQAvjE3vkZVLF7Zc3M8w5Wf/kmi6tGBQIdd5\nPR+9\r\n=iDcQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.730920fbb.0","@material/theme":"7.0.0-canary.730920fbb.0","@material/animation":"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-indicator_7.0.0-canary.730920fbb.0_1589831036675_0.64617030252673","host":"s3://npm-registry-packages"}},"7.0.0-canary.bcdad99bb.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.bcdad99bb.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"84c6e57173f862f6e0b793db5990aaa86a7a550c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.bcdad99bb.0.tgz","fileCount":38,"integrity":"sha512-JwMqdPLfrntzSoduU38IX0eX+BODb9qVoht79Xqa4FeB4RzH2/ci289BVij0xx1BsceJcsb9OfRya9cvSRRMfw==","signatures":[{"sig":"MEUCIHzTELZi0arl1TLJA4hv3pRVN6LEH2b3rbm+K9a8zxK5AiEAmYmFlh+UA65Efrt/EMwEexkt03peRDJqeM0VybHY2Fo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew0/iCRA9TVsSAnZWagAAMVoQAJUyXxOpot9HK3H1kx7f\nO2rjDZ1JIC6Kq9iJM2g69RojQ3Ss7JqAfGynmMr/4k4Zncn9+dMa91jMeb/L\nf7CJSR/MC9PKrOrNyvv3oWTgVmtzVDwm7gm7h8CCeDy6TfUYVmH3bm7qc4YA\nDolfstUOcsD+YWXVguFlni8EIdPge1s2wP3t49ScSER5mnvZR6hRQ4vsHdzm\n5MMLXV+u6NZz4arUpkd4y5FzOyLnduQoKM+W865aGcOpgrg0/jfw4VEke+0h\n0qLudLtUW4MPqVL1Bw2aoANwJ22p/WX4/2JoXbkWAdr6hcPtRjFldrvj2pci\ng0QJGgCaUgd7fk6T2rgUxePTtnZLTj493JjDDztuLy1MtsSQFdJ4basQceuE\nKY9PPm81yPQHCaFM5xxHPaMcMg2taeOqeJ++ZtYAfjDWMHI1PV9+7lAEiy8z\n0a/kMGmqE6pAfMi6gJLZpz/JAmT7uKzPASd7PeCGz/X2lNbJKZfY+nodFQDt\nCgTCz3dh5tRpKYSFoEi9Lybowe61FtCUpc5ajeNIiIxA+9xs9yVWs68EmkUi\nU6c99JPb2FCLbYsxGypmV+9yYU2DHTe6xBcWSRGuzAsfmh5Cbawf7mu53Q3k\nqrJtsI5O9PzLePB1T4tgdUqEAiedjjDi0wcOmb26ZHjw3BCPPDA9kZgaaOe/\norpg\r\n=shdz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.bcdad99bb.0","@material/theme":"7.0.0-canary.bcdad99bb.0","@material/animation":"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-indicator_7.0.0-canary.bcdad99bb.0_1589858273743_0.7994442675699929","host":"s3://npm-registry-packages"}},"7.0.0-canary.4497b86ed.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.4497b86ed.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"1b8937b82bdd1a98a4d84070fe4ee27a61a42fd8","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.4497b86ed.0.tgz","fileCount":38,"integrity":"sha512-HPOCY3TopqXH4/luo/vnQPqJRYHVoBOj9XuOCwhfOZiL5lvOEps74FrnhbyY0C9AvdIiubWs4EZYpUz2b2tFfQ==","signatures":[{"sig":"MEYCIQC82PGThDHEVpAbgLwcpQQLxoTmHOMioWH7lSiERXEJmAIhAJhJcKAqnLGURfDw5ZKzZklqdJZAtZzLHILVo8lYkrTd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew1eOCRA9TVsSAnZWagAAVQoP/jWE8ZNDn9j02SKyplvw\new+FyUvjJitiH6kUZSIjr+aVJNoHcNW23lSOweUzID5t9bByNlhbkfuXL+jW\ntCiJSKZIHDF9/sFUYK/GM2cTrjWGGwQjRYhkabEUDuCy/IB/PZeXK/5wQ/+q\nbT+y/mzEbWq0iK3NCf+91UAOK0WSyjlyRE4PKQzXGssWXm4nPDfKWzOcM3Su\nqLkmsaa6JCP90LsfxPzWNovB8NRTVWxsrKxkA99x0InOd15JAyZx7Qs8CPXB\nJcYVKXzTtQM5EWeyVw/o6lB3Ijn8T/2WTymXrHuEa0lE+7ZfPIYfHeiUjdpP\nTrMHFyrCBo2Hdt2Z2aFbWl7z2ivTFGNTsp2JBjGFZBQdEGaUHIP99/cQYrdu\niJUjw8q8XuEjTKlx0faO07k5JQUqIL5EQPEHjgWUuRGNh4frgSXRtEeRFNLz\n9jLXVJj474GBKWPQamMTjBy/Vp6K+IfT9Z7PMwC1thixvOnnvNyvKwmqoZnh\nSBnZpeqmLtWJ2nE87rbhpeEfycMGzQvHlvNFrjQrBOqRTHMGNJYXTqVoJl9L\nfcm9S6EvOcM6zmEEtNguNsgsU6GlQUepQ6aCUGTpjHBFLezngtcqRXlfM6gI\nEbg1/+zgUjlWQzijTPcRqBvHiU0YS0q6RnMuvSNt1iG4qubUPun+2m0N/0gr\n18QB\r\n=ySTG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.4497b86ed.0","@material/theme":"7.0.0-canary.4497b86ed.0","@material/animation":"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-indicator_7.0.0-canary.4497b86ed.0_1589860237937_0.2902619194800704","host":"s3://npm-registry-packages"}},"7.0.0-canary.2e60575da.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.2e60575da.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"3323014b614a329801945213efb4533925bab4d8","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.2e60575da.0.tgz","fileCount":38,"integrity":"sha512-3ZK1zqUkSkqGapiqOSNQ5Chbd4ZwcBM9zm4ZWNU2q2B4RXSNP2xXdPZcDw0BoQtQ8ubrrPBYK+zMEJtvOtQgiQ==","signatures":[{"sig":"MEQCIHJK2u7U9VrQIQclPj7qML0tQz6eMCXJvW42QPuGluFkAiAA1JL1Rp4ogaAqLZDv3J0VATgylVsWb4xketak4eC2qQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexASmCRA9TVsSAnZWagAAtLoQAJ12FJ7juK8f4tTACh/d\n7cODqke3YiBePxkEfx1NDHM9hhgo4NQeNlGZ0Mz3+Tl46/c846hV0t/v63xW\n/pb7a7WiNCyKlnc8ZMJnGFRyMBpaqrHVVTvN4oZfqKLEHh+ZBIrOqItmrrr0\nEsFbLFWg4IoYic2ZANKrmq3yPc70myL5QDuQBhdm59Be9XeL2GSgRbnsdSkm\nAUsGH/tXxRmxzPTS7nagjJhwM3IBQ58HLIIGkgnVRAcSPcwz+HXr0G27u9nx\nYAW70YwlSY61hT7N9zKvtoMEPg3opFt++u2X1pujSB8OscAzJgs8UqJsNpWt\nuf/O4al33p0XXJm/t+f9bTcGJwHzFKWfM36HQjaKrEBmBb5vuC2rhcoRh6qV\nkNwQLsltUdCtNEzH0FImaE9HQ8qC4tSFuV/0QKL5hmorgVtOUzugZQDoEuU4\n7HrX5XXI3B0XQYiVpd0b9+ZR7Fkhsn0dCFvu2Pg71kpgTY5N6TblVYghOQrC\nbgWBZIHprpaRwIUdS+KTxnd/PblU6YuhMmYX9jQQbnpoDXpY2NJGSCCXbFc3\n5qPaWUuM+qtwVGXAqM95TuV2Xf3rPFCLUmPSiLcxTRNcXK5BdGkPKbjoKsVI\ncpt9+v0eWugUKrXmcxeAFmfGAfPNi7qve5vEy1uqRvP/LDsGbWDC0dsxgnQB\nJr5o\r\n=D6x0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.2e60575da.0","@material/theme":"7.0.0-canary.2e60575da.0","@material/animation":"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-indicator_7.0.0-canary.2e60575da.0_1589904550359_0.9499845862994654","host":"s3://npm-registry-packages"}},"7.0.0-canary.e3eacefcc.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.e3eacefcc.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"2feeabcaa5a63528a0d00fe1388adbfdc8d8152a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.e3eacefcc.0.tgz","fileCount":38,"integrity":"sha512-pmcvV2gFZuZASWz5V1OhNl1eOUt7bgDGxJnMWfaliiGTo5/PhsCsrY1FQ920pw1uKXb2NFQRy5m61Q8xz7MSxQ==","signatures":[{"sig":"MEUCIQCnC+pFNjTBctMaiVsjOeEmZRT2ppdqLT4XlTKTrKtaXAIgbRsBv1GrcBWsq8skTvGHQfTttMZCxNOjm5scu7QVqFk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexBl4CRA9TVsSAnZWagAArecP/AmJYw3QOyFIEhmr2XSI\nD2dpSjGzweAOkGoHxOtuiFsTBZhREKwxoV7z6XBscfbTq7VzvSRlXIkr7DX2\nrCXZHngLyRxR/V5B92C7bJkM2kzrCx/Z1Sbc4RfG6AouR/ptQekGVQu1qZMf\nSVzONni6jF9Zf9Juu7pBUjPfNKy9cq4dBOwoBhW4we/MleUAeIbadrcsE4Cc\noyyjpX9UcvUZr/QzeejM83c/yIXaLDTXox24SbJe7ZGW1vo2kZg/UgLr76tv\nvaYk6pHlbvNT7r3Di4jADzZBkBbrQZsk5PU8UMDgbQ89Re3LzcdUqMUAdTJ1\neJwbZgCurt/wdbQiSoQjE96d/vPUTq1c8jdXTLhgNlVhw3FB0vtpJ/TOm4HF\n/Dm7nmb2heqwXtXMGQm30LW8hkoGPiHKL6ONpdP5rIUpALGWlh7fSskuZLAQ\nFQ/xEw76t2OzD6lNm0T3AzWbmrrkeQCmcEGHS7b4rQZvqJbMkT9dlazKfWOm\nqwibxCx7Whk9kc5qieGYJ7PjfmtI/9/5SOUxjQnKg0b49KHlRddkaGCGoFVN\nPb9IcfWzUqvO+tIlVOoeYqa4njaokd408mUp4pgYCfVXEXHuT+0P6SFRsC3D\nIzwrLY0q6T+c1RVGvPotjEBKNFdOOuAmkuPcLFqqVo/I9FlGipsqww8Iro6X\nAZ0x\r\n=K7jB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.e3eacefcc.0","@material/theme":"7.0.0-canary.e3eacefcc.0","@material/animation":"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-indicator_7.0.0-canary.e3eacefcc.0_1589909880171_0.6527495941540762","host":"s3://npm-registry-packages"}},"7.0.0-canary.b065a4d2b.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.b065a4d2b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"6c15bcafa523e1e50a73f06860f562fed529bfb1","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.b065a4d2b.0.tgz","fileCount":38,"integrity":"sha512-HiCx5ycQiFrKVa+URxyMB98ry1tXtMpIhl8oPb8vLPBcmIDeD/Q4k5m/mHEVxJqUCW1kh7Oszt2EhIEa0RoXJA==","signatures":[{"sig":"MEUCIGaR/rWG3UJFgRPzsqIdPzO/HyRSYxgQMXT+rBmYayYgAiEAkZtb5ZD6N6VN4CACKy3HTEkO56/FhMo3MPpYOkZ3RpY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexUBmCRA9TVsSAnZWagAAOY0P/iU8W4aW41vXb4dEw229\nlLAKNx0i+qKc6DNKlCQ06YurTClaMJ2KFD2LxHAzsEiTSoO3ZwQNur2Urbg7\nep3TpsupN4Fczg6VvDZJcN1+ClmOxYaQg9KAUySltBsnsG3JVJhKNltUVxB+\n5plICONZ/k7oACWr52NK3pbU3a3cmvwMCex867HPHJ5CiXZ/pAhfyjY40Pa5\nOggfM72vLt/v76kZiY4XBz0NZ9evHxe1oSmNgNnNM4VhU07ZEf1UoZUojh4R\nq1FAJoSBwlon+V9wrz5jp3V1IYTkJb+HrxSwPQLMhIuKrVG85kBtH0UNSKMN\n2gcd9dPcBXraQ1yS4aaNt5mmhr8C0SLMdaQ/0EOiXDBUKu/7qwAhhmqlLUNI\nKpb2KkMiPjBNWFDbJjCwjuIBASfBrQ7NnL9Nkw1DZe3HLpG5SngvjRR7S6mz\nmnwMSPRwWVOYzMFCufQl56V366koGFCMEzJa6wy4igxBmpPYzne7H4nelgj6\npDv+T1Lz2ZFVsknCRhIJhE5Wd7YdDeKW7vgeUEaHbfn0nQbd2rCYSHpcO1TB\nx4lUJj8zqMmpKa+3w/4SPqh1bUx0O77ZmwwWyDS/ArKyeXMx1bsV/91XHz8B\nl5oYOLUC6t/+xdzHOA4KvpHi+P0Z13CYwGBiE0yD5/vwJa+0CVv2vaixExhP\nNlTK\r\n=xtYH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.b065a4d2b.0","@material/theme":"7.0.0-canary.b065a4d2b.0","@material/animation":"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-indicator_7.0.0-canary.b065a4d2b.0_1589985381307_0.5370932380636715","host":"s3://npm-registry-packages"}},"7.0.0-canary.4ebce8d78.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.4ebce8d78.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"8dca9be0c2cfa680f64c36fa198d0d245ecaf7c5","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.4ebce8d78.0.tgz","fileCount":38,"integrity":"sha512-q0RMtCmy/BtM7WAc+tg7egzrIcCb5y9eCGb8piR9ZjfEBp0ND0sp+JKz+kOOEOsnC2/bEV6NGfylSJ/MecWLQQ==","signatures":[{"sig":"MEUCIHbmBRLPGe6+gyWdNyC6FvLzrY6dC0/d+Aw4RzLa5brxAiEAlFkI0tQu/KNsOJxzSfOimkpGZFPDH0Z5i37gB+8v0u4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexZgOCRA9TVsSAnZWagAA0JEP/3wAI4PhzHF0hZP3sNie\n+zY0jbQ3lCEWJCc37qnqpo2oiPHFWTyND8kif+0dixpubyb+AuXybyKcTirW\n2z+/okesLKKaajMdN8FE2Jnw3AVCDDJrMtFk3x9Ov3IiyBej8R+Sx8tprRr1\nZIe3hcrwJ6nLn23GuP4VVMtWc4tTHFz0rmdgRnhaz2IBe2odkTfYsoSLS2cq\nJnvgaIfSH8VolIydCcKZdyFwUmnQgAhIb48iYBsShOPLJ704N/bSjCCdAjXc\nFWgm5Kl7vf3Bq14L29Gvavh/Kik3hUsDdSe+pDzc9UPapBgoIPRNwEvXJ0Oa\nVODTQH2oUXW4gndvJHbJ+TcsSuWHXZoXFl3zo9bnb9MJ/c1mr0TTksKNNNcZ\nrTg255Df28jdz3SZtlgRzLb3Io8nbGF8SlHTqNOKGInvIZ1tiS7VFrFiBSNt\nkdcp9YsUToedFLFFszCvrI2hmsb4VWHLkK0eBZFppFuCgVF4tjtgqM5b1rOs\nj+VjsrbP9EFQ7zoIVdl4VtRhWric1mVVESd+BcpKmfXMp7ZfHH3JbRnXPNLR\ncA81gkp6lia+kfapQLDCMSmad9aDUi/np41zXb4LOSLsR+SkhqSBfTGnmgrF\n7QXp4XmYWT0/pLf3yUwxDmdxRzeqe5q7ussndFMtyFGcRUkGmhYKmwHQgxg2\n25ou\r\n=C8b0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.4ebce8d78.0","@material/theme":"7.0.0-canary.4ebce8d78.0","@material/animation":"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-indicator_7.0.0-canary.4ebce8d78.0_1590007822310_0.926234304465559","host":"s3://npm-registry-packages"}},"7.0.0-canary.b0fdca492.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.b0fdca492.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"d0ff166a6eb96d2cc5f0ac4740ca98b02bcc1d98","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.b0fdca492.0.tgz","fileCount":38,"integrity":"sha512-NrdgKEmAWhf0RxHs0ndDTzYsoG01LvDQiqhRw0bCmIx5NcQKe62zuFEkXx4peZVnyyNcnplKSzKq0iz2TgEaZQ==","signatures":[{"sig":"MEUCIQDcg3HCRCvPcL13QCT9Krj/an9V5OIKWaMxaNR0DKY/3QIgJkD1YsoW+f7PfcDuOFiPDTvoCfebEKdL3HxGZUW+Fsg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexbcSCRA9TVsSAnZWagAAAcEP/2VlnQWEITzLLKMWtwK8\nOrYnIaxXAsApEisINEct/g/0iMWDZeHPAHoke0LAHPEG88j6ngK0wxZKPSoi\nsGvJd3fsSFjEC4HsW9a1rxiGnlyabV98EOrgrVLhlFR481PPHHqgQDYuyI/O\nzGGYCgu9SMMjpHZ48Q3rG/3tn1SWtbkgrt0JZSp1OS6RidZrxtBtJwfD+lnl\nsCidJ1i4qw5ZONW+61JbslAorM3Fm4LtmmJCkIxCp+whLiinuN5Hl/CvB78D\nOjtpu5S+CpiOatFWhfDahpUe3PqnTgnIjKDY8hT8RBnnxBgKPL7wpy6f5EhY\nuyILqy4MShlGWekozQk8E4nxR88++s+U9EYEzpB3xsSsRUM/GbwbcY3QlErD\nzXQPz1atHhE6KIfF0/p4dMe0FCE/9nTJgp2F/irx6KqDeYTy/zeuEBkGaZg/\n4l+XZfoBVY384zc7qac7roeVUTihmsjRFStks+6VIfdfg+/ZXSoDGtFZ2Fjt\nocYOzcg7PXGyj8v7TMvILXMlZg6TifB/733U04TcohijgwIrnBdm7enm2Kf3\nlG/6yV3/mxrDJ5rWzM3U70tf1PXcr9SZ8P/p2nkXScX5EXFkKlZF5iP4uP9c\nv3eGIo9NVU2LpUHzF+vslU6GlGHJRV43K4Q0ZeC6RHkCVSIYdjN+fN4YeAiv\nfzRo\r\n=rEDa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.b0fdca492.0","@material/theme":"7.0.0-canary.b0fdca492.0","@material/animation":"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-indicator_7.0.0-canary.b0fdca492.0_1590015762330_0.6375356107249288","host":"s3://npm-registry-packages"}},"7.0.0-canary.c67667e8e.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.c67667e8e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"5636b4f7cb4226cf283943f8e3e35fcc96d63c01","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.c67667e8e.0.tgz","fileCount":38,"integrity":"sha512-krNHDwis+/8cmbT0qGB8Vj9WKcaFE2dlBel83FiK4IsA3X5uOpaqqMh000Lw3hi1vSm3iJ/YH2dn0Z1anZ02rw==","signatures":[{"sig":"MEUCIQDdsPfDE38OjXDi8hRXmbAOKmWg3oaJDprrtsgki1f+TAIgFkUo0wwg3Hx6wH/DkjR06qRw9/mOV5Ll9u6whYXTWYg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexoxUCRA9TVsSAnZWagAATVoP+QEX3F9Jtr+bQOTEmCnv\n3sEb4piti66DpoPQ2mbd2EwEbSqSX7Q6SosURf++6IRrJZpa1yv/iO7Pnizj\nCaHpY5CmEu97KrqyXnyX+CmmAtpuWe5aHnkT4CIfoCtOaLHNpmZHydNMTV4w\nhSl+mlvmnDar3ANorF7CTUTSQEF0vlVQXge7Z3/J7ncEtr148+RG/jxxDr8m\nOVVoZYz2A1vdo0apHn12QEAnUBO3hiH9vI1YAD/oPBBRI9T5F6cie/osfEdv\nFrmGmp5p1m0iKMlczwPIh63lM03NMweBdIXmdHYdXfOCnr7YXyjfGmGkH9AO\n3EUftbG6qMc+w1v7GP2oPX0Z6TRpPw3JLBlqS8F7tpvc9sHKA/GBQp7eLOc4\ng4bDBEZsS8wB6qn7mkSragRcg061sdrZ/3rnkKNNTjNTfBC3KlJuiCG29RUl\nwATX2DdECIxa2fcELCGR3SHEGmb+YgWojuxP7X5Nkm07OSf7P0xc7Ldhfj52\nh0V7gWDVegp9LvGSF/z44Ot8CXSSUsbDJjzr/0J7mmDsQEcp3vKV8OVmz+lw\njrnnC6huhybO0JDIOxpGANH/D+w9uP1wevsLbhOP5lOM/aQApxQjDUWkdqaR\na8dvpEwpl3+/E8wRzNAPTpZERObtivcbaNhqFvQDn9ko6Bf++GCLsAgohitI\nMi1R\r\n=/yHh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.c67667e8e.0","@material/theme":"7.0.0-canary.c67667e8e.0","@material/animation":"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-indicator_7.0.0-canary.c67667e8e.0_1590070356211_0.22362941255789281","host":"s3://npm-registry-packages"}},"7.0.0-canary.62b5f37db.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.62b5f37db.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"4628b8f607ec8affcaa99c116494b43ed4fd21db","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.62b5f37db.0.tgz","fileCount":38,"integrity":"sha512-tLLz2R2tS+F0B+5KLlESHkW4XVfUwaxSbAUbQZHz948hCV9HKDkahAEXCVtyv9GVVAqTa2Gc3Jpew99gseDfog==","signatures":[{"sig":"MEYCIQC/jo0rhugjPGte0NhBiyWKWiFm/J578FhXbt5yJQ1xGQIhAPmqmd0R0daxbVs8RCf7z5J8VwPqUsEEJ7M3Ll+Wwfv/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexq8gCRA9TVsSAnZWagAAb28P/1+gccwDsZ6PIo0XkQKS\n5L0B6yd4Sx1FaC+H6QbBq/Z3aQulFsvFFdCKsIG93/mtAUHlpTH0NZTISIic\naQh+m1S+s2EbO6VwKMDdJ47XAAqOaDNXSI0LcCU18uhE0GBfylJQcSl+7baH\n1TSsOZWLUWviB3RoM8KJgLgRKslqKW4TDCz6eeBQqzoTl46otcQ3EgAG0a90\n6zpDCXifpWcsRm9VBhNJfM6fFpWb7VkXmFA3sBJ9X0lMj51/XsTyl0u/uWOI\nxj7cx3QfI0C1U9Z1o5lDT+e3qpyBZybzUklbHzD3j+oetuUpA6enpx4Iiiu1\nK012Z2+rsnDwkArPYGxEmIm3ZtIygnWrn07MtFKEpWMXJ9JwjJHqtYKLXMAG\nWGMcWCuXYFRaRTy3ggudHBXQQMia3+GEPVnpZKEkhdy3YzBy9a8CG6uBkxje\nwjJ16JltDWOteHtOv1PTyZaQCHsEdE5J4THP+qBCPWFaItpsz+KSqO6ahYoK\nIO+T+6e6fFAvfPdLPLSRuPKKS/OUgvRI+aI8MeIO5h5P76Ry9+YjkAhC+R7f\np53lOZn3yuBeASlwejYmUyeM+J9DqW6F8ZcHv3Kg8vyBgCBqRQmjXWqouy/h\nOZruUpZ+lgkLCPT5FoNspAJg8QXlQlneUIViK/e0qyfPuzKpd1PofjJJ5wlN\nS5Mz\r\n=Ozlg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.62b5f37db.0","@material/theme":"7.0.0-canary.62b5f37db.0","@material/animation":"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-indicator_7.0.0-canary.62b5f37db.0_1590079263881_0.2610019099874301","host":"s3://npm-registry-packages"}},"7.0.0-canary.2e218dbf8.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.2e218dbf8.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"9d329649aad4e9aaa95ab76d648f64eb6f4cdecd","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.2e218dbf8.0.tgz","fileCount":38,"integrity":"sha512-smwBNppgz0NQ7jz4oFanGa83JTD/0kg1fKUO6Nf/CL3QhaLt/b6euLbe1NZa09cqGZa2G1BaGb+7HGe6Qm7+/Q==","signatures":[{"sig":"MEUCIFcxeNinik7Vb0f6rWfYkbMi08zft/mt37ll8/jn0fCqAiEA+xDzcDus6R1hRfJPd50V9qADBcaLq02FHa7+nu2PKMk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrQDCRA9TVsSAnZWagAAE38P/A68nvorS/Qr3zb4CsWS\nboBdnRXQ2lgsyqvjmrdZt9Lr6hsgl5J1PB1WhfVDwrP0+F+PKvLOOmrsqGD3\nJ7gu3QZuCJx+0XwpP1XGTTPd+ERM9N1BeB2lI33bobS8JYJBVvM7M6FWTKRh\nTHNYfCRWIprOwtDSnwU1gwnx14GWZl+O14oXkemQRHemyI6dWqck/VEoMJZz\n66jC0nAt3Ig6PFKhglU00MPD4SX/zr4Em8z6v9HT6lG9p9m5ZVabs1KshyIG\nOabh7Y1stDzlIrAwGJdTYSRtqjPj5//EOW4FE5yl5nPHc2r9WQKRUnsAm/Cl\nlxgZvKdBEtc99Fq8pCAxxFP7wsHc159Ioh0GJGeI6T2pK/y/7twuCBfOPkXg\nVAH7YftavUdqE80S/G9daSk5QFRFxNqbs2Dd0n8HFw/mjjRFZP1eC8ZrikeN\nXfK3mJbDOuh34JP1vvegHp8edVfGT+3nnhNKaq2B+oyhipcre8Sgk75MLO7D\nS4W+Yurj6cSedHWvQ/d/mdN66gPCLpyZ50r/aH7vDLYEeiQedZHVnSemWWOS\n2b6U5YKVLClF4PfZMHIBc9ZJ5cNCPv7+8qauvVHuEMPbwP3ZRY9Ns0QKhQgc\nUq4CHDmjl/Ggui3OXfZUj3ktT5AhdZINyi498LcrGoJdPEp1DFpD1nEX53Rt\ntC73\r\n=8iuY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.2e218dbf8.0","@material/theme":"7.0.0-canary.2e218dbf8.0","@material/animation":"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-indicator_7.0.0-canary.2e218dbf8.0_1590080514496_0.10754376453045889","host":"s3://npm-registry-packages"}},"7.0.0-canary.7fd792bb9.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.7fd792bb9.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"acaff32f106613104aba472fba2fca4ca57b073f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.7fd792bb9.0.tgz","fileCount":38,"integrity":"sha512-kCNfFUHJdDOPhCyBxQ/zCgesnXD55y5eOQD2cToODb2CucekDkamHVtTX6SXz5bgJfPghQtC+3i/MlNWh4ub6A==","signatures":[{"sig":"MEUCIQCdLILSG6/ulgpUtw5g72MVjXOKUNw3FzczKkE1BdJVrAIgDzv7PXNXXhIof6MHWZbPEiYXPL6EP+2YRgoFv/mv8mo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrbxCRA9TVsSAnZWagAAQKsP/iGK0wnGmFeDGworL1UK\noIvZSbRNYafWOI5C3gMpT0vDuckgC/WJin2Bw3XifOrfBohDTlaghsTeb62H\nuRlS1DvBa5bxJ5pBreO+QWEfVnQ6sDGEGaMVFbVv4kMBqKQqvQLWKEfMmYeF\n3CRMcAvFSHV6Q3JCSzx3KjTlwqVTgO0pgkxXx2t7qAcw0lbHmbsakV78SfRt\nRC8kZ/NcYUh7AVVBHXnDRznJereUNtQAT92tIsrrQasFw2dIfVkTQuw+jrL0\nM826jaHRlmfXYDMWhUTlpMk13xn25W43mEmDed8bam5inhajem5Pz2iMYDnO\n8z236t75gtNwAbvokmG7iRbj3hV4ivTM8oLStOyCRTT5XvDM8KLxYqO3xKgu\nT8WP29MRmN602tIg82wc06onqn164tEVtdNVPzJ4474T2WRI3lw9zcw00mcj\nhxZ7zk8kdWBUtVSDwLCS6AtvlkHIM9v8vdyanHMV56SZXQSv4NsO45L8uMoX\n1KZY9KdIx03XZy4gTU70DohsWYHzVKDs41LHQ7kDv7ct/vdFVrlkwGeRqzRk\niormss5GsvYKeM2RyfMwzqkr4zRS6MphvUuvkpFMJNQoxIfyJwmhjQ1VRQp+\nPpM9Q2EEjCfVOUgdb9r0GAFT9txwaL6sirVzvJb3kck8yb4h6hXvsh8oy9C9\nGEuJ\r\n=6w3h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.7fd792bb9.0","@material/theme":"7.0.0-canary.7fd792bb9.0","@material/animation":"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-indicator_7.0.0-canary.7fd792bb9.0_1590081264989_0.4170250681240142","host":"s3://npm-registry-packages"}},"7.0.0-canary.a66493cd8.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.a66493cd8.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"f4b05ce962298972adc8192cf126421752517188","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.a66493cd8.0.tgz","fileCount":38,"integrity":"sha512-YxeQ8h4MSioq9wnX316uIDCyEa+nMfEeZljLFmP3X08gZfxpNgQVKADg920zL78ZemfDkkB28YtmOAa8CHaC2w==","signatures":[{"sig":"MEQCIBUAH0hG6em12gXApiZdErtvWwshb/ERzeP9sJYlmYHSAiAb8MZScI9KsIeHqhKQn+l6L2KzVhYPNAVaxlv4I6MVoQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrfMCRA9TVsSAnZWagAABLUQAJ6iPRCOq9dVYYVIx8oB\nHkiPr3AMgUylD6dqc9aAtZNhaIAqzTBQSHWOw+1ALSpgPyZtrdq51qAkV6hQ\nQq6q3qICmOgqxeNqJjb4BRWdJMWYB+meL+IvO8CUdjAvNt493RaZc/9DPvyI\n2K+4brjfZLo4MBCTwLfUflT1uZYOe2cEkgLILd+TF4AnyVjp2wEo8vEfUx0w\n9TjgSk4nm0CqosHBTAPJfAd3+dUZGnAI1F2ehwxebYZJZ+AR1Tdlwg22FqtR\nBVKxtWWdR3qXAfbfLyBJ+/oHDdsVPM/Y/R65KeyUa1+PINH1Ux6Z4YyRQGde\nh6Znlw7r9hh1QnEhKy/93obBfEmgJFRu+a5TYS1H1UP4O7axa3wkX8bPIp86\njYFWCgrs1Y5+Jhn4rZiqT2YGNrYVzOvanqfwITQmmkYuDf8+93zX61e0XrF9\nfvd/I8wpcsJUa7cGBL5MJzOgcp+jus55GecfNzhZjM3z/bxMuEpcYtkNo18x\nJBdH+xsjo411KPcDqrcsLaxgYKy8P+LBbkqW2Yhxl802kqihlPK23hcouR0c\n5yGRDaWFeRKrGgyIhED9+qxYl4PSt99Cz5nypU6rjZqgFVBOgF8P9s05V5RE\nMjqYbZb4NBH/L/Uc5JAnTL+PuDq/8079wGjLS0V508HBd12fURQYe6pKpm8Z\n7j2+\r\n=JcCe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.a66493cd8.0","@material/theme":"7.0.0-canary.a66493cd8.0","@material/animation":"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-indicator_7.0.0-canary.a66493cd8.0_1590081483955_0.2342363845808073","host":"s3://npm-registry-packages"}},"7.0.0-canary.da05f66e1.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.da05f66e1.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"5c22fd7701de1e58ffab33dcd4a131b3101a6c40","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.da05f66e1.0.tgz","fileCount":38,"integrity":"sha512-GXu8I0vX/dfbmIoafSZt2+ERJSt2DAWliLBsOJUCRSZWyYcur1b5D1G7LNOFl5z5aMpIx8Ow+m3lVlBrF43wQg==","signatures":[{"sig":"MEYCIQCXHgb1O7lXT/tjUoGekA02uRK4P6oqi+vJSZKpdttm8AIhALcp49sON8EjvRzWJQP/AMBSDHMHFcLZ8zppdsvYoNDd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrgyCRA9TVsSAnZWagAAbcAP/jUHqZEahYiShqfD6hBI\nbihbsomqsMNPcP/ovFt+FMylxK2ahV++pCYUWSR9jaHXaW6TJWEp7ZHAgpGk\nQEjOXAll4vxzbDNaMPvtUWvouKumW5SaR0E9TzFOAeIP31RX8CW1SHkMTX/5\nhnT7ptrAAw56Io2wnWeIJJ+4K99m17fGPDwqd+2fT5oPBwzBJjxRY447Hb6V\n+JHsoP3BjLY3B6jKZtmo43ctflRjBqEbVXCIZD4Aj+hZ4Hoexb7+DFav7dnR\nxbDSWuOBTNC7iQ8IIlNp4/6rUP5/GKa3YLiA8IbuZ0WNcDakRlli7wOuoKkA\nBL4IdCjO5pRmzx4+5WWdFg4y8CexoNYnrmT2/UDVV6e3SrN532dHuSZwEI2G\nslqxUMy9h5PgUtr8PPqgzsKZs6H+LhrUVtu7CBUibXoN3kgd0nv0kW+KK2Ek\nNRty+ejrUdfToFTbqtRExSScl5w/zWDbbflsWT5nmscxfR0HLgafIEXU5cGu\ncJRSXIogq4Z3d8PkCjK4+VlCfexe3cWf8Hto246aKtX1mA7ey26vOJC8niFg\nmuOfPGV7DMdmoQ6mgNoND0DNv8z4EVoLHn5P+v2uiBjKhvAyBmnbMAjuLpkZ\ny7iT6PIoJ9So/hnC9tFcAo05DwWod/PsBwcb/TRTl9ox3eBoz7dJRHT1qOxV\naiSq\r\n=seAH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.da05f66e1.0","@material/theme":"7.0.0-canary.da05f66e1.0","@material/animation":"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-indicator_7.0.0-canary.da05f66e1.0_1590081586471_0.9079954616049899","host":"s3://npm-registry-packages"}},"7.0.0-canary.740860e78.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.740860e78.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e8bcbdb36beb6f122f8458b26330415876b08e63","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.740860e78.0.tgz","fileCount":38,"integrity":"sha512-qkRzMRP3wNLEXT9ipRqsfOiecFRIqAT0F6n5e1A7xTdah9rw1dUvqZnPnS0hPXyUzW5AL7k0MRpji3dqSNY2NA==","signatures":[{"sig":"MEYCIQD52q4uZoA1co2dYYPpXfhmNpni0/Cp+aDKlhxrByx1rwIhAJJEwlUnT6Mswz1fkHzmgqYGhvpqcK2N086rxqKEnPQv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrnJCRA9TVsSAnZWagAAvxYP/0zuH+luUzMdv5Bw5FIj\nKFtMslGopXz3ApnkXLIS7KUGTPIK4zPY6eaGCJMVZCwBWTa+EgqIb0piJGjF\ntZnq41NKFObR2zjKNCeNcjJgknLLMTFh1tZSYGgVdsAbKgeKnM40vNFunBQg\n8ZtVT83YSc8N/QtY7WnaDLov2kLa2t7HKXTw3tU4cjeLBm+oy2ei3EWB5YRL\nglphrDlamEMM5TwrHtbSBLaZ/kJH/w333EN8cfX6Or5I4b8GqYV9/sFYFri4\nBIVQ5r18nSJ7rGRvRbH2is5Q17Vgis9U2p2dcfwXfS2oBYv44dCfijrCy+aT\nv0hgmPB5tkN8rfcGE4Y5xBenSLxMaszPq7ygTFbXr7oEW2B31y90LY6QIedf\nh7b0kP/x1BDdpGXS9JZN0DIA40AIozergSCFlR46GQONUjkgZhsiN26pdaTl\nB8maMfFNY9sGuLoIa5kCDL5BiQAD54ffepReBoH4kJhvKLVM4Q0C50/ewycg\nd9pGaFk9ftvRFC/qs0U60Ymki7563228FTQapAt7yA8UgcqWfNcUaaljx5ne\n8g9C0DC8V1Cvle/fkMMmmso149b6HoPdqBoKdCeeLkGaM6JauxNT+Z49HLHu\nN6Vkq86pGp24vMGHm9S+pAeM7fUIJDktZGwCCCdQBqIYMgSU0WpNDUX+4SMH\nTsr1\r\n=PW3j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.740860e78.0","@material/theme":"7.0.0-canary.740860e78.0","@material/animation":"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-indicator_7.0.0-canary.740860e78.0_1590081992986_0.9503520798404277","host":"s3://npm-registry-packages"}},"7.0.0-canary.5cea2610f.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.5cea2610f.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"b114b591365e3bf754d5d55be5e7fd4cbdb8db2b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.5cea2610f.0.tgz","fileCount":38,"integrity":"sha512-Ynf4ijjyuIlyc8Hty/xsvMsb7m95hsmbDC0PEF1ixt8lD2pLpuPweOye6hMfL0HdsqMFPIknbg/2z6IvWH6d/Q==","signatures":[{"sig":"MEQCIBQYtbmIx/51w16xRT6il+cDKVJ0llP1WyE2LVhw8ZxqAiBVrTVV1//nPL59K3dMUeDnF54qA4NVSSvSbl+H/SDCfA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrpCCRA9TVsSAnZWagAAet4P/0wHQdjEzmGI0ivFLXLG\nAYYZUcbF9RWNXpK7mga+zhSzzXK6/eeaHL23pW1Hm0mejMr08fYCJ+zDD/p4\n9/eiKvtP5jsqUMrh9/piShn3w//IWz5w6vT+wNBIrVFxwS6HY8aW2h+kQRmN\nV2LJX/O3Lm3sxwkawlRsHVTFS1itDgOr19xGSb+zmBlGzyypiFcUq4RLpMfK\nOtD6EGDfkd7t+j5cMwoOgsCMf8oflST03+EfJDyAw8P/CrggdUZao0/xxnRc\n0+8OzxR9098eIPLKbS4cy2RGCHLCpmnJ41DXjQZJ6lXgznZk4s0IhXIPKTJf\njxwjJEjJ9vR9bcAFrwbO9vZWjm0vfgVuGXmMYvz4OoFOnbIHC27av6jlWdjl\n4FTrP8n7kA7FL9kcuPz7W6QdI+VGxbO79L18PO3oJjeXwiBuGPlmWUcVcwCt\nwEdSq+BqpSdeMesf9IGx27y/vHDEsC6JB2YYYodyIzu8HFLUxjJJmmcfLKrc\nhyNVdZUIyyzTLzxN9oXXJxk8iw5We7UXKEeMDgiKHzDyME/X+PHiQTiNFKhI\nWPAGNotfcZFZnw/HHlY2otvBx/EXgPzg3LUDn0RGKV9YMd+t0lHG4T+jI2cA\njDDD/HOejJC5ubqj8jCeowc2chNJW/uzSauBTKk4ESJpQr+pmgZXnzblTSYK\nPcG2\r\n=Cx5q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.5cea2610f.0","@material/theme":"7.0.0-canary.5cea2610f.0","@material/animation":"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-indicator_7.0.0-canary.5cea2610f.0_1590082113820_0.8881071545483274","host":"s3://npm-registry-packages"}},"7.0.0-canary.cf7747ef7.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.cf7747ef7.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"552871727422a400e989dc4df64b58dafac03ae9","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.cf7747ef7.0.tgz","fileCount":38,"integrity":"sha512-ObGE3iULMzShqW6kxN8EwTbYjXahZBh7QPk6VEKJQFZKUKlW+//+/Yt5Tr4cyh0PgLCHCYRieBPOOumrRCXtUg==","signatures":[{"sig":"MEQCIBUY+eYZl7gzIUKGKcfUUKeY9PkgQy7WhoU2NzTPpgh/AiBCSNRysEydyjL0u5rUFG0Xvx+ONmI55p9nQ2rMWaf0vw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrpXCRA9TVsSAnZWagAAHCsP/2GH6BB6w2e34puew54e\nZgo77xlZ8vSRsez8OHDD2+mThrCEg1Q4693MkgoN1VgnQEHU0t/tpGaQKUXC\nCk3HdHheFF3Lm3Kb3GeiHu8+Zv7zhMgaG9r4gfoOgxwCx3HYvs2XlicDTwyW\net0CJf2o+MyPQslUat5nABts/lQNEW3l87FEQpdj6/dkJ2I6sf7KLjro0Rar\ncMw+6DzDCY7DPY6Tv2etSMczQXvE4+yp5Rwx94XUfNNRZrpE+4QL7HlpZXAD\nSR7DSFoSKSjd5Sj3WCthUYX1YHgTxzX+y5Qkd+KplKlUA9XOo6AgB0v69sBn\nrd1nJBqr33idBk3xWX8NgXDF/gljSB3Es3vKASrF52MsIt4Dw68wvqxuO0yT\nJ7Op/l3aTuQCrQHLliAkUQglWb424jTn/SUfZPMaVTVvffiCUK+tEra3O97N\nh1IbVaX74E8sPAxIazdZZ+sJc+7ijTDfiZRYDq3gyN5QeZr7GIC2wB/n0jrT\ns71A+lxrUHWDRgfix0C5e8nyhnxO+5XyJer0bebHHlTqZuyyj7Jk+URXDCWw\nSJlCXdwVxkHhmgYkgm+LpAy7prZjw8isseNegt07YhSalwkXZEMTC8SHpEGX\nmRE5Fu7p6Kf+sBn/vTGvXzBBRG/zdN8vd2Y33xH81rx/A2TdhFDqeL/HfAtB\nDQQl\r\n=jazL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.cf7747ef7.0","@material/theme":"7.0.0-canary.cf7747ef7.0","@material/animation":"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-indicator_7.0.0-canary.cf7747ef7.0_1590082134864_0.9439083725723825","host":"s3://npm-registry-packages"}},"7.0.0-canary.862d0d7bc.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.862d0d7bc.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"f8492aa5866978fe377ba850f5679f5e337dbe7a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.862d0d7bc.0.tgz","fileCount":38,"integrity":"sha512-AYmesoq+5A7J2m8LpXm66YpsZJlOZB6uL2AeTzY5JnWBAX2q9sfKmhQY+9Dp09wva8KL+btoqiA2DNwER8FX8A==","signatures":[{"sig":"MEYCIQDFecV3DJWKpUleHy968wYnxIguMa4iY8WLVGvMUYo0bQIhALVPJukiot4Js7O0ld63TemujhltfXCxzVfCuF89oRg7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrr5CRA9TVsSAnZWagAAghUP/Rzpgdgl8G827zZ/4EiT\n+vLK/judidmNjotFZMuPeA1iCAIqPwzk0McLLf8XjqE8F7TrsQMtqVibuvQA\nFSE+RNMN5j5n9WNYLprnSLIjotd2OOh3CfF2aP5A6+4es+i4RLbrapmDK6GB\n9RkQhSOY69SaEJsye4Ltk7ZrdwUvTH3uxMpnvBCmlhyWmGIQdUDonPWZlLGP\nkknn5RJSi1xnK6L7CXd0xgQ/zQ2DFi2x2RgpMsv/RxAsBrfAzsYr54wCDn5v\ncc2Vh5ki9moolvi3JWSGubvP+UlPVnAm814b1SC2JcYU6egLj26vbGm1Xzeo\ncXjjQWKbOa8FFMTLDDelDZprYz6CmAzZ6HnCSa+sP9oHNPEpWqAh8Ytx1ATM\nditpxS5UTT9c1WZzMWQzP3h+CcEmOE6vPXXqyqNjKU+pDYoLpqXsHJ7ezvok\nRJTTzGK+2LzeKUx5M8Uk335aXB/65GD1lIJIEcPLA9RG5TRU3XV9LcHBJYpN\nIe8zdY3QFFRTQPMJYbYN1hivWSaurg9QQVLN2OIiW17FrLcNRiy8Ff5RIOPY\nUCefcQqzDcauy2h28y8fgZ4ye6dLw4wlg+muakJZHfsqxcytJoAZVrrTTeMy\nw7g6CEIVNjx+xExPkCyT0sEaU1oiBJP3A+jl4q0DxISBMQKOEVvvaBEBfidI\nWJp5\r\n=9fDj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.862d0d7bc.0","@material/theme":"7.0.0-canary.862d0d7bc.0","@material/animation":"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-indicator_7.0.0-canary.862d0d7bc.0_1590082296458_0.7918333307803334","host":"s3://npm-registry-packages"}},"7.0.0-canary.0008c8a91.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.0008c8a91.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"1ab82f50c655182617df8556f71e568585cd92d9","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.0008c8a91.0.tgz","fileCount":38,"integrity":"sha512-sQZKpj2gRZttJIqIGNJmYU6ZZhtCEFePpmzo7VfBy9wDOvMWROFsd1KoqRPcX1+7BDqyRzzJc772cBU6jTVr8Q==","signatures":[{"sig":"MEUCIQDOQwBntQZ4yPRUH14kQTzHUmuhTrTHxOlhf7qSSjUGZgIgYROFadzSPkDkq3SLR2zXLBPzyF5F/Bpo7bVJm/CEdMk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJextdqCRA9TVsSAnZWagAAQU0P/22Dn5z3zR5edWK8Ikht\noNq+a7kfon3vYPwqR/KAG1du9alJGllgmC5UfYm3WfWW++2cWfYJ60usMCk8\n21zlqgkTBADjEDENFEmupmkbJ6k3T16+K2c0TUpQYjBPaloNGh8cQF7H7vcJ\nldcWjAcgv/g2WbHeoExAOJrh13v6erW29jWMTKVIy5YLiaALuXX+A7bnaiGp\nSFCFlbZrd4615v4MJJtUij9w/e2pxXeTSkWc1VMmyvg1zah1vOiGIWbd7lUm\nSOT0jGkFDQj4D4pN7MxX9dHdyAnTm2sItjkYvm77zhcktnHGpeQ8R7kyjdrl\npwUr1/1ltEqZPVuwB7nUIp+awg5OwukXmRf3xQ4pse61Ela6VY2THM9jcIYs\n1PyeVcc40j5xsgNyYSGwbcx8802WNRFTApEIVTaPLkoYDi3qXvQzb5yx3bpa\njWwX4/eIDv6nI96GBVQRwq1A11C0P9JZHOCxS7liIMy+OPwYEuMEjCUwbMXx\nVrbeA6XyWXGHurkOfRtAFfYZII57uIT32id12qN8Wd4AsBNCij6lbzatNKHZ\nq0HY+q/8fX3LTK921rbvGTIgm4TeZXF/UMOZMme2VwAvccL6i4KLDxXdWCi4\nmxlDtbW/kxNWU5ZqLUZzjY0fitKQLrZcRkQO9qrFNBA+IvAJop6LhlIcOwV5\ngedG\r\n=GhPD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.0008c8a91.0","@material/theme":"7.0.0-canary.0008c8a91.0","@material/animation":"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-indicator_7.0.0-canary.0008c8a91.0_1590089577846_0.2555299733345675","host":"s3://npm-registry-packages"}},"7.0.0-canary.541638fa2.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.541638fa2.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"bf1f1d8eaca0e2f3938050dba0aafa462c7a186c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.541638fa2.0.tgz","fileCount":38,"integrity":"sha512-1Ssx9XkWiOo72cP/eckb36eyX4NqCfkPApMo0o5j2cwciwWlQC33RB00la/4RnIOe1zRi6Vh/IbdK6Ig3GzunQ==","signatures":[{"sig":"MEYCIQDCMuJxPy1DFQ/cBY55XU7UXSNoWzOxjIeHVHnI2oWf4wIhAOXtdYTegQ9OLa8KEKptql2CjeG/EdDN4e24eQqjaVQe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJextrrCRA9TVsSAnZWagAAluUQAIaAY8X5wJ2rUfbe45zv\nh34sEEfPrK2OXs1RpVbpuUB32tLcGbliMu7jZ0IoWxesU9bYhA/kl1Qxq9Fl\nlNcpCjNpkzqn02WlQpzCLBTvDudMA2tBFkiu3BNzeR5iwsvVqFQng5CBuVnf\nIErku93Gy1BVILq6YJHDZImdGDUWfbXqCv9Xh/JabTRUwETMsQl+6h6BUSAr\n3h/zMSIgMUXdk2h6B4hwDBdrrfcQNXQcpiuk8fzX1X4KGfdPvfc5XI3dAg/H\nqLNll39x3hffO0DxQBJcPA+5j/tD6PoaP72wE6Q/e6CgGG6gl8OpbGnAnkWe\nA+Rz1/UIZtEulMslGZe3rrkn7viA1R8ATDyzUwkbHhWucuhU+TGFCZjmhtJX\nP8AZ2SnX8kb0/HvbEB36tBp2Mw0xx36pQc28i3CgImOQK/LXFfezyrdPZfdI\nMVO96F6ULEGK6mZNlCsQEyZy5v+HZIyG2gzP4dQZ3i/kerHwzs7PVIfRiDu6\nG2UrZTQHntlHr2uu68dwfFykvN+vF3klpQ/fgJPZscelWoldYxkzH10I1CFc\nXJsmlqFkjbzcnEDUlIA6RHis1huyDT6mGcMz9jtuxsbRVeEP+ee7pxy98UgK\nDWAKFsF4b0D/yqfdX5ajVJuF0MJmZ22LLdJ3E/AYWCj7F02lDvVOp1zXaJgO\nHiKd\r\n=rm6M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.541638fa2.0","@material/theme":"7.0.0-canary.541638fa2.0","@material/animation":"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-indicator_7.0.0-canary.541638fa2.0_1590090474797_0.20746394906122223","host":"s3://npm-registry-packages"}},"7.0.0-canary.6167cd075.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.6167cd075.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"dc5fd92805ee5589e2832f3b15b5b52cabb5414c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.6167cd075.0.tgz","fileCount":38,"integrity":"sha512-gksRAP2chiT4LGfti+gqA9djYU3k9HSEs3KFeL/dQZcU4K/jRVkKFcKxEi+SDlSTgz4X6vA/PsZM60oEElr0+A==","signatures":[{"sig":"MEYCIQCxpf3oDcdhA4DH4I32HeQ5d7QPcKHWsCs80tPdqDtEhAIhANeUqAxBXhKL1dVph3xKGOPbM704KK4/1zoyaqpSJMr4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuKkCRA9TVsSAnZWagAAkk0P/32g8x1wkVxYBFQ6l0q8\nI+PXSxNzUVsAOBd/YkcBEuxjCdL02zqeV9d1gIN4+kjOwKjIMAPLxGFs/jWN\nnmeMSWySyn84AWAy87nARLhj3hh9mtUwEswPwQHRRp2XTz547HyaGjG0LByL\nMyGklDwpc9bymGx9Sw2+0EWpNjNL1ZpQxEHHnJxVXvn/R2uuXYFdTNWO8gnL\nA9CGdN+SU62wsOajafhfqkP573cGjN4T8SH/dw8ICjx6i/8YJg6djQ3V3Jlu\nrel1XL5NHCL2O/tvAaAjU8w+VqMgvjMyHhFgqwGlfCMhsI3rZBT4F0XUsIuN\ntdIMrm1HapvYwJRshb9BY006Pc9Unm9rM7KzEL0UrmE8iI1CpxhEA93CNnOO\n7uSIow8416JidXc1qS3WhumhMCKeHmdYStheQ9gsYNriJWxCL/xIxjKaLg2H\n5k9PqkXri1uKtZHYLOrnQMKAAs+HcoPC0r02v+Bfaqdvc21XS4o8WLWW1Uy2\nud2qwK9++GvKCVwkBpB7L9Ra7hI6HxaxjNyBl3CY4LQHeE6kLvMZDok1Lrp7\nxbQEjTa7e6WMw2AT1/EAqKPdIY8Rb9VZ1VqfJ9+OE6bILSulwmFJxV0XOi0i\nwTZFTSN5kzC5abOjAWO7/cENk+WktX/pxTKpB42vcPcoBikABOVAWATTqXoE\nzLmi\r\n=3Omx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.6167cd075.0","@material/theme":"7.0.0-canary.6167cd075.0","@material/animation":"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-indicator_7.0.0-canary.6167cd075.0_1590092452259_0.7641320836771739","host":"s3://npm-registry-packages"}},"7.0.0-canary.863ac1b0f.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.863ac1b0f.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"dca0251e3e0e8b719df7125460f6105020c8aa5b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.863ac1b0f.0.tgz","fileCount":38,"integrity":"sha512-RGCp1+Mt/wnZSHr6/CSgYG1DipV2UjN+tCqcV0qWFMQ5EE/i+KG3yJaKz30ITLWFie5aKSW8cAHiJyjUiP4kuw==","signatures":[{"sig":"MEQCIBv/F2zsUtV4betz0sP7xUWHCkUwplCZAVHLpTaMaVsYAiBAoKn2DlEaE+8AYwkQ1nOtPRqg0gek8xgLyvB32Q95Ig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuu7CRA9TVsSAnZWagAAMxIP/2mca0TMCtdKz9B3Kc8s\nuej9RciwRWmp+U2+tVhfhsRNhBu/SsqXUUuV6vqY/it/1zPDH238pPNyrx0O\nQ+G5aAPCysxQG05P7w5i+X8Z1OPtaf4leN8Gx7oxT242oakN+Y1rkYunVuBh\njZCDQ78G0yeKZmp3MrsBmQVjXaRRTXv5tOEYeunS29qsxu3T+2AG1J1sZ/6Y\nJDBpJIsCwer62Bc+oQFTiH1SvBZGtSD5SgPQpNdomt8M4etN7wXcotE3HYpn\norGCuKkJGfeb8Nt7xlBOoRajKgjrngkIlzl3sjh3y1Jpz5M/gphZy49ghC5J\ne1nM4Pgc5WuBCFoarFo7XmNcuYdNL4uxaLV6qODtlk5dO6uVFq/sXQpYCbMG\nKI/LvNZ4Z5hZCIfqtE/bd4doby6zrA7fr/8CUkkXpSJJ1d1YVxHizQv7Mg0z\nhyKl3e3uTT1WasCyyhE+gjRPPUSmVvBv6+xr+kSXo0oRgYvyjXps6iw2uy9y\n5xk2OMVeYwUmxQsdOB1YreAKQo70DIizYR2hgan5LxpaNGkuawoTy2OYMOhg\nX3UkReAAClkJfZfnbCRoUZuB0LKD82SL0hIi/HbnvDa5vuQ0jdCpfaZwvxe6\nak2/QwHcQXQpfiUUlsCn8BU0dZ8uM4/jkMTlFlufqSyyrl4OL85bqC/iLHlP\ncFk0\r\n=8Ul4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.863ac1b0f.0","@material/theme":"7.0.0-canary.863ac1b0f.0","@material/animation":"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-indicator_7.0.0-canary.863ac1b0f.0_1590094778868_0.852287821612228","host":"s3://npm-registry-packages"}},"7.0.0-canary.d30a214ac.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.d30a214ac.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"aee343789dbf9966a4c1d7996bf5833460dabd6e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.d30a214ac.0.tgz","fileCount":38,"integrity":"sha512-yC3VOG0bHPYAeiFuz1SZ309jxH1wUl5bbUKlQeSn/gBJ4FFSQ9/FR3sYo+81gB9M2NRjI17q9M+Or/mzMeRAPg==","signatures":[{"sig":"MEQCIEZ9SnVp9aS05c6lu1ev87Te8Knk55wBMDlGz4jHgsT2AiALznfI7bW+S2AL+tGbRQpQAxndpWULW27LGuDEflZ+2w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuyzCRA9TVsSAnZWagAAFGcQAJIg6rZlhkKzgwClB9aj\nrz3X3XETgRmKdMupFNjd0WOH1X4QaKNFZAhjIfb148rlbjcQ6CK5FWQGw9wn\n2arvlpRCsD/qJsf/B3w/QHeV22wuGkiLETe41/DWCvP2Rm95sto9/2p+0aMh\nxi/muNQ3Gr88N8FHljBs6ABfMXQ1KFkW8nApXw6mQtC57xwxEtDDdRItvuPH\ndyDbAXEq4QxJ6p/EDiAax5Ac0LhGVX72AS1w2i0eeWX/pJC2ZkNpiGJDt4W9\nxWrI/tkITFGQX1nkY7/CjVqABTGQvxrGTr+tFqipQm6UD5btY/IrPNnKpC2I\n5/ad34d9j1Xwb6CySZ9KajPUl+/9LEeL1h9vnHU/GluUROQ2Z/SBGKFhp2+N\nZGQAJgT/IRbCB0rHGMs/gjpCSUQX/WtUIdy1WQqMnG/kSGo1Mg7QUZHF/LJ6\nbA3qbHzjxQkkup1UpBEk3YFrUdDVz9kZvR/96Sm/NCvQC/swBHAN7z6WVzYw\n4bn6t4v20VY8o2lXu7/s4IwKfW2AcRhUIruiHINiPKmh7SY6lfwP0FNLNuPK\nzSGiTB8z/6Iy0nunGW2yvO6ZK5Nfyl66qXJ7gdPsDAyj8v4aoSHK7Mbo2Ma3\nnLLcVpW/VUQQkC7aUxXGaHsQTg9K6LLBpto+uzRegcgjnpDM+5po4wDSiypj\n+68p\r\n=Va2A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.d30a214ac.0","@material/theme":"7.0.0-canary.d30a214ac.0","@material/animation":"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-indicator_7.0.0-canary.d30a214ac.0_1590095027548_0.9009911762968514","host":"s3://npm-registry-packages"}},"7.0.0-canary.62abbc8d7.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.62abbc8d7.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0a2ab300393f809d66c5b6fe696618b149292ae9","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.62abbc8d7.0.tgz","fileCount":38,"integrity":"sha512-ORtE7blHdzXPw7kEuE2k7v7dex20zbVixgogI00LLHnvEhfqzmtb/D6Hpa0U/GI0WXRF4e/Or6LioD/Lv31e3A==","signatures":[{"sig":"MEUCIQCUfGPs3sdPmvnLEn9tUoxvRiDv8U0YgEuelgcQZ/lxKAIge3Mhv0wIGKYa7HkCl8CVNIuahxru9b09lNgkUgu7iZg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvJ9CRA9TVsSAnZWagAADkkQAJqmjZjsoQy2MWmjM0IT\nn3j/DgBSPb1fbvJY/dNIzBe9UYuymaQTGI/dxPYE3rKbkyreUx5KAHD7mqgG\nIEwwGXPpM5uCp0Ney5vGJROj1Ty+gs7IzYgqLFcxod3rCvsFBxhTCl1zk24w\npwy/rCfoyoNQpA6qdNpaIxMW71NLjp9yk0+idySzE5/VFToe1FGIK22rxIYJ\nUKC7kQEnMwtfLaOAR2gs/UF6BlC9Hwc6wF4tEeQGBiucj88ZrqOeovlRCeqL\ntqHoiOJYaBQafnGCw+PtYWnI48c0BGlqXy6Fj0DQc2jM/hBTk/Xyh2nxp3XI\nXWEmPjd0R4S+flmS0B46ZYU63wCQzDUg2rXOidgImTF00pMvSnVdw1GWQJMu\nsAw34SlDcB+1A8n+p8wSTnhjGG51Axu1M7iG7fXzk04B54eNPQEkxES4EVch\nt6pv71sdWuXsrOhtS/3TCcha7+Meznnd6Qr9EkkhJuu4OaYyAlkU8luGczrb\n+6IQbW9BvpShUniwSz4opS8RPHXn2tGanTMwCUX1Xex6zq9c4STuv/d52x7U\nDipKO9R4Va2YTVs3HuZWMItyBIbJeGmZJMo57USg6E5g5B0SmY5ARdMtm6ER\niaWBwwZQJ9h8f0/m7LFK+BxS7ibfGnWzwJrXuVJulflMEbOxt3+lcAjJUxDH\nAFIv\r\n=MDjA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.62abbc8d7.0","@material/theme":"7.0.0-canary.62abbc8d7.0","@material/animation":"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-indicator_7.0.0-canary.62abbc8d7.0_1590096508943_0.01587158922591425","host":"s3://npm-registry-packages"}},"7.0.0-canary.49bf31d5c.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.49bf31d5c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ac2bc8facabb639ad3e3bc5b824a8e6f1b03b538","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.49bf31d5c.0.tgz","fileCount":38,"integrity":"sha512-VjR/TwhVkZBLMFk9uAsO0fsfkc8LtUc6wEVR7WoAI0lTwAsgmbPyQcYXq5xEYJ8xHb4rAVcb0ji7NZhA1FF3Hw==","signatures":[{"sig":"MEYCIQDUqm6UDQBjXenLYqu8pb8C2u3pnfBJXJ8Hv74vt4uwIAIhAJIz9eK3glDqhIc74kN/XuxNmMyFATrz1xw36O2cgLkk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvNHCRA9TVsSAnZWagAApeoQAJcuhEf7jUUs7qIAWEwT\njtoLHLV57gCQFzQlatAB5KZjVrSHcUqQZmKrvlXOkW05t4vpssUS+ktPlZco\nX4EQHbMlCFKm8s7HED1bHGHQbVPbAmEVYtpWsjTj50GuwEdup7DNzoYEx9Ki\nd/BTaPoHLsbcgERi6OH8tceLe7Tmkjw1OSRzA+40/PC/ECTy535Q0ppr2NhE\nW0nHEJbP/Q9hPOpfWTu7X2Mpj+f/ayVOok8u5Q7vJf7vWo9R0Y4yMjq6567l\nGXtS0M25ErcHsXZ80K8piS6iWra/DsfOrESvjQOEx7okXd7VKauNRa1E0Xeb\n3W+awvfm9uUFqCP/aaLyFJxr0lt5XayVccz05wvKQ7rET1BCtTw+AP5UvaGJ\nmcLcNZn3u8Dv672XbGBgK2Z6Xmfd7aKYFOV0NrRrSywyet4l8Mk6php/hjGR\n5r3SUtFF9pGgoP1cpD3hfWhqe+xWUTMq8EbCvDOQl8LkviOkU+FprWyNxY5g\n86lEvu7KH4GMtAWrTJJiHZXUyxop6CxVaDBrlwdSO2OYg97Rmwk/yU1QSVQ9\nlTncF52EGZ1ThsKiIoEevDad6EOiz4EoukCIE0l37x5PmcL5yoY1rlO8EGjl\nQn43FpusqhhACH+FEXq060MbN+Mvbv8mw5UVDE6simh0qgXTmeUCSenJD6CS\nXvhF\r\n=3fql\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.49bf31d5c.0","@material/theme":"7.0.0-canary.49bf31d5c.0","@material/animation":"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-indicator_7.0.0-canary.49bf31d5c.0_1590096710793_0.13263168522389157","host":"s3://npm-registry-packages"}},"7.0.0-canary.8e17857d0.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.8e17857d0.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"108a0fecba137c90ef84783f081563e231dd1232","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.8e17857d0.0.tgz","fileCount":38,"integrity":"sha512-WTQzLmGZWXdXFBXvk81k26xv/kYvekOtKsZE8XjN9apQbBVEv0X5cra1KVDbZJkYHJZxb6LMMQFzL0wVa8ZrUQ==","signatures":[{"sig":"MEUCIB5XylWiZS0Fk+hNKjrFlT71RWBpNv/z2NZWUc3cOzXCAiEAkAuuIvDU8rLzKBqC6CuAfCMvuBSQVLUX0wQfJKRZaMI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvOACRA9TVsSAnZWagAAXLoP/0bhbU2l5Lv+GC0q6Gi7\nnHglXHnd1Cqyk5WQBeda0tvtLl72oooHnru6Pd5EOyeT/c4nh+JJoSZJayKB\ngNEvgN5ypRP/Fyw901/NVEWBIDMEv2aCV2r2+4A69+DGr41cQGqrtQhS9hzh\neO2UNJDNzPf2rv6c9U7eHrLb/4RAmpd+/CPhHBjbLosLHD6TM3xfQy0gJZX2\nLr51QBQZhWSw0CWYeBQclLVeM83ISG1OmYl5ajv3xsd76rRWbwJKwKpZKUOj\nKFJrRH997QzLgWwMV3HdU5YybomP/TfsKjeZr1jvBVCQ8Xnsd0k4K3LFPBDC\ndkb7RSwhRoXNFhH1HR/HtOChMoe5sTjMsnWH5mvRCpIbiouilOfRL7H6qsBY\nVIIy3UQdEX5mRU6tWXDXYd1bYKVzLvBozZavI4tIC2Bk7pIl24eo2Xiwn7Ca\nLOOo25LFrtCdNgzW8TsFnCYoXU8fU+OCrRRWISP4i5YKR15EU8qRLR8gtimQ\nckMn2ak5dDVwOVAEu3xINxUod7DKQ7H3iZJwRpKYORpWB1yH775FGzKzGjhQ\nW+sH/HvE1chvBc4z8WJiFlnm7rpczS0a43u0qlI/erby1ZcqqZYLEcbL4hRW\nXk3A3QNSYB+xopG/2X6itxM6BUNUlmWZzm6u4um6k3ukE+avrMc8WG+1gv0e\nnYEI\r\n=cWXG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.8e17857d0.0","@material/theme":"7.0.0-canary.8e17857d0.0","@material/animation":"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-indicator_7.0.0-canary.8e17857d0.0_1590096768211_0.9829023491705111","host":"s3://npm-registry-packages"}},"7.0.0-canary.c113fc942.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.c113fc942.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e1a8c1f265c0e55b8ce63537c6930ed3abb3d801","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.c113fc942.0.tgz","fileCount":38,"integrity":"sha512-k4XUS4Z0CzOKGi8LO2g5qBDnhc2DdhfMPYzM63yMoi7dPckMRtZbdHCHOfhhFDAA3NwPp3pS7nGZpE5ELUzdcw==","signatures":[{"sig":"MEUCIQCc/w5OVqcUscDXfQAb2RW5Cbgk5RPMfbZrJvQ7yJFXLwIgTFwrHYBn4zk200VCjwp+jK2eSujVdz5CI0i6Df4xB3c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexwS2CRA9TVsSAnZWagAApX4P+wQIMew8U8FiHbV/wXGG\nX91TADEongtHrkrxVU5y6hORyEIBCRzG1JZb5XDAS0qy8SO1uHkFuGFZoQJq\nVQy4sltYybiJLzcUzgqImXQv6tATK4G+L5DTu4uhC6XEpzT6oalgwq9LTnrA\nSaZfMJIMvsQpYzpwFyYUgIhsPrzqy3OMPpg4l7wB/tfv3qGe5/dnTZnHGUDp\nnAVoAkUjECVHlAk3jhsSibtIMDZFm+611SXGcI1mXCfuGJv0ooCe7+XVKhTX\nV/aS8RpV0CeXwlq/aow8z3+/5CVq/UnMiJMRzGlmHQD3YOOrEHvBUuK7AvWt\ntY1LOvjPik8asfOHo9fBvCJRElhAwaAcecKY+JZWcQ7Fcvv3/gacMnd/esrV\n0m9Mngt8GxDIgvdEe2LONUP9vOWeqLSeJTFNe9IpbU2HAfmedyaXw6lRzDgR\nu0YZpSc6UWp0dwkyI3wuHaN3jPd+ImDJ+nCQUP1gQJnNsoaHBRf6Q790xcku\nqI6E/TaeptwIhkbyUMV8T6CCza18rnhB4YaRTwDIG/znEghz/ousdTcpXQgO\nkEoMegiczntPlJ62mVctRqdZ0XqFdFS2g4/92TtrZw1FwB4yLm3Q4ZKiVB0s\noKM/Ihp0SWNvndJcxRwVxaYC+wuC68iuLyBF7qzbpLA0LVCT4HDvY/2xcJ5J\nVfrk\r\n=labw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.c113fc942.0","@material/theme":"7.0.0-canary.c113fc942.0","@material/animation":"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-indicator_7.0.0-canary.c113fc942.0_1590101173901_0.3055529178874854","host":"s3://npm-registry-packages"}},"7.0.0-canary.912d9021d.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.912d9021d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0ad8039bdab8b4868b12d0b228374c395415b68c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.912d9021d.0.tgz","fileCount":38,"integrity":"sha512-chCrkk3gLMpSFpUiH/Xxg0HGmlnyYkapzE+RE69SO8CcFX7M7X7cWs7guSkKjd04GfSZYsJJLo9LDtFwnaGuKw==","signatures":[{"sig":"MEYCIQDUpnFbcQRei0+H1S8s150hSLTbMmzeTo4WKlS451SiDAIhAIx+nyQRy3IQxHg57gBBaZwHkIb70OH9vSlPlGI0x1cj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWO3CRA9TVsSAnZWagAAU7gP/1JhUicNVNQGdfEgxKRR\nZrPztfvjvoBKL3qo/kV2a5v8tEbdaFPVOanVPLXrklHlAfjt4Od5L+23iSm5\nxOxIREc0D8GZ1vSvdV4IiqYsleUZH4bIBvPHNQwrVTQ/iZrxGCjdcXlZREJn\neLbrbsyC5onhQ/W1FloaE1ISuCk/oGxaiH2ESKpG51gbjstaFE6u6lw6Rf5L\nivkbkZ7Li7hUDCFbTZxfRtwl4iXfCtKDXJICbrOKQTQB67sr1qNYoDBrd2Is\neU7QzZglpJYfBzlL17KnLnD528hHpbK+Btqs2Ric0Hp27aDLgsnP/eHEq/EI\nPrCHCYRv41EElvxvR34b4HN7hRA55u4EpoKzhxT0wj+b3A+EbgN2YeKWw7Y8\nlxOgQEkFe3o6pfte6FSbbsv+aN5NwzgSB5+qpyJAfF5g5jEPw97JpcU5f8cJ\nZ2r2cSqTUD5EGS8CatN2elzmMxVY1dLSeQQZ73LwV7qgn3AzaxnnjD4CSC5C\n5VDgKkOwDmysu/j+fHy7rOhXY/4chyp4NAeZKQXGND+XKGVDRspApurL+d7p\nxRiglE07KENoT19CxYzxcNb7zS0WkWwNeF+u3pXinJfoniLXMkcKXh7cMxYH\nlhA82LHrvB4tbTsKGyXEIwNhaCF1BS1ptiHsIYNuyXyLxy3/fElmA8mQA/4J\nSQ7A\r\n=gmBc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.912d9021d.0","@material/theme":"7.0.0-canary.912d9021d.0","@material/animation":"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-indicator_7.0.0-canary.912d9021d.0_1590518710979_0.30566082206631395","host":"s3://npm-registry-packages"}},"7.0.0-canary.68a2af131.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.68a2af131.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"65a3f028debf4eac320ee6b66c133703a62832c1","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.68a2af131.0.tgz","fileCount":38,"integrity":"sha512-elYu56q77qohQ5KlO/KCw9EtAUfYjzle1G1F2C+9TFiJdIubaEZkp9emxxntQ57hqC5m6B8q3gzmKefVAjAzmw==","signatures":[{"sig":"MEMCIE7eFv9DwqdPAIj+9VJTMzQ7mzPHimCtuNrxepOUfDa7Ah8UFIhvFKnYGMn2d4Aaw93IqAKJYYgtgWEYC2eDRDs5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWjrCRA9TVsSAnZWagAAIMIP/2RE0Lqh1kFEBtJq5nEg\n2oPP5UpT8MRlBwf59gJvAqpvLfTrYxunJ2AUovKmVEXOt5Cb28ISNa1a++Ad\naJowDSf2jgRQKgFoqogLSDZZ42r58f/9+0IkqxldHZR36Q6DoxZ9xO6+7PSW\nLnTjc4uKknyzdBVJTwbRAwyO/zNWnfbnUF9wcJ+Aqnq/fzGcOrQVlc1J7/JW\nfIhtEmyscVPT+Zl+cNMRFwRutis1CK6uPXSM1tH8RaIfQnfjaqLcc7F6va2l\nOMbyYXLXDMvd3ZPTXlU5LjAA90ZZCZuCneNJqW0uU4AfwRsdKQAh9nNpQLEv\nE+0qrAhPKOdi85UNSRDLqYWTOrNlkEPPbShTcvICtkXYf3BEWQyjpj/MUdEK\n6N153y1ZdB7vbDni4AC/xHVkh00kxsi7sInLvWbsbKnLEKqHhvZtLSvFNa4F\nWCD6aTMAukgjbzQzcoNPwJ81Grjtdv1h5rwxrfflRFHPryti5H/Dsqd7b9ut\nYGyzjpvbi6aWFg0Zch9krAR6u8FOYtb3IUl3gR+LbQXw1YiU0Poj3tlzKOEG\nBpCKOs/e9CARFdBIBzu9dv2Cd/z409r2kLH3c5ykpO/DE4vT+Zp1lDvDMOf4\nEVUshjwzEpFU56tM8UBIt2PFNH4loDpmm6b3gCKboROfjkWrEITMVm6j6UEW\nVaqn\r\n=uQ5Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.68a2af131.0","@material/theme":"7.0.0-canary.68a2af131.0","@material/animation":"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-indicator_7.0.0-canary.68a2af131.0_1590520043431_0.42912389034306364","host":"s3://npm-registry-packages"}},"7.0.0-canary.01de07011.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.01de07011.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"63db0aa980eb846ebfb1f385d09b7e255692444e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.01de07011.0.tgz","fileCount":38,"integrity":"sha512-3fJlLn6gJmQK2VctoT5UKEj6N1hHx3u1yeaVVRiYQh/9f/MRdoJxqxakUVw0hymClW8w4uNSxL3vj+1+6FdFJQ==","signatures":[{"sig":"MEUCIAgDXC52XAw+0DBo5xbphwMBRF7Uhnvc4GqZdZv1RsJ9AiEAqwIEUdvjpmBq66ivS3WuFfnIZVt5hRb0WXSqfGs0viw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezXN9CRA9TVsSAnZWagAApLMP/1UrWyDRf/4JuPpf0eYR\nQC7q34g1xXZPL3ZTBcCXddZiji0UEOcRVPuvmb50yWYIgfUK5ox5zgurBeOz\nZu6V3x8x7UhCzBVM6v0hCNfN2qdxr76N7s0olt1q6MLex/LZjk+TUQTtCXlX\nnNmZO9A+bgZ5MpHf1PQiPDsURurlMn1SiPrsbCbB/aFeYc/lC+o1OwRykO4H\nurBfanP3ibU0RP93RjoMXIPkhouFRe+5osyd5Y09dSOR2gr37g2A6fHf03PZ\nSj/v1xa0od16qXllQtwLeQtDFdHXN4G7rPbomxnJGWVhnFaEj9TyCtUtK3k/\nQnkrIs9fmFrTUMoH331FXScrxkT8YAg+Sr+U+xbzDt2HOb+MGbIuujXBz+ap\nHhbKFYC4nfDISOltCHym9tr3YCXaXQRMihMgefvYnD/iePmzf9ETIVbxq2C8\nhSvy4Gj1lvsEn0uMmNpqQ/KC9aMA0wuxza/UHHVga02wfnM0GUQ+AcJB77HF\n9Ukuobzg+zWgZFm3BYTz6qW5gbBUOr3joxrjSX0+2Tbl/axgjg82YneE2ckI\ntkklvQhKwVfc/xWwCsurUtysMInAzN6NFYcDjBE6vfTMvf3uoK4DMPZ42PFh\nuQUEPSDSGZ/W4efTfy3hwkEOXxPMnzGiuFzM2vCDp2pliZMq7QK/OnRTqvAs\ny46A\r\n=DCHy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.01de07011.0","@material/theme":"7.0.0-canary.01de07011.0","@material/animation":"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-indicator_7.0.0-canary.01de07011.0_1590522748637_0.8912706965883868","host":"s3://npm-registry-packages"}},"7.0.0-canary.51d4535fe.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.51d4535fe.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"210052c06ca85241a49992478493d7cd7479162b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.51d4535fe.0.tgz","fileCount":38,"integrity":"sha512-+AKhatoixmfgplJLSwIbcKeotmbv9l62x61xbFVbvYGux4J7xzlMZNP1NBYvQmdQAMw8NJ76ZX8Oy44ZM2jM8g==","signatures":[{"sig":"MEQCIFRsJ72MiG/PQm8MeOLPu/7QIUJG8GYHT9P6/x/dvDo7AiBrQyNOb7S6qHWIGcJ8HN+O8hHMWBSQ5xkhNaxeg3R+Lw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169366,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezYt4CRA9TVsSAnZWagAAGsEP/R3fr6Hf23h7PPzANX/b\n/4DntuatSctVXJGbb+wFqEk5zvNCAV2HBgrtyhGo7cPpqLEpLAioS/VThM6l\n+9Wm/3dHzAOAQAsyaUrycMcvNhjCduy/QEWK9EqoM4aSr0pbu4FM57smvt1o\nfBWwtEI+6kdpjzROv+HvXd73K701ZZ64upvOBaz9rqVDPz+7qCL2tgGqk8Uc\nyK+48jAQFYVdjSpArlOQt0tC3Uulvrays12Y6gUjnNfEOSPXanYOD+3fKAXE\nJ/hTJv8osPcUCXY8BpoOyy+ulAeubiqvDiIS7I+rAa3rR3anSjlgm4T8JlIs\nnxT+0PdLkE0O7bzB6AiuCKRIL0O5TppTk+Ua2hjGZu8FmsSjx+XQ1ajXlLqv\nZRTVTtbW+/Qw6bZIzKSs819dgNhbTazAsWcYdq/Z25nkb8IL/TdK42lu4UEJ\nDO6bGR/YbRQu50dWFTmbBfAQpsrfgbIPDdi/Pgo/75f6j3kidiFEhS9cyEey\nHnxHVlwVSFZZmuJGa4x88d+hXjQQbNbMZJeiuIetXuer7P9mqhiAAIOVHiyb\nWx4mEyMNJ7qoDEEJOMoQ9GA2H3xXb/49T/AaPgboj7Ap4M8x4eRDqNt+lhzV\nsck+eWpG1r/xQ+xuXZTd7Or90ctf6B076VEMUyLm/jUiVyrAYLa9SUmnlsvB\nd3mm\r\n=jbD8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.51d4535fe.0","@material/theme":"7.0.0-canary.51d4535fe.0","@material/animation":"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-indicator_7.0.0-canary.51d4535fe.0_1590528888271_0.558961216495681","host":"s3://npm-registry-packages"}},"7.0.0-canary.b86d826b7.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.b86d826b7.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"2cd7089543586aaed8731b6764f590e6bfc78f5d","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.b86d826b7.0.tgz","fileCount":38,"integrity":"sha512-ufofvS9XTtGk57NbdW+/PBF88SnhcpkIgIGQdnqLPTTBf90VoKmqEfDACeh9/Pe+xo2sgF88YYRSboMXw9d3xQ==","signatures":[{"sig":"MEYCIQDWDML1wabiqapIymsgOuyDT03MW0mXqeheRwoaK8PyWgIhALEq9I/cbHbfBpcMZy7ygG6OFGcyMWnNjvWaJOV5pbcX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169366,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezZSOCRA9TVsSAnZWagAA4XcQAJpobymB6i/VyvFyGU4U\nQVNR6WaO5DPdoPzP6oA/kYilNG1tPiC0uPhMp1ku4nSlPl8qEqvd3cSEa8Dn\nUgpVbXwF9Qy2mKnmiPh61oLp+djZwC7dvZdm/XzmqXAxHeT72DC8x1qf7X+X\nhihyhDirQDCpJ9K81OD5ybZMAiKgX2EyNRzRztCmRWZKz4LAz/gE72cz2Udf\nJJN7SQ4sPozmhAt35OG38Zdl9+Lbp+g9kxBh4UBtJANqhQC/F2pJLR8TWTml\nMTX1KG/3qeE3jqBGVCkFie1NmuqZfHdd/My0DTy556vQPUOmgiJ455pM8L/+\nb27Z7rvJUDJ4zQVjMlM4kcnz90d+oD7NHXOZpQq/ibGD6i7Z/tbg8bwpWR+W\nlEvbJQjZ8vnXkm/R+CzP633vxztGOhvmQ0QuL8rG6miNK2QF4XG6hTsYsYEb\nnxKyfGoyMF8RmiIsvrpwvcqhE0Abv1e1LxzZZCYEsLtpSTn8KGaDmHGLXBwz\nrFJCLgXvNkWNbbFYUWoamqOQ5fO5Cqxzy0B7iByIEhiMFNuas4UVd7ajWoSH\nhyhGga3nGoqTc0ODvQzlqNp/hRwZ7O6+om2V/ghy56mQfGBF04YVW7O8j/us\nIOi/MVcoCj6feJ0dBTCUhvJRLpBq692bY6J8ZQl0vYoOGPUlfs3KVHuM1LTb\nRluh\r\n=bIgP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.b86d826b7.0","@material/theme":"7.0.0-canary.b86d826b7.0","@material/animation":"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-indicator_7.0.0-canary.b86d826b7.0_1590531213527_0.6054270867666216","host":"s3://npm-registry-packages"}},"7.0.0-canary.d91794c7e.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.d91794c7e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"1d28e060c6f2c7f5a255916d669fae31f19c9dab","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.d91794c7e.0.tgz","fileCount":38,"integrity":"sha512-lar3uSsWzhe/tw0GShhCkCphHT9vEKgXXJR4/3ZUwJFpXzXz58A2ViitkgciH2YLOTCjCaJW9chg6XuPBYd4hg==","signatures":[{"sig":"MEYCIQCbzot/EqsGqtohAE/dXLZ1VO0K/AyMb+MTWFMl9UZMKAIhANm9u/ozdDEtytbTuj7jrmeev4CTl/wh3ITzes7pUMTV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169366,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezaxHCRA9TVsSAnZWagAAKvoP/jkY2RPor23m3eAm3bCz\nrdxj3WpZilnDq4jMuJj4E3WEIiqgA/qjJgZ//zAFSDzfJL6eN1gzSmk4alDQ\n63mQ/C1nDjCUXsKHFbe98TR3wBPqTIevmWwwSFKxlNCXbnqom+NoEOhRdtV9\ns1Nm5boyHN7ex/3eZRkC/Eqqfah7xMl0KIvqyYTAlNeY356sMC5nGrDsl7b1\n042AlKlfnCibI/y1Lgzz+IkCrCzveO6UasLiOMmqgq/t5qH7pi8CWW/UNDjl\n31k3Q5/WYzazHmAcMM57lryEy8+rsTktahPcJbr1F5O4vVWcyD8rv6RPeZxr\ngfosfFYfBDwl4MVywXpYHTXrgIBFpp4Kdn/p5XeWukIWJQQlvh12GWEgaGTQ\nhZJUwYkzCBeH2ncEpDoolXyCRklL9G9Yv4g/UFS3aD8vuKb5RcpPfmzzb+la\nXfLvcNzETkG5XmzpxwlO9BKBqzzL00kLi90CUeqO5ua87GlPzFGgJwDQWGo2\nOB0f9cHpgM7zyBOr738wU2Gf21ZXdq740pjOtPvzkrCNTaS5x83h+F1dTa/X\nZhCybfn/1luaYL4Ts4hjXn3o8DQ2kt1c/GWqy02Z07nCcZ1OGYwVZPgJv9/f\n9wAXnuSXdBkznYst3NAGQLd+Y+mC4JSiEpaAPxpxvk08cyrd45G2AvM5QmFY\nfafa\r\n=wVEO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.d91794c7e.0","@material/theme":"7.0.0-canary.d91794c7e.0","@material/animation":"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-indicator_7.0.0-canary.d91794c7e.0_1590537287436_0.1792090664561088","host":"s3://npm-registry-packages"}},"7.0.0-canary.8c6d7e076.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.8c6d7e076.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"b1c20a30b839e9e7609affcf4758f8e8957b7679","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.8c6d7e076.0.tgz","fileCount":38,"integrity":"sha512-vU6Ad3gbQGDewat7EFW9tFbkrjkYItfeRlwEJ0fNSz1aRu5k3/+l3PaMwnYcJ1v6ne+8NR5YQeGwk0ixvsl/2w==","signatures":[{"sig":"MEUCIQC37FFc1bYIfsWMHSjb1UU2rec2BQX8DYArbFXc5XBSwwIgV6LXRivKAk+fYN6Iu/NeskZDf9/WOVEsPeM9vCBh0Iw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezrh+CRA9TVsSAnZWagAACSQP/R5H0CIjH6kkwx0RFQGy\nu14EjAG8xXR29kqU2fCOtgSNVtWIUiC1TLIpNwa+TuhwfMoIaVotRo8S0cEO\nr1XEBCZY37/h/7YBxVgYKc6OhaFwEhc+GrslNPKkN7VDyNg8MlvJQfeXoAoO\nNz/ZgDAtU5DAWrP5LB793oTAs+ce1YZP9OKlG/tQpx6RmPNiDeiEy0XWq3+t\nCZsG102xe9PG0kDe7DSkxNIXt8imBBQMu3yipIIYkjkzROv3wIf30kxbicG5\ntOEtxhjF2Ytj0vnxMyGRCsXHZvn+VBWd523QbaG03Mw3FiGwO1MIJI7Qngqm\nKUquBBr5f3Bg/IsTiQfN4FgF0kIRgFDr0S4+Vu4/kdgC4Ycth9CUvpZNnxq0\nL9MBLe2C/kV8YG6f1tYe9MhxBdGPNkUV5zBdovyhwKU0/ILRtkmEt3wNbA+7\nZ/ND1YGMWGjLcXWpAlu2rStulUPM2eRhoq/LpSC1sQ+TeNR/J4Lu8X/MHJMQ\nMx5JEaS7+WqSEffPFBdU8Ga3rGxn8BJRiPSpixiVAJZ2dRrE9hYj5JaSpuFU\n1yOc0n9cHOSnluqTeA1O/8vt1/on2OUQhWdPV+Cw3uYj3+lVAa3YaGJmUJ2L\njrEREJthEdCNXbZfd2LCdGBWBnXkyDmeZ4mrBdUFeQtvVzY38TknmBTqegsV\n2fkq\r\n=sIdX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.8c6d7e076.0","@material/theme":"7.0.0-canary.8c6d7e076.0","@material/animation":"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-indicator_7.0.0-canary.8c6d7e076.0_1590605949737_0.4368890917738715","host":"s3://npm-registry-packages"}},"7.0.0-canary.5b5f62f93.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.5b5f62f93.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ca78d601febdf5d70485f1f88331f9391daaa04a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.5b5f62f93.0.tgz","fileCount":38,"integrity":"sha512-PfEZmRkQaBrvBIanetvq/JCzu/grfVrnDHfcO3jbvUk8lKglh6iX0QMLZhz3Iwzh0Ax6MlIGkqUivVT9raOkGw==","signatures":[{"sig":"MEUCIQDbHa8NogRM8rX8WECgwqjR6fE7MAtWBRbdlOb4d6FkLQIgbGC/vNwwpewUyPY0DKBbt3DTEYQpm4ExjPxNMezgO/Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezrx7CRA9TVsSAnZWagAAKycP/3EYf5+Mv8AqnGRnbGiU\nHo1suh3ZqH7VYTHn5fGv3fXxQ05jaJPwCze0hLODAK1+j8uNY+3Q0SM6bbjg\nJOlID+3D+Xj6jsj2sdSKLr0VcsgsolVU8DsFHvpzxCUAFzFHbxqbaz4A7wj4\nU4jL/1f0EYqtHTnInnfkNRbH9tY6vp1pnF+7HCJosoOPUcRBmNiv1BdaqztW\ngwPkTmz0NKgBQLYtyi90zmH9YR9RFXTopyjEs5NCNFJDsMogaTFfTfBXVuk3\nUiUsvjirwRTmR8/HJHIWgAs58KbJK57V9iFucPR5nEPvVJT/6XEExm5hscUz\n+hisZuWWqV0AJ7Uwm5RplbheU70sBcJrBTxv84S25Thai5eKl1PLhDnu4fm5\nyinfwg2FvPrILd0YsEgb4giQgalx3IRxXu4vuzsBcfUdUK456DCx65OZOeHT\nhVM7fIxfhrkP8eC9l1K0EUKExGRHIJZo0sKThDylcg3YbLRzJKcTQuJLxq/2\n4c4IXmTplc1ePgEDO5hVscG7DHYAWJA5WxvHfx2vU81aQZY0M11sa8Jbm+Bh\nCoBDqOy6xg2hezGQp/IAwDpl/qv3IsU9570sPXpb543PveciIDnwQN1KWEbQ\nuQ1MFTMA7vEEKwRD142OznixabuZu058m2cMjRBQVyELoc+fRCtbmWvwqneB\nLcJn\r\n=Ieaw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.5b5f62f93.0","@material/theme":"7.0.0-canary.5b5f62f93.0","@material/animation":"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-indicator_7.0.0-canary.5b5f62f93.0_1590606971016_0.7088102810962809","host":"s3://npm-registry-packages"}},"7.0.0-canary.d9972abb1.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.d9972abb1.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"05ad160ed29b1c089b781473f5cdde87b5a98ba0","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.d9972abb1.0.tgz","fileCount":38,"integrity":"sha512-sUajaDjCygJLYyc3PLQrlFZdsc3YZONdQtrDmJzs4mAWzMdw4fEVmpJabn/0ECoG0qjOHnXH+L1kvAN0LF6zkQ==","signatures":[{"sig":"MEUCIHtgkfpVMCId1Af1m+USSVus4K+BqjBPanQHD+hXbuViAiEA1GmAzMmVwf7AfgJ7Z0fQC6WT0taQAp4xnZU1bR1hGek=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezsuZCRA9TVsSAnZWagAAowMP/Aqg0+bxh2dGkzK90raS\nWcKz5WBFrM01ptRRb9R+Rg0WWpdUAOMhqAZGbyLNGb9CydoVsDsMXR4JURmr\nc9yRDOrjZWeqOIDUUx1G3tgG84Nutb1FDhSM/jmWgFOb97iomrbn768EGmmP\nu+HSDzO0xoSxPAajDugy4aOSPuz1QJypEW5T8qwr3GiJTHy++MVUtoj/yojf\nWmLlHdZkc50W+wS10+KxYjUqmjBWYeuKzrylXzN7TbEXyokVrvUCECQWu6Dj\nyh354pFVS/DIUSpTKwxgJI/q2QLrTa7Z5ANTGtPvcvLwXD4dHCJPMc2yRiMh\nXXhpEeCdqIhkcT6p+t+UeOC0SWhAmmXdZadnS4vyurI125DlFFm1QHmsF8qD\ndPEwTLtxdyTFuwNLLPMXj5/sSLNVVp8/NPQbK9IGkeZxCJyPAjcszQnjY9Aj\nlEpaEev4dkAyNzEkIUQ7/R4FqfRuBIp16SJiUuiq+W4MbabedkycaF1kIpAh\nIMKqVkXNkhbYYB7QmbY96dxH45B+S+XFxZwrqeZKVoldXtuvee/p8/IMg7ad\nnjdFVsQFmZBSG1Kr4DdvRa68ZDasVNcq05qJJFiTqXadwjOyTjVOtia2AgGY\nc8EJcXzZJ1Vie9PMOyQleU4WOFmrzcis51lbYlbxC8YQZmow2/xrKrLsp/F3\nkzu1\r\n=mGGY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.d9972abb1.0","@material/theme":"7.0.0-canary.d9972abb1.0","@material/animation":"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-indicator_7.0.0-canary.d9972abb1.0_1590610840681_0.17296316505278875","host":"s3://npm-registry-packages"}},"7.0.0-canary.6556eda2b.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.6556eda2b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"1681debb960bb8d28abd5b67ae7b0206c6c4faed","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.6556eda2b.0.tgz","fileCount":38,"integrity":"sha512-W9EKWO8hzWvpFazNFb0MNpGVPInkHS/IvqNyF3i+ZW56Tx3gFr9dWyywUO/Dc/sgmL/abXwhRXiP/io7mO9c5Q==","signatures":[{"sig":"MEYCIQDBtBnS01Pkd2TxY7PKQyJVbX5C7j2gVog0RhVDw0DuDQIhAO0EN97Tk8hK3L8x7zCBE7eJPgjUzAEZn+sUGEaO+owQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezs2+CRA9TVsSAnZWagAAUGIP/1jM8u2RIweO9rjCX4NQ\nYqOYle4rcIttrSx+5H75BUgf+37zwOdEEqw7h8bVZGJkguuKnDfx/VDJy1fI\nYExM1DIIe4uwnapBlBizbrDxd96lKaypsiQsscjKg1uDoVc9Q3OtOD3uZOgd\nbHBfdpc1+LlTY5gLPgSP3GWjq7eOAPqVjzKuNtAckKewOKICsO4zwrp9iXLa\n76PrBmkOP6NEdmCAxMUJgV4wxcJxlBya35OHeR++bFlwWv+Tj6wPMR1W5DiK\nWskpkY47Uvn3NU7ALnDKFmLziKK6kY+ACQszNaNuk/CdVCJ50mzZqmdTDkCr\nhIQa/wNY+hs9h4ivqz30TNdHsoWTGoqeHbX4FaYrg4s2UPkBS0O6a1y1Ix2E\ndvcbexGSozxVokDWPSOElQ8JQAy1WJUjer4RG4H6L58l1YjX28+XEw4qnNbH\nKbO3dseFXjwtmzdN7Rb55azDnoM05w1nYjhYoMY92rSkC02OF09zstfANg+W\n6HdszkWKl0OKlkJTDw/NBoCXcgh4GDiSuJbI9gNx02Zy6yiD5yzGmGJdgg11\nFUyl5WoI/LJ0y8jwJQfWUMiGvUiDAPjWp4pSHR9Bl3uTV4naIf9Av7eXvxHl\nW/JxDnJwUO2Fj4megUBBXbRCivRIeVXcfcjlo1kaE9QKm4doihzRWiH7X4po\nUReS\r\n=Uv/e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.6556eda2b.0","@material/theme":"7.0.0-canary.6556eda2b.0","@material/animation":"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-indicator_7.0.0-canary.6556eda2b.0_1590611389821_0.714652297994105","host":"s3://npm-registry-packages"}},"7.0.0-canary.32aa23641.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.32aa23641.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"a60352f6eb43d32819af08b8204ed69de43693d1","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.32aa23641.0.tgz","fileCount":38,"integrity":"sha512-HXiIY7VqnZMK37M0kSBW5Relt/1RSComdBUUc1vJB3rXepgW2Qra7C7GvQ5EyupovIq9lYjeW9ozG52lHjLhWg==","signatures":[{"sig":"MEUCIQCdZBV0GEwEI6JICjhdSJWUwXZTzuxBTr8ybR1hHiIIUAIgZLrPRTCEPq83Mb1uaDeUoPKBVt5dybTcZteVlmo3vvc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezt29CRA9TVsSAnZWagAAeF8P/3554n4YsYtojVhtxCIG\nNUtWPzljRaGSNfchgnz9nZdcIVv+j0EofsGZJcFlDiQGQ2s7E0DS4kJ1EHJT\nJxYzcYh3m7KODtCKd3yqeQPrAcumzLkjgd49NmuIFv0cmYITD3nX2D89ZHCL\nyPm7rsuLsR0elLNKP4NcOj0uAf1/7kTO2m7LORrvKsWox0Nxe77fBnJ8x416\nrntMjw7KPQg/8Jc95XrnxPHNj2Djzfb60pr+yyrn5xt/LiXCGFtlOKTRyZA2\n3V7Gq5V401RQF1pCxgydPGe3DKoZt55dgvqGTKvYPPugLpcLTVGD47D4K6PE\n0u99yQI6epKbjl0vUDVTOqNUqMXJvsX52KlXNWit+dD1r+635Cdbz+bfo2lR\np77c8rGgMqZG8D8b0HKmsO5i+z3TfHFIhkxhcvflLAvt9CZ0aoA4rx0Tpopv\nPYtUDh0NPQdw+XQw1fzGiMleY+GwQtPJanOLiMTLveeza5wV3JORuBsirlVC\noCBDUHVZMf8X0cLx2NGSDelTI/cLwJL0Jwi36ULJ92GdkLg0npzOt6WPD3tG\nmh0oySATPRmL9jFG29N8CMntyeAwwxmFebBKSnoW+UOihgIc025AWgKCOzrE\n9J1y+OxWVZl2MNLhhazJb5J0UkFdB1TJAQhpKF+I0hqbLhTCb42isVEmWJdV\nVgTN\r\n=aJyu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.32aa23641.0","@material/theme":"7.0.0-canary.32aa23641.0","@material/animation":"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-indicator_7.0.0-canary.32aa23641.0_1590615485199_0.7593325718000927","host":"s3://npm-registry-packages"}},"7.0.0-canary.654934dfa.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.654934dfa.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"8d78eb6465778cc8de832870ea6abb483652a9ae","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.654934dfa.0.tgz","fileCount":38,"integrity":"sha512-OlXQeC0wCeBpZ6XKq1ai1E9FoXjIkQO5yNVX2qPGrEopWIw0D/wzmZ89az/5TKIO3Qr3UqenDMXjD/Hwx7IRzg==","signatures":[{"sig":"MEQCIExVFhfer7bL2qE8cvUPByfvzIO0NBkxcIhwfFSxUFZbAiB8ZcvI0KpgltRXZej1ZjJsdu3o/nPN3I1DFziwFOS4HQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezweZCRA9TVsSAnZWagAABYsP/jWdxMWJRQNk9r1z8GdJ\nKxPAMARTqK29yGHMcOp78sRhITyghShTtNDJpul88gLx1VwRpNEhH1RZHEgx\nZ59wVoPBN4qOZPJNWIgFUPDHo9f8YCecu0EGCh29Vsxkb9mJu87JWqwttHV+\nkMICEF/ro1066/ocdyTnPEe+IauD34iB9GU30fBEvfRZ+b5/JI9jABDpy+Ml\nYMsdbpVTlShgx2QOZRWpqPC7ky4mPQgmo+yc51jCgN/pyy46dNQi0bGJXawx\nHTmwy4Yu9yFmobjL0W18WY8cMRRlOFs1RqmKZMg5zY8UZV9zg2rHhJ8mY4x/\nGFIF+O30pHV6XMEXu0VkyMBsRC5bexNRBesuibo8bvFyO2xQ7t10DhsZGq6t\neV6/xcP5kfkPXSSNgWAnCmUHJ9DpOhgSdaAi9WBLnuN+GxIMp4syKuW6Fr2P\n/RKx5+QmJcbYa3X+Jo/4GJ67lzp0pzMNYjl/30XQ4VKkoP7Se0CWe3kMiotr\nCmmrSMtm0U8NcxLPbxzoPNOWiuObYVyKTlrsqzb5gq7G/jMwXrtIhGIMdG8E\naMi9LQdy/QS8EXr91E0Zl5B8e7ZM+uv2gQJlYlr5MAF2agIrhcA+mArbuGtN\n2d5HNSXrM4Tj1tKBB8sErbw1mzI5JfxqCJ43tFqsrkXUGGfPWsPju8OuJIl6\nYRpy\r\n=Jpu3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.654934dfa.0","@material/theme":"7.0.0-canary.654934dfa.0","@material/animation":"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-indicator_7.0.0-canary.654934dfa.0_1590626201127_0.5522342181972322","host":"s3://npm-registry-packages"}},"7.0.0-canary.41910b8b8.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.41910b8b8.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"1d4c3fe8b6c37bb7ba21c9b8391eeced564853ec","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.41910b8b8.0.tgz","fileCount":38,"integrity":"sha512-NZT2nhXFfK4APdm5TZFb7eI2/nfNtdJKaL5d5Y7v4jBMPozqbfeXoRBxiK7PyeT7XQZSP4AN0bB2Xgr4WT5Ysw==","signatures":[{"sig":"MEUCIQCTf/5n0BkEpeGuEyF0JDIpaie9/ynxv2OWJ93V9k4x6AIgD2TUSuJ8GPkgd1q0sDBpMFJ9K8i6X3IoZtqQxVl3jNw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezwr/CRA9TVsSAnZWagAAbtAP/0kwlfuj6HcLkS5s2AbK\nJmMv/adlG2co+BkWhYGOwMMOIEvlKWf6wIBJWqvz8Hal+JsFMteBB7Nq4h9d\nPJtG4OeyGi/heU17bZX0fjjjxEycO8wmsWfhLGbto7RhNNpIenFCW54D27Y8\nE1Gyx/fVKb1cJ8ke/GXyCiLJbMogCRbQEDPCt3ti00e/KlMNaP4sGrTh4bSL\nsBbpw0/4biJkcz8uiJSFQuQeOMCaBD8t9EpuYKCkGx5hbYRJAUAv4gAbJG2d\n5EI4G81w1e+6zctk4ImkiB8nNQ3C6hwnUOCEyGMYY5ixL5wfOrO6/mmYSvfg\npNdgbwZUin5m5WDsHNss/+ZXMOCSFypqyXjOS3S2QWamHRkToM3IH7JKYMsK\n4my11nfpbTiGaE/cg6ss8FDvivPw5eQfPd3tOE/v98hJY06+QK22sJlKicpB\nErK+SUYNE2HSVUu+jgRcTeP20fYHBod2VsDGESoDef6eNzqZF+dkthqVCeH5\nRhu6WiuCc1+zawzPFF1ogmFhDYGZEd1ezpGUogNeVZQCQfe1UKpemESYGdGe\n6jEmqmsvhzSWxbhMjW/IVhykJzf7vJHikJV9bwZ+IEKrA+HQdu26Ifkw2Hya\noRU7yykAeGumYikSfXiKql++xptyZVCwAzxaKTLNXWL1lO4/47XxlPLhA49A\nITA9\r\n=rVZ9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.41910b8b8.0","@material/theme":"7.0.0-canary.41910b8b8.0","@material/animation":"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-indicator_7.0.0-canary.41910b8b8.0_1590627071043_0.3556559719900303","host":"s3://npm-registry-packages"}},"7.0.0-canary.d66d22bf9.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.d66d22bf9.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e9db96b4caf86d798e1a3569a31ff26964ed553c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.d66d22bf9.0.tgz","fileCount":38,"integrity":"sha512-Pm8gg02P8W2Tplf1hg7j9li+B/nAlmxouIrDHA0Q+OhajjYDVdSdz/CazWoDE29S4BWBkgTODyRmiThj14bOrw==","signatures":[{"sig":"MEUCICwJ/NKhr+uihXUsPeUfzieRuYmuIXPy7jBxz+sUvpbZAiEA/dgMn0VeNOEOHpM44nzy4/2TrW1MdjWaxzDY6oYnLck=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0BcfCRA9TVsSAnZWagAAJGoP/0SxX/LZY4KmjSqh45Z/\nX8Mqd7gtD1OMzKWHYNLSp1IOSWBQW4WnhYO5AdrqrjnU5K5QzXOLJFg310dD\nkUYTxymrDH43x40nVb/O3nlnTUcwdcevmbYBt5K7kEh2bJJMQG53GJ1BZsKP\nAtvKrI1u4eNoJekCNZJfOQcunP31qsnUnsIGBdd8I7CYfWZZXaEej3QS6LAm\nWICWz32SFUJpMSNTUqrTqrw/ifQS6kO+yc+rEwQ+WqHutdoZisd5BlPXd+3I\nEhvvZUzcr4kQqKQ2BfbXKIMnjFV1+vGROkeN7OUpKFRgQXshGVpastngidMB\nOalx6aVNtJwgqn1zkcPzemSinOVaBLj275DcnGTsVj0mUFDo4cOcc7xDOEw5\nHWYl5tYWgSPfur7tIk4IPkZM1i+SSuQnes3uRyZ3vHbUZRrxReEaRAwmcUi1\nRdGrbvoMRoVRfUZ1m54egaCx7QOTZCX/fhiLvX7A0vxmdHTs204GRFpAo7wi\nIUySu9JwcxJRnkWPv4HhpbDhol2GjRBGDyQMo4KenRSZymeyfSSObCahLGDf\nn03K1w4Eqc61rhUQellyHRdX9Ih1/eaUkYdWMjYLjYH3pKwd4s73S6NUMZAp\nOtTOwn3Q3gi7X/hPPaMdn/qSfZvcMGtTbnMswV1WRx9TuYb60xFeKqL086ux\njU6K\r\n=RTv/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.d66d22bf9.0","@material/theme":"7.0.0-canary.d66d22bf9.0","@material/animation":"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-indicator_7.0.0-canary.d66d22bf9.0_1590695710713_0.3378676562926328","host":"s3://npm-registry-packages"}},"7.0.0-canary.8904f3cbe.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.8904f3cbe.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c72b87f2e1573ca131f0120aa1d982d86209db91","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.8904f3cbe.0.tgz","fileCount":38,"integrity":"sha512-HtQa+xevx8CXW1RjiMWQq9dtfHNyTRPMPh6r+S1MyK3ukeKCseGK7vA9KmYT5s/ZW4bcOy/vz43jDXwkmMAcTw==","signatures":[{"sig":"MEYCIQD9sMPcO6XJLDMPtVmPB1xqys5QZ/FpZVctFwLBeofV4gIhAKpCuQ5uPDnVnAiRPFtiBskrl04w5XpEJm3tTRaDK96o","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0T1ECRA9TVsSAnZWagAAmV4QAJz9F+VOw2To1lwSzieX\n8hWgltwLm6HddCJJA3ANuxV0Aars2AwVrh+FnbDnTs6qCNnCF9Ri4nnSVlTI\nBj/G5jx28AaLoetm734fztKYc7/BKn4pw1mA1GtxFBRsYc8nhQHCVVe8AGFa\nU2KTCleDYE+gCGYh9ontg5uCxjcQxhgdgUqVUCRVnXQrXTKgnfiqZeOqi+TN\nAk9Z/aZg5EpJaC1PXfJU4Non14S5gattw2hJq4EnD+ngtQUuB0vOMd4ucJU/\ngHY7bo/7Mdg8SxAvyPGa4R4ZjwIsFTdIu3YiBd/oHP6GscRZ+MpofGOVollN\narIFojoaBjB/9Sx784FZgZ+o1KeLFcgMwleq01/C2/yZDHb/h3fVXeZbN7cx\n7Cs6gBV8cpjE24E3IA647kmE19RvDgm877qOscAV9eCZ2Y+38jH91KxWUs6k\nOvzRpu0l1RaKOHQ6OnCNNicRfAbqhTy0YLu9liLi59RwfFoDVqsPLv6bTeGz\nmG8048TrQZM72gAGPdsCScCxqsC74IITQFMrA7nroM0OlSWbnk89KqlqPDiH\n5/k1tnQQ4gyKMGoTUtm7+a21UGuPWmxjhYJrI8v/BxOMukn1b3AqhiCLsBQc\ng8+flygX+x8NiSziiu6KDej5QulzwXD3/wi95kNtO+E/xLHc3Q/Gf15d1ySR\nC3sm\r\n=Pugi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.8904f3cbe.0","@material/theme":"7.0.0-canary.8904f3cbe.0","@material/animation":"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-indicator_7.0.0-canary.8904f3cbe.0_1590771011176_0.05012296271879557","host":"s3://npm-registry-packages"}},"7.0.0-canary.51512a4ac.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.51512a4ac.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"a6f0c644f6c04b4bfb1da0276acc58913576c4f4","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.51512a4ac.0.tgz","fileCount":38,"integrity":"sha512-OaHfYZOOQZqtD8EGd126ZE24s+hqyrTqE7sKOptG4ZI/Fq2Nyj4WB9Z8p9kcokc1NOEkI2HWxyQrmzygIklf2w==","signatures":[{"sig":"MEUCIQD/wVjE51QXQqw0Z6yvSvoCv6cd6xLzoVEZrD9gjaVD4gIgcIRg3TnvOVaDfikwjM18kiB6IS2mHrf1XJsckWcdguo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0V8yCRA9TVsSAnZWagAAobEP/1izfWiTZh9IC1pbaouQ\n9hUP3zrx7IaKWQ6rpfL7THnofHvawEtmr9JQhMFaWJnOK1DWPMb2NUFgyhlG\nD3/qKPT5iaPe9xLtv1/zrab4I2FVn6CigiPeFeSHIwI5Y59tpW2ImjBTJlsx\nbhRXWFZIlNsmVNazIRnhDnyBOoMPtcjQy5g+NfMdHdQzwLlKzc0Gley2DCkx\n1/HQ+pST4AKQtkAVMIzRsE12aLq8lmDPuG+GdcwISMtjAoO42MOvBbI021ie\nNFoT9OwCzA6gmGzZSDXbyqoCd2NRpsHYxe1nosKv8xo8OCmKTeT0CnwDfqeH\n6xVZbVFzjlEmLKk1jPstbdB2YrTO+dDNPMB7XfhTKPH+kxa5DSexIxHa2Qls\nt5saxLIKm0bCvbV7mV8I/i9bRynt/3zeNMhRqihLurFx+kewqpXUNgUialKV\nTuT8FIs5e4Jbgh7H+zxI3sJAMfnz/THOivV6PL6NOke9isn3jmeZ0qhZpW2A\nWe7M/AEzmEsEW+8rRGUK25RlNJ/Kkt0hfDsbXVEAn0WdTlmaLWLoCpv2+VxJ\nRnlhi7FV+O6wvgiS2N67uPBMyO5GgSRD+ejT+OaWLnbyM+7ZsnCXFUAX36x+\ngTHUZ6X1mCREMSYOO/yTBve/QTD5p4P6LtVAYjpidkJxaJ2S9O3wUkACHqDO\nm5ic\r\n=8w1m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.51512a4ac.0","@material/theme":"7.0.0-canary.51512a4ac.0","@material/animation":"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-indicator_7.0.0-canary.51512a4ac.0_1590779698259_0.45085694560508816","host":"s3://npm-registry-packages"}},"7.0.0-canary.0743288fb.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.0743288fb.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"9e80fa0b86b190c6675ab7bdd498638ef3b32f5c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.0743288fb.0.tgz","fileCount":38,"integrity":"sha512-xyxt1Ok1gY9iupVdGOGpKbUHyLEWT8zF4twPQ6wt3AhHzt7IzZo6p1aRgifQonxY+U3NgPwHDcupqqvMC3RlLw==","signatures":[{"sig":"MEUCIERnfNK0qfp1jcwdtMh71sxqsQRjyUCVOi99gip+4VF4AiEAmCOmZaC4xI1MwBKzXE2IbxXGRJ9EVinmO0q/wc4+Xj4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0WrmCRA9TVsSAnZWagAATrwP/2QXfwM6aF4qbtGV9Crw\nPhruiQ3/5m8s4kfn/rEvbuegf/9ZH85HPuRISrFEeu18igua0+FV1hxwjx4e\n4nRKAPWYVILMashf6KdmVvBPK5wPLdzP7QqjKToCK5Rg7HyD0+w+Cdj77cgh\nhQar+KBcNWiyG/ZarW1tFAfaw8qhyGfa+OPVTYI+WmwB+hERF91mmCfpXnTe\nnPppsA+QXjG1wADBqazbdoxaaP7FRv+CgoFd4nIMgCs1z9KKPBssHhlPMG2D\nZaM7KJjVNUcOC+RvP3oU0XT9b5BW39j+BiiJplcGpoUNjmN5CWNpV69dLM+3\nm3FJf9498zFOXp2c97mmXqwDJj8dV5PMoVoZF5zq2QYe1vmJP7127oR7Gcf+\n6yi3s7jp58+7yf7F+0l6Yk9WVNouf0QDKZ8AIqCr0m3TuKgIShSOfWULVUDq\nC20y/BVNsiC0Y5JVxam+LK0cPPtyZ2nYys4Wd9re9gouJqVzabXLOC9fjTVg\nYFmzrMBIS0m+0glk8D0nOXdS2SOBSYEQxcKZ/uDvYhYXo5u0M/2EOj1/dRuf\nmpA1cF6vJy2o8PZO041+mZDVxIpKfUMNgaJuGPk4imwwsoQiA6YPc7r0tecm\nFwSAwmCktwLQBK8pRwJPwk1P0z1ygkLc2eB7Zq5rS6KPqSloL9i5TgkCvm8a\nPdWp\r\n=DfC2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.0743288fb.0","@material/theme":"7.0.0-canary.0743288fb.0","@material/animation":"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-indicator_7.0.0-canary.0743288fb.0_1590782693652_0.942885052198077","host":"s3://npm-registry-packages"}},"7.0.0-canary.06ef147b5.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.06ef147b5.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"b10f47516a89f658172851d519104e849032f7a0","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.06ef147b5.0.tgz","fileCount":38,"integrity":"sha512-MZ/M3zP1QUrQy05Pw8kleVKSpr299q26RPktx2cwYaf1F1B2CgzgNT6ALfkMKUdW4NxfrIzjjLwUXBK3d1N1Pg==","signatures":[{"sig":"MEYCIQCjxfh0R+UTml2wHMX0Bii39dDic8x2Ltgo5kFzg+MQbwIhAM9hsxBFYXSLSGNoHP5VKVNRXhlKGGfyClpn4BWIu9L1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0XNBCRA9TVsSAnZWagAAT/cP/iFvOjKOOpB5LRA5HWYW\nAINHXrmvGue9/gR7USyqLKmCF1SCfuSU8PEsTmf5eUaEPjpaUMCRK+ZVaHNh\n6lJzNjfxSQPGkrQr8WU17OQLFxI9wWWP9KvGqf3URIJi3meKWcXg79VI+zi6\nReJF7wnwcjNcMWanhRJVy8jlZq17eamNTiHIpTE1NqEfW0Vf1N2ktCXMslsB\ndncIHHRECCYE1lBBgXlB/0gP1W/uoZ3HTnGSTbYxxSTKBGI8+MNxGM9qGTUH\nhY4Y4ricF2Ci4R5vp98+QnwjTmaiXyiU0UpHrc8PMuCpQ8u43kruzO344JjB\nSlTnRogSIMnILhssN4eg1tUYUBSmtPBxmsEaE4xzVh4uo2fj3x4ORtPfY2cp\npIacPu+cNXXa4SbwsNOChqoHgEHp+GHn8utmv1z6leX+YPZguLSoKPOVtEAa\nx5g01u/z4l66aNig6qe+Tqpe6qfXkMW5zUqrUz8RMsKwnPTrv0OCkG6C/1Qo\n/GVvQx9UqzW+CUjYnDv/834Zbglrj/rhWpx0CMg8byAKQUaYCVnzxP2B2its\nJsXDQwR1b8oyMS9encJm+/KXK8kNevtAb7E+HigW1DBRj6EGAS/lIfOX3IdM\nnsqmHzVGVUpev3SWrHZvSYPiiY7tJiO51vsoMd9CR6YZiEgirgUfNCX7bmge\ndDXq\r\n=G4qj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.06ef147b5.0","@material/theme":"7.0.0-canary.06ef147b5.0","@material/animation":"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-indicator_7.0.0-canary.06ef147b5.0_1590784832617_0.36243067294105535","host":"s3://npm-registry-packages"}},"7.0.0-canary.8073a20a9.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.8073a20a9.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"f92a8eca505c8224580ed9e9b104e65043fa99bc","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.8073a20a9.0.tgz","fileCount":38,"integrity":"sha512-G1fNf/Tz2ZDA2PAEJRUw0L7bIklNoTd7jcFMPzRjiXhQDE1T7bVRM8v09Zi0QJ2eddmFxUylMh8e1pTtYa071A==","signatures":[{"sig":"MEQCIBYZ5x/BtJdI2kNDdOaGVjC13aYtQAioqerFd9G9fY3ZAiARVO0kYl9vesHsjj1astaxBB9ykaaqObwdyjVKXT5oQQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0ZnkCRA9TVsSAnZWagAAUCgP/Rve4TqjjhpRwTK06RJa\n1aRuuWhxjYJX4DWvAfUTktoB3H5IeuPya9UxWQvKfNdDcXokh3+Esbd0knlq\nc0DDGIx+rmrfdkW1HPu/azNHleOFA5inkph3EaGRXkyizwZQOFRR2bspB3zM\n6/izu1uekwoA1paUv4YQikvhRVOxCW1p88b5zDJez0L6s6xy5tWCtq3OMu4e\nAEiaf3tKY2doZJ4oX+YMB+mtUliHnWsvTMRU1YeQpT0TOwEHygELc7Ih7XZS\nk0RxVT6BhrwlhHg8Vc2ois/RLXF4M3vh0jDpb4YqMeUe42JdVLSrfgtotPsK\nWQtcS6I1ejoDJR+5jm5k6ZVkhJS7Xp2vopSZXquQp1OB1HbN1z39Ftj2MmrS\nf37SBQB0WY9hLVqKpnGxPDrr9mMPIjQZVmU/KCqAHTT2LILRh5ttvV+yPGJV\nWX5KyooRW9WC6NS0q+QudAjj4q5gxL8sjfLVbrdrXdK/tsI3D78CDX95MSj+\nc3Uoq049PVonryZSyluf+cNyPetAUZwrCyDwVmyiukhcLEqr1YbByPZAOHZU\njN+rfnpU+MyJstmAByM7iuYaBeD1Ht51jQ7eaR36lCSMAU4slrbAjprKt7GZ\nmlgGEWo5b0+WooYEfW4iTLVCzcWlLySj4rj8/IKdL+76O3mzBGCgX3UW7MwR\nxPsY\r\n=sWwo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.8073a20a9.0","@material/theme":"7.0.0-canary.8073a20a9.0","@material/animation":"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-indicator_7.0.0-canary.8073a20a9.0_1590794723513_0.7034091562744358","host":"s3://npm-registry-packages"}},"7.0.0-canary.72ff42330.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.72ff42330.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"b38d2697156184b1b5793a381be44ea8ca487ab8","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.72ff42330.0.tgz","fileCount":38,"integrity":"sha512-R9VO43u3cwmL1QCQYfXKMsoDcYB+h0ShbddnUJebry3Z2xM64Xw0I9sHSX7j7cFnEFRH50xfHkDDhpiPbvl2fQ==","signatures":[{"sig":"MEUCIQCzh/F/EZbJ9MSlQ7x9gwGbz/VyCYXX9IdtlG94JCZ+swIgLIPEYzQIsvx50MOlCvDi6ENnKdK5SXyKJ+dcnmeJn2Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1TBXCRA9TVsSAnZWagAAZ9QP/1DXGjFheiqH83+fgWON\nQkwg8CWZDj+u/0yJ78ezwIwR5rxh3MwpfoICf6GzJv2MdFtQIf3u7e+2Z51e\nHwQ4C471TWcC1z4yIWDXgIFYnD0UTwdheZ4Tnkgr/u5Gz5ZTjGjkR0w/HS6K\nKaUEhYQ643RJ2bprXrzIE+vDqfSLLgirLbXuhvsXrVW8lEksXowVdI6jMLnI\natkUeoqdqpD/HqEQ0h8Ivj1/Enpomjh6gfjj0cx4TgEIcKGq1pVvweA1S8/4\nyWm24mSDiu+mMy6FH0nlSArRy/Mwj+PJuq10iKAfKx4133TpRr2etox0AZtH\n3TjSrZdRSQkHuzMGDe4z0YOt2aQAuMa6VD3QmcS9p4gIt2Q3NepPnmTK5Ma/\nFiyPfbMC/YqLkQFoTLTor+mMXcpTzBnjVZ4RWYMpvV1E6ihmxzWZRqfglga1\nIc5DHbTiFaKKXHgZBe6nSgwN1ToV4CJ77DlE51MiKyYnN4QQOlE9z6qEleWd\nm/G8cfhNAlKyk6b9Mb+K3pZQJB4EKl3TC2TQ6ubK+P1v5UfWO+GdAzsgZDNK\nky07NhX8FzazchESgNPeqMO9Ksi7D3VEw0s6yy9PtkXQqtAT6OJnnYdMyBE8\nYb7rRM5BgL80wDjY55Tck/BPAMEm8MGG92uHDb13m7Plv23mlhWIfjTcNVYa\n4RKi\r\n=TOQy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.72ff42330.0","@material/theme":"7.0.0-canary.72ff42330.0","@material/animation":"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-indicator_7.0.0-canary.72ff42330.0_1591029847168_0.45134870273814665","host":"s3://npm-registry-packages"}},"7.0.0-canary.9ea52070f.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.9ea52070f.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"8cc8e68ed9f3bc5060e10ed2c4618a0d453874fd","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.9ea52070f.0.tgz","fileCount":38,"integrity":"sha512-fWoynDhWKliYcINwWad42ofbxZe4mcg8PdeDEcqtQAlPcqGG+zb2uzYh8wVk/1v87pxOzFOFeser6z0nHIuTaA==","signatures":[{"sig":"MEQCIDxBBGbSv7k0Cdenf50t25om7DaHJqbLYY9nNZaKGSkRAiB507izTLiH31eQEBGOo66M7KeUyJXak5jjUontviwfHA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1TF2CRA9TVsSAnZWagAAPgYP/i9ZFkWMaG4JaRXylHkJ\nThFiEYIPCnBO7A7ZPXcdHqRKuGq3HhtylqE2tuZFS5dVfiIMfKQBL4+Go/0l\nNC/3gZArqW90ycjVhcyQb3p9mj6Y/pwg00VsKUpnSeekjr53IocnRmKhDdiG\n9H3dBTvrXK8gJXgusr5mVXmNEyH4TQOTYXH0xu/MY+O1BkPBWaWUgC4obaKo\nKzpHwV/QwTu95Kh4qyOHMqKjhFkC2z/Mo9ttxcl0Th0uTT9XOIv6jMeG3HS5\nMYX4XlZnj7VnQpWggw4aVZbZBK8w9MIa5rfqlEWoxL9HVp96+JhPqc1AsmHU\nqpExhPmZG5LlXrnTGZxwrT7H7jBPovYg0j9WzVGq4nCs1+uU34u3RLtROwy3\n8AgE48It9Zs/+Ei8Q6LKCC8Uam2Erqvxm15L1LN5CzBlkBNsEs8y8JhFBV2c\nBtD4aaDIl8lbEI4uGth3CB3J0rfEfTGT4BOgSW3pt6ecydCGqF9VuesnvGr1\nCi5c6bnT0o+s0CSRFOq9t5UEzMcWcvW0VxAxv2oeSYiL+2USnu6vDwK6hHs2\nUEXP7URp8OJObnlwWknNRqAuQRtxOgDqYerCqq5yzpNlrE3j6UgcdcFKnz5d\nDSh7s/S4qCd5RTiGo6Zjr0Kdxv4dsA5TYAnDd2ekxEoZLtL7ORMgMLD2leym\nuTM/\r\n=XymB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.9ea52070f.0","@material/theme":"7.0.0-canary.9ea52070f.0","@material/animation":"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-indicator_7.0.0-canary.9ea52070f.0_1591030133676_0.5948438697094687","host":"s3://npm-registry-packages"}},"7.0.0-canary.d86ad3b60.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.d86ad3b60.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c9c020e57b1e27f4e31f37c78851acb867308ca9","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.d86ad3b60.0.tgz","fileCount":38,"integrity":"sha512-dcv2qdSKMSky1BODS5uaIWrDOpVl7QCQlMdJZeOAU+pQ3dYnVukoc8PJM0Pni64TUooMbitYDavrt91Dts1kXA==","signatures":[{"sig":"MEUCIQCbVHtM9/3SQ5mZkPdm98Df22hcOoKXmu4YHTwjE/FmGQIgLQUwJwnOQ2NXWQuUCOClCVGdTBIZy3vsbkGr3NXaLMM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1T96CRA9TVsSAnZWagAA4BoQAJxya6kH5eMTD3qrfRAJ\nfcmUus+C1olNiVFijOeotGhBVTejbW4Rm19UKgiXTruPoQbBcAPDwJofx3lD\nA0FF7P98McQL6uz5JCz8jkc9i1GYfvL7bqEKycS4d72VbYb8YPRtk7gRUEvt\nChVnVvMsZZd454rr0TyaLv3A8KEFH0u50QgkrMIShtegb/5xFN4zHam/HNQZ\nGs+jXlJACKM/WTjn3d98NLDcRIRM5QyWRirdFMXil9rsPYT0R9HD4wZ1/OiZ\nqXL+BhegT5W+atJLQp/QhSlZLn6Vet1JQI0+/sHmD+4y/OTn7DofQFyeDW7t\n/LUJOJMC+yjZJEWbKT2l7Fb9j4SnCDvF5LQKcSZS3aVgnfYKGVJjLeoUPxcR\n/EtFkAIkcO/f9LPsexqj/VDZ/+KWKMH5tSdSqRD0kpjbp6Y70RukYU/qfb3d\nBNIbnbGte2rTmUuf6T3jFGZFngagp/T1V7O8QzVBJugb2JzduznzYgz2+O6U\nGDLREbDPICUejimTZAjW/dc92Haqtc2Eczm4coj+mcvSZEAKM9veNLtIU8E+\nI2CgbpzGQ5DDo8rX0U7eExT5xK+W4S4KECbjk57/C1aMDmVtGf2lgifDgpLZ\nkcWBiVyUkrmNymyBN9sWb5xC0/0ko6XVAbV0rHfL8kLltuBsuozxfvotvUm+\ns3oC\r\n=lywg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.d86ad3b60.0","@material/theme":"7.0.0-canary.d86ad3b60.0","@material/animation":"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-indicator_7.0.0-canary.d86ad3b60.0_1591033722034_0.5124466386407249","host":"s3://npm-registry-packages"}},"7.0.0-canary.b9776b1d0.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.b9776b1d0.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"b5c76f954d4ccacb2857b77b11ea815cd0198f42","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.b9776b1d0.0.tgz","fileCount":38,"integrity":"sha512-glCjWGPheC5KBMIrcIxgZUbtoggemXcUIHTSy1SVbSYF4hbyu5eb82/nLWscv3jR5yJUAElfRLW4McWpHFahNA==","signatures":[{"sig":"MEUCIQCGR7sV2K64LmTfXe/Rew90rxexFocJPOUk5I0Q1kXESwIgY8d3tKm1c5UGpurLyGfyK0gMgjFCVCigbO9rNqvQ+Hs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1UgyCRA9TVsSAnZWagAAiNcP/R9tRcPK4CKlV9+wI+J9\niCl2T9Aax6RE0Kv+KBNUWApvTMXwWb0JsrA1tU12+aRe3RbqkEgm0/Y1QSjo\nqo2yQEYGQwYvpCsb0FqPVLPjaRjy/chq2VPyr0+0LRR5/uJKP90nMKg5w+h7\nLbO2DuXxaeIOcQXXlM0Sidg+3T3mly1VuFQdDKgjrzI9xwwoaBewVc/NDD2G\n1t9cnRDp1sAc1OyBsg5j8BxpbSlKYTIReKSjrnYXi26sa88ibOl69PJi1+na\nUyNa/vRpL4BroAXQnHlBD+SeliMJMYZn5qkwcFvPp4/+TlogCTURmx/PP31D\nq/GHgGHHPOQ7l9voONBWPgkD/hGGcPuOv6dYZ222Sf/0zKAwnAV89bP6LwoV\nGqwPZk5d3f/+L5M/4xzf+41GvKxEOCC85EbGNdCBev+i8+p4bb5X6tP8nGAo\n+ZvaOKlqey6OZZjd0Em2BuPPmp7DJNelRL1+u11pbumLI/IDF0YFob1g0iTO\nPg6NKHndvuw0O/vjDsTEfQPus9mpWJkpADDn2IT1SQ/39tQmw1OyW7d5nueV\nAZOZycuUTuvhjeyDQiQMnYcnCjWxMP0xGHa9pCi9uPch0R89Ag1qd7i3dYkP\nhyphjslW2nfT5kM9jI9uGCM7C5rdNphUH9PdGu8gWxiKYVFugiCuV3ifUPzE\nWEsR\r\n=yoX2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.b9776b1d0.0","@material/theme":"7.0.0-canary.b9776b1d0.0","@material/animation":"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-indicator_7.0.0-canary.b9776b1d0.0_1591035954077_0.561186453285401","host":"s3://npm-registry-packages"}},"7.0.0-canary.ba6f7c294.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.ba6f7c294.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"8b10864cba086c372b5832d905b9ea39391cc861","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.ba6f7c294.0.tgz","fileCount":38,"integrity":"sha512-2XUZ+O3GnwRro8wlc0J1pK4NrfewYxcQyZAxS9g84I1G+TWAsGcwODRJ336oNwH1HPiXl9wbp1PYGRlSyfMCEw==","signatures":[{"sig":"MEYCIQDum9gkITD2zNsK2A5snHBdP1wG3ZHvArq9P4q3NHulrgIhAIHhxUXUAFUhsDb1A38m0SmAIiNlI0H70naj62Czhe7z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1oYrCRA9TVsSAnZWagAAPicP/0WHPn8MHnrvD1/AUeU1\nPvGPPGDGcESCbhUVtYkVcIxwMvlMPPUFcRiopKtDlut0Oqdz5vmn//v7YcG8\nzcn24KsAoFIGsmSmS9cZe9Pz0niCrDHWV3tIjsyy1yxu/R9T72MDJFbbc41k\nJmhB1Nu9lurIauPjy83Z4yQzxZDgDoQCsBOwdjNOTytkTmHg32LTndjR8GAz\n7Onn/47YBT2VYQ37xaL+roj5e6FfZcrn6vwZ8V7S3GDHcEg+FcS3nDPNF0B1\nNlUCDQG24MaQaj2JbiXzkVGZ5ynb3Bd/zK6xULWunOwEy/fjc6ZR2QxGMyJy\nt/g3QO0xbFIqz8n0J8eVmX/9r1NZLLlRVQI8IOoHiYuugSqc87fcvH4f1JJ4\nx525lPFVtpl6RUz9G6+y565otWIk6qgh46ygoAPFZ3kCdBMSci/75AMEoy7c\nDMbOSA/dDMB7AraFPCcabE4B3SIV82W3WWFJhuddvY2BmApnm9IbAeyTWRcq\nril+jlJ/5JcnZQ6vv/p0TZT4e5W7uqHYmQjbBD6G/Xv+ZDPbwY6/LZOZBxvT\nu9rVw+ButCOt86Xdr78gu/VFhqvwxfkoQAvpI4/wu+WEiyk+j/qPz5b4gcK7\niYSFJFlSGTnncCrTaxzEHziSMdTHvMqKfrtTqFMjJ5aLxp5ASqysZ/afqUZD\nlzgl\r\n=3DWS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.ba6f7c294.0","@material/theme":"7.0.0-canary.ba6f7c294.0","@material/animation":"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-indicator_7.0.0-canary.ba6f7c294.0_1591117354716_0.80150627033801","host":"s3://npm-registry-packages"}},"7.0.0-canary.cf3b664ab.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.cf3b664ab.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"61914113e1b340a8b900a397212158a32fbc241b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.cf3b664ab.0.tgz","fileCount":38,"integrity":"sha512-CGIstoPMki63lyZmoswZ50qaAlwkvpqy5zM2VeWwtWDveR1j8C5olp9fe+uqPRvJ7sBfMeEx6We67POgTxRteQ==","signatures":[{"sig":"MEUCIAf5jSWGN2vtAKzJUmiFJrOO8KNRTPyqrJwRRMmdMUVtAiEAidlKIxx1Oa8MwmRqcOsJBZIty9eV+uxb/5DZnOSCzPo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1pkdCRA9TVsSAnZWagAA3PgQAKGtterODE72F7X8UDWX\ndDNnXA88w8ijo5JQkplSyWALjdzR54cEhwok5/sMDbNgwGaUIqWGUOho7lvx\nLd5LwvKSrcOid7nZnCGxnRCRfI1dH5f+PFzgKtb3aYn8C4ZM5r+5uScJnWmB\nw7GKjm+7yoN++iM8ArGt0JJf8yNZqbr9MFuU6K7Sx7OWLSSSDRdkieAwyPWn\nVs61RHu0iz0cK/iV1Alqn/ocCTQzHAzEGSxLt1hpHsOI6pBCBPIzQqwqqrbi\n1K/xGmYkbnaKvvW6hCtNA4tXJGJHa+M4M13Bfn+zxIpo7hxyVZNSxqfe+4BW\nL2ECEx5cdwwBdV0BvTBbuecHQGLfO28kU4yllI9QV+ienZzfV0bNx7rftpkH\nieKtlS58/3FbC3JKQJguBjCKpcyaismGbmfgKWZ1OoMZGv6xZutWQIKBOt/Y\nAPnuQaf0B+BkfJGZ2awpNydTSXzaKqb+BWrY7P1EvDlsuyIHzeY9FbMOxAFG\n1XsphHwU+841fK0Dn9SDVRJnEj1UgSIeY+H+XmYuUVK3PQAtLaRB83cyIf4P\nTP4tPAN+DDVyQ420TI5MEhhSA46HW4+g9Yt3a8uWSYvFJOCr+IJioAwenqG0\n2L4wY1DtNhxouQL3OVQJ3dZ4Oew4DynprivJVI96Q+jJXUJ/kwQmU6e3Kh4s\n/ITZ\r\n=ffZk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.cf3b664ab.0","@material/theme":"7.0.0-canary.cf3b664ab.0","@material/animation":"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-indicator_7.0.0-canary.cf3b664ab.0_1591122204651_0.2928373385004277","host":"s3://npm-registry-packages"}},"7.0.0-canary.4ba3c9a31.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.4ba3c9a31.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0ad0f4e1617d261049985ed53c1ca140273f925e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.4ba3c9a31.0.tgz","fileCount":38,"integrity":"sha512-HpNJJ8vKGEe4gtSf74UpGsC6tZAzm7vafYgn+qR3GYFF59knJ2R5h3mYKD/mmpogbBIP5cshO3C8bDgPQDv4Ug==","signatures":[{"sig":"MEQCIAz6Du+i43QBAHWM8DTwIY8Nl66ORZf8ZFB3/3DKY7+bAiBLZUqDX+5rfkx9kBYGxLhNPvBRlJQk02iboN9aSr+5gg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1uYoCRA9TVsSAnZWagAA7foQAKFAC6HbpFTuyMvB9teg\njSGQNsXx0lneNn+d2FSjPk9Q+f1bV3h/Dz3Uwb/6IdM2MWbCMVMZJDR1VdRb\ny2bCE9fvt/Lz+oDvOzqMD/RbEKeUssokh6rs2eAnUz7sF9JTTwgefKDsW2jO\nlGFfCKx+E4AMtKglC1MPs73mUt9WddNB+ALgMQCwoKolIUTipA0p4BOvahDx\nH3gOJVSXp5q+I0Ot/LAXa+3pXnwSik+KjRJmeSvBzh2tZTJ04A5lZqn8WhfZ\nP0+krS56Jic5s4WgLYBJGMe2t+IUEoaoPCMtfg4Hv/ytkrcUKR+CjfvBusz3\nyOd6y0xydWuC3HtPXL30jj9h7iSteBnB6eEN60kxpfqqTJBfT4A5xjXea5un\nykZSCLGO1k/Y9VtI5iClS4zR/GExF2Bg4C5pg80vwxK/uBOKwfe/Z7AnlQl8\ncraaEffFbBwP/4D1AvTqPAzMICAPFtB1X9HuR6t0PPgBLAFGA85Hi+wWFk5P\nIaB4RlcISrGY6YbQ+tBouMKRwo032TtIh4gYRmgb2WpZXuapbuFJyUCKObcU\nq7rLhiCwD3MA9I4ELV1s/3VppUw/OAtTZPVH+q6Z4MJ3KV4nA5eaUf7aJ5rK\nEK+hqrFjVY5HsqGp85ZYnlD67auh1cDlaKoe2K/CuW+EpP7NuKBOy+Cd1iU3\nuaRi\r\n=+fo0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.4ba3c9a31.0","@material/theme":"7.0.0-canary.4ba3c9a31.0","@material/animation":"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-indicator_7.0.0-canary.4ba3c9a31.0_1591141928220_0.64164972904956","host":"s3://npm-registry-packages"}},"7.0.0-canary.388b042c7.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.388b042c7.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"3f1100af8bf9a94bd33ed13be0669d74dee398cc","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.388b042c7.0.tgz","fileCount":38,"integrity":"sha512-dmQulzydHoCsUYGZxdj+PTXhbfpmSEKiqISAk+I9xQw/4w+ieHAaxNPbrSemZ5dVZzfAju70hvNZf+VG6SjvRA==","signatures":[{"sig":"MEUCIFhFyqMnorwJZ9+Li3DTpQRyL22ZGoqBerQPn/jM/+PLAiEAh8j6vgm8zMNWWwGGqb4ix4q5YvymZGN0WiN8vhNMud0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe16m1CRA9TVsSAnZWagAAIAEP/Ra+dC3rzecptB762hqc\nd/qZrEPA8O7iMFEDOBa89uLOsNhWuCB1g4vGe+tzRpm0NicuZEJsya7rwcla\nb83Fo2+37ectsE6/S4kj1L9iRSPflxqwvY+KZh7HiLsP7bc2tDRag6zplvaR\nDIMiA2LeoCK/iJ2f2CJvCdBd8GXbTzLXHutWc4oMyTk8sFFG5MU6RtntMoZg\nq9S6XtOU8gC2mZ7uZXIVuf9HAov1KsujeF1DEaauTHaoODeV/L83pAbVKa1d\n5JTbqLXCH444DGvcUvW9ZZryk50i7H/ZPOWxneRNKYzuzlbHyrwfqi0YkZU+\nztgovSsziNMAeExZ6z1XRIavDpuVSCImKuFakBZKbCqmd6WbdS86V/9nHfsH\nfSgsy8LMwJRvAk7aCWT7Oe8aqgZePCqJILIXrHy2TH2Kjr1AYvQL+M8HsU/R\nHDWi7sOkabAFZs+RmpoLHPqlOgOGz3+eqEssiSe+NMPGCZuhGYTwZVOsq47w\n3O9Lnxk8aT61dsIlDurVmu9TS6hCyXIqnNSdBX6tAkMjRnOeI9Rp2cl/P/v6\n/ilUYvH4Er+jgySLxwwOJ4GeA4tzEpV+Yum1oQb+fM/sK9B+IhN+aGmmtUwz\nguV93rnnCIdcYHkMREl0OBrTzWfjrHP3DB6RBxRf44eeVIztTgOd45E0AIGA\n2EiO\r\n=4Yp6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.388b042c7.0","@material/theme":"7.0.0-canary.388b042c7.0","@material/animation":"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-indicator_7.0.0-canary.388b042c7.0_1591191989191_0.8730207051296051","host":"s3://npm-registry-packages"}},"7.0.0-canary.cca1ca84d.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.cca1ca84d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"9a90112636f5fe93189b8f2c2bf05e3b991a4927","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.cca1ca84d.0.tgz","fileCount":38,"integrity":"sha512-ZH4CEAICCrQsT1n93JKi9Ghog08krtJ8i3iv0CeirdtAzf24ZjnblGDmGAK4l6QBl25MWbS950cnKwnc3sm1Fg==","signatures":[{"sig":"MEUCIQDUjNTVcNqS8LTVaWQQ1ClpkuIwY74O8g+frXmIpzIAUwIgA4wKQF4AmOgu1/9HxyWrkB2ADGqXmuRJViS/QA3jEKE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe18msCRA9TVsSAnZWagAAVhsP/3FS0aoSyLF0ht4vo1vl\nAynDlp2qCTzxPXE7oZQmUfsS/63qh+qzjwgSRL4rCDTFLFXqfAgBn7MR6WAS\n05NXFSUw1YJMowxTlKD0VgmJwzC883P6fIzrwykZinGkZXyb68Zu94Li1FbW\nPWtjDGe6YB1umWSnVDMhuWUjRAkfGXPPuF1I5QcpA5efvgl68CdfHKhS9YGC\ntXLqrhQZFcee88h8pas69tSxbjuGMkspId+mlPjdqqR7rvDqBnqYMzz8DQ89\nj5c/Ttn3CYOU4+owuN+kMO8jr/sRfAwmFH4efepJhZLifAwz9iCGVgG1isEF\n1R7/dzeLH36UtkderX9NRBacI6GBMIWz3HoLWirIFJRHocv4PSza/uFkmleQ\nLpeMB7FeNRuyf24dKAOIFD9Q6xJDmKlyCO+VpSEMKghAvMrzD4YFmqew4ntU\nHLy0kS4QC9o5Ohqs/jCxVJQsWrabzhwqrTadeTSnJPcH6ZaUZts7mD9Upzm1\nn3zP8ejNQ0sbrK1kUKwYpXM1SEi1fj0clbE1H7FDlYYwoKjnIvcEOWQYCscM\n0PqEOYrwZ3egUQ6fHlRass2je/W9VGda+H27R6CQKMZsIL63SH/CVv4xwYPO\nlorE2ud9FqsMNbospFQ06opM3GdoSAtE721fq/Ut1el/YOWpyEhxX/0cdHMi\nLbC4\r\n=8V6P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.cca1ca84d.0","@material/theme":"7.0.0-canary.cca1ca84d.0","@material/animation":"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-indicator_7.0.0-canary.cca1ca84d.0_1591200171952_0.22216399902894723","host":"s3://npm-registry-packages"}},"7.0.0-canary.9b0b5f2e0.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.9b0b5f2e0.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"202e84ea469054cc7450de824b6fa80a31fb37f6","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.9b0b5f2e0.0.tgz","fileCount":38,"integrity":"sha512-dGyvbITKafwYcggnIf9eb6k7UYDS/GrdvAFRF3yuakYAJR61kGl/GBUAV3d5dxUZRIR7z7QL2wm4PBl3cuDd/Q==","signatures":[{"sig":"MEUCICboQ6GmyXusyorO39N+zfeVIrXbP3EO4Wgva9ztKtmgAiEAiB6z+GkgL/+h28O1I7eoKh3FuOLB/Ic1ah7eQMVkHRI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1/KaCRA9TVsSAnZWagAAY2oP/iUCczcnoKsuiWCb2cQh\nzerHTtuHNW4QA00yHxrZtzHv9vY+kcjaWDNxGPUcWqWnHlPI6/4vuxnMfmN8\nutBzteR3ZcjZ7DNAKUnabXjMHhU9itBAHPlN9+Cow2wHAn69E8abt8qVtPRu\nh8PPVO5sv546sVlojWh6Ei3oXFD4LZUvoxONQSKk6MgCpghh1y/FugrXx1KT\nsKLwBELGg4Su1SbXxBgE9gv32GPLaADhez+xrprCIvyO4/AV0R848+4Spja2\nbyGNh6Uqz7UmepPU8O96+BwgltHNsnKFxBonNN1kFt+oCVqiUFh9GcRKnvoD\nHGyNSnKnc8qkN7eUgBmqBVv0omAWZVgPc1Wz+zzU0wSCwWwkpDP+Bd5cXsEs\nwIDafxtPlGMaIpvOHC7/g4lqMLPETwDPL/ESbBWlnIfqeskMLxXgcSZp2ZM+\nsOqZ+2YJHpjErIxLTKEB2zRV1JvbFruljjKM3MhZ1xdximUJ+t8vsOkKBBnu\nwRqelBrp2IKjKDcR4Q1xjq7i5B6RTbx3Vz2ZRie3JbsyO2p/RicnP/Iw0van\nzIhLptAP3ytY9NIGfb4E3NNxtUqq4hEpfD+ZuZmKnHRstznIn8a4uaJL2Il/\ntHM12+uoCE8d1+xgUtiDO0yMW5oGOs81dXlYZt9DMKRtaCf4M1YzQistBWAj\n4F14\r\n=1jZk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.9b0b5f2e0.0","@material/theme":"7.0.0-canary.9b0b5f2e0.0","@material/animation":"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-indicator_7.0.0-canary.9b0b5f2e0.0_1591210650479_0.8456624195461169","host":"s3://npm-registry-packages"}},"7.0.0-canary.0a7895f4d.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.0a7895f4d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"f6438c370b633e87213f32abc3ca5a6f9e28929c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.0a7895f4d.0.tgz","fileCount":38,"integrity":"sha512-byYRazLjjxScLCgVCyguiEkXWIDH6jA/p0OKuaZ0tCSd5j+DRBSz+OCkZyeT6ZpvZg+60rz6FhRKvDaG6sNdew==","signatures":[{"sig":"MEUCIBsudEcdp3ZUCWBG+XKpUBvVzjMEgul8tLMg9tNoTRTFAiEA6jdGFnzDw/wecEZBIY5W8edpT+i1gtwe47fH0C1kJFk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2BFpCRA9TVsSAnZWagAAg/wP/1K5Q1LgfrpDzZzsI1Tq\nwoMRvQJCZnWP92naeXD7zUX76kOYP+LvcfPtMWW9udOkqEvrInkaqeJ9dgZT\nTgJDQmGNGEFIpuaTvqrWFrxz+50aE65BDsYda/ccvtH83S7I9j1PwVi27Kd2\n0/o7m9RX2nBgyoJqBPyrfExaxrlydyceFHfNcP9sq7zwVjMh3XQPKa0Iz0E+\nnJi9frINPB+d/VRrHiCqmVV/OVt+uu5grZQ2Crxvn/4cNeHd1cb6QzjK4IBT\ntSg3oORpLmF7cPmQA8HFNv28qMJCk/HLJFRSJJ2v8EF3MH2p2xk7dB08QQpt\njFkppS8BCyPnFHus+EHtPeRgjrWzt7dRWIT6vAIEzCxyRC5GsdLtstl2JnQi\n2mtukI2Ks3IsHfjru/7Z6e3GdcAftwbEn4i9XgYi20Gl04i6jMlqr6/AW0Iw\nk7AtXAgYP2xpW0WMsT3BQWhliFpdyYQmCW5hXVOVsO6gOox3z/USulU2XtUc\nRMLH3EGP/R4GBb7pxJyNJReS2MFvOo0p6vCH4mtu7WyIH8g7g/rNuGI3NWDD\n7Rcfq5EpG+m+sqy0rBe5xtlhoyrX/y5lw79cPDXuh1mrfsteEttCkwxmFvZA\nSJ6BaTH6FlYW5A4Fc1A6bI2FC+hP3z1s1UMctuBxz4djuJgugnaoC4hdjPdt\nGLX9\r\n=Gst4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.0a7895f4d.0","@material/theme":"7.0.0-canary.0a7895f4d.0","@material/animation":"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-indicator_7.0.0-canary.0a7895f4d.0_1591218536715_0.09223752237219518","host":"s3://npm-registry-packages"}},"7.0.0-canary.7461aad68.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.7461aad68.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"74856299fbe85fea1d126ccc0ac51b1acaedcd50","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.7461aad68.0.tgz","fileCount":38,"integrity":"sha512-Y0MB48gUmoxfhoY70iMve/ONzCn+itjNll3/aHgDTf6RoC9yR8OKtCQNEb8in6x2fYUlGroaCActv1REPK4+/A==","signatures":[{"sig":"MEUCIH1yleEx/FEp0wM/dXik5pyQznCc/C26XRnwmppVOxkDAiEAnAHEAb5Qak71AIV5eCRKiChBhToIELH6frDfugbLx28=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2CA7CRA9TVsSAnZWagAAndIP/1j4f0BH9c+52bdj19+J\n1NTnUxAzs3TX4MBnuSHSFvovUSY9w1nMip4gAGS3NwbQDoaB56MCx0tMMyeD\noM8YTNqYdfEn/d79fUoNs0qnWuLiyi6tdnLe0+yMwO9K7YigGFvSLHhIVK48\nCODGDMcVfI5ytHl9U5LC6JN3s3/2t0P8xlB+ekZkrFX4/+Iwxy7viS5A6Z2i\nVPDINLHmW8OkGCfcvccdcRPZ2HBVgc5r91RnGtPDrQBX9EAIjQn+ITS48JyY\naohb73ue+NcEljA9I7zlsNwY8ZLeDz7Bz26K60RCpECR/gblwZbZoDwQBow0\n+8ubmoKdVMAJwZMveNQMPJB605b9geAVzv1MoRNm/IMQ2ZGBiVwy0qU4mQNJ\nBBZ0A3lIWSYcC9/kj4AYyoP3649MPrco2O7096Kj0f/0BVc1pmNo9QGWfVe4\nAowCykpWmMjGdWSc6ozEIDxXx04rmvJ3/WhLKw/cyV+e9GO2ufPO7KLE8PIo\nowwXw2rPZ2bz8/qX6+qMT7eT+g52gkjgzprML/p9+4nHqQ1ne7drTv70UuOC\nf09cyXM5PNMcgu4vYDDl0UwX4QGT39nwEdob/XIFvWm3h9lTPlBA3A+n3XQx\nj1LGEAk5rbeWaj82MCZ51XFGUFPliKT7xM2tyNk4Clh6aMBSXC3mvywMlhwF\nKtSy\r\n=lN5r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.7461aad68.0","@material/theme":"7.0.0-canary.7461aad68.0","@material/animation":"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-indicator_7.0.0-canary.7461aad68.0_1591222331274_0.049576078495876086","host":"s3://npm-registry-packages"}},"7.0.0-canary.a0dc2b5c4.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.a0dc2b5c4.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0ee796af775efefacbd421cd0915489ff2598c5d","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.a0dc2b5c4.0.tgz","fileCount":38,"integrity":"sha512-e+6SSYG+aW+ZjJY6dpykJ2dnGPMBjR2FMjFFZwFEo245wsoBFBI8YxE8meKjeSBxN1x8LROzaUe2PDouR9c/RQ==","signatures":[{"sig":"MEUCIQD2lRwoPyCKzpRgI3e6mAtt/DDUanruWhYsi0E4k4iWuQIgWiF/i9048y7Lwrh42GYh461CcN0lwi/69NrXvvhTEng=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2WQVCRA9TVsSAnZWagAAKZ0P/030O7bFYsOgpeItVvhH\ntezEae/YcJNm8w/fBiFYEXTZqOjJOeFb4Swxb8qROL/FSQu4dg9IlsBhYUHL\n6wHfLHFxELtpdi+CFIUgbsrREH+E94+xW5ePvW05G8BwwuIAjEKMvK4s6lcZ\nYeJ27xQPB3b2Hs7XYj3QfbHCJmpKpo3y4bjiiERbgGs5ehvUFwqHCEGxHzAy\nyRSpm1USOc/1NayppPKVGqV1+hZia92nFfoTNj/FKpJtKTZ0OMMlWBcsNIC3\nSYv2R10gU6C7J085ROY0nUF8Hj+QeigrxUKycpMKtV8mqnMgIkVayap8wQOh\nHsqzcGE8MmQfa80NcybqhitDg+10gZOaax7FnvaDjxNbcIdz8LX+dwhkV6YR\n/na2JprwJ4Lh7p4vX5ZyPpL8xC221UT9cdTwiy7SMQQZcPgKzdaNKTMKuKQf\nPNwpNvrkHzHI3tfrVC0JA4/ipe0CT4LDEWF0vJlj5Z2VJ8QRwCNzxrCLgSls\nzvt/Fwo1+HpT+arXYvGJb6ikXr/EI+7UV6Jei2VS0TtXyJltcTWuBq1T7YdF\nEtomz2yYtjastM0wzOiT5+NBmSDFJZalcOA2dbcshSVIYn6fTMuRJrzDY2+F\nPj9oECO5XE/oAXsBBmuf2AoXN9goEfSqfdaS3JdU5ZDfsdpBwmh3vnGkBnxs\neN1f\r\n=2O7s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.a0dc2b5c4.0","@material/theme":"7.0.0-canary.a0dc2b5c4.0","@material/animation":"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-indicator_7.0.0-canary.a0dc2b5c4.0_1591305234245_0.9111680549852883","host":"s3://npm-registry-packages"}},"7.0.0-canary.2b420c5b3.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.2b420c5b3.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"56b22133c3cd6bf7f6cc05e905446deadc33fdc7","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.2b420c5b3.0.tgz","fileCount":38,"integrity":"sha512-J/V4bMhjm6HCixvxeInGxL0qVg7mrZ4x4v5ZVRtemZFGa5lpCdFk9QwYJGcWVdu+KvyLW2XSWrH1Wu1c+dYNVQ==","signatures":[{"sig":"MEQCIH4UckJzHeRM8P07KjWEGoCFsmLE1PPpTp6zeeGfBXDyAiAtCSujHaMEAJViF/HQhrNRvxxY6GSS68yTRNEorCIs2g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3mPbCRA9TVsSAnZWagAAC3sP/i1smUcViyt76uC+nJS+\nCvuJuDOCF7OZ6UbGX3/w4oHxv6QR17gx6+6dNLl7rO8lUryAXqY41T/2SVUh\nVtmB+fySWXnFGnZhg9h6aVKO/E5bm/LXA3Q+Vd+OQJ5sYmF59z6wURS1VRfj\njMdaqx4IQuXMzy8Z3YBzEXTl0c1UdkfK5ZL2AFK+4mfmkT8dG3RvzIsffXsC\nU/oZk2tDOHuoySaHflvune4MqA7GH+Ur1cmAMwTvlwyboRdhBaiv9k7xUVuF\nvAkNT2kT5fWuMsUMh7b749VRWSpnxLTItOrlCuLzaKyoUJb70S7lP3Szn33+\ncuLvM/okLOY7Kt7/qawE/ue/CQSdPlvhVt2vJfm4plIOZALiV3Xku0M2z/OS\n5t7/kcPAFlnZfatSfIqDj3GfewccEW1eSVZZ6ExWuWelDsc8QP3kSGD9U6Z1\nTfnfdaHdqSShSYOvEMTFdhasDziRgOxgKPxf4c88dxKwCYm89HsSKhAao4uy\nj0Ol/2f/NgmDF0wuJHbZ5NKyrtrFk0R+UQfmuxYVhbQA/bx20yFN8W8syvT1\n/W4jueFJdxEvhR/GMzfQ4DsNOhqormnpXl6Ee7+EQ0QBFJAUtnOTzVK5fwSu\nE0JBvYNcRzfe1axldY2piXG5o7mC25zIv3oqQFlc0Pg9AQkdkMOWEGr39FRB\noL9a\r\n=11Sv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.2b420c5b3.0","@material/theme":"7.0.0-canary.2b420c5b3.0","@material/animation":"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-indicator_7.0.0-canary.2b420c5b3.0_1591632859285_0.11032899063821544","host":"s3://npm-registry-packages"}},"7.0.0-canary.8fa22aacc.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.8fa22aacc.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c2b9a82f4ebc200d0e7175e739532dc97d1fc0ec","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.8fa22aacc.0.tgz","fileCount":38,"integrity":"sha512-cEeMQrFFZmCtC5dF3ju4PVyeI9+q+f/4ZgZqGd1DV8+VqTRWRIg2TwN0a3Tw4CaECnex7sl2MA8QdhBdc5Fn3w==","signatures":[{"sig":"MEUCIQDZLL5QyR+jyvOYVhC+uOLw69OzTbMXktdbB1lqfH7t/QIgagGLitVh1biJrkPw5gfcwrb39qg6Y7m8+1jHnNPlJTg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3n2pCRA9TVsSAnZWagAAkEsP/06ECSsa/xh8n5PecQ18\ngGDZra0eAiZscQZQ9U7CxG+y4D/ayEECrJzc/qG9VkLRYgrxFbhfEcQjNdpT\nC0CWHuOMRBS/j0UuIn+rkwHdkC4q1m6r9+gS1rJjyibv8r5ZiYJ2s8uiTcri\ne0dW53upjm6ls574moCofJo5b1pg9CUMk22j4ZAFl+m3uokYz5KVbmfGCz1m\ng2s4MAL3j+EihVEGAgXnJbNjFvVEDZE7T6eUsS0tZjOrHobx9cMgtCxc3Rxb\n4WeadUIiqgRwLno8HTbvx/l+6WML+yI4xRYZZqotPzukZtGyO2d9410KmWI2\n59VP1J39WSYNIC+K+iyvh3/AMchCFDsTItOPlm1/y5qnR3R0bY6EFb3vHtyF\n0iAusrBJ8ugcwY7R0KnUCJ4KjYM9dWyQiaiFreAc8FbSNtvlmbPpZ+scIBnB\nEuJLpwXRSFZzxAO7vNl9GeKFc953cFVIjAJiIWZA5nH5n0v3cbHfDOyWTRiQ\nU+fO5tGAKClc9udoOZJxwr6ogdBQKe62JMz2yLXax626e7tUG9bH80jZ8vym\nVyx27NB7C2mXm0726ENe6JO2k51umcKDH3AXt3gZmBHcH487BFi4s4elWUDt\np8QgaPkfmyf80Kaq2vy4FPHcQ57e1rrzDHCsu6shVfCvyG1YtkiRQloe3NYS\nGhgl\r\n=qr7R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.8fa22aacc.0","@material/theme":"7.0.0-canary.8fa22aacc.0","@material/animation":"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-indicator_7.0.0-canary.8fa22aacc.0_1591639465375_0.6508798565978997","host":"s3://npm-registry-packages"}},"7.0.0-canary.21c4e4ed8.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.21c4e4ed8.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"364b3a7d5273b0f45883fb1815ee1223ba243d65","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.21c4e4ed8.0.tgz","fileCount":38,"integrity":"sha512-TQ2vHbPZt5fwswepVXZykHY+2t2E2ieN36nuzGP/sY2U9f5x8eolwDJpqGkbTwumOe5BMW0d+qOaQ9q8yFKNdA==","signatures":[{"sig":"MEUCIQDjzi5b/ubRad4FuRpURTTuHcpT9SrVyofqr6JCnmMRNAIgBjMDrdUfToPnXJy+CLlpl3hihkwKQ5wZmHhsHJ0wp/Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3ob7CRA9TVsSAnZWagAAExQP/iBBts4y7Dveq+qz4fJi\nKhxe49JUra2TDm183p1pE/1z+OhYdZbWWeeoaV7XSL9T6/RyU5+sV5OiNIw7\ncp9QWAWrkEKaT1ScmvBRh4ieCcbTLSRWOcI/91LkyX4Tb3ZcpMSznIXZK6sc\nCmIVtHw2BYSzQYym6qjaHSGIfVjLE4gGTBajMKOw9WORLlCdyoFUWTbvei+N\nw5z2BH6BxNlECYN0AmyzVdpHGZGC9YRZS7xp/PURAYFwGxXBtN0nTbAxKUz/\na7gTLBODlaBrjRfMRFKhbSdfviLJgpT+JuyfB4Dz3nSowG0jsPjZmGb14IBV\nhRFs9Q5UXvja/6huoGqB0ByfpJ5hZ/t8gBhNgazK0hJ+deiKmd3iU3kNBq3z\nG8YbfaSn9aneHqHUjrzSqfLxVFSP6oN9kdrHPFQPUM5spMjqtrI0cLc+qYgp\nIeO/VL5j1RvfKbkKiuP1EtW9aUj9Dr/qg/gQIdTmdjNFLC7aye4P4CJtA/1j\nrAYFIf5mwHdsW2SZqKZ2TEiC0alWW2vQTHheDh9O3qdybW3rfH4wrKEQcZCQ\nHn/criXPbc+6v5mGu0TRsRh97f3D8nbhs1y1JGC6yfqAmwoYwKwaNw5k7eNj\nDz5RZhycl5LtHhF9FNfXyKJBzfJH9jCiGGlw6bEfa7L5ispPjExobOYoNOsa\nbXoG\r\n=0oye\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.21c4e4ed8.0","@material/theme":"7.0.0-canary.21c4e4ed8.0","@material/animation":"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-indicator_7.0.0-canary.21c4e4ed8.0_1591641851168_0.8287403343733504","host":"s3://npm-registry-packages"}},"7.0.0-canary.dfde46516.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.dfde46516.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"5ad9e22f229b66f4d84f99bf4364a428e7a71b97","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.dfde46516.0.tgz","fileCount":38,"integrity":"sha512-48m+ggBkKgIGrq1cTSrVZvBS61BykppXLwj78Bkx6v5sSJZgtFKgXi723gds/h9ac6bbAybQTrb/PlZSZTUbrA==","signatures":[{"sig":"MEYCIQDA0KBn2NYniR/FGXrs+GNJmYPG+xRIEpT0TjFDJy/ZPwIhAOtIfaQqhoyM0lCVbW5srU09wtDhL+WoJvlsKndhyS/E","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3pR+CRA9TVsSAnZWagAASokP/iTrIuLM5XGDAs3ikd7d\n57bpaLdwta93vzRroh8psQ7JkaMO7W2LFnUuC+0hsXdpL9I1lWYXAxUDxKVv\noJNhFSdNDYs5TLE6144Xnkcz4ZeMdwGXIjQeTPvUQrYxID+R+AynlCwiPT0k\n14xC8Mvh9BfChQNAktOlxmvFa9tR/xN6ojTZe8yMzP/FpAXAJ+ilvVytUmyF\nDr0yog0xncPP+ZZn9uEOxx3E+we6tCCpreGpllruTN+djcKpu29/s3UOMDEO\nCPNTPArvdEaJjCjdXLtgboQcmTGwmPNcxMVyLcy76AdNv1WnU4tk7KHaQfqx\nGwRtbLrI3rAQi+bRTa2DwzYTWe9jP7NRiK2KPnM+X3OKRAX0aH4X5rI5enmU\ncPbK9BcX+T7pY12yEc3Z7CPM0R1iXjJqDMGhSysNEfNYXCh0lbrKVsnhbHbt\nyCStfjDU/lnLsAU/7sJsQUuIv7TaJzXEErp6tM0VC1AngGSO27v6MWx/lCjx\nv4YubbnVD1BKFMLhE/oFdk265mMh/GLuuwEXy9XQ3gxXcXONvm9XnSE9noFh\nkQq/eynZq52eYRtgJtHltPs+Ee/GQOA5pURyZaD0hTQVH+D00Ddm8thb2htP\nBxiu00CouRFl6gpIJOE7yyqy6icvvSlGu9Ck/WP5fVDTAEC6WpSss4HeJxSp\nwi2a\r\n=n/4y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.dfde46516.0","@material/theme":"7.0.0-canary.dfde46516.0","@material/animation":"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-indicator_7.0.0-canary.dfde46516.0_1591645310200_0.06519524947360944","host":"s3://npm-registry-packages"}},"7.0.0-canary.05cc5c206.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.05cc5c206.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"a9914e2d44f830699170ad69061bba1a7decccee","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.05cc5c206.0.tgz","fileCount":38,"integrity":"sha512-o66OchM9JGuPD5nX3vZKE803OSQ/u0qPVREY2UePpd3jD6M1wH/gcmxxVSFDdZeXWyNE7eOPDBuuDZNjjeTA8w==","signatures":[{"sig":"MEUCIQCID2R58p6xMMhV7nRVvddIGnf6bW8L2n1+roVgGy6jOwIgRY5g9bEphSFmuRv3KHJ68th8dH/M7JYauxhKOOUOERc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3qYPCRA9TVsSAnZWagAAlGIP/iij0B15jBjDGXU/+Co9\nkDiGTNdQ2nuwth4M3u/Hxhpfr0EHGo09cTHz1IOtOMOERf2+zvS/L2yu7+vs\nLoqTQiaheXH39Bh71EBO/tioDnRTamQkqc8WAOdim5TJBWjkp6GpI6YxvU4R\nbDruS1CF+lXUCnZqXK7KgQRlOWe7obEjakx9rRGFcHbMMo95FWIrTATYQKE0\nWedh9qHmH8XYM8ARAu61KwGbliCYcDdutZgDYEaH66dTKJNbgY77ZFxPkjz6\n+z7vHKwJDGF6hFLmKbRldU2AXDZr4rAHZuWVED+FqTb/HFTBDxoFv8BR54HR\ngawLJQgMFQLC243LmGF0UVTUL5cfK/hg2b+41g+dpuzxAEllTVrZt/ZGfuO7\nGB7SZWR482avfL/JM/g9KIaYr7Wkm1AH7COA4bov2djoeCRq2YXUXS1gF2YU\nlO/oQKAuVpcQZmbfINZAXzB1Bjo2qinqO6E3BPrxq/1Pyf3GdRjbd5nS+Yo8\nzK036gtQ+IQjZ9Nq182Df5dkWJNTUKa7UBbNjjCE1gBxLxa8ykEaQovW2Jqc\n57DhF0k7tQGWX3+L2W8DCgQ3H20WxDxvuenkn0efP2fGmqAyF24uZwQA1p5w\nsdCkt/Fd4dK5gR4/ZBCoF5Be2JM82ucrrVS8tc+Y86gdBofJAFZl9wqZo7C/\nMs1e\r\n=s3Qv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.05cc5c206.0","@material/theme":"7.0.0-canary.05cc5c206.0","@material/animation":"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-indicator_7.0.0-canary.05cc5c206.0_1591649807446_0.8404906462908854","host":"s3://npm-registry-packages"}},"7.0.0-canary.3ee488f1c.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.3ee488f1c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"1d876e1916700f04416319fc0360662bbf6b76fb","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.3ee488f1c.0.tgz","fileCount":38,"integrity":"sha512-2U0CSeppIcUD/JS9/+o8QBXPnZO+mxkf5Jpp6Qr0TX0FyUbYyZvPyTJ6yKM+PYoehfOSEKYv0lBf8hCIXUBtEQ==","signatures":[{"sig":"MEQCIGklhrCYFUSsLnu19Tbo5j5cPSnD5vIWd2KzaIdU/J5xAiBq8WB/xo9BPE3KElUO+SJFkn9jFXdceYUrNB3Wcwuj5Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe36KACRA9TVsSAnZWagAAsDIP/3F0vMJ9ZuAUO5NJKcdo\nXYAEdKmS9VcGRNLK0bPqt2DTaQpW44W8/n7SfVzBWywqPr+C+03LM+JQqqy0\nk97214fA1xDf9IWs4YQtCZmskuAHbMFtjCgP2YnY+jmYBTxYOnpFyNzxcEDT\n1Jccbq87WYApBi+UPln8CnAQFnnYhBPWvTdfEWhkfNUxDoAGw8CVM9U1AoeX\nvPb4/Hpyl8wh89d6pSuwIFSYfpwWDsLxddfZNcqLcQyWcCIGTyaSek0dG+Qs\nDDIE9m9S34pVH1I8wDnjMHfktbB3qFNogLRPM9rFJMCRf/lEuEF2onPsKTVI\ndM76h0zTP6wkDrLAlyJTf9N3OP3bfY5vHd3kdIlQRnHtJlQ0KXp/yV/RQKxf\nHhNOw0s2bmW9LNOrLwLYGv4AGdnKG8nCAwkpVMDor2RxEBoGEk0WcUVcZzz/\niF2yzwdQiUSY/tJi5KVx1GVeBNHw6eWH700HeRlJIaRCidtrCgLuH53mneIP\nWMayPIEdlp4VxwS5mUX9ncaDmOV8sh2h3QCqq2Sw1NRTaO+tQ/Z4d+k1kPFJ\n+T6GyL/pRlrtA1kqdXDf8IhRO/WCu1kF/FlB9HqG2VWblqtmTze+4WqHlena\nYEDibqmvARSsk7lIJATERaNc8JeXHjaXXpOUP/loZ5Ll6EZgTg2jo1sAOdhj\n9wzw\r\n=QQAL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.3ee488f1c.0","@material/theme":"7.0.0-canary.3ee488f1c.0","@material/animation":"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-indicator_7.0.0-canary.3ee488f1c.0_1591714432157_0.09432870824046669","host":"s3://npm-registry-packages"}},"7.0.0-canary.b83d720ee.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.b83d720ee.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"1f9de7654234ca90e6ad840ceeb37f9b235acbd8","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.b83d720ee.0.tgz","fileCount":38,"integrity":"sha512-PLMmZC4KI0NTY2HfkSm4KgtfF0XIfGFZJBC1nrWP9IfVDpD6o+1ZD0jBnOOk2nbK7evSnle+agArxJJkJgzBvQ==","signatures":[{"sig":"MEUCIEuLLpLWwojgwOwOi9DYBSsAY9iMdPVgmw+MSe774+fTAiEA89MOM93HNqZ9BElpyzezydHDKR5gqtB85hMBpS2cgLg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe38YxCRA9TVsSAnZWagAAaDIP/04Yw4rzehi/5fOIm39l\nVBdejfrB0aEN5ydNUVuiKw0us6vIOJq2B1kPoWKGf0kNHoNZUJ1+YxP63EAF\nby0NELXbYOgQg1P6R9dnBnKH+KHUYjA0zUfXS6GB6rgmH+nY5kdty6Yyt6fT\nICC1uN73dbGX0R1a7Ecms+E89tpuOHcQHFAz+J3KQa+FZD4g3ve+kc9WsJVU\nc05if7YG+TR4Uf3pilRSwVSMpaCWFg4gn66teLSJvcG4BGLxTBhMXxuNj7ys\n3n2hNlETN6Dx+XOCWl0z5vXwfd9xMUqMhD/HFt6uBSP2L11YWwvTHxDvSt4l\nV1T7mToinmJ8r+Y5f4+jiV8pxWQx8AlunWYFG96wIp8T8I/uzepqhFIc6PY8\n+MDIISoyO71Q+oTZN8laWEtzVLwFSdxrntx2eoiykYxOxSqejIn9BRRGf1Pw\ns/t4ownwcbPEbkBwsc5Nb5+m9LW/4G+TBABgInfhcwNCi+ll+qLwza38mQ3V\nNMFfeEGPLI2lyyWVNH0RDpCh12NOiGRaNVsy1y1dvZRJw1xke9mBEtNy1HLx\nJ+nL6s7Ksconyw5zVTOtvxDcaDQDd7dfaFuEenwoWO/DvkMvAqfvjKR1UYy9\nT2R7Yu1J4TNgitcSWjEfS0qIKiH2XTVVfSa0qASy0Z9rZpcCETkl/ctAdHH2\n62Qv\r\n=cz8Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.b83d720ee.0","@material/theme":"7.0.0-canary.b83d720ee.0","@material/animation":"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-indicator_7.0.0-canary.b83d720ee.0_1591723568670_0.25564169930914593","host":"s3://npm-registry-packages"}},"7.0.0-canary.afb1c11a9.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.afb1c11a9.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ab0bd26dd7ade8834e9e133474295a41fa81b71b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.afb1c11a9.0.tgz","fileCount":38,"integrity":"sha512-8zNRUNzBSLTSLUwDGFFBm7iPQX+Rwvm92HCTozoWPDPg/hbG0sa92j2p2X8rUrKDt1cpu/+YeVe17DKS9fWwfg==","signatures":[{"sig":"MEUCIFV9ZLEPBOyI/KAeZBeM3dkUdea8be3bET12raE3rxDMAiEA7QDJeorzXdLR8g2kljkwsRRUBezg01eWDyu3zO34Ry4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3+4UCRA9TVsSAnZWagAAyFoQAIu110XnIuwL24uv6xCx\nbRi7I5nxMJWV+qiMLQLuHvWfNGgBzg4YEOWcSy41/gmZ5folLDMEQ8H5cT3T\nXbSSGnY8eMx7QuSsWgVax4L48GgN+YlDRU0Snj3AcNQH3pqi+DvBLhoBNFoU\nvWjU5AOnksqeskmb3592DTxJLGXikMENKUJcSkJtQ1sK07V+XNf3Ln45Fm//\n32Rjzgd6tQL2N2JKcBXV7OGwFFS5xHVdvIkmCN5xTJW7AkT2Idf6JJoTXzZ/\n2gIVcun7OQ442ysKmRZ2bGPAOAnP+o/5B/aOmLM2T7p8+S9xs07Gz0yOxirI\nnuUf6V2oUQSvpZcxXd33VjNOUcAR0f7byz5beuajJ+bVXvihQbBtYH59S70p\nep8aItfeAEmNhDAFOANjgweTlBXMse10cDM7E2PkNV8gOZFqRVRGK4GD5Xc5\nSIelUwZ929bhD9q25rTTvE1xOq/sZO3SmMvl5BNg7UU1hs5uj5VXMb7rNb0T\nkeBLKIzxOLgJ0OZir5yMykUhf2sMkbL5EQGb5jUb0mRalQ2RBmDV1B4x8b+A\nHZ2o9dfGW0XEn0ZGFHLjGyUnffLQrXqIxV9+I4RsjBTe2F/j0fEs0FkTmAZb\nFKlrg+XY+OzdtLlUt1+fEf0Bze+zspF705v9Yk8+PclNI8PmgRScQdvzRaFx\nBZvo\r\n=+DfP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.afb1c11a9.0","@material/theme":"7.0.0-canary.afb1c11a9.0","@material/animation":"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-indicator_7.0.0-canary.afb1c11a9.0_1591733779578_0.9820651375727067","host":"s3://npm-registry-packages"}},"7.0.0-canary.39e6f71e2.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.39e6f71e2.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"69e17b9e3d6ddd0b9c918e102164eeeb5d6151b4","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.39e6f71e2.0.tgz","fileCount":38,"integrity":"sha512-d7UQ6liQO45Ttl8CjON/YYrMEs9Gb1b8Xwfgr0lJSJOWz5QPwGZcw4Kp6sfpUOKS7FqMA4IW8F3JGS7kQrpL4g==","signatures":[{"sig":"MEUCIH3OjFZvfyWq/YmJaaQwk5tKGtv5LC1FvGvqn3o/b06lAiEA9JQxa5MIJ6fjJUAza4jCb3/iEjysnRaZv1UmPGRds6I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4B2yCRA9TVsSAnZWagAAYnUP/RiO5cYOkeEeEXzx88rR\np1joOIURlnckeiwnEimyZjUvtm7XwPZRH247u3tuWv25UeSEVdNAEX2JqM8A\n4+5PrP/0dgUIgbbBoEBy/tsz7yx56hXYglWpTbr8Fn7YtS7AAbe+YvSEOO9V\ns534ttOWvn0Z9TGannrX/Xp7k8X0hygdMdVhFGBqKu/v6AAJdrO0O4ysKWzA\nv+VGl0zFuMKfNvRg4KZ6VBIfDK6Ny73DwN7yMl5Kp6G680skJzB83eX17dYt\nT9FhSbuHmmgKqAULGOmJ5WDpC8F50vKvQQkneEmzGdlCb6CfxnlOkgeDReLs\n3j4nuMf7vtV9qXcZNA/hZrbI+K0uOdh9e5Y3kHIRscXCp+Lm1dJFA1CBtx6z\nkcXSPDXZ17x4qZiiAL0PfSLRB/QPT2gOAmbq3J1gzcHWlM5OjONlb0X/R38V\ntTb4NAm4IHUoNqNuZEusFpkB9P+byHz/Ed6TvnX1MkXONUfa/Wi+1NBEMEco\nJOA+/IznqknClRnHAPgau3iEE5AEpt/XhHL3nSf78SHYF07OaIULMk3j5Sf3\nuYBD7yTqBO7IFbV9hVck71sk0eYLtZItr2iiNzmcL/4MQasbq9bp074oJFC+\nurFO3TieUvYIvOOhbBjs5f8h+jYIvrjZfKPnPATwo1mvaTdNBAekzzD0oF9t\nOVWL\r\n=lvg+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.39e6f71e2.0","@material/theme":"7.0.0-canary.39e6f71e2.0","@material/animation":"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-indicator_7.0.0-canary.39e6f71e2.0_1591745969676_0.40092207941901603","host":"s3://npm-registry-packages"}},"7.0.0-canary.d4c66dc7d.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.d4c66dc7d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"2d770e8ebcb2242cb9d3b9b351af099fecfd3214","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.d4c66dc7d.0.tgz","fileCount":38,"integrity":"sha512-ny0xf5Dfj+pxYpA+ABYwjc/vrEKd0QWcd8GVkI/ciYEKRoJb+ul7tmBySErjqk7h/nK46Cz1JYx/GDoJJeLToA==","signatures":[{"sig":"MEUCIH0qwkFuYR33CMepQjSUGq7ETLCLvkFmDArxcAM5t53pAiEAyINs+0fh1yvL5OSrnFc9dizqNSJ0IeAsdrIqaWpuMF8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4m3VCRA9TVsSAnZWagAAo8YQAIzRdJxDyBso9PJZ3TOL\nOOUckzyBZH15jcVimqz6/p3TTeCtmBcOSEFXjGBHmNeKLe1kvTzssJvJCVa5\nZnfPpYX5Tj2tCgjfNAkfpdZYoh51cx84gpNahQPQ/+G6UWNaB+jhwQClhcZQ\n0ikYr1xYjy3eNTTnjBjiYrdGcwBjZZpLD2hXBEEv9RuOV1eFXq1Q5Dih/WHZ\nwusPj0JLZw+I4MjhwqYQrtdSyZc1FlJHaSiB8yval6ChgSRXS9OZDmOttP2k\ne3S164jlqiiFem2mWpn3nzWt+8KopZ5p6QBTF/YBw7vu8N4kMJjO88yymG9C\n94xX/lgN+cSNZK0PF1uYoKP3JHWgpupw1gDB2xOJLTW127Qu1SlEf8q6vQIR\n+4UOaXfIRDsJvAqlMMs37eFoKFGzsgz3932ptmLJWpimdrSfCgT2piJ90wlF\nPneSnHtPy5Ti14U1NkvkclPEp0BdcuOUg+pRULVu25D37cLfAZPmb8qPc/fo\nu7C/1jc5BnNshRSpO/yTIGUNa2S+P/fYmnOL+RB8Eb/VoPhenR/3Q9t8hl7C\ns1GvFKxIiBjQsT0Xlw4C2g9oRa2AhtzwqTLGc70rlu+tn+xhwBMWwHKjIIg0\nX87XYAdiPOf3yceCepMi5rokZlF94g/nw1zL+yKdGmbtgmq607IrZv/QgPnD\n6tLT\r\n=wvND\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.d4c66dc7d.0","@material/theme":"7.0.0-canary.d4c66dc7d.0","@material/animation":"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-indicator_7.0.0-canary.d4c66dc7d.0_1591897556679_0.3121793375993842","host":"s3://npm-registry-packages"}},"7.0.0-canary.be4a19f9f.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.be4a19f9f.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"34e7e2b777c5562690f65e6796add1dcb91520e4","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.be4a19f9f.0.tgz","fileCount":38,"integrity":"sha512-QAyuPCde00CbYz7lL8ptI35FbIva0dXFaOkRT+fXQNLhE2303dbUxed2eg4U5sjHl9Sdn0JHU1ILcHM8jOb2iA==","signatures":[{"sig":"MEUCIHHmnHXRnuPZLtaKlwBTgB2EqmeyUf+KsrtDH9ATjFBPAiEAttBX/Zxl41rPhpjE7e58Rm/Jk+Bil/1oSNyZURB/fRk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4xvMCRA9TVsSAnZWagAAB9YP/3KPtK4q3ouIBzf/pvqB\nTaJllKF2uamQiTg7nVfbKh07e7lpPCbKvUWugQCePXvd4bOjNRA/3SH93IaD\nnkAfCWd5fT4+kz/zAY1ZdG+EUulpGYGjc5f5HoJEVRqhN0WagSfKNAMeG8oT\nO47Dc+bx68+FAVA7ZwsUqeNrBLKz3QeVVF1J7sNfQcsvjgPFbzjWgkwploGj\n64VbnKLVlreLdkAqX+ToSVrQzSRtNntURehXSCB8M2cT9RhCwlWNFPuyVIVg\nRYgCWDMCBnX80xanZ4fapnRVXltiQHhdW5bSWsVc+M3RFyxYPFLM2maWSO+a\nMajpIJ3OMB+YRVuHCEMQMN7QSt7mz/oTLDKwizb8jhf1SaJqyTTKzNN7sRJL\nOKZeQBxcyp7SM7wlfqKwJLZsN1i6XeDFmtiDJrad2FriUYTmzB1rrFbkmrM4\ndaVixC7qpOmhlEZ/9+gL0xeZF/TFDnhcRDn+cdYvaA8iddj9ONMA6CRGSwAK\n+0xscnqI3Ae+N8vuQHtmuPuaUmO9AQJu5Aqp477lhwKzn8RfEkDuuiQL64aH\noN+Pl9ylsuK3A30I5YJoRynQ5eL4wYeJmaoTQ/HTT4KV5gy/Pszdb3GXbqrS\n41lpDTmuoPiwN8Jbzt1ETbe3ZUE8Mv8etfnK9hMTxU4ImWbB/5aIZoeQdoY4\nSY7z\r\n=lEKp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.be4a19f9f.0","@material/theme":"7.0.0-canary.be4a19f9f.0","@material/animation":"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-indicator_7.0.0-canary.be4a19f9f.0_1591942091574_0.36723609947153224","host":"s3://npm-registry-packages"}},"7.0.0-canary.a6ac8f629.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.a6ac8f629.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"89d02ac5eab6f352b030f601fd56ad7b020bd29c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.a6ac8f629.0.tgz","fileCount":38,"integrity":"sha512-k+AssyYQR5QMkqfU+RvsEV3UAF9MC24HuHHDNuyzZP7jWOPA7S5P5d2EstBXynAG4bLsak0dHqW/VYwnttFgbg==","signatures":[{"sig":"MEUCICdDJ3j/pxdUpWTCQbA+LuUqfVMkKhQ3W0XLYOMEegXIAiEApfveYdzFxJg8N11qFJEX05NrSihV+Vufs28zQLmpdAM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe5+h7CRA9TVsSAnZWagAAbeQP/1EEZvUmOvJeOxA1LsV0\nobZlAXtID+9/eK1Fi+kfoNGnsbAevfdPYrXkaMj1RrToiB3IEsPZpnT7vKnD\ny/d8W0xbD7mHbf14wJTy1asnHRX+we9FsYk6b707X57BgDkhjA713NAik1Jk\nlp4VecXYAoAwGgaN20iZ3UUApaq9jGvjjrr2rFAQop6GD7mFCt/w5kYhqFVN\nhgEEHtbeIFxAvJtwUbiR7BG0PbNtRWPlUjMf0Xn9ira1n1zQ2zF/KoPX9hNt\nsvMrAKjqevh5BTi4ch8pTSCApa0SAX5sJdaJdzD83exJWuqq11Yj5gHVZ7Y5\nVCrjSkrpntSVmLsGpYAcVC5vNLqN51OnVucnByINR0dEHET+0VWmI+t+p58F\nEJVPNUFMf6NsYZEa7Iix0yHY5vhfWF+BUAKfP4iH7GNl1TJtClqU42XY8MOJ\n21Uw6gJB4xsrR8LzXdQmpW3U+Pa28VxEssms7cw3hKEDgiBPOkq0ctduXpI+\ni5sYZLZmDm3MKoNgNaIEt+3OR2qebJQIWmW3V0BPqc5gD9cKl4wmBHOw3XTj\nHyP9kzaxr/ye+k/5lT2xFvjDEPHpFvgGvyK3Y6GDCqsEclz1pJm8tiIo9IYq\nfQAOtUxaZrtlYb+8lZpM91oz0GQonQsjzH3hJiackwZ+bS9xB+Ph1jQLsJNO\nFJb1\r\n=xT+b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.a6ac8f629.0","@material/theme":"7.0.0-canary.a6ac8f629.0","@material/animation":"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-indicator_7.0.0-canary.a6ac8f629.0_1592256635130_0.8730911291127419","host":"s3://npm-registry-packages"}},"7.0.0-canary.9833dc287.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.9833dc287.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"3acb386daa42b87d134b874b0ffbb817a96346fe","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.9833dc287.0.tgz","fileCount":38,"integrity":"sha512-DjJxjaAkHjSPxgUwmR59jeLVCl4NRFpkFx57MUt5dvntBRGK++MQqwNQcC97aO3TbZ1X0rKqt3cO971YeIll+w==","signatures":[{"sig":"MEUCIQDWMXqtF6eQ3MRPnsgPafoJx4k7Drjq9mMLKHZ9A6/8tgIgO7TI3vpln8Z9HpVvQehnbeewY04jEvfLnl5kE6A16Ik=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6SI6CRA9TVsSAnZWagAASwUQAJ4XWJVUNfWl9bgLFu18\n3cXBnIy6FgqH2buuqXXQQ8U+L0+18Eo+v+WeCYoO0j+NJKpoq/qapKEHwoEc\ntY+9nZWeqocoMW0RNsmfc+HoYg2CtQrxjauh4qLNyFeGWpSNhD/W+n7fUE+2\nx7KQm7vWZJggSQa1+Y5c8fUMQLKNHYpV+q4yRpSOxQdSteKK20T7H4ZxJpgq\nvEY/J5k81Qe3bDo5RF/fCQadUdezYCTkPqJJ3La9FBFoCmMJy8BGvE39LqgJ\nkpRSIFT31lWm9M/Ia07C+xWLO0dgwF0rJWXubHHZbnLDAwVtdkH8r1aeFpGO\n/Mw+3PmDR3qj31Ph4ijgY8TEOw+3qtWHIyZYqXkENleq8lFXGtuLnmHSWpHO\nlrm0JcWudkuFCOl1Ldd8vdw6BGX6NfeHnRffHQzX1YFj0Vq2rXwgLbRyCkCL\nwoPDzgLem7xThB5zjuMIQUlaaYXJkMqR0e6oiI1W/t7SaAYH3fjEkA7E3OGR\naBCeA883n9CyqxKeiFUYhoTzCw4DG9NKyaw0/q9g51eVslFA0ifonturhKRL\nY/QT2DgRSWCUBLu/R1C69U1q/7+vjLBZWyZMvoGWfsUq+TBCosZBYPoyo/Y4\n0VNnEKmPdhhxrvSHYmL02bZpTG8MriSt3PouxrN26B9eMRuXhuWm0e4G/fJq\nr33s\r\n=vm6Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.9833dc287.0","@material/theme":"7.0.0-canary.9833dc287.0","@material/animation":"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-indicator_7.0.0-canary.9833dc287.0_1592336953570_0.5776012297365223","host":"s3://npm-registry-packages"}},"7.0.0-canary.3aa33998e.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.3aa33998e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"1a4ecf2b8db2bc86219d72c86fe18047b70ea83f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.3aa33998e.0.tgz","fileCount":38,"integrity":"sha512-i/2L39DgCKVvMa3RwK8XueYvuSMQ5kgQ/FlNqoIBwbEJE/UtN3ODLeIkyPsIHHH53qfuUTQFT37xFTpMvCgLvQ==","signatures":[{"sig":"MEUCIQDPdUEm8wuyNOeqBanMwLCU/rSt1x28kWkQfXrd8sJpjwIgbJN04o28FuZZvARNR18iMZbLz8JMty5pKWYCcLoQ4ow=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6SmqCRA9TVsSAnZWagAABagP/juJsM+J5oDha9qzxOub\nEoJZ2gfaoLEGaBlu6nJ8PQhKjhMBjWDSKg8iehQucf86LG88lEU10X058uBr\nv+oGAWfWcRZGqzc568yYGAuIizZjo9uJ46ttIo8AXE6Ph0T1qi/9v6sAXd+e\nEpSoturNAec04wTbxmhfsdtlpWFf+7dDElJeWV2S5SbnRPrqQv9X8Yy8GjSZ\n//oUbp0wF1GyBjq9ds3ZZubCNXOL9fwBH/Oe9XpcffEM+ivPKEJs07uSHyo0\ne2xglVo4ifSCVWI36vAv8LIxkUttxS/XJdfL6GchqyJiyx0zeJc94cUkEjYZ\nzFL4zukX5e+8gi/BVxBU8pyE9FQeyn1R7fAaM9fs4smZ8VBDyrqWl+nltdOi\njElWqRIs/MilKQzLo6jgbbs+caQrJfi0iv63uhLJCc1dwiCKTFz7F3Fs0Rpv\nCdbP7enyquy1ZF1N6KHdQCbmXaDoPLQ0Fv+ZrLrnNzNJiFcOfYXdWlfWN3Gu\ndjjWB+nQYhGCB4QSyU1RwqoG7K9pHTpw8E/KQCAEr/lOX2/txjPOLzmQePWr\n3xef8sH0T9JckCQsNS3x5c0m0OUM0v6o2xA4juD7oghhLac8ys+u5COLkqu9\nMgzZfqOYxfOY2b4+IANRB6yk/l+OOxQY0JdOjI5nUqyX+hOxZVwgOkj3n1d5\nqLPC\r\n=i+AA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.3aa33998e.0","@material/theme":"7.0.0-canary.3aa33998e.0","@material/animation":"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-indicator_7.0.0-canary.3aa33998e.0_1592338858228_0.17427989765906982","host":"s3://npm-registry-packages"}},"7.0.0-canary.d2b54d183.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.d2b54d183.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0f02d372b863bb05dc6352f69747b29c72f67f67","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.d2b54d183.0.tgz","fileCount":38,"integrity":"sha512-/wox0MUpDhRP53nN34Q7ginXi8SR7bb5rn5Ei2ukk9XLWSPONUu0/LVkXXqp0RaLtNYtJJiy8uGzRReXQM0wQw==","signatures":[{"sig":"MEQCIGNF9P47M9QvojQOdFzHkxxRxZflZMfAkTcJwG8DVC1nAiASnTK/bN4MzW6avv09frnCswTNKS9Xr17iQU7MUGyKRw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6sA3CRA9TVsSAnZWagAAKLoP/14XJ3xCuU5bx12gmsnQ\niav+IYKmLN9292PTexuQEgWARN3+yzHmvAeDM7CpDX4DaI/yxcQmbr3uKe9M\nDsu86W3KoFSTFPX+hPLUENkK+rPq0XcspTN4wcn5/19ItqzUD/4uitVwvjWz\nL7M7kMg7JTymXDWE/+qL7VnHZ2VhO8L03tEIR1G7b3NW51/MGOGESvcanoWI\npabClzECk6HZ0/hiyw8kcZYTHUG03Q8+g532O/QT8bo9VOE+lm69I5lYjs9J\n0fyp28pSU5grgPq7GzoMp1VLueUHYkrvkxc00/rBhC6RyYig602RSSzbQWcR\nGxOEl1hw12gh2z9ZYMEAIJh/e3QzekteAWBKglRfzvniLqlBcYyPg1L2vJNy\npH7DQ0he6pUsaveBnmqJWjYqmZcmlsQT5QSecIXRKv7pGbO2rpauoFXtXxSW\njWtVN8m3AdLTQbsksm5mA/WDGnQce0G5TSrkV8cC6jKD99NI1eRDsjFDDA9C\nZ1o93Vt7we8+vVsYeFIVzA3gRveaiL2KyylsHQTI3QIjDlPChRuPbbOBC1mD\n0hXyHVyIt+3P/W1nz/onSHYxsbrl9TdSlc+mSRIjUwCOdYa1CMlGJHc2fGm+\n4DifE/7FSsu+WZISIn5tJIUTZQ5dgyxbSj+OuymZ3UnjTkUDDl4L+coeM9Uc\nLO8p\r\n=T+Zo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.d2b54d183.0","@material/theme":"7.0.0-canary.d2b54d183.0","@material/animation":"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-indicator_7.0.0-canary.d2b54d183.0_1592442935261_0.21712826089595083","host":"s3://npm-registry-packages"}},"7.0.0-canary.f2a488e95.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.f2a488e95.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"4c69cc20b74c63a752a054e4e3878494b77f4544","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.f2a488e95.0.tgz","fileCount":38,"integrity":"sha512-Fh3VNvfy9kIQ6Q8oQG7xf41/6vL1AGp/LfMDQEXrjeWCcUdORNFKcYtLL9qLShrBVtIigVzvTNv7+SFlrrCQJg==","signatures":[{"sig":"MEQCICBV6yaHPrD78z8EnoVaPAqa2E4pH37mGcINn1QRf83EAiBhq0OXapN7s38tsmlfXZoq2lILk/7v5WWCyRu2v3MKaw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe64JoCRA9TVsSAnZWagAAN0MP/iQ4I5MnGEmPK+qjgZNT\n/zgCRrAH1mOjPnnTjrpDjcQAQE6Hu3DIAhuORECxY3KgxEj68sovgtpeGaDu\n742msxj32wX141i8ImFpoLcqGxs5eDWNi2TRlsm6R/UAspSE31RubigApgt8\nzR0mMPR8SXTlWmElnwKsWtTS3prCXsAUli23ixG+FMhfVWVjgXozep9nCSpn\nsohqRgPbaCANEFOy4CTXt5BFDUOu28QnICfnSIzObJcsncPUrdG/QtrTtjkq\na7SapDLN11Bvau3klvmFVPkweUvl9NtQtTT066TsZIs7E1dauw4VWmkEB4Of\nQ9npl8wVvqMspWUa/BLXiHdOlHnuqD3KnBeS4Rwjyy+zCytM9lZQjO3N9JbS\nTW99fFuHSdAW28XaV/lcT8TnxlgNuZaYCpOpT9Ic9yqDSzA/i9cLeXYQgGSK\nB/t9uhZ3hIhSdcPpeFqH/B6bxCXvNF2/eHGr1bvkXK2K+walcYO7qiRU3di6\nJvA3433KJrzxUIm1rCdSaZTlCf3WVfro4/u2igwkjOgnZsPFT/TFXLUpJ432\nhifev43tTXgdLo4PRRDCZ1dNDmigv3j5dFW8+YYI0x5OQeRO4FK8MRjM+oLF\nBDNW9tKaljyVoQT4K4l5gwPMYuVa6itqrAODGxe8RMhGjuVSXcOZZaw0tjv7\nptW0\r\n=89f+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.f2a488e95.0","@material/theme":"7.0.0-canary.f2a488e95.0","@material/animation":"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-indicator_7.0.0-canary.f2a488e95.0_1592492648474_0.8548657157874098","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd8d1aafa.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.bd8d1aafa.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"9349425cc1f6705292e973c44ac3c374e649209a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.bd8d1aafa.0.tgz","fileCount":38,"integrity":"sha512-yKJ1Wv3RVDRnLkKfWMnyxK37tMjEG7OmFdhjf7xfqH0r0/r8V2XAIQXMaoEE60yviOvlbnFtXGIJrDub5jUMgA==","signatures":[{"sig":"MEYCIQDoNh5deunnEI7p00IwGHq3lhq/Y6Idp2cuxJpfEgX5BwIhAO8QxfJmaib4gTmQITtOjJxyGUKM7D9Rgsxw/0qAJa6B","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe64U6CRA9TVsSAnZWagAAwsgP/3WMR0ZmdW2FMqx6mV1h\nQxKfzoDC8C8ingSYcrelQPLP0tO0rDRDagM4LJcH37tqzqIS612AOok+OBN/\nLlQnuaXOt5wbkzmkBsceAFoXDA6JRpaiJxfCfRFoqOgsr96JpgzwjEpNWaqf\nee/e3P9abe0VpWcPwAbhM3Y1zIHEi7zbW07Shj8Z3GpIpmAt8NyiSEiM8U3v\nciPDF8WrH2AQNYPnSf9hFdN9sRub/PpBesbWJC6WhNPgD+WhNx2Idm/lR9Te\nSV59ReoRmuVdkaqaqxvqxz08cOF1PEbEnzrYRC2HFpzRbZYXTRmnQG8Pg85k\nfj+V589eRSOjawvV76Icg5QG6If8sgxxcj+BOBBzcaxzOp//LKWEeDBDA7iy\n7eYgogAAsvLky20RMkTUgiinHG+vVixzqpTxn4JNXcrqyBo0E2rqQS00rk3t\n8iKM6gE7FDJxByve82+RK1VZll8hxhYv2TfTA1f5/5FGx4QCINoxYTc52G9V\nbslQtTKfhVcxU2kWUsZnYKKYRuhACwVqDWIJyr4573CFAvXMDojUCCmEoIsJ\n0KWbzgGQwG65ZDOhdyaqU0kEWDq/BQsesJTIG8cigUB/eQT1K45PJUWftato\noXGPdiw6SdujluDkEXFfmki9k8CDGnb2V79MYJ4W1P4EjyEfo01etTH5Y9/1\n9mG1\r\n=B3b7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.bd8d1aafa.0","@material/theme":"7.0.0-canary.bd8d1aafa.0","@material/animation":"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-indicator_7.0.0-canary.bd8d1aafa.0_1592493370354_0.8817066823232385","host":"s3://npm-registry-packages"}},"7.0.0-canary.1321eb968.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.1321eb968.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"311bd270e9652235e18336a0abb5e9caaffa75f3","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.1321eb968.0.tgz","fileCount":38,"integrity":"sha512-77ZmPYT+X9B7uWoh6108rOkiMhPqsrmfXFpU/3hbPq06VlkdF3/mUnOy8qPNrZh2yh9vDIXKCRJBMSTnFmgHLA==","signatures":[{"sig":"MEQCID7gqpd+fsMdkxaiR5actSEUlOCeqQtQgvlvqmytiUzxAiBrtx+5wffEmndjTVLjS3uhmMaOfdHGUZdQfGlcGB6DRw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RAnCRA9TVsSAnZWagAAAu8P/1x29hu7QHTrDXOPErMx\nao60wN3UFfBETwzCnMrKWaYtGOrFpMTp6H5C7oVLXddILAzaMTQpnKigvVln\nJWsVnoPhkGpLt7Za1aDwXA3kQc2zJQ0pJR6Xi4ecFki97461RU2SlAI1q5fV\nfx2uCeTtVZjIkjTTFnSeGZVL8Fyvh/zQAH/MM8VE3jO6v9OIKWhuTf7Ad+3u\n31KNY5gON3y8TTNlNcLofBJFt03gCwRq1dSyEy4R156wwi+pwvOmTPNZsWel\nBlYstAgiMyslIg80gOAngfcQltxiirvMoucbUcKl1wtnarAU/pRMmg5oExDY\nSl4plDSpYEQoTBm2w4DXdQ2cQmC9JQjQb3i5Rda/+jw32hdUMQ3abRwTnVGs\n9I1vGR4owrpNzbHE1iTXZ0M2WrJuAC1orqgB7a0gclLPiZigpk+LfEg8LhTj\ncFd7/tV6AjvQDfV8ENLENw8j/vOugtv3Kehe9Qp4hJKwRY+lYt61jaR6tRI7\nyClXYP+xpRFLkXmO3p+q4rc3nV0d0rcbvwmClKkfvIm+DsLiMlK2uvEDmYyF\nQtn6WAzvW/+Br0h8LlY3nrP0/jH+H0+8YlVsdGFAMJXkFIPqqFR2mEh8s9ZF\nA3YsddSMRaAJyQ+8mFapBxOlvnQ/8PUYIGtii8Q7oa10xnnfNdqGwhwM21wR\nAydP\r\n=d1Cn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.1321eb968.0","@material/theme":"7.0.0-canary.1321eb968.0","@material/animation":"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-indicator_7.0.0-canary.1321eb968.0_1592594471171_0.004330562236219304","host":"s3://npm-registry-packages"}},"7.0.0-canary.db5cc0382.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.db5cc0382.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"f7de43336e9ebde7033f8bacb9a72a65386d5f8a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.db5cc0382.0.tgz","fileCount":38,"integrity":"sha512-iS8e1knLvd5/58BEHk2X8r2+pQs0nJTd/pwBFyKJHgaxnIAITKfgZobmWkv+uIJN2OsAmd5sVWNIKYxVig5BWg==","signatures":[{"sig":"MEUCIAqIqr35YDsRaTZ/+hnFA7KkrjR0reBxz9r6IdeRunLJAiEAusA7bci3T6e57FBqpg8MgrD1eD2K2/3o0pFiOZDr/bM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RGyCRA9TVsSAnZWagAAboIP/2Fi7wH71o2P+/AS3jR6\nr6ZrXOW9vm5EsUKnLyZmXHxgpOtn8p0FlROvOUQbMRCEjTsqMe2C1AkCOr8H\nUB6nS6VRaq1YYZlA2OABxaZwdaWkP8G0pwXQHZknYMSKx8tA/xpHryenuc2t\nKgaiRliZ/A8XX4O18/l3tdsoL0nYLUJ+TlRn/3cfwBgi1zxk4d4aiEUkgsM7\nITEFAXuYSnwj2+EpeDUQS1M96xzfdS8sIa9vwfOaMvlEep4YdC3WE6g5/2gc\nBGX3ZLYTGwckh95o6uPQa31hiGEGJPTDnHGU6Kkog2Eiysv+szl2ImqwqFds\nsZFTEQS75+AX0CNumR43Vq61dE9KeonrtmbK4WPv3V3KaF4SwZifmsBmttw7\nfW7KnXgSo53UxLv3yvBljwVY7FD0Bw41nZe+3Nir3n5uby+DnmKGL8SMB1Nw\nNZ/bXoXL3O6ITEbHVX8ZAWx2Sx0vPAskfBDcEvmyFjr3n9QwA3wXfhBY3LXM\nbnsqjmFo9ZRCnVvC1jRs2AuhM9AwprO+bNCEbC+aHpDdOZZ/L3L7N/e7zJ3m\nTqYErEIyyw3g8kk0Op/gFT1Oqn4Nf5xzWq7i2bPu6/GVeFA13k9yZDoYluP4\n1giaXWbWPuSgsE3o0NbHR2w1gdUYHfHe1r4O4nM0ijozbCkCTCHmMc2mGnVg\nISqh\r\n=Rvwk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.db5cc0382.0","@material/theme":"7.0.0-canary.db5cc0382.0","@material/animation":"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-indicator_7.0.0-canary.db5cc0382.0_1592594865978_0.5917870900760567","host":"s3://npm-registry-packages"}},"7.0.0-canary.6ac9bf031.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.6ac9bf031.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"1bc9b2f1ea081fddf33dae5d6a6c6bc8f6c92562","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.6ac9bf031.0.tgz","fileCount":38,"integrity":"sha512-7piK/T/oWli7NYDU0Mybe3KNDut/6v81zLUQRJMLoPxvcwuMNSZ3bfy3VjWeCtwdnAtoDdJBWBsx0TdHjB8P6w==","signatures":[{"sig":"MEUCID0GQR4LC2oqxzVRQ8FlJm/PXj4PUtgU3s5XgB7UHUu3AiEAnhL6KyGeGaQSwCct2P5h6FqklgUGET7pAdFTCB1zKzE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RZwCRA9TVsSAnZWagAAOlUP/jDLPbTmARVbzu+HI1Lq\ndRef/vs6o5qCXueuwWWOvOLL6Y/xBcf4XmhOUbSVpTFoL+Cwd/ZeD/xrFkpc\nZzn7VR6z7YCN+WuX780mBzAy8H9FxELWm6A5dMSCb87I/QZ/HvnPQyAnyysQ\ngZUajm7fMOtNVsXx0EbdNZhCXcEi98mEAPOS5Rf//Eu0xZop4eOqg3tDw1O7\nXFnuvP7+U++kFhvqfNJWotnuOWPBkTgY7ihAvIMwv2Ex578BP2R09ceBbjoJ\ndSyLZRiIcDoPvo5fOxqyOWTAsVTpGKDbMbKecJ2CVIkay8xDo0ANOn6Ljp4n\nOh9sXin5M0brPZSNpnwSxhlHPIzl18K9zgShVM8HHUA9zXCikwkR5Hdjf3IM\nHVyAoj2d0J7o8b4s2yOSfnKbFR+HjujsZDSfOZg/9PInkSZGZD9h3CiGz6XM\nimV+GM/QUgJjUp9lVuhcG3Wf/3JuzB/f5oElpmMRvHX2UEhe9lvHvoJmr/Z/\nfAwGWyV3bMAZzKZvh6jtQOhqn7/MgMHwB6zLC+k2iazX1k+xdCggqwGBJGZz\nlid5o/uldY9AcrRSVJbPyIYYSQAOxM9NFZlc+ON0fzZnDII2cwSmZqgDlEry\n9Maayxcx7it8XGdaTJ3/nfUn4+x9wL9KNbKTCUEHw4GfKi845bDqn8VtlRJc\nUHQR\r\n=qUQo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.6ac9bf031.0","@material/theme":"7.0.0-canary.6ac9bf031.0","@material/animation":"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-indicator_7.0.0-canary.6ac9bf031.0_1592596079934_0.30590017914569123","host":"s3://npm-registry-packages"}},"7.0.0-canary.c21b5c367.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.c21b5c367.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"11deb1263c12203ed0a3b2cecaa2122ca7dd8b90","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.c21b5c367.0.tgz","fileCount":38,"integrity":"sha512-SZ4YBGtbbTBFB/Obhha92JRGNHENii9DJRBwLU4NUdiKJsH4lraXi27SZ0e81i4C+DCl+HqkVZ2J2N7MhTKahQ==","signatures":[{"sig":"MEYCIQCSICalbb32J6IF33AACEPJtxazt4lPoHmRkW1p83RtPQIhAPvX7Xesm1UpUrI6svDcDgNM9K5SAsMfHDAQQFdWpyUC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RuxCRA9TVsSAnZWagAAx2EP/jpWYuygmKvUU6ovflxF\nB9YlJ+0/vIpAQDsJnZLPH/9HTfWe82Rb47vaO2ELmLIGEv35jmUW837wfEF+\niyjjRgyLBHQFSi7pODxrdygRIB1sTupXxiJ2aHzePUh5B+WGwrszoDloWlmN\nmORV1KeUV1HxgbRSJuqKPA5jMf1NAa5w4E4bprZs4pQ2KNUKZbEgk+rJgdbK\nyy18NBGynyCLrTzKl+wrj560i3AYnNyMa2HUs4lu9QlXeTCjVm/371k3zsN8\nceE4n1TfBcJZM01d5TGjeaE1vpNhfZckfI76jMWHTAShOj6SAf8ev5FON4kC\n8Roesww6RixqPccHrCH+s/QLTTSgKIpF1BOfZ33x64G8dvKDkhNu+lAQ867F\ns3ZKLriq6qUvsPsXYEVhw9fl1qF0xovf0Hlyr6KDvkl7E0oMZqbhRqCd8Dhz\nuUvNhOXvHzJkc84c2AbeVpNCVM2PxaJ6q3e9CFMrvkVUq9s/01dqm1PrGWdb\n6V3XIka2XwP8IimA5l1KbAirW7L/w5z9ZS/9oOulU/Qs1joowCNsjoV9TRBX\nJBnybRQfOu1RvQy3v4TT7+7fWRubcPk/Mt/WhNKL9jCwr7KHbbTR3UXIqyyU\nHqwYY1DQbhip761IjU2/yu4HqNZI8J615A2nf/mQYaStzoNzsX01krUFAVbA\nYScu\r\n=JcFa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.c21b5c367.0","@material/theme":"7.0.0-canary.c21b5c367.0","@material/animation":"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-indicator_7.0.0-canary.c21b5c367.0_1592597425323_0.0621626549905121","host":"s3://npm-registry-packages"}},"7.0.0-canary.bfdd7fd39.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.bfdd7fd39.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"cb34c50282c78f796960dbaf1477488d31162d86","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.bfdd7fd39.0.tgz","fileCount":38,"integrity":"sha512-eN5S+sN8Vp+L3yjdKH1VWKN1/L4yNN2Z20RFZRTkB/9Hj+X5FHDlys16TOLanggEpAqQkDag5n7pBHLWcKBwOQ==","signatures":[{"sig":"MEUCIGfkSSG6111I6M0Pty7lzauNWNlwotykbWpgDrnjZelOAiEAqs24LnHeO8xCCa/vL/RQHdzS7ZDD9nRPV+vMTZNvRp8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7R3kCRA9TVsSAnZWagAAta4P/A7ca+jlE3sv3VQN/tH9\n5Euyjohnb5Q8/H9pPACqOzshvENXs5euqpXZ4DJZoFBoJpMKYN0uTFPE833c\n3E+gX0/UdOhfjPQVBj8IdUKTJ8oMtLhKcHR2u9TN71HWKr4+aOVFoOd1cVQA\nkrDBfIVBhIBz67yuEcFRs0EBrPpzqKda236F/QHz/jcvmMIxlnENLD9nK5HX\nRmsulhL8mKDIWhNSOfEj41pGwatglaLufPOqLLDlrNoJV7MBUna0FPC6zXje\nDyfD6GPYd+MHSiN6aXjsNFKAvzCIWihj0mcfcSH5TBoN60EJhKKqKwcJIWYW\nPfuritlPrfMyUJTnrjxqDiSAnAtBRyZceRgdcqMQXahSL5JtA/ixOxrn5n08\njBQsRF/u9hO6hdkYUMXHrRqCSGHGN6fqjHHYJqnn8qujQKuFCtBVpxDf60xa\nWgR0tsJGgXB8EBfZasC055YcOyoSAMaZhZJ6Gh99esfa1GYV+NK6f6hANl7l\nDzNDbgNym3RD7rcj+TBfdTzi/sHF/t7vXSmeafbHp/Phrv6OCunjoEWpXJor\nC7i5vvYs6HiOz39JpXmFk3eDZwW7ULJn/QfpnDvnoJ7QW1VfLGajf8Kaf2+d\ndzWgM7DRBECvOwY6B4jtAMUXL1mwKddLHcR7DrvL0DrXTZPIJxe2qqKGQ9PD\nXdFO\r\n=+NN9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.bfdd7fd39.0","@material/theme":"7.0.0-canary.bfdd7fd39.0","@material/animation":"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-indicator_7.0.0-canary.bfdd7fd39.0_1592597988000_0.8897455912617069","host":"s3://npm-registry-packages"}},"7.0.0-canary.10b505785.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.10b505785.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"b3534dbcbab7313d2f61d5b12fc8b0f9c1a8baa1","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.10b505785.0.tgz","fileCount":38,"integrity":"sha512-I9oXorjptPoGeirZnR8YzYahmJISQL7QfujwSsdQWWrSYQeS/rA6VSJijWdZY4syheXu1j3t4y9qImjXbvkZiw==","signatures":[{"sig":"MEUCIQCiGC8k6k7B9XJBOKAp6t8XMbIssbsRzc4MrQGK2Kk7GwIgcSkZoZ+vZXB6Zv/BNSbhietmXevLkL8Elv3pkiNjteE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7R48CRA9TVsSAnZWagAA6m4P/3sCWvrUEtAXXOTgHhrY\nKfqgrV7qEG228C+0FPLxEpvLnc0O91zSJe4aryA5okADc6jKr+l7l2LcizrE\n/KTVuYzf+vTlwA/fzR9Ay71q1FEOFDbZP/0dqIQtvXjm+fG8/Mib+47ys036\nXr3hgfOf9vd/YFLnI+dD8Kl+8A5ic/JUCet6V/hLt463ugFUNDwxB6hJmsGI\n0q+c+2Dyj8d3lSeIuliKrN9B1l6aae7i6TOi3Ek0KBlZr0QS0ovr3dl1q4sB\nCtIIETWOQZ95qSq7oRpMDUMpCcM0F0ssdqFdv1GZopieBtDNcqbgFk5N33Lg\nJI41UAq0e/JGqsj+/SSzQy7a2gnAGmqVa3sGr0IRQNwfDR5pRNhBRygK5Wrs\nuUl1XNZawglSRKq1iKL0ACUFV/liPlLNl9wJURCjdoAfwA84I3lV1Nbr0FR4\nMe+ku4dlNwLsY6nObl1/pgZDPKM+FakHputCIiFNkrsOqqTTxzk/M3550TeO\nUCMcJKjBWwmMtPGg8jZqjA8HnycdUdDfuSVI21eT59Lkc+x1du7eyYU/+9AZ\nporTAlnbmukqjmtXhfx5yhCATEULeT2Kg+EbnfRkpqs/mZEcEFq9ejDaRxTd\nm3uswSUfrNP3eaFKqSkW11wU3R/T3hkIuyERvA/yOpkM0QGmGooVGwxrxZem\n6kje\r\n=jHPX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.10b505785.0","@material/theme":"7.0.0-canary.10b505785.0","@material/animation":"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-indicator_7.0.0-canary.10b505785.0_1592598076240_0.34195055936042995","host":"s3://npm-registry-packages"}},"7.0.0-canary.6483d3f44.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.6483d3f44.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ef86fcca7b929902392e734ff21690431bf5bc3f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.6483d3f44.0.tgz","fileCount":38,"integrity":"sha512-Zo6wH+JvsUSUXSY0z/ASnVLHEw6oV6YFsc4PcrceK8oYz5WMsTqZGndTQEHE2crcJoar76uTguTAYbf1YCS+QA==","signatures":[{"sig":"MEUCIQCS33LMqpzRDGll+vghSa5YC5WTbCsnTwPU0JIJYUy2mAIgSdJMfJdwbrWgRA2GWxanTxs9hZ2ODax2Gzrpc9R1+rw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SIHCRA9TVsSAnZWagAAXtwP/RzbnRfq0N49+fBPNcYN\nNqD21NuNSKGUslgtM0hSku7X4byrDzprzy4/boEW2AMGaV/o1l/EG/Jqv2X/\nZYeu8CKiS6wg1bNitcl7OcbUYfWZf2/vI5EdrmSrPb15+8wYzOgw++1vmioZ\nzHR4O0xX9fohUp0OZwval0SxBe9VP5c+S1vr9Nkq2LbU5lK9UwiDCCoXP9KT\nUg3caPbMu1d3xVwHHtMWBOgdJrx2sEg30iOKsmfXeMQpZgBRKYczWUcyUFCa\nCzTuVmKUdvc/rnmfVsOrTeABjNEqll4PBL9TgTZrNQFq8+7hA33JGxflYo/C\nYF4V5uEiCUuZAyXfd5ThlZtqSP1gsYl7bNmTPuRzDJsoAAgbEiO5ARD7R57S\npvTcGYeMoEy3LuFbbxoclJJzBSvn9Gd5Q9VNjB9PuEKxsrSjkGHeA/e1fSlY\nwvx0MtXiIWqXkp+2obE3KHgAOpKvrB3SVqq2hcplGNAUEc/enJyPV7uKa6Ua\ny3kV9NKIPNUo9ZFOzwR2R3gdm7Nip2Na3WYBhQ8pOsQ7Pku4O/HdOLgE20e6\n5QANq2xPMPXAC90EpSCeRnehTDH2HK7DJKaTkkLrd8yeAQC682W/oovVaB6G\nsup5JTUR47/YPhorEkKn3YRemFQVhjbE+QX6Etn6PPc/nwc/KPoelYjNLnwQ\nfgFt\r\n=HYvZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.6483d3f44.0","@material/theme":"7.0.0-canary.6483d3f44.0","@material/animation":"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-indicator_7.0.0-canary.6483d3f44.0_1592599047503_0.4594863924354138","host":"s3://npm-registry-packages"}},"7.0.0-canary.30a74e921.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.30a74e921.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"cf8212e27b277f1bdfada984a16188c7c2e68fda","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.30a74e921.0.tgz","fileCount":38,"integrity":"sha512-XyG2t9UeEPcFYHNjqOtXYC0i3SVyKX4As222nBpZ6iwdnP8zddS4v/EFVYE0GXi5HxG2TH1PxS734zgErHAx1Q==","signatures":[{"sig":"MEYCIQCKTIgIq+h+hkRIhqAOjayXHfJmj5uiKSA1B/Kgrz1H2gIhAKGxMwUCKmlPRSQ2GA8UjDt6WeTUvXY2iQ8aQV0xVVXZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SKQCRA9TVsSAnZWagAAAuwP/0vJ5AJ6341LYXsjWyuC\nBJzJ0tljajhGBiDScqIBuemMduXfi+psp9HOe0tO1qdwJRG6BnA5uVsm8NPX\n6Ai8EVdpiANLLNnIZsmkMV+Clomw6BxNK1SizRz8HOBeBEa5mo1GyRJ/X414\nbdKYxhvUn7ZpGGtA+6Ri325tCzliFdFLMWt6kLJoaVSRrvi0u86HycXVbhFl\nioGv53NSRBxLpUeR944ZbRzHrnTLMn6jMRQn9De8FEb6YBVMFzLhRzk6pA+0\nYcNd70ZP7r3Grm3iMl3k7kKm7+2yxGC/rNzCBCVB52r5J0aFI/H4Z0Yfxtss\nJdeJe9stbq0f1MFBq++lqIvdVU4P88THW713XYsUXepjgk2DZI/F6JSSguFy\nOHSC5sI4OiHXX0ORDr0naLTrMlgkI8GZNn/UJ/KN1qxEO6APdeRAMis/lTwT\nXCRil97AXqIsg2bk26NI9iTYlLswW/QSMjbKPE8EaNO4HrK24kz0Wcod0iRw\nnvp3rvvrYBAD8U1roUxrQ6ZGebv7FB/LGoq86KQd+WK0CGup7cW6+xUXKmg5\nnwDROF27sSAo/ASOHgJX+tvkx/0SSswKncg5VXTw3EvRYBI0MPt/5Lz2TJ0p\n7kzxQze26EedpqURnJvLYb1bDc2jOlnT/qtYk7Af2ait6bPuuHDgsiXjemYb\neHAo\r\n=1Lgb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.30a74e921.0","@material/theme":"7.0.0-canary.30a74e921.0","@material/animation":"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-indicator_7.0.0-canary.30a74e921.0_1592599183724_0.2878490330533263","host":"s3://npm-registry-packages"}},"7.0.0-canary.c20727498.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.c20727498.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"827a60c2f7de6933167172469997149fdb0f3684","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.c20727498.0.tgz","fileCount":38,"integrity":"sha512-mx1lPMUugAgbvyt4CN+LCrfD/j1pB0lNyffGk+fxUIPFBS3oZWyr1q63dMxZn0VIcEZesyWZ1QK2yndvQWAHAg==","signatures":[{"sig":"MEUCIFANizIzUeAybPWDvx5l3+9UPlm4xzuJP8nPbEp5QSDeAiEA0GmiQleoS9HGXb1c5xGzEZ7FOvQAO+S9UMSB7CLm2EA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SM9CRA9TVsSAnZWagAAIbsP/2xvn1LJWUtyJZYFXYAW\nDgk+TuSf+z67PqUdhrQKrEA+l1CwnKpOjPykxFTnjHLq3QoJi5lomdJy4cSt\nK7Ilg6Jb/GZAUyi+XNLW1JKyTDzTpRzYu3riHuou5K6bx8EvY0UJ8fN3CkC1\nti7ym1CkCdmtY5eTF5C1xI8ItqKfVEUcLAF8Ec05g1jfol7/+OFp/d8C865i\nKW9WmauOvgPMFe2WMULy2UHv8cRl465q2lhtaX5so/VQ2Bl+pRxRFtj7qHV/\n8zYiUeejvGk/Nyl4H9IcxEkv8Jku+Y4N1dP1w/u/y0xkyTupgIWO8t+WxGs4\n6D7bOYuZXY7PTa2Ivk3DtfMaJfMYrA9eYjNgh03j4SAQVGlBWWdqmCjRnHQk\nHlRS9D08Lwt3b3VcIAsO9TVD6Ecwe2SCmpV257ohoGoQPkMrdDnJ/XTp3EsD\nbqzERI12MW39VyDkvRTHhYsO4AXOvghe2Gq0dyZVRSHQR1QNwBo+5FvQLFtl\nnyvBAFn+Q8pvQ+0hXv6QxzXxJVjtMtPGKE0KcG4QZvceEGJgQz5AM0A9RU2E\nOshHibnbN50yajzA0B/HncyQ7YR38Np1B+fwraHEvTuhqOFk/fZb6CC83J+n\nOdTEwHH6tbdTKVTNq0DGCdIkOQir+0AaB9khoFqStV8K7Ho6ILjMtTuWD2L2\nHBqW\r\n=jEdI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.c20727498.0","@material/theme":"7.0.0-canary.c20727498.0","@material/animation":"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-indicator_7.0.0-canary.c20727498.0_1592599357021_0.6577813064225233","host":"s3://npm-registry-packages"}},"7.0.0-canary.4e360ae94.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.4e360ae94.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c46cc69255c0a3b8197d2f1ea75839c16fc2c471","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.4e360ae94.0.tgz","fileCount":38,"integrity":"sha512-Oz5Gs3ThCtbcpS8702x+tWYDIuIWSAt/B7o0OF5s/QWTD1+Jpb84+0wuQHEpQR3+rQYBrD8aYujlvSrC5IC/MA==","signatures":[{"sig":"MEYCIQC8ILz9LSaVfeyO4TQynlC623T6EB1uFRDE813lfMC2iAIhAL4mQD0WhaDuRam7ypVJLX+e5POSy96cAQSGhRN9ZvzO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7ScoCRA9TVsSAnZWagAAxMQP/1dUT0QENOs9D9fsKIla\ndbGyo+HSSsWbl4jfXDFw8uNjj00gTk5SE911+CFj5j72DZHq68tKB9HBffxx\nfxOqlR+T63D6+rSygQxpuu5c8NJp/QRDb3Y002sa2OsMdLEea5BTPR8F24xZ\nIw1UBMaBKrrfEZrx1+yf/5X8mysG6RLbxL8BbpzWxzgK44HHtHc7DjJ3ZCry\nz4T0HW3L7H3/qO8DSJj+Lqm6aNyUceFExk6LfGoV++EcYOUv67iAPeYYfpZv\n3vOfIlf7lsJbmjEaihn5zcBa1bQ2zdZRddftuDo3Oc+vWLokB50WZw1neyQO\nSa+PDrRlX1oW0ZbyO25lcCDw56Tm//dAMv8h+tp2zTgDhMxE/RigaFRaCUw7\nNboE3VxnifCEujMpJIGRXpd1xF23q8qJ9sl9m7Iec8q8O6ctrOYUx21BQdU5\nu4AfvGtcVr3nYZpGmwkq/UlCs3vssUAM5TzS3X7WMqIc8EtKY1FE2aTr6DBN\nxfp6YALFT3ot69BF51OCcm2HCHox65YnO0v4bnK8OxeDTp/kBLuIwUOwn7e9\nj80eQAyCqa2EPLgR94RdDP5XPFrwImBrir/9onmgWXc8ACl2vVvtLE+pdcxg\nOGVzeaz8tbzpUlZBpF6KmSVN8AlqxRyEmYu6QimF4P6OcxPHuAt27u/Oxkon\noUaJ\r\n=8tBV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.4e360ae94.0","@material/theme":"7.0.0-canary.4e360ae94.0","@material/animation":"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-indicator_7.0.0-canary.4e360ae94.0_1592600359830_0.6448635088452965","host":"s3://npm-registry-packages"}},"7.0.0-canary.8550fa53b.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.8550fa53b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"550c1302d465357ecb7808e00fd5f45b9687dda5","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.8550fa53b.0.tgz","fileCount":38,"integrity":"sha512-6myDqWO1NqSkxx5qP2b4gu3yPw9lNLb303D99TkIu6d3GLPcaUM6iu+S57W8xSI+SKHjkRymYdDGhh4atAkO5w==","signatures":[{"sig":"MEQCIErx2OYgLgP3IU7DVuz5gF2fh4XfF1UsRtzWY26yYk/0AiBM7CBA+TMhvLaUNDbTW0hixMrVNa2PwosBMfgZ6ADO0w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SevCRA9TVsSAnZWagAAXM0QAIF7uXiHBOPsyLOpYv+J\nOxUQ4GOhwfrIwCDDzdbTiGIG44f9ZX9FG5elwDCrPaSdfLrLAIGbnZ/2PVqH\nrwoKEdx5PrGD09N58PuEH19bE7b3ClvpI8eKufOdiWW004uHu8HsqVTiXee/\nkuodF7dxy1rCYMFXXAPZyMiYQRidsuJG34N8VyWbMsB9KeRfl8VZZ3+a0FPI\nHXdqIgtE0coq5w+c4kU//SsMdgsuGEx6M5ieHG5exgRckWD+zxP8REQ0L+Fi\nZGovSZ77+96Oak/yxBFwnOdh8DB9FhoPRMCKssd1kT41yO1OJNg9UkQPJq9T\niydM3toaktbpLBQeaASTrD8AnTjd39Iha0+K9b0sWFhKxvl5B9kLSpVznn30\nz2015GWyryduGj3+uH8RInkkjfhhBBbXXuXWExoONfwpkx3rxTB1Y5jMyYnH\nUDzAExKl0sZgcoCe+NTlR6SKpq9YyUqLlCxgSecbicFDAF1LOWor+G5ilWpL\n1OMdcGRr4YrdGp6d31peFyEf6F6RrsgEo/cQyJATlLS/TsMqvOz6O9rChWCL\n+08Fr5Vbv+1LaBjQMnJ1xicJslGKOeQlU0KZrt9nkItVYX9dNgE9FStpb2rJ\nqqW8+QG8u34hcXVEByLXeu7YvNx1NKyfzwaqbn7zBFRbJJOqK/9ot/PCAmZ/\nZ8SY\r\n=qR0V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.8550fa53b.0","@material/theme":"7.0.0-canary.8550fa53b.0","@material/animation":"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-indicator_7.0.0-canary.8550fa53b.0_1592600495082_0.6235950616489283","host":"s3://npm-registry-packages"}},"7.0.0-canary.93ade142e.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.93ade142e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0e1aac669e84ce3e360fc94a3452973d8bc87759","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.93ade142e.0.tgz","fileCount":38,"integrity":"sha512-Q1Cw4CAB/qbwxZGqm15Gv+4DExKRAAxZrcaCEiml1OyySJXW8RV7oIVbIQWm7L2RlijSQX5QcklMdLsonOhkIw==","signatures":[{"sig":"MEYCIQCLAn1ZXF3g8DYoWPd9ly5y/4SyE9/jtQmv1sGYpwAAgAIhAIwW67JdhNTLc0NlQUe3jFkjSuA/rYrXrO6ZHeJQhb5y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7Sf6CRA9TVsSAnZWagAANdIP/1fLdiuTLlSF3CHQqUet\n4sTWBN/IWqqXUvqOpLXyo+zK+thXfZNjhpIKzKXo51egxlshFEo5BY+7ty1v\nTELh3SDI4Mtegb2zvhyipUabs0HV234SjNDz4t0ei/+snFbqR+y/dCD4h0yd\nXNADSxOG6n32788m4csPCLoMd6kWK3/4AKrnddME/xBL/GP0pNodzQI6Pjqy\nkv+lknYFI9KXd2ohqR5AozXm3nBDd/esGx2CMhjPKBRLnqmSZj4QHCH44qjH\njoI/a4wXpJ55WjqSiwWBFhrYp3leBmjLAvr9rBtW7HMrTpl7Cm3DrpcJdIvN\nBCCPjlehsJ/9P/X1meqfRnpsUtvvu0ExaqwDK/pYWepNxBlucmk5veeF91qY\n+VfmJely9ZDEhHS4514Vf/o3nwABZ0ER7u1tJq1k2n4qEeFV28639gPohDFV\nktT2LlC3LFADsLIEq/ZPtvIYfY4xbuXl5JXMA4Ll0Ei8vQXKzJPIYJojbuYw\nCodhRFGYePMjaNYCZaCx8M4F/xQ+G7Ni05SQRuN4wnU3Q3DB7xgAxswhql9j\nYGo0WLxI4sE+VzNHdxctTeUvunXOTO/8I0jNvSSmb/yd8zncYk8kGqPlvOXp\nICQrXt+3xARBgXPwFkpIXT3LKozbZjt9FvHfQert/qvG4t5y5KPjT9rN9CD1\nO87a\r\n=mFJW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.93ade142e.0","@material/theme":"7.0.0-canary.93ade142e.0","@material/animation":"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-indicator_7.0.0-canary.93ade142e.0_1592600567042_0.3294565943097434","host":"s3://npm-registry-packages"}},"7.0.0-canary.a0032f5bb.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.a0032f5bb.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"5ebd9bbb7fce31f4a7cf57a7bb23d5337a46cc31","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.a0032f5bb.0.tgz","fileCount":38,"integrity":"sha512-pjivGux4qLfYgiDCq1ssva34bZ2wwmMlFCzfKC8LtsOvgP3m+boqXGl61RabKNzXYJ4uQFjFM9QUMU3ZjVNLhQ==","signatures":[{"sig":"MEUCIDmGZVZQk+JG9LF+5sxr0eJWN6pk/fxeYmYPAIXqORBrAiEA/YKjd5SzmFRUSyf2tRNOhCn0x9xFDDKKSZfZPlkYgNA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S3VCRA9TVsSAnZWagAAvQgQAIvoMHSuV2TSJqw+3ez8\nBSD6C7lrmN+rteYQVknP7BxEjC4owlvRNmHaOPpZ3BcW2Pl8ms0JEJiUGabg\nnYBonvGxCMH5PhIZWyNuv08rfjy2qNfOHzOWCASmLiYaPstTvcTniA7h6nFX\nU+zTcUL5m29HNEhmekXIoXSh6+N95fDiEqghdlRXGHGMIJ7GJHkRo1qm8Cug\nXXpAhUYfRhGvTa9oBOLEL1HCH3axyEescqOv1RtWMwA3vPeX2jRm9R9kRSNB\nIhL3OEg9bXcGXYd0LZRkLR6k2eL3Mh/X2J7ziU9HoudjxLGgZFiaxsBO2WPr\nXrtIE7ld0x2gNbf1fspZ74U8fKFA1hlPRDJXbp69lAxrb7dxXJVvaag179Pp\n+ahkMa05P8XuBPUIVceOeoWKHIQqzbivFO1vkxFGpDXyuU1nW/Gznc9Z2Eqi\nYmf1Ve7EcsEqjIbgsLok5EHLkjqVYrH9SyRSlkKTXX86bStYHlMJk3P1GWnE\nEEid4tWH1t+2/fribw6ndavuleCf2E75XEhmuW60gwslN2ERFMsqpCDHfd+M\nCiiD/O2b8YvuDAEZS4NGdI3ZbCgh9tBFBpAAacmhiDltGAU58kpWlCrAjy1K\nqWDmk2rPJGuuNqjAQYnQulPvXWL6axlOoK65uIJL1aQmL78nwi6bcgvuSqiy\neDhP\r\n=exZr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.a0032f5bb.0","@material/theme":"7.0.0-canary.a0032f5bb.0","@material/animation":"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-indicator_7.0.0-canary.a0032f5bb.0_1592602068505_0.7763325236530538","host":"s3://npm-registry-packages"}},"7.0.0-canary.3f342e721.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.3f342e721.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ba8ad300826bfef20e0908fab57aa6997e026e5e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.3f342e721.0.tgz","fileCount":38,"integrity":"sha512-sV+kZr0CUux8o4Mkq1Se955RAsu8HgmYiq5G0U8VwcvmlnR/tEIs45C4vmfitp6cZ2DxE0saZfdTxQZKQ8++bw==","signatures":[{"sig":"MEUCIATseacLHO6kxxhPediDm2kkqYSn9Ea2PsTyVixQlt7SAiEAheIc7dmPNz4PQbuJwq5caEu3/z23ovaPXFmF1eCAFmw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S5eCRA9TVsSAnZWagAAKtAP/34jQ5VSH9JnT1AGy4V+\nlszJGVkzMFzy5KccHRu0RhCpCIX79IY2BBDspyi0UCbDMPjHgE2KY7qmpoky\n1g3D2nQ+EhmeHk1X7PmP7uhitz2tu5vcKEmPKasolFo3QkGHgJyENL/WWTNV\ng/iHUA7Brdn6v0YNX0JqJmE1lZCGBXYpKE8re9+C4/4zvOvuiT2j/irUmNzD\nOuuISv1D6RI/uFVnikBg0cvRN8SeneiYa3EngdL9XWzwKJXLmSmy/P41nFnP\nnZzOu4R6+k46KsZ4C+pQI/A7GUixjMBmAAb2R7lAQ2dbblNd42j0vZB5wibp\nhGBUdh5Uzhs+K/WM4+4ywLt+GoPd7u7FwcHbuDNHQJE4NXSnwI8KmxceQKGG\nufgTQEpqnlBvlvs1Jik/LqZPGmGt4GkvYTbgl+7QsLmZGvz2+Y9moGZK9ub0\ngYdZeVhQYaL002ZYZzdwe83yTLgRIUpOnrAOLwFoqvx0ttTP5glRCctrD8+Q\nwQjt15XQ7KTBjNSc8OCNUXD+kiXQC6ofFYWhUtqlHTBDYjOgTtbFw+PX6G3i\nb0osXy6TUlyj66+Fd6PxlrU4w1OpQRAQMWhXmCKnBJBkm+2SNQfWej14eXEI\nG49yJDy136CFu5hz9d+0hNrbkiYRyiPRaXidADUrY2d01YtL55mT6ekvYPH3\naMky\r\n=a/Xk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.3f342e721.0","@material/theme":"7.0.0-canary.3f342e721.0","@material/animation":"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-indicator_7.0.0-canary.3f342e721.0_1592602204240_0.8128614597498283","host":"s3://npm-registry-packages"}},"7.0.0-canary.ff89457cc.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.ff89457cc.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"2efa66e9b3dbfce4609b80a8a882287e52919925","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.ff89457cc.0.tgz","fileCount":38,"integrity":"sha512-mXXE8cqxN1GcPThMYIHgUJLVkEQDU7fokj9h37kYG78mp0HfRbwhd8ISfK4HF60nnZWpzdzqYWoIKgCOL0g8kA==","signatures":[{"sig":"MEYCIQC3kobvxoDJx60Znwdx+36A6OA0708AfMtr3C28Ej67GAIhAKiEur3y+fjKJyc7HVS6AEx1CS9c0atbKYE7J2IWE/Po","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S6eCRA9TVsSAnZWagAAHzYP/06WQZScUPUTetmPLd1+\nJTqUCZptBCq0FTjFABHzUGz30xpc2pvAEmFopw3IBVj7kz4XJR0Jv0HDzoNt\nBl+D8bBhU/D0E1XXkbIAUUENEnyHruJpONtI9mYgGk3PZBOb9aUGDWTBDwZX\no6JaCu2vd0QF/CbM7EDVgDNNznLPAibSIImyoVgOyrvh9Bim958yMGw/HedB\nfVvE9zCylE2ocFqkPeHLFnPOBpxvVWEF/bc6zQYjAKHIjuM9LS0V9nRlJ9s6\nPGVBOAIUdvJIy9Kkv+b/4CUmIffLFvFTTEJd88fpUExKsUMYlYurIRluzDfc\nx5v2ed+MWox13/t0nQtrDyTNm9+aUXg+eFuZWkKexDlWmNbQQBXL+xdtD0//\nKL8QLz3cqtRqq2Vw1nCyruHyq/mfpKc9VRFqjA8BwnOpVUPD98A1MEP7xLi6\nybhPUhFBRZ5xWKeKzzc5a0RnhjXoimwOeFmnnBSSSz+FEws9IUpsO1hdEi4j\n+rMiD+na3D0/7H3B5tZNx8wWE/Oa0p2wKruO0aWFPuPKBNRuK5tPVcVJY7Pe\napP7KcdyuS9qPrAH3H7eqZGpOrZNP0729gN/RhU/mwG6sHc8SC+Hwej6ce8U\nbb78ZHNNp5s5gtcGDaAweSNUYSxTqbjACs3dACNznekds78omXwEFiJR22lq\n29Eb\r\n=/q5R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.ff89457cc.0","@material/theme":"7.0.0-canary.ff89457cc.0","@material/animation":"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-indicator_7.0.0-canary.ff89457cc.0_1592602269817_0.5783106967182714","host":"s3://npm-registry-packages"}},"7.0.0-canary.4a1855cf8.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.4a1855cf8.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"f189c120bc75b5243c4907137d92758595bdcc57","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.4a1855cf8.0.tgz","fileCount":38,"integrity":"sha512-+TnHVbxRucDiHPz4bueRh1sRzHHFri8ug2bLe2DuO0qZZpgfBSTHhE+Fus9Q0Cojavwsi3JBjp49AMYG27TbVw==","signatures":[{"sig":"MEQCIGOYU6w149QQ8s6U+f5qDmO5xSfnCd5nBAKqdDQqbLNGAiA9p/U+x0+rAon/HWQZzkZM8h0NLfYR+jTbMqxKiYOyzQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S9ECRA9TVsSAnZWagAArJMP/j+j9XDywDOn4EAcV4mn\nBwJ6uaDvgcMJ/eQ+Uh3/RT6rc3OmwZQtjybQUTSoENiLAy/wdkS+qfwDrpUN\nnOK/6Vrkw3cdYgXaEFNch2IVj0vUjoucPdNsjz8E8UET7n+/m9/kDLljTnpR\n9RhJj3kygZ+9dBaPOCAQl4IHC9Wo4EXUbiFloSG7KObhW3qI6hd7/lUnoO8m\n6xlJLIxiG2L7Zum/r0N3UtQM+MUsp8RibCanfg1WZ99oHJ0Jg8OCUO6ewjBu\nHfuTQKSFe11a3yCDb9RS8oWtf1Azs+U1WLcwXAwBBMpbC5y88+YvvGF8DJ+g\nwcMD63GOthcvo4/X4KvrYe+F9j4eRgecmACxBCHknyUmqKQLc97iTneo2W3S\nJUjqfy1ZwAy0rwZZ2cUhxbQKzXDAlU0GCV5opqsjktwZ2VsR79cpoDx5Byvb\nFZQAwj3UvKmaPCV6B1GC4Qu6mB3XR6v4UXQ0wQrCuYuw03s2p9HHQPC/wL5X\nLq+W+2FBeUT62HIuBYlx4pbxr0WNM3uGaNRWuEE4xTaKen7FZLXcwCE0qtGw\n+bC1zBTuCy/11MZE/aL8BEjSlBRB3BJIMdgjN2OlqyNbQiVl8m1WLpcwwwFh\nshjoL2ma2LJYtV7sY93bKNyaIfs7D3Wj5QpBh5KcQvrpqwcqE14B5MXrF5yZ\nr+C1\r\n=apJi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.4a1855cf8.0","@material/theme":"7.0.0-canary.4a1855cf8.0","@material/animation":"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-indicator_7.0.0-canary.4a1855cf8.0_1592602435923_0.5655864057223978","host":"s3://npm-registry-packages"}},"7.0.0-canary.8602f1b4d.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.8602f1b4d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"6cd565d422901ae6664dfa5939843a8c1e96b970","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.8602f1b4d.0.tgz","fileCount":38,"integrity":"sha512-suaPClow+c9kzL3wXI3iLXJgm80Vh+WZXi0LOICLXxdBlgj/dnq82JKIZy5dT+ixsu6ewT3Ynnm4UFHB5tO02Q==","signatures":[{"sig":"MEUCIHNbimcAzbXEJEsCzQEjEKbk3p57bkChW+BVbllmi1xKAiEAi/roVn5mCZCBlX6FvFcXc545/zS9ddbWwlDk7IC8ZVA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8OkRCRA9TVsSAnZWagAAQBEP/2xLsDROViTi47J9NWfF\nskRd2vGd2/Ffa9AV1uOLk/aW5CvPUwGa6E+pefGVMfY40IkjtCQWIji3uwZl\nQoO0IJ91ysD7OnbxxYPI2+OF+HCGCMXLm/9zX1c1uUqJOWMHr2Roy8XUh+U6\n+z0mYyPFZxxw9HlNqzIk30eDpEmGgGeT/eeQQfvcnwztmztvWUriY8U0INXj\ngaGKFHlcOJxibgTl396MyIYNjPqmgGmF0Zn+Ky7FMwF/cBRZi+SicT80yFx1\nD1auEdrGpa1DQEBwPIaVPuKcp5aamo8DsoueeuaMGiR/Zp9X1bhxU+ZwgFdO\nqOXW6qJW1Fb6qvQ5zoEPfB8Q0iEob/h1yIZ9EiwAWRWNX4uJR+D7Q4c6RIIE\niUkZFOJjGYpeEnN1OgtenDbgOnWvQ6/Wp8CoJgvRQVT6WIacbHYRcht6JWnz\nxEVDb6YC7VoTUmHK1QE2ADt+lEzJo5yOKd4IZYHEZXxh6hEowV1Uu3nS4J/G\nMQp/sR3JUnBLX5JlADuO37mfa4rM7GKr4cAY1bj7VSOdtL25GIyCa1DUAFrV\nRt8mtd690o+zWVGEXWNKhqkAMX9Be8ZQR7ddtUldAycRyZYdje3rBH7ODbix\nj6R6O3KS8TtIqo303SKYPUxIzNZtghevR+bqaONTXgg+domQ+4e3jXWqO15I\nN321\r\n=6Glp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.8602f1b4d.0","@material/theme":"7.0.0-canary.8602f1b4d.0","@material/animation":"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-indicator_7.0.0-canary.8602f1b4d.0_1592846609388_0.0967931480352826","host":"s3://npm-registry-packages"}},"7.0.0-canary.69f9f0982.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.69f9f0982.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"17026e5f12b52518486fbe3c75696f111df6b08e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.69f9f0982.0.tgz","fileCount":38,"integrity":"sha512-83D2yEbnj2FSEgDSvIHf5xC/PXYxwLULE5xjD+nOC3W4JWEc+UW6hEgaG7AhF3mY1D5pV8UVAOZ4B90QqRCNWw==","signatures":[{"sig":"MEUCIQC+FNgWd0OEKkPN3oltOw92GIgTGZ/ib27mMa8F+ZxERAIgKdtEvSFPSE+O9FOLN8nephF+BN6VHNxQ2tfhEBVoLtY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8R8mCRA9TVsSAnZWagAAL2cP/1FT8CQ8sCbXpywFobTt\nTMCrl2PUb+WdFbWW2BiLxJnHbh7HpWsDuM1jxaCWauPLd/CCQ8enNLozmP50\nkYsLiJ4KXjLNbrCyYl+QEz7UmA5Scecwdrxp+wYFEnl+D4/ajRiye4FHnshB\nG6p9i9HL/WhRjkJf92f5ixa8/u7opUNKT7oa/8KxUcfZNMuEQBM1N3hhLv/b\nK+hg2atZXFk/H0C7OSqtIZhQtK+7rdXGqMvutWg0jKiC26CfTz2pf5hCQBAA\n6wDEvi+1UaZkAfWcwg0tk/HgsoesnjXOZ5xlMDG9T4kMh2+wsqzz0+G+xcQ5\ndkD7P2eAztbB8KIRHpTW8q2mxkooPkHgmbSlheM7pYiEodF4GKFXXe1p8U3F\na01N6fzwdKopJMxyosQB3K+U1Br93IxD7UVjiBvsJw7WGz59H5HIrPHUp5MI\njLM8igZIYBV9x4X3apzAgnGY/7VUDTFspV2j5qs9Vm7RuNwswQg+YFHMStVa\nlHFTJLHJH7bozFnna4mZAf26N82a2X8alncf2WbLnFJVOf9bTAqZ+UhRVgEp\ny23CveNrUzfwxbrkx6bWt94zx37jJxqLBOWjcEfWiY1CDS7ib0uSqTh8MeQU\nIwQG64JSO0s4CFLbJBUqXJ16V8zhq/g13CcXKdse+WOJM5UFkWuV6BN1E7Tm\nsHZ3\r\n=NS3X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.69f9f0982.0","@material/theme":"7.0.0-canary.69f9f0982.0","@material/animation":"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-indicator_7.0.0-canary.69f9f0982.0_1592860454295_0.9398017100701976","host":"s3://npm-registry-packages"}},"7.0.0-canary.369a293f0.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.369a293f0.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e896e38a450fcf7cabb9056ab623d3fb3a559abd","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.369a293f0.0.tgz","fileCount":38,"integrity":"sha512-BXON7z4ThZ4PUZsUo2k7uINBDYq7rUPGnkE15isQb/RHxOfPXkg6fEHlrDPP9cHsRi8JuSE+t9UIZZ3jlEtzcA==","signatures":[{"sig":"MEYCIQCsUjxFBVThVux2DdAuDQjIQ9HZI7dC9j2UjmMxnL+0VgIhAKt7RDV0gKiNmDQeKtnY5QKXR3PTU1Iqi0dOxnYesjeZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8R+vCRA9TVsSAnZWagAA/moQAJIrzOlZfO1BmkSSGwKd\nbOdG/GPNRJn7N9slhm4AYqFWSbMHuu02NryFxjnF4JPi3iQgg+Wzo570UXRN\nq/pdsZOv8ojHH6ePJfKffE0KMFr3JBV206O1kXWeft+OMWM9QzMSXB5chhIU\nUfG9uPFk6Xw34VlwQTGaLZQzKsGqSF5TSUc8e9NsCPJQR1eySjcwHD3ohLw+\nJRikMQ/aSXPIVtTtuXe3XKzk4Jyv9E0vbhGjkE+AJjFApnc0QUAMXZO29Y3D\nAfFpA+kM5zUabRiJZrolK8m+uFnjbY9oQ5SAT4yRjZWZm2n/cI649w/0cvCc\nmYcOPBXJUWFTfUbXMQd/JBJVeDrZAyR/AEMpU40LC7ARTeoumozUA+Sas3sn\nMGcLg9QcqXo17RFKq+mvGcU0tQH4JnZOXXi2//U85JiM0CLTBC92SE+hXYtV\n7rs3fzIdfHhrFjgGCd3wIZsyUkTvXs4eVMS1TTNLbQs6RsSeEE1H0hYV9G4u\nPuZ68YO4/uMkDfzVfqe28wq7mVld8p4WfAw7n/ARpyRmbQljllRpT7IjQPKD\nEaBWLq1/d9rCKwmx+dTO95GWfSYRx5rEWct2I8dUJmvgXyn/RijT2uloDIw6\nMkluH4U1paDxccxB8omDl/NtdKGWJtgiIPAujKYxMXt6D62s6Jx4Sfb919fk\nN43E\r\n=yrJG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.369a293f0.0","@material/theme":"7.0.0-canary.369a293f0.0","@material/animation":"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-indicator_7.0.0-canary.369a293f0.0_1592860591341_0.6894739102206886","host":"s3://npm-registry-packages"}},"7.0.0-canary.f1432b5c6.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.f1432b5c6.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"b3710b360957d8a9783b5b93a10da7953cd1993b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.f1432b5c6.0.tgz","fileCount":38,"integrity":"sha512-hxmqbU0rS4m+NrO7GiumZM5EVTr6vMOfpMEmMgHlSy6yCZUk2gUguwvmt6XmsTEMPo7akfnJ+wG7WPau0nNung==","signatures":[{"sig":"MEYCIQCgDNl/CYQFqjMEDKaijfPCyXeVGWd0pFsFJZGTjRD8bAIhAJD8CtUxChpzeSB1klgNqT8mBLxxgmPeGyuflhi5+CXa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8SGxCRA9TVsSAnZWagAA4vkQAIpmBDrgnkfToqMwUrJ1\nmBg3yu3QtXMOqg90BiNNwjXBMhYKCkQYDlCmH1os1aWszsvLTme7TU6MLUi2\nsPl5rm+5weWKi4iFkwbuZ38dDiddDfFTZLWGKkNxaCqJtVuP7eFd3pmmWqzC\nxaX7/7NFpwu8+GjDtnl+U1lmuZLPs7yByuen9qCfeka6veOagdSwxzCJGI2p\nXX0ParvjYGqQ+DsdsJEyHXwSKN9xRPIWMWQWxraf+eLWG/fKo2iq711Wgdsw\nhiAkq6d9sHegKFCNNCAEfTryQz7QpQmi0GO2PRT1g05cWuZZg+V+3TsWq+Il\nS5WN1CJdAsdnBksb/CW1Jy5paIWuJwKDqsNy461FvV5qMnVXVnam+krMbCmC\nHX21VOtqBtgrbKhfnOOxarWaSmEimYEsmwlNmBvBTWeF0dcpWBo6ZMhmAIRO\n3ebqjRke7ee+/ouuICUQOM8L2dx7DAPMiXAu0doLwszQOv/dl+J8N2y139w5\nls+W/y8gA9hI68f5b4c9AoMZk/fk30ILdKiJb5ii8tqvNJu1pUTX0oY7dyii\nLFVfzXEJiQEHla3HIKs/f1XkyKyZKu8Eqa3Cm6WdYKg0tm1Ulsw7apFy6UOL\nZU/zu38IHoAn5mtTE+DEGWUVy5rZdzUpU/q3KWVv5UR0IxjQoPwlpsDNeqLi\n1Pw8\r\n=92aR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.f1432b5c6.0","@material/theme":"7.0.0-canary.f1432b5c6.0","@material/animation":"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-indicator_7.0.0-canary.f1432b5c6.0_1592861105482_0.8044408424686333","host":"s3://npm-registry-packages"}},"7.0.0-canary.4757a16b4.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.4757a16b4.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"a31c651cb6092489b7477edab2882e72fa5e89a1","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.4757a16b4.0.tgz","fileCount":38,"integrity":"sha512-x1kLBKgM/nWcvCh5bFV3e7L3vLjz9i5enIHVndtDfHB+uwGUo7OO/jA1H0cq9H5DCOS+hIYNCgxmptf3lfeZXA==","signatures":[{"sig":"MEYCIQDmFVAvdT0zKLTV33fJqyzLIC+MqyEzeBO193PC2fs61QIhAPidznkn4KBSWm8TUAz4GJ59Kom0WkCKTQ4DE6B0tET+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8ShJCRA9TVsSAnZWagAAUXoP/Ru7IU+WauCWud4ztv/4\n2aUuuQrn1JmXhR8Wf7GXoqWIPNM5bOnOoGZVGG9QfNCZo2dlT0ujP+wcSVae\nx2GUBbuG9kvKUSxgk/Ylla5Yti0qDHZlav2mmEq/ZRK121dD2vXCc2XFbyf2\n739reMBykytMVWO+Bs5l2ykuR2PH96PAS1Ns2yp3Y1HIq0bEmz+qmJXm7k5v\nmToBVVtDh/gEYd4vxz5DTaZrg0rjgn+j94eNJwyZp7OMiLzoqGj0D7NY2Vg4\nslsfmMfSppkhHxg+SrTbGQQzvYrcsS2MCb6hRBZlxbH/4AdLRBR3NExKYYCm\nYL00szN0vWyARpg0KiADqSekXOY7PtpBlMgdULLsF5ooYIEXKck1inUt1qP1\nDzqPf5kurQ+dxB5EAk1alPm6mytKmPERunD+lklOx1xZuaZ2Lku/vFAmsrVl\nXYG6jo0MdrZ/m1NM21JGxrt/PJqJVm3/db2Cf/hvPEOfApwgTyhntScegwae\nlQAOQ+GFK25bcAbIdHwVAVMwDTG7RxhFe12RVQCqPOxoMmw4U2HsMPpZM9pq\noUAPzeotbz/Z83ddGpq7tIGaT5eUpmoJeobU4tfWP91zNjTH/mbPQorS1nyF\nSo1aqHO8Ber5H+2/9KfkwO5ic2ciI7QYKuCdTVzlxRxFTKaB9N8k2VLuKkkD\ne2l8\r\n=G5vI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.4757a16b4.0","@material/theme":"7.0.0-canary.4757a16b4.0","@material/animation":"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-indicator_7.0.0-canary.4757a16b4.0_1592862792436_0.007999066499740914","host":"s3://npm-registry-packages"}},"7.0.0-canary.f8f472762.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.f8f472762.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"776b841ad1c035c20a6d09bb591af832c70d0812","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.f8f472762.0.tgz","fileCount":38,"integrity":"sha512-B41myPyVI0F0/HLnFusnjq9tI+Qq9cwpOysmLPuuXMU4s9eOq23Hxrr61PRzf+0s6sdZoHulbybaDVIP4kKnXw==","signatures":[{"sig":"MEQCIH0rqWn5tNzR/YU4ZfOWiI7li5DCQwviveYffR68oyEFAiBsSBhf6ZFByWe2pQ7vyriR/xXtJ2jS5xlP2Xq3TiF/TQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8Sk6CRA9TVsSAnZWagAAwp8QAJS8YJYiHHxxT4TPcPbf\nY+lJ1ERiQhRolyoRAUKNRguJkpSHF4x1KFhZq9FTF4vDnhmXxGjpfiCr5MG1\nOBgrs1qZNtw0ZqbMlWmSbGPeCHNKo73a55jerd6ykZ+RLfJRo3QYGuvl06Bj\njmMjw5CJ8Sr3sVx2QuPdOXRCLUWw0tTZnknlZBtW0+E9yApNI4jXBYyb0u1K\nb6+YOgWkiTRNoOPtqthhsb+tN5uVVcqwLgHD8zW7ehNjTtiiUHPBeg4RTIix\nXfWTF1P2pNsTCjzjZuI3zTcASttP22QBQEahvSiq6fSc0cpeQ2BEp4PpOwzA\np8ysFZUhzmYX6+gThN6y7pTZ6rJPL5XrLCQ9ZrYI9Gf9yoaisZ2+yk5yf+Rh\nDA2arZQqTIiFH2cC2pD1LFEw6CWN59xKgF21i6TgKtKtZ2ezbTvM/W+AdXT0\nl0f6HQhqsJTVIwOmX3pT97sC8KKKWiZlUAFaywUMGdV4AJvC6Ycj5woMY+yU\n19ia5W4x/bGe7Ss3oUgVA+iWZuO05By+bwxiOsdUcM5ANZdnYRsXNYt3/m8U\nNXJsFk7unDhSshy5Uv2uz5p05GfYUAmQhNYOU0Nittty0W5KuhPyMUz7skLP\n9V4SHMispar7LPFCO4wEKL/e6sXINygM8smR9oLJLvGTR4Omkbsqdf8ljD2s\n4i8j\r\n=zK8s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.f8f472762.0","@material/theme":"7.0.0-canary.f8f472762.0","@material/animation":"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-indicator_7.0.0-canary.f8f472762.0_1592863034043_0.6983638321996917","host":"s3://npm-registry-packages"}},"7.0.0-canary.7e4d55c34.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.7e4d55c34.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"a46d58d66291425402034f0534c0ab93c6df248a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.7e4d55c34.0.tgz","fileCount":38,"integrity":"sha512-d+1EuCtNDVYIo8f6U0JZvDRfcmR5zD1bDdA5zWXw5BehTTlnRadn6eoU3p44lbyyEpNxyaZyMYMx/Ct7ToJ7ww==","signatures":[{"sig":"MEUCIQCEYwmGEVgi4UkURQ6vpFZ592o9NxUbJ4J9a9aA4EwF4AIgND36jVhQQo34V4PVujeH9hxB2LV1506EuftVj8NmEfY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8TC3CRA9TVsSAnZWagAAwgYP/1k386W8es3lBrqavg99\nySg73VRwW1moahGcYi+/o+BJvTfmVGsYoAe3h5Jk1NVvjoQyB0Hfi2rxP8Ev\nVyyuJdMJJ247uUte2zx5pO8zjzR9KP9HxXd/Npn+Ycsv6jyB6EW+M+PEPAE7\nx0kB0GfNtVbmzZsoaRfIfUALxdnBDbx3BDmMibvHUYBUkbO5kzGVLj7fBMQM\nP+GRT6IlRcmSCgTnSsjuu0P9NxmyTajy6woUvIw3SHYm3pMuQzhnPk+mBOVT\nNxh9VDpFiqbyGEyThK4um4AXfDF7swwAXtIODcY+9uXPdxpOGS/7jROz7aye\nh8WH94Vvbv3WeWapAny8iPrUzEu4IdwLRbQ0Osoj5PHWQNRrXWannuP/CT0j\nK+lMYdJa4WDqhozgLXirRd/AL0v58Gw5hP10KamtjyibhaWikXXFlFgbKHpm\ntERSNjhNZ9KQckiOI4amseUWmJSpwunK5brnBW1bcM7yKisrLBILmmMv0/Vg\nBcGE+VqQG1zIQ25bJYIHg01nxB33WwCtw59GetjckJqEfh1ML7Pz09pwwnrn\nYZYeacc8N8Ijtwm135dCyFYLqZWbyvLp1TwmWMqYBhU6EEKZD5qphp0qJsAp\nf+iL8I1QcLKXY78TrO+YE+0RSdAQJz9fIvA7kqz79KOJqBfVarZNvVe3nn08\n9T12\r\n=Oq0Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.7e4d55c34.0","@material/theme":"7.0.0-canary.7e4d55c34.0","@material/animation":"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-indicator_7.0.0-canary.7e4d55c34.0_1592864950798_0.4229586976580344","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd1dbc91f.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.bd1dbc91f.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"53eda5b5e7a60677dc74cc7e5c10a1662a96cd5b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.bd1dbc91f.0.tgz","fileCount":38,"integrity":"sha512-eLPKd4wQ9y3oIriPtjBIXLRWhVwZjTpZ1x9SAJCC6QL6RRevZWX62YuZxHQb/vEX54AuYtUq1Q4e2Tid4lpg1w==","signatures":[{"sig":"MEUCIDsDplweNuIsST45a6144/i0jecIqTqsoq6trnvujurEAiEAq96+7Ag0nJUXj16fwG54ZUKVilLEmPmnnVK5JkD3rQU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hFoCRA9TVsSAnZWagAAEFUP/RYdkAi2hfptza5+iqVh\n+K5tn+MCfuuN7w5cw1Ms6J9aorMdqcxkX1kkQoacXah2T902uBVz5kAaO0r+\nEl+EUHvYa0xyPsW/KMdIlxzrH7APzkCZbJ0iLAkyMLgCJ5PPhxm2BGd38PU+\nEafjkIHS7XmTZlcitikWbRAT2kcIE7W1RSKbMrRtjLjU/mTxbr/8o5BTPYIZ\nPNKtmz4bq0RmNOptYfzdR8kUnAR6Q1gXAwSgpkF1+opUHXTLpLLTreAv4WgE\nM8AasAT+cWu5CuNJut2DurEjixfbJZPI9OHKCeLo20J+H8xclB9b4GEyuxYv\nRtRMi+QLAxNIXjzVLq/jnkhjOFe9J5rG6/QPIL5QUPULDXs4fSXepJV61DMV\nJjCjsNfnG4fz/P3wGQ5gpQm1iNsPZ4yfDny1C4YFaeYd86Lc+BEusgETGcYi\nXmFa6aH5KEMtg/xHnZQu7cEn5jx73VM0mw/Bdtl7uJk/14Ll+2+UVCGu8Y2s\nZ4DaYWGRg2UiU3TUnjc3OkwFxVpqcQomXx+ZzpK97e1LPrS76GN1Zujckplb\n8IfOYiAVIQyE7gf15iP5mq1M5cjXEXR2rKRD+UQJBdAkKS+M2mGn8F+ehoVM\nNLSfBlk4TbYFdJborFAfsCdEJ5N8gaeT1/DN3UBdC5a9KDLbot2iWAHSRZCJ\n0vws\r\n=5TEh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.bd1dbc91f.0","@material/theme":"7.0.0-canary.bd1dbc91f.0","@material/animation":"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-indicator_7.0.0-canary.bd1dbc91f.0_1592922471532_0.188589948171217","host":"s3://npm-registry-packages"}},"7.0.0-canary.31523bc62.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.31523bc62.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"8253cd97ee37d9477b2f0ee6000cc539c27f84d7","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.31523bc62.0.tgz","fileCount":38,"integrity":"sha512-m5X/1UHbe//fNUBrQ86A5V7OAGxagG0SAzrf/ETr3TrJoCBjTiTKQadEt73SpfthCAxHDnKOKMdHrNJQV8DkNg==","signatures":[{"sig":"MEUCIHMO0c1YjaWfk/PpxxOTdeMswKwRs58G0YuWDfJTXzLyAiEAtRc7L2uMs07Do1uHhspHF82XM1c4qxAGH8agmYxkD+0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hK2CRA9TVsSAnZWagAAqKwP/3Zt1P6cxtUYQZjagU+c\n8qYqVgYvkOyC9fpLjTbh2WiTkehx+66uLYLt6ubhbNqMZ0QLn84HHYoAtrTb\n3HgnCA113JJ0/P2vSCnRFW3vgXipYi/dp0kq5QuAuFtSlnF1r/OCI8ZLKgQn\nHfV0AOkN233wsL0UHgrzt6EUOTmB1MtSbaK6xnJ8BkCgicBuiVlFXXjv5Tir\nhM+jEXcwNgnTTajeGH90en+XoAlNrE2Agm12IXaCG/otJRgabnxf5qhGtXpg\n/cX0dQKPlvnD5AKsEyS0kBczhScqKB07b0K6sQkb2PtOdggNF7uVFY1MLw+F\nnx9i2JsZHvjrMdfjdt9NDJzshMqaTx/SkLyHWkaRdKtce6RuU5cz4H3VsSqW\n6SiS7pQst6TAC8wTF2uFnaiq4JLF3hej8zA5CQHMb5Byg8TdIlfh8fsbnv2b\nAsK6RYi6xoq8UGO3vmQGiAutjM+5a3AO3xz8HK3SeW0LPcTloZisUnh0dX/o\nX7eXp4NRkIBwE9erIGOyxVeW0MwsoTNJqWfF/zUOj0NB8aksWPOB6xwBmIaA\n4glBbckZxI4ef6euF5Z1zzpnr4dN1srF23bu228S9MqIvLjWqBvtilgLZceS\nYEQJUW4phjY24lg7S4C4lPDWTV+p+4AOll3decAK18yK0wKNxAODDv32VQgO\ntswh\r\n=Z1M+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.31523bc62.0","@material/theme":"7.0.0-canary.31523bc62.0","@material/animation":"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-indicator_7.0.0-canary.31523bc62.0_1592922801530_0.8660325598824714","host":"s3://npm-registry-packages"}},"7.0.0-canary.a96b6d4d6.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.a96b6d4d6.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"f98bc0888ddfe4d0e3851011caf64edfc30b7f1d","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.a96b6d4d6.0.tgz","fileCount":38,"integrity":"sha512-/nZNChKWqjJRGw3GCU7gb1r0vHmwGnL3L+g76lzA3pwRVXGAjibuhwp5E1CAqbVLgMCuCUQ4+4RiFhBEDH8x0A==","signatures":[{"sig":"MEQCIG6Y5R7JFXoyhtO3PAGZ1NwVF1NN/UQEsw8aPJI88PZ2AiB4xp/bZ/2DH4pDNqRpluc96H502n8hJH28JzKIFuCzDw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171252,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hQzCRA9TVsSAnZWagAArrEP+QFbpdmWTS3bgDw+kZgI\nwlcPzt6Yui0VHehiV2EF52fh2KkWLdvyzaTAXGWeq+cWr/r+x/MrA9Tq1Iy3\nsFtjfzL6frrIj6AQZMl+Amb2NoPHUtJg4ZK8b0+6OZMJ2aOroiTStXM0WzZi\n/wdPNc1JTy7UDx7F98wFs5e2/Ol2E33XVwzPI+uF4Fd/8gLaMjsKsbsEYfJA\nrfbYYq2W9L3piMMivS1kuFmF+SSeZYOB5gY8EN2n+9T856D90mX01w/a3AT1\nDNixzUNMAcRFjg8BPz2HsPRb6a/uVJebaMxD1JQJnFA5klvM9xr60X9XX4A5\nEGISchFHTc+5JQmCgkQ5VWRSonXEbbv6Nzs/fE012r048BzT/Ha9dExEpkE/\n4KqvKusotJ4231+xaES3uQpAcfgpEwdKxQ/LSfnc2O2dJwaqSwsV8HHXodUx\nvwd9WiVc+0zJjSSBt6hTfUPYHQ/eol2w5BqhG+HiIYQ3ldABEOd/jdq68yUC\nkr1WYwXYfb5fqupLGRKjAMofWX88X67DHHzdTnFQ17zc6FYavZ/RjH2m1ZuP\nihdNeQhLzpcLkV82n+VGyHZ0tWUCqu+HiLG9L1ACwTeFL6tMVxO9ohaFbGE3\nUWHUwjd4NFZSYlT+3HkOB8PxwYrfHXC4+hbvktRVTG8YyKmsFtYTs3zc+4n8\n+kmk\r\n=ZVWf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n","gitHead":"ddfc88933cd9a6210bdfc449fd3fbed391abf4c1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.a96b6d4d6.0","@material/theme":"7.0.0-canary.a96b6d4d6.0","@material/animation":"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-indicator_7.0.0-canary.a96b6d4d6.0_1592923187175_0.35430216576810336","host":"s3://npm-registry-packages"}},"7.0.0-canary.ef3a09533.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.ef3a09533.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"2c4d59eaebc4dd2b9e67f035788a9d33c6887b56","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.ef3a09533.0.tgz","fileCount":38,"integrity":"sha512-tTJQZMOv+U4dGWKEpMV+R1oUSLShUXOgF1tVYOCEox9ZMXVSDgbwZQbz8z8CxTxGTQ5/qt5DaPm2MxzJId6oSg==","signatures":[{"sig":"MEUCIF07OOG64bfE6WeC+GqIRPRJHmUqEpR1jlfH0eAAT3i6AiEA+biHN6aCZqHyIjvzs5hXAhAZshx4zaLpaVeqGwMD3d8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171252,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hYfCRA9TVsSAnZWagAAuxsQAIHGGDIs7xnJ02mrfDce\nRtrUawjGZs+0XdUBGHKRmTqO0pv2VX03/qA1wqOWIurIx1zQgCAlzOI6HOYR\nEl4zFAYg487oRdfeCxakTabgLWve+FUNtkuD7qXbHgbtRJRPLXjYP8uddd1y\nYkOmBqAk4AL46TB9oNFRu+YsV/OsnTdL/9ffuJ2xdExc+iM78N0moJRBEyH6\nzGnnIQj7+Ikgf6w+wvVcXw+JaBvl1leE3Fd68uBjLGvGcyr3FCLBrdIaeN/9\nFElxsZRCFY7uUJp066lroBqPHY9tLuSH7xxrXoMaI19Gkmoc8FV1Qxn0yxeQ\njLnHX61NJpeYfhnOmWn9WrSHBy66pJNXUCL2Q6btJLQ4oaNlA4vdPKNiR1q1\nqdBxWW+Enj6mD29m1ciZ8TxmY6DvmY8h2U8RFAB1wJIWgWfwVm3C5Ky/M04M\nF1bUJ0LFOTxFznP8k3McrlUbX5zqO3Bz8hPKNPK2H+ps0oavFFkupVgk6tyc\nOx9WtiJOFF8wAJgb2d56VeQixDrBK0LV4/s/dG0fQ+wuJqsydRgJSkEEIudR\ni+lbv6g9jT/qRUUrdXnxTlPn+p+lfooLAOhmq9Hne0HP5cMr71Hr4e+yEJSG\nKJvRXk3MaZOJ1cSSZY7R7X3AALINN5fDNxX7XnGepR6gGT/HFNUih71lpZ5c\n7MfY\r\n=ltzF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.ef3a09533.0","@material/theme":"7.0.0-canary.ef3a09533.0","@material/animation":"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-indicator_7.0.0-canary.ef3a09533.0_1592923679016_0.3628668623409037","host":"s3://npm-registry-packages"}},"7.0.0-canary.080965f39.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.080965f39.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"f7abdd80b847a3253e3d33677853b9879f6302a4","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.080965f39.0.tgz","fileCount":38,"integrity":"sha512-/CFZlbrpFLvlFRokV9ALqb/YXEG7E93t5oSJNaMS3QE84M4wEsNp+UUivhnXFPgOL9FdDy+jEXs4VSkw8Xg6Bg==","signatures":[{"sig":"MEUCICVbwo/BmHPqSAP6P7ZOfdsE+4P+FLOp511uuTZIj1cmAiEA6TiNU9TzHBkdVuz6GC2hobyeI8T1VnubXm1CwSAUQZg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171252,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8h0FCRA9TVsSAnZWagAAhIUP/0wAYatXHKXFF/rAUTeS\nKbLd+CQvdAKq2r1fRJvS397IO61oBUnwAKOQMxdpUPhBHUmyOhdJUn59aBnS\nyHJK+G0JJrAKzidrMAeyl9qKPXKd4AMSE8bRuVq2lQxPDB+e+q4OmAkubA/H\nTVD0XZiJNpjntPdS4PXtmFhSGa+8yBf7+6fMvy2mdztT4gorqyK6Iyw7iB/M\n+MSP5Vw9Ji8AWNk7cU0TmjDGhWhvvVDA9UgVKBg0LrhWgQvA4lSRX3lFrCcU\nSj1ENhPrUiNBWBytp6jitfplYp41j4Jm2xzrx742PwU1tFIfLD41KoXgMq5j\nWsS7jOVc4GXoGByybGpcWY8ZD+FMnQG/P6rrtF8msZ25L3Z8ggbgkqOw/tAp\nq9ZI24OWQdiKgN8WUc8ta80KWjcs5SM8upjhWS89SdWLj57gT9krXpC6yIW7\n08EDqimthTPHriqfjh4t9uK2qyTFFhcqToZ1XSfQtrb+Xt3dbnwIx6PQbPG1\nliGtZRu6q4V1qnWVQ09rjmQC9hU/oJwiHljY/rvPPUgyOryrcBdIh4JG5x2P\nBXgNpUGGE1LevhLSORi8/z5AOj5NGROksEr4qOoRPcfQ/vXaGYARBEBSl4sX\nRnBXHikz0YZKjWrHKqxi+jB3kWOSBf2mcA4M/VP25wVz8Bczs9vr1skEMsBn\nzw5j\r\n=FjR4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.080965f39.0","@material/theme":"7.0.0-canary.080965f39.0","@material/animation":"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-indicator_7.0.0-canary.080965f39.0_1592925444959_0.7797449482215428","host":"s3://npm-registry-packages"}},"7.0.0-canary.1bd67b65d.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.1bd67b65d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"9731cec43f4ff12e7ae48d6f3d495081b1fc6676","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.1bd67b65d.0.tgz","fileCount":38,"integrity":"sha512-RBgEFhcusDjKOr1qSp7XxML3XhxV1j9SX0hO0Wg4gxzYtAGDB7EUBGr0MRP2oTJAuP4bajdLD7QIm4dW7DEhfQ==","signatures":[{"sig":"MEYCIQDMtPRNqSJ9BX8NeLAf5QgnjumQn4RozpEiqXXkg+RkrAIhAMKFcPeHsTYC3mDbPC8iq9fzfbXsgouagDqAoEb/h6QJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171252,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8ibzCRA9TVsSAnZWagAAukIP/RFPfLih+vwgnhugxnbg\noCBjkBliHb3vCphXds5YAkUa8S2SAsPQ89xwSN3CPjm0u1NQUxEJLuLE6VOM\nIkbApJJxHPzP9e+A5dPHQhlzMfUI63QOUuUdGRBE9om/aSxZBrkxzcJv7nD6\nXN068Bl6uz/8v90xYfKDtFvhxt9a2rvAjExrL8WyTSP18AJEsusbhtS/osn0\nw636CP7GZXsgfAR+g9QGL5o5nsAh3CKiFOPt2Jdc7wE7CPyH+/YMsW7tp56c\nYBlyydivJndsjodT8iBbd4ronwqdLNfx8XdnWjhYzw9mgS/xr14cZRZyYx1T\ngpdtker4LCI2pyffclKvnvQHIWu2Vma9mFkVmwk9JveRGjDM3hGQSgSd5/fw\nDLnymClviLvjhG7MUq6LOODVMluHfW1j197gb5v9MPh+bTXM7XjG5oxdixaL\nSVGlojiLDAUcyxxLMiiQb6hV7INbmvvqgJ7/B6+LXTtXdSerG6EA1SwgIO/R\nlqJU1TkxB9CengxmQDRMiCcbOVpAF3Qc0epUt+0oCPF5xX2r5iB8I4b7CZ8k\nKAKiLzydugXco61egloMKBwmHsvpkCDIt0JixwNGytj05PC5/ACjAvRjyemS\nxRBct2I4h6ThSl3i8cWAbJAdzbDMhYbfG65hPRKk9cL7riyO214axBXfwK+n\ngrJm\r\n=dZZg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.1bd67b65d.0","@material/theme":"7.0.0-canary.1bd67b65d.0","@material/animation":"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-indicator_7.0.0-canary.1bd67b65d.0_1592927987159_0.9936616671742773","host":"s3://npm-registry-packages"}},"7.0.0-canary.18ca31248.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.18ca31248.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"3dbe840db052d414a785543ea4482b1bdaf1c330","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.18ca31248.0.tgz","fileCount":38,"integrity":"sha512-dokyQ+i6nmdqisdHGypy+/d+/Ps7DXpXbWwZMRW0q6oMZMVn5dMwSNHbHiBq0X19aQW0kJRMz2biLwHBp4MatQ==","signatures":[{"sig":"MEQCIFF2x6npPOAAGGM+vC1hTXI1dSdQDPdXg5dkOGTKo1/yAiBJ2pSRXueEjDR791i2yczGMA8TmuZFIzUeK60jhKsNPQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171252,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8kjuCRA9TVsSAnZWagAAqoUP/1Mhr0kBLrcaFcvr924N\nvhLX45J6HD9dXZt+l6dCV8nHtGQ8XdnYdU3eOBIJ3jjh4nVBo27VCgaoIkGT\nTTkDHJtX9ATCwlEyYnWpyt7EEnBj0U9qlmXKaUONjlEGo2KYcMBEtM2m2VjS\ntLwpqooERtb7a2WGyitrhzClnDRwNRISurWZti7CJ0HtRMqNLPHbs0EBjaHk\nJ9qdkNoohGm9HRJAkZVrzC5GGxwPE4mVtA0dUTkIx3NPZjVBSTX+QZXw37VV\nH22bB82TkSo/T+aVzELGY+WdrhLWNkd1XhZU7czI4Twv70vN1qdaa1yoS2D4\nnkBXUSgKTWAsr//OqvycyE26QYKUA9JvK9jDZKs04zljJdW/Ts5gUqcTFTls\nTVGJGk0alfeRtkTN0IkdEe9MlgT68gCJD43weKnuGGtrLER82e3MS9qvPHPx\nF995n/64ttiq5FfUfAdsk8LJ1RqtpgfTp9dQB50gIYsJeW+hQnHfdxt0GqLX\npJvPIuudgjW3LzDtijAMwyXluk/y9K9QcEp7Sepl29bLX5umIlvJ5r4UPO8V\n5s+iKH3Jv1TKzT5N4w+rzZp4972aPdh+47mQoiA+2k0mSmQV3jStbdFDDMot\nF1iAOo8gCe6GM/L18qKQV6Ar7J5AfWrYM4egmVG7Pdg4Bw4TWx6mFG/pbfl2\nfUXg\r\n=uFvF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.18ca31248.0","@material/theme":"7.0.0-canary.18ca31248.0","@material/animation":"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-indicator_7.0.0-canary.18ca31248.0_1592936686334_0.8421485506457262","host":"s3://npm-registry-packages"}},"7.0.0-canary.39cf00836.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.39cf00836.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"55ebd992dbab5783a91e507b78921f8563188289","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.39cf00836.0.tgz","fileCount":38,"integrity":"sha512-AfYSw4uXZl0zuEcy6Gb3ZNJxx4VY+j/migEzoD36ktmq/9C/Mu3ttR7utfj7co6pB1B2zugibV3z7xsa5JpzPA==","signatures":[{"sig":"MEUCIHKX/T0tqlu0GiBu/UuMnwiqjveXS99oSDQ9rPE7ZKGeAiEAoMWfgDXN14HVkFJ1NEHraZ7BTrxsk4ErdnQVBBkrS5Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171252,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8k5SCRA9TVsSAnZWagAAtWcP/AsN8vdwQbz8LiQ/0gJ3\nxPFIrdn5gEPeQgQPq0PhOnpmb44aDvljHy70HWjRu48bdapNtTafCNNWv3gd\n0n2lWbHvxY/jpqeSLv4vcadr1Mv4S8CNiPpXalZ153Dgp6b1d/4S3bcZn7QL\nPANDYTWdD7beVSfLmuwvhk4I1V5NHxSis/El8iKV/uZW8izhRsFOdE1Y5TS+\n7quQbLOPJj4JiZ3watfUE/H4Wy3OUXxzXgpIRcwqe73wtCQEo8jhihdghfrg\nBPSrXy/UPEwvvTjIqCvtvOrrMmlpLFsnaKHo4d0yik4YEiSy4po9zLIdk7oO\nH3AvNMj+LFRdZlPyo3L8WglMBglfpoURx3dw/ORKaldJ9ZoG1gnLwiurbMvz\nuZcSTCF9jq/aLKlDXfjc16L+To2kekKn5qamlcWY+7tRsWxeS0ViuL+DQeM7\nCngCjb4Q4/r3XRo3CvUf40pO/D05ntoztj0GzPozAbvNGpdzvcG9JNncex6g\nO6qS9pQFdgC02TKBV6aHjrJVPE5j+lfULJrFbHzl370lEbXbstRmV0EyBd60\nBL2tK1u+R3RpXuntsP5l2JQrt2Wh6jcoOyir+Zy6n8AmI3tWLWT8/Sx5rNqh\nwegI+GFSK+J/WDXHegxFHIRNDED1A9fiasDNQ3miFEvAUrdz49OgpBI+7G0a\nBQ5o\r\n=FtJK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.39cf00836.0","@material/theme":"7.0.0-canary.39cf00836.0","@material/animation":"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-indicator_7.0.0-canary.39cf00836.0_1592938065563_0.5394697349618078","host":"s3://npm-registry-packages"}},"7.0.0-canary.1bfda9e05.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.1bfda9e05.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"5f7083c7452d16d2ab94aee5ea9c06975421bed6","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.1bfda9e05.0.tgz","fileCount":38,"integrity":"sha512-EFCHTy+b1sc13Noq92Uv+tM6im09mpfmF+wMEI12iqfmFC7RpEjznDEWJeU6or4pXP9VMTUPr/pRCbHilsrieQ==","signatures":[{"sig":"MEUCIGEl8cqEzJH7ru+jwnejDDeWKeRIpLCyjK3E5r3wehhgAiEA0w6AgVA2X8H3HF/p2zxH+hAp7doZPpw9KTlSVK8QVi0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171252,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lFACRA9TVsSAnZWagAAgEQP/jp2/VhApZU3l6DrdIpz\nDUs4ReXW7z699pg6iUpNe9/mdTDeFej8AUATqzjCekxTtf1yTjR6RnHdJASR\n/bly1EL5uNPMhgceuBz118mBpLTNGTNRWkDSFVWb15scp3Y/Z/PoZ1dHN6A4\nc3qzrtC5FUVCf0/7mIC3qrXASDKQRtuM3txgNNe0oFnwKtI4dCrUT7IsLITO\nM45imX+VuYAli+0rkyhHm/f42miPeKxB/ymhcS+NXSRshULr3IUmzJaI06Xp\ne2lnMO7xY49Y+SoZHs+c/XTVmrEO24EbtI7wvkNXNajARjAPhCALa9VZJok7\nnfQcZQNq/7rUJOsrPZnoZewuvuIjT3pS34V/3dgkaCPUIvETb9rIUWTWBYM7\nvDu5YvEAAozt30kpNZ4DB9f7l6XKqfXmXQ3kUvHJ1W2KvNSpSnQunlsqg2Qb\nwLgbYI8Vn4kUZXcOru/cBya20qM/VjpEX2gsGStU/FxS5XaUFBxSmVTHx02T\n0pHCzXVtUj/oWoF+q0QdSsKSzhgelS7IWdi3eowJX7i0bNjao10rV6yAmSi8\nwHKHolqdfO9FEnYvbJIKpzHu1N1AYLhIIA8qDa5hf2k88/JYgPhaVcTD1C5R\nRkfivV/UOh917tEzn3hjrULWj4b5D0XeeNKz4SnFKEbwatMj4M64S+zsXZJY\nrOfg\r\n=KdVa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.1bfda9e05.0","@material/theme":"7.0.0-canary.1bfda9e05.0","@material/animation":"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-indicator_7.0.0-canary.1bfda9e05.0_1592938815404_0.7084735133545617","host":"s3://npm-registry-packages"}},"7.0.0-canary.08731bd95.0":{"name":"@material/tab-indicator","version":"7.0.0-canary.08731bd95.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"4743e0704a9e65622f498e9f1ce064b39bbc74aa","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0-canary.08731bd95.0.tgz","fileCount":38,"integrity":"sha512-7r+1aZ3oFcMByHC0d8N7LDhNIKlAVxF+WEkXEiNjj1KOD6szW1SiMu3K1Hb23/e1/KGwJBfqVym6uVc3+kcZ0Q==","signatures":[{"sig":"MEQCIEGg+qwcUN0c1TbT3/AtmQp7dgre707asXxtkcoRpDGEAiBnQ2tNKPpO0PdmALNHkZAbgRtJ8P4uI22KoexQXG/IFQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171252,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lHaCRA9TVsSAnZWagAA5aAQAIlysSujRMXJtu+y4K/+\nX6Pcl/k1RVbjIWbIwL34uBr8ftV1tY1UXui+3V3LdZ2Cl7ata4Hvf2Fbgxvb\nuvCRz0oNlklKhz78cf5PoXaz7xrqr72ZaB2JRFoYgjcd4LaV0WNokoVG+TAK\nZzPaUJ6TrfCUaeZxis238cOg2580kP4hCVgqU9o7JJtJhK7/og1d54NCb5//\nHKKTbLHQI50km07qXkR2oOAhHIaeYhKXiSnjWEc1j/A8MUQFET7s+PQM8rsk\nODeyB5UvjPx/gg1IdeSeeay7ixyE3gnOePs0sT0BqITfsgS6uNtQEcAU0Hh7\nwxwLWR7Bo3718vkRDWjkgVExytZ6G+MHnIjyAT/w7m6y0JXg/rzudxVe+XbS\n6+a9YUZATC+GCkbubORvlgOwFb7CcqQKLyB6RSMsiLEdUrNjzENsj0HZCzFL\nAYmcHCV/vzfxPMmVKJb9tCc3t6Tpfpv3r7/4+J2P3lM8bro8jcGj6HmRaugJ\nvHGmgL+N7BL3OfNP8pZOYjCWYtrGSdqcK+LgaaEhYjll1s4zi2kkB226R4iE\nOQGfG+cdoimOg5odK76oo/+IRWTy6weJ1BT+8TBCSikwjVIq5GQmsvegv6np\nI62WKyozfx9u+bBHMOlLWSyVfsF9Pu+Fds+3DCdAbY9EERy8/JOTcsxCtqwE\nD0BC\r\n=84pk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.08731bd95.0","@material/theme":"7.0.0-canary.08731bd95.0","@material/animation":"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-indicator_7.0.0-canary.08731bd95.0_1592938969615_0.8857103331365557","host":"s3://npm-registry-packages"}},"7.0.0":{"name":"@material/tab-indicator","version":"7.0.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"f5be295f92a774a0d7b0456cc3382f23bd58971e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-7.0.0.tgz","fileCount":37,"integrity":"sha512-hgkBiT7IY1Ze45yBsydArP9Rm10W9lnTAk9WOcaWqpBZQeL8CMBEFf+9/XaqfNRtL7Sk1tivbmOQgEO+gK3Tcw==","signatures":[{"sig":"MEUCIAfnih51UR32wABkilziRg+35VrSBtBXUaqq+agJc0PWAiEAxAlAplJ7KRXYuH3Amvnqcw/OLt9vU4X99iwsXbVIxDc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lOmCRA9TVsSAnZWagAAIX4P/2dUJqRFDhEZlLmwDCGg\nk/rf9B7JJqR0EGZ7ARQaY84m1OkiqVG0nnDMQXXwWW1NWlGV6K1dgqL5Kpn7\n790adykBnlgAnnSWxECcq9CW5su0UCOUsc9DNrHlTw34VBEej8oScdo0pVjd\n5hxNkVz6x1Q1cTXsf5j28MVrO7aDfLveZStsTcExBmyePe1HDBQGKF5xLI/0\ni60xHWQ4isvxh3KS+kZN0IdwuP/5K0ZLBQHK78gsKScUi3Qr8Ebywb9y8mJ/\n6uyEu+bfiASRVx7SShNaCnrRKIuuiCUVUwbvbL2Xxkibk5cGe3U1SKk0OnzH\nu8R1Hd3yr3lU7M9k3qnCugCcZ/gpW2JQ+r/HS37aNqSICyBwcwYjBYUK84GD\nR76XaaL2hGVxaz6S1jyFOCZX645oMwDVbLL9S7Ly3NCYe8lOxsj9TGRu5yQx\niF8X6vp0jICIEu5b2C1v2N3mbE7G1rvBluVj4YUvBcpxeGovgJ2g4nX9euRQ\nHPhsuzCyrSPonp5s7bjY4CZJBw0VnVrZlFXflngeHN0qYK53aR3gYS2EzYK8\nuOsjaAOGAwrmHz3SO3tMpn4ibMiDV0k/J83P71AW3Mo5NA1kvxXNiC8Binrg\nOhMJwCKE6kmRDKqYtCb/JD3I/6VaH5NMT50+UzgiQbCSB5QtSVjtu+ZrgHoL\naRZk\r\n=WRQJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"^7.0.0","@material/theme":"^7.0.0","@material/animation":"^7.0.0","@material/feature-targeting":"^7.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-indicator_7.0.0_1592939429820_0.4303478680791393","host":"s3://npm-registry-packages"}},"8.0.0-canary.a3212b209.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.a3212b209.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0c6f1aa129da346bfd4805c9674fba2b5866a07a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.a3212b209.0.tgz","fileCount":38,"integrity":"sha512-9ROoyGQMlWXBOr8Gwp//DD5iFv+QD4Jq3sJvUoI0sYOdm9qpKOo4Ehva3ef04ZWpiPS1DV6p6xMH8cj+EdHrCQ==","signatures":[{"sig":"MEYCIQC2r10/deZzIMKrf6bhxF3cvuUC8+WHMtBf/OZ0CKrQfwIhAIk9VUMFeiW5ZthobMh3Yq7pFUTftbKrc9V/5pUzLARs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171252,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lPdCRA9TVsSAnZWagAAA6IP/iqLGQHcylDKbzksGH8+\nPuzhjpbKz8sz7N2uzIv4vJMmellfeFYtTobTZxFUZtKRP21mv9ZxEL4qVk4+\nFy6RCx0TEOwTZYNGmwCeKSyD7rP8NrqvHR0RsdfP5MlyFprHB6stgkzbrqbo\noFF28dwSTekmSzpgQMZrqexs0oFnjeor5AMMdJI+CT08nury1bhYs6gU/aN6\nklOAvHMV6bPljWaQbPMs1aM7cHwGRGzi95ytGKeMxYaJVr+7suZ0m0EFZCoT\nzvasyuZnrJtAvbkZKef93u6P+WObbrw8fNqaXorcbeXD2feRKXmVMAG8yXMg\nUBxG1cqAQ+L8XuJqBZyUYnOjvHWBsTHNMrFGaaOhRUi8x9IxvBSs31qhZ6E5\ngD2Dt0VWAyz7O5fXakxpFFpEoWue446Qdi8BboT+8qaXwmoSMk+epyZiH6eC\nVem7h0SO/1qR5xTfEPQmygJyCIYOPaS5ZPgC4Ab7nQsVJUDvvbZ6n+R0k9L9\nxtmIKcdf1OqKYuQi+spKS3zeKVqNdUd0CmMR/wuvM1T7ktuxgu5qidec2rXI\nPDj5r2bdodzpOm78Q1Y6TKRHLm2HvswLKp8XWu4ku7/ccrzKp8El2yOsiKXJ\nSIN5Q8Oeba3AhVrPk9FXslLSGMa8ELLwlLGUombAPcMEZqJ7ISGEpEPGjkFI\nWtd1\r\n=h+uk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.a3212b209.0","@material/theme":"8.0.0-canary.a3212b209.0","@material/animation":"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-indicator_8.0.0-canary.a3212b209.0_1592939484795_0.6613808460676602","host":"s3://npm-registry-packages"}},"8.0.0-canary.15e81fe98.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.15e81fe98.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"3fe6093f2ff1c115b36acd5ddb53291b0fbad1aa","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.15e81fe98.0.tgz","fileCount":38,"integrity":"sha512-cqJERygL9s1KLll7S7e1f1E0qGDEB59n0+R26v6XArJbzIL0uK1FwWu1rZrujWvwiky7V22z4DVeV4qtj+JGQQ==","signatures":[{"sig":"MEUCIENQYWQhybg9r/dhXQVciUCCWOomv3Kez1yKllyK3obzAiEAiZ/SWX7mi+oICowkPpX6JkD1zeAzUxVlnxJcIJPHojo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lrGCRA9TVsSAnZWagAAiYEP/1QHA0Jjc6cLsbSlCEK5\nXaKbDDwLbxVCzAJnj5TZ5ML+C30dsKegg1lljT+FetDloZkYaSlTrGezEdUy\nnSrV3IyvhxPnm8i7kQXCMKUw5CRtuAdfmzx0sml13ib7diMvBJ+s+Pq3PST3\n4RXFcc4b6q8LuErhIdENdhVyt/rdQt315lpSHNRuIHNO7vi7zMMaesP7WU8p\nOb8D4Wk3fIm7PPguAsiVpZ5zA2SsRiRvv9uVq+am7BV4B+YNjc05fd0Oihlp\nEKWa9hKJIlOzwF3/z2sjRPj+9MD2LFtSG3Zu9GG6w245APcRADCzo44pDcp3\n4NytEleUajioEAb6ni0WQbPjHqBxYXwYLEJz23L0ewCok813acrWbgRG2Uoi\nJT95Liw7HdelO4DElQiiuybla1M8mi+eqm7e8h5ZYikwThMb0g3vyb355tID\nxv81V5l3W2EaDk/sFkMvd7mAC30SDxB/u5pIRhjIv5hl7gXv8p7KVqKn1YRK\n03AsH8LbPctbywLscyaIWPmrGtWtE8LSWCYPiSgCJ5Us/x0tr+q5npA0TZlh\nh2EGFmXDRMfrYFAKMxaXQvbxg+GAPAhYtbfBrWprMz9wGS/pZ8/1r4ho4CBE\nHbT9aWxCi3RJVrMHrOene5lZO/F/S1r58G9ADz5JlZGclJusHjTLRfxpYnzF\nLF/t\r\n=+5P9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.15e81fe98.0","@material/theme":"8.0.0-canary.15e81fe98.0","@material/animation":"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-indicator_8.0.0-canary.15e81fe98.0_1592941253811_0.7595299380385909","host":"s3://npm-registry-packages"}},"8.0.0-canary.004c9d392.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.004c9d392.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"d1bc70e7771775d9074070daa883401b5a2361f0","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.004c9d392.0.tgz","fileCount":38,"integrity":"sha512-3VALojCfECf6ttTuWUIdBx0nLKEWSjat51MT3FVb06mk96Krt9kxy4YipUQKneizFiWpcZqnvWNR7X98JGFT0g==","signatures":[{"sig":"MEUCIQCf1627xEnKcd9wgSwDYqhuX+4tiqI4g4QkdgPJ+Vj3FgIgeaEFV+zlNWgWu1cg0gN97gs5ZmbbI1Ur6eXBRRyYqPk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8ohzCRA9TVsSAnZWagAASM8P+gP29gLBHm2kPd8MSRON\nKrYwiEFJTMUiJewrmeojpHCpYPH+TVDlmtOTSRv5sfb86pOFywLA+si9S/mS\n6oVpnKLfg3GZzWhyBqUJuhpKDgYRF6WTw3fHrlTmBuOq0yMFvFIH6dPU4O2S\nR5ypvGXUaVei/RjpnaMdqBl2P4zAr3Wc8Z3hLXRzX2j7TSa3m1b+I+M4Ggcp\nGOuJ3NdBpo5VbaZhq5dJhTteQT8BIrnBvqWMXYkDoe84t9Lq5AJGbwgNC+ul\nOKCvGXc+DjMrSAG8CLGW10MEa9x3ztL6C+xIeJnggDjTWHLPV/6Gr32NZfT7\nGt14uJX7Gw/fOKr3uCwiVvSCWp2TwjD6+zv5vEi++tvBeMnMu9wIIsUauTmi\nu0vDjophlkVe5k/OVjrN2vtrAvwNlCHxdN66uGAv63INT5NkukQ4ajIuH+D7\nTquKzJWjG0w+DW/Y1AbORzMKxhFeTs2/jN8hpuzxkN+xTwEODT9wS4/UcnrI\nj5CW0MMOEVMvPYRFo1PjdIBIu4KO+E6bqBoFMFgvHDQpazZXMLz8hxbrOhp8\nB0PoIc/V8mXs8NwSmMVi/HxCpsBXm8T7tPW2uR6N5bXwVvLF3w/uyNaCP/4b\nBufDYFsUXOSIUT/fPn7Qo2GM9x36myfVgo7U8ZS/C2XRnp0PDytyLbeYUWFE\n9++d\r\n=xbMe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.004c9d392.0","@material/theme":"8.0.0-canary.004c9d392.0","@material/animation":"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-indicator_8.0.0-canary.004c9d392.0_1592952946569_0.3365811338206215","host":"s3://npm-registry-packages"}},"8.0.0-canary.03bde00f5.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.03bde00f5.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ea357865bc0788d88063835e04fe3ad696e57053","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.03bde00f5.0.tgz","fileCount":38,"integrity":"sha512-Iq2M7mU4Mu0ORIvNgq2N3ZcEOfd5h9PgDlB+ZcvHVvTiiSBjP5U/VnMEWNqSxATsjrWgOv8SugTRWmnCm6Y6Fg==","signatures":[{"sig":"MEYCIQDNZoyq2bpjIEHs+78gwAgZza9Kcq5qJhMxyKPXXFcU7gIhAJQHP30As83Qk30HUBWrfjJndVxiwuQpHYRHySBvfXy2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8p7gCRA9TVsSAnZWagAAYTcP/i3utXpJ+1rByR28mi7z\nseCBspVqo3//UBVvq3hVxbTbatjNtyBURwRNtVLcJGq/BKiimpIF76KdR4C5\nxNyegloORCRpg2pKONSgmllyA5PVOIvP27rf2O4+2OJ9ndYiWvBTCau2aypL\n7SfNlXiOe3q1Amgqpv3BvDJpsQSSDhK+qTkza9WuZVjDyLKIZLoqNBy4INku\nuHkGE2ez87IC/3YhrGbBwO3k3cjCpm9U+w7uVw2C3+Sbqo/vmH2ueXJGZtV3\njmeGutkorN04fkXUVokR1VGBlDyrp2Hw0kTLmYszOsC0vSP3oO2Tftm1ZRt1\n1XLM7RTKjRwT1TVC7ipVHbsYjpwHUuArRzNXW4a5f0wpMfUEGE3yHqn8G6LH\n6eFsjoIcCc82JiunRXOfQ2B1FIW9qqcsIiRMFL98y+RnpqfZOixV3TZBfNf8\n2LSe8On6QxDW2M6COxHWhPM3jEdp4LXewzdWBsdjA5E6bAsmskXE7jSTJbPk\nx/UusX142Zg/+0sAE8ANzfVP0OeeINBLfp/DRdMMD62seOYdXWcCWBzDWXLk\nn51e+jXP/PVkN2fgbj+w4UNfWhPtjAvYgTPB1pB4vBpB03UKG37j50A3A9US\nnqfaqRsoyWctb01Efp+fXIFi+Qn/rT6w4/+mY8cnPiHkYFDZTR2/sJjCp0L3\naVnx\r\n=rUAe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.03bde00f5.0","@material/theme":"8.0.0-canary.03bde00f5.0","@material/animation":"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-indicator_8.0.0-canary.03bde00f5.0_1592958688424_0.09566806609422596","host":"s3://npm-registry-packages"}},"8.0.0-canary.599b8c319.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.599b8c319.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"33c7c59dbb155d51a290a166ff51312e8a5f991a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.599b8c319.0.tgz","fileCount":38,"integrity":"sha512-KZzyrw2E/u0tzRKz+45ytmYq4GTICiDjaezFWkV3f8g2Q22aTxPSYOsXr8l+8YNrSurpyCHlZ56dTMC8+mMGDw==","signatures":[{"sig":"MEUCIQDe8YV4jupzvtEtuhZeJ2WOHmIXpe3IGgR6NS/FWh3C5wIgSH/n/6/E/Kr51Zmnv1ldpuSvDFkBRMZgjQAwAOS9sJ4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe82mSCRA9TVsSAnZWagAAKRYP/iSA0sfKUvRWLrpDtwd6\nR0d5uyrUgpqZX1+3MXEAcTarkJgybz8ml849o+xylsT75yPFpG6XzwssnDUz\njKXgKGXGAGCaEg0dfaL2QJPDIMjui2eazFnIUMp99MPAixUoEUjtJT5V+/YQ\nmf3oIt0gV+0HONA1xuHFQarw8rraX7haBNJTubRPWNRudD45LO7m3AFXwNVm\n7jtjJEVxJA4rge23BK9iCeSIi0zs6wOaSpdJfa8pVP7sEblcjlsKJ6CDvlao\nifSspMV0JOR/bFgiECqXYZpchcFAV1hGSLAIbURA5/6zuRUnOhfxr2f2dXoJ\nBQqFwpNs7xshy/vFV9gPSMcgVtGNZHVHK7FuFy+0kMDMbhNz+6YaGCXmsaTh\nDVMLARMg0NWRMAsGnY1bLBJLhzM5p7khuH7JSO+mhyOchApJIEVxY67rEAMM\nuQxHiL/gS119cZI/PjV2xlxv68Z/hrKNG0xJxFQ2lhwX3jIKDikPGZSioF5x\ny/GxFlpSc9cvvVeHJX6Bcvb3j8O/axfw6KCQ+6sZtTc7klF43E07XG1VkVnk\nIm0jHCaJHtosMzdBvr22roxT034e+XbvAygboNN5eX4LRu2U8mebLlrcFIV4\n5IFLOPtSXmYSDx39DbmdBzJ7l17vSjKjIr0Q0mgAmKPnxuLk/DLVlF2dsD9i\nEakv\r\n=KXN1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.599b8c319.0","@material/theme":"8.0.0-canary.599b8c319.0","@material/animation":"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-indicator_8.0.0-canary.599b8c319.0_1593010578018_0.8252104698545539","host":"s3://npm-registry-packages"}},"8.0.0-canary.87e3be418.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.87e3be418.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"dca2d51205643b2ddfc0ff34ef47f996a183f108","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.87e3be418.0.tgz","fileCount":38,"integrity":"sha512-5TvFI2h/MMTKXx9LN4OxYsXJ4+U0opjNtm6Q2HEYGsz9Kc57/tyTUxpELUffHvGAgBxb+K2l8G5t6+munCNrew==","signatures":[{"sig":"MEUCIExXv4dPshi6UGzjjhxtJ4Q2SHDEXsbH/NsA7RU9nLzcAiEAl9hqh0Lqzp7MCGp1IRDYHqksVCW4BsJ2WD+ceyrlKdU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe85MACRA9TVsSAnZWagAAofUP/2I/VWAImT9ZqItTzQLe\nY+vHLyCFu0infWeal1pWMdfYUkyHZv5lthGXqbJDuLFRlJEg+OwpbrY1ACWr\nmJ/gubpzrrc47Th+Fr1eeL6S1MR8e9vr0VNlmVwuAo/RSy9VHbQivZlr/Ls7\nDo4Eh8AoGnDGAC+JxiEInys+T7XOlFYfqVzxQ/ozi/gugh70rgI1oF8nHu0k\nq4BJCcp9YYagHnjC1nZoOCO0BjvB+HYt+aOrssD4zdYJiXYItDfzel4Gx0dH\n7/g1B5hgEDBTX/tp045NK840g7aAwoJxFgMteBm4jAqKc4fkrzuIjuEDO0Fi\nRJAvcqPm6/Ed/g/rWQKSOabacgQXisDk9BsxENdg24vYCgxDvWWgaxwGRsgW\nY+AM9iKBfflmhFzfgqZGEuTr3tEtJNCxkpB08AG21eBAJybLDL7xvYIyl33R\nRJFCcHVzvF9cbsHjyD54BEmtzE+kMvlRGu7FSvunUyTAw+2XIMprGLrrQHmF\nNPaUIYOWTBFGTKfxWL+iNjRxe851aIsn51S4a8IufigrAU8Qye3KU8O9BeMO\nnJ1xHaBHsJpcDlwLyN8inZYEcZwLceN9DS5zueNQLD/wodMA2b2uK2UzODUF\nZdkwNdrW3dCY/ipPdMiwqE6zF1Mqeyj0GwY8JZa5d9db5SEI2viR1gka03+Z\nmzO9\r\n=c/Gy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.87e3be418.0","@material/theme":"8.0.0-canary.87e3be418.0","@material/animation":"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-indicator_8.0.0-canary.87e3be418.0_1593021184107_0.8146857303996522","host":"s3://npm-registry-packages"}},"8.0.0-canary.035cf2a6f.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.035cf2a6f.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"9639b69fbb6a8fdb18a75e99cd1d642bcb33844c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.035cf2a6f.0.tgz","fileCount":38,"integrity":"sha512-D0Bj1moCYT9+qzurGSU9c1EifyJ635ja+Dn41/7U8JLikovZV3ypFwyMvDjIECCOIPlVOocgdR++4Drr8z8hrg==","signatures":[{"sig":"MEYCIQCr4wKIYY3CrCk+esB5LgaOaujrHUgtUwcNqxEkAjlN1AIhAKo/U6qMx1RdLbi2Yota4qNxHP+UMWB5coHNhjf9/Lno","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe852lCRA9TVsSAnZWagAAJLMP/0gxZeg9Srw3uags7pHT\n6L+2uOXN6F4oLrqFPmy5dwjslFcpagx4k4dvsToXhuhtAGD1yaEBPKDZhu9A\nDOWk+UROqMY0XabDFUVc9vJMpZ/0ZT7bEug0As8M0DWgAxiTaHYVCfsdkMrR\nCDeGSKEvMeK2yOMuwWDWQWW3mc/4xH2D7n1RmhQUmzv7XpL0gJJNN9kWaWpq\nIRzLfi8K5uGy9Gys3OAfWWBLasMWE7S71PqYIWtk/DQPsiLkBIrbequ/gqCb\nj8M8Q01ELC0borkpni+gDulFAhuhoinwgNrscySgdEuDa8Cu4eX4Lg3rUs3N\nVhmChSMYHZVhQvp+TozMR6BGE+cKNaUL0/01qyrNX02569Bi0+E31uk5oOvk\nf3HAqx3u2SnTun/3o5O9LbbG4A+9Kgiv1iVG+n6+KtaXXC1EHPD6XM76WrP7\nKyfMCFXiZpSVXVYFOkE44TsoD45FyMWCclv5yOdRVE23gkja7b8CoBQJNQgB\n8iJ7PrkGfQSWEurw2uLJPCQzF05y37GYtxoacnpY0pziUHp/2evG33pPa4zR\nJs07usjUPs1KavwEbqoNfumpnp86/3jf/PaA2DG4Rr+8Rjl4xI0F+vSa+3Am\nU0Mj8wEuHLOYpEH3M2TylGglgcJ9QkdIzzxlk7FrJ58+0r7nTTe/qXn3EiXD\n9Bzv\r\n=zhbN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.035cf2a6f.0","@material/theme":"8.0.0-canary.035cf2a6f.0","@material/animation":"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-indicator_8.0.0-canary.035cf2a6f.0_1593023909039_0.377059967954257","host":"s3://npm-registry-packages"}},"8.0.0-canary.2fed2c12f.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.2fed2c12f.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"83f51262c302ac5bf6eb5de827130d453f76e9ca","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.2fed2c12f.0.tgz","fileCount":38,"integrity":"sha512-bWt6DGatVHZxp/90IiERLoYEOfO/YqjrWAGXQXQg3IMyUCI+vn7oQrTrO1pWKZVzNDRO36ZHH2EirY6/liS1hg==","signatures":[{"sig":"MEYCIQCUtvKv9627tL+gSPxTcZwabQ3EPtAwYxKVMFAlSfA5JgIhAMwqBAjSJWCWxdEBUEtoFcftsnzIxoZixH3DsrLB8AiZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9QKfCRA9TVsSAnZWagAAQ0MP/31fOa0h8tIAnhbDojAF\nkHCExjoyNU44ImQyyzAmu0CmOm5/42ZYH8yWrA/0YjN5u2pnSm71wAO4ekVc\ngr9HVtYKRPXkt4We63h3Js42HLx+bFR1t8TAWw5urdRr4HQEEhJ5gAvK/VJv\nAXp71Rkpm5J5uxPM/w3zqmXSY9WipyamP3I4ardVZZupnWtQrDfib6jC/BiP\nvhzl22PdTgH/J4XoAHG5Z1XTh6RwrZfQZICpf3fQrkvMf2kbNKdgIABjamPu\nz4vx6nETDIpPbRPMURVLMeSANpe0qMTz5Vt714TzWh4wpHYJG5x90/ZICyXM\npb7NYwD4l+XZCteXGjEO/IJg5lIShKATjhueAi3Fy+uYPQfX77t59Y9voXNa\nufKgzKeoxvDWzjTeHLraeZFdI9ETBzB9yGC8NfI2ax8Nfucw+Lkwo893Yss+\nGsLkzfXvRp15q/W4cCzjQ+Cvj3SD6KN7g9EswQmVqObqYpevPCUOiOBWCMn5\njHYKFQUq4LGZjlkY8jDv0hKeYVFzOJ9v90F0aP8r0juwIlg0XVR79gqXQd+R\nql9ACoaT4SYoL0hY9dqvqw3Ou16qHxOUOEhIaPWG3dAmNTo1Q5dIN+R1+wVr\nTIrr1O6IUnpLQJQk9fuGWiFjE5geNV2a0mgeFC8dI2UI8vP5sDmEgnO4tuYq\n6Gij\r\n=hfIF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.2fed2c12f.0","@material/theme":"8.0.0-canary.2fed2c12f.0","@material/animation":"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-indicator_8.0.0-canary.2fed2c12f.0_1593115295309_0.13902185066078565","host":"s3://npm-registry-packages"}},"8.0.0-canary.38197b443.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.38197b443.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"3a6475ac5c96d25a8454edeaa06849b79e8c5331","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.38197b443.0.tgz","fileCount":38,"integrity":"sha512-BDtI5zHHp4G7XOovd3otMAD+d991RxGYm3E70X1m8vDxhyMdKf7lbPUshbJ6DRGSMvm/+aUSvCwafilHc9n83Q==","signatures":[{"sig":"MEUCIQD3lw3z9u3a9KKjEWpPxIWcELQVaOvEyraFWBU/Vmu6TAIgCkGz3aGmPEjT/Ej4TCwfAaC6rDt/DvpeHnxOaQXc3FE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9RWNCRA9TVsSAnZWagAAP+oP/30AqgC1PQHZPysT+ZCg\nGr8gHU3bwaFay/mesSLkobI6pTnY6F3kER1xKe4wTxYopO1VQOMoSYb3lAlO\ni/RPBqPtTSIZrOBJUPjctEXsb79wwHrtRWlU83nnk0oswOaFB0Zw7qz81T0y\n/vc6vKfE1aEM2uazu0UPoQU74YPYsIhsYp/9dagUPkhBfoIzbACEwU+HYl7m\n0BGUyJr2gV6ix5Vq4vQ4WnLR2CLP5reVYZL87ZDeRJypmT7gtANPk6YY6UaD\nV6uBa+CA7xu+yV4bEbxe2dkwUckRH6gCoQeaB2G9REmpVbOOAVsA66KyFwF+\n1Jqos92MzPu40p9SRNtRdOBKGOllWqV+PXfEmAHjj5/9dyjAe9EEDiUqmEF8\nQyeqdvZWIkT//dP5EPgcSWO7T3eqnnowrQ+s9M6RExW3k6IVBsuaNfjj7Mvf\nBrR2A9KhKyY6tK+Qw5WF2FINzw/dyyImHbnNj/zM6gqSDYUlguVQhGFuZqQG\nWyPXWO97O+Ak/VtJXnSqL14M+28C8jFdPEQ/x4AoZXcyraODSJETVfW9lC3r\nn+ea46GPa6z4Ocgn6CY6z3awLzoLk1Z4sOQ+glCGuRrNwSwPy1ZQicn0zVl3\nb3YRxLSvpIqBvMooGZ2w8+EVhNSinXGMMU/TMu8H61S7CFYxYWlOxDxymagV\nxch0\r\n=YWtY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.38197b443.0","@material/theme":"8.0.0-canary.38197b443.0","@material/animation":"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-indicator_8.0.0-canary.38197b443.0_1593120140815_0.06447775271048228","host":"s3://npm-registry-packages"}},"8.0.0-canary.69a35e80c.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.69a35e80c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"1ee6695d22b3cd91997ca8212fdcc5b4877e34a0","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.69a35e80c.0.tgz","fileCount":38,"integrity":"sha512-BHAK9sg+5eR4ZvqLzcoQbRKSPYqpP8MPSxk1+3GqvsBKK3in1K7rTVrjbvnPCzyIGFQyCGSaTmQOrnYGywIvCA==","signatures":[{"sig":"MEQCIHFwFXSdpRYLIrCmO/3Mgig8KcO8rS7DEU5WNFtHYdonAiBA5d/4L8Q/38rTuyT6jRKOLh/NJ8Vu1aYAUXfs6wxLyw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9jKaCRA9TVsSAnZWagAAiwMP+wYJbCopA2iK4ls0jt1Q\nJboKUpW1EyBONK5gFFczbP6OeLVzYKmzlnD3Q9sGk5A7M4Cd6Wz1g62ZJn/K\nclOLAUSKN7+5M5BaTPXzq73TzzSf9xxinU6e/sxP1FBxlvAzMvlxrG2gJT3E\ntfA48EfBkTHSUxCPHo+TOIcy3DYIP1/7sEYDNF/p2Mv7Q2efhosfSW2TrKic\n/17cyvVm/9AwoMHD2rbQrVuInX7/5SP/t6oAoZgBN98/ALaewbPdXVHMpp4n\nHdaKubqt3i4V4ZOY/TlW54RC8s5TOs14peYHxLXq6Ej+88kqQ4IMicvyLAGg\nETN8xwJUuos6ulenh4tdl4eaoxeSHMr6EfUKGI1sn+V1ANNblJZyGisBIcqh\n+EKjR7kwohdNIzjyl6J8fTzwrvSaBJNgXOEYjo4k/dL+t4xTHRV3E5qxVk4h\ndgX9gL7YkLpOmD4PTwitP4elA/wR6hu5LonncFXfnlBE9b0HRaFdmIUPkZSd\nmmV+V88Z/gz2pxO3U+GZttmn+K86q8J1Q95THB8p3qp2WvnrefIqbu0cHHRH\nDYkyLpWDY64uMiMt16Xm/mq5aNCmcNo56PotJW5189M2WdM6dk9AqNnTixmL\nQD5b2jiQt2h2AwOqXAET0s6hLHSzTYSKWQxqp184cKMG6eUWQAv85B6ilI3Y\no7/V\r\n=Ok86\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.69a35e80c.0","@material/theme":"8.0.0-canary.69a35e80c.0","@material/animation":"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-indicator_8.0.0-canary.69a35e80c.0_1593193114413_0.18675044292067544","host":"s3://npm-registry-packages"}},"8.0.0-canary.df7154fb3.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.df7154fb3.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"38da05e8cb6131848b8eeb4e25e49e07dbbdd53b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.df7154fb3.0.tgz","fileCount":38,"integrity":"sha512-F4B/BHfRrFQ55p1XAX6WwM2HRHr79mKhVK+6h8GyOyvPmRswD6UyO9JgvkKGuQMwh04vP/R2UhDKaPoJZugyrA==","signatures":[{"sig":"MEYCIQDrCAuxP0h7wrGPz161STwRVYUrJiZXWFzO6jACNKSf7AIhAMU5GvYrpqZ0T67xfgEDlS3WDDdlO+USk0divXZSJu3p","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9juCCRA9TVsSAnZWagAAVssQAIA+6CIGE5d9qgTxTKsT\nLCBtaGkPqBzbNjx8sceQjzR79mDkJNH+lxJU46F/EmX+Lx46/ey0CxTjT5jg\nIr0V8D+iPCX+VjRh//95F8VJesej7RHhiDIb6PHKXjn6QpaNx2VPxAW5/FZw\nIokPlYRKwdYK8qIuAbUftc0FGtFqcTpQPo597SO8EoW2yVOCudTN+anxLqaW\njUx3R2ZBeRQoTI0DWoE0kft4i2jaxl8yaFPsV9nTHktwthtMfogH8MXICiBz\nCk3frOvfMpfAvODHy2nqWGpguvukpfUv6HyAvVwltzIhv5968ZQ1iRZKkVTM\ne9dHCOTw9ePE3QLP6jdXfrGA2whcNtbO+mjY2fkPB6CjqGymgH3Acqtj2ezM\nQENNiCxNfTjtn0yU0qgrFsig9/nse4SDzePc8iP9HUuF1vG40WDSLeGqOoUb\ngammiQF+4GihiV0jOQGDzzxuKGd5StNxzwStD3BkmwLBU++g818UMZXKxgUL\nZblassH4aF6oi8XTraG5eitJc6D3QdP8Mo4DzpyFXPV1TXGTN5R332+LxrKX\nRUYl5lLVNxobdsJHiogmylx1/hAuw0oZUia9r/HE7/ZXO4bmjYhgwVQrkQ6B\n/xHNbVfEJBdLU9zh34s/aq3XX5UspG6vzcJL4dhbruBJHCBK3MuFpGHasmzZ\n/dh0\r\n=ND8z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.df7154fb3.0","@material/theme":"8.0.0-canary.df7154fb3.0","@material/animation":"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-indicator_8.0.0-canary.df7154fb3.0_1593195394349_0.13790826733247896","host":"s3://npm-registry-packages"}},"8.0.0-canary.d5618602a.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.d5618602a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"3e381374ea16cd9c174836048610ccba87393bec","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.d5618602a.0.tgz","fileCount":38,"integrity":"sha512-7cTFj5JlN96uX+293RqTYQRlFP4cO6F/DbRX3bFXftfGmzec0iUT9ABKfLR9I3+v0CkRDk5C8xUok18Z03DYxQ==","signatures":[{"sig":"MEUCIDbIo24103PGkNV7gRqchdwSw5IEOk/pVggIMwwD0nDtAiEA7t/EHBB60uWS6dQ/2IjQHMi/vr4Cpu3kDsiTxPLdbT8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9m0WCRA9TVsSAnZWagAAu8kP/3M381FbNaZDn9ZmhP6O\neIX0oyG5fS00o5P9gTyPyPh1Eopg/cBSzN7QowZ/X3N6b1cNiKJzo3VK2bgc\nnxYnmpacMHE+c8RrG177llo04R9wuRibD4CB9abTUXPN6iWD/W6+UVgRevzq\nOlWcTdQ4SWtXiWHk692k7aO99ibu6pwVL+DZoYZYddoYTv3S41ufhfuwyt8X\n1067Zo7u8fynvvyV8hA+xIsXwHPRwMbG624DrN8ZxUuK/LsLNmOEMf6oDq2p\n9/Y3NOg+KlvD4REL/piroKK2qiILncQFDqgCmAndXO3dxUMADkJFrWKGVoT3\nQGf6fJK+5tFSrNLRwWckXW6yJSsU+BQ2awhJGxPhNEapJrPWVksQnU7Qv50Y\nBDFeZYpEgIX0EcFyuvlQItEZ01ZgGyc3TLO3QoF6l4P7vQoqzPhh+Ip4+rLZ\nHVlqtMFAePCbyLc8V0No5RMAbOXbKGkuKpwYZ9e5apEQlsy30oxoPN7t2Sl4\n6EBXDFmg84pPpZ/ao/kbePH8UxY/jq4kOZhRt3nYgID3t9tt1IYNQDsRQKuy\nKXM84tevlk3QrAb4HgoUfziX6VJex3xCjRJvtOKkoqhnBTXoSgReCnYZZJo2\n14KPZyBDKBfOqJMbGK8wDq/GY8k7H2BWPZt3lnzLPgfxz8XQLqKddwwhkV9E\n642H\r\n=rDTR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.d5618602a.0","@material/theme":"8.0.0-canary.d5618602a.0","@material/animation":"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-indicator_8.0.0-canary.d5618602a.0_1593208086330_0.6747949888304134","host":"s3://npm-registry-packages"}},"8.0.0-canary.e590b376b.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.e590b376b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ee70a482eddaf08310d589161d1c8bc04b581bf0","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.e590b376b.0.tgz","fileCount":38,"integrity":"sha512-/xFvzI59I5VbeiVEdIT5tVYM7RuXIk6+UhlLZ/U6HbY0lDBcFzPhh8idKDIdRoancAAlKVxZNj8KTmWsIMhgng==","signatures":[{"sig":"MEUCIQDMfxdKlZnjoMITDOjrK44jxbs86v8GYg3DgjEjwDFFUgIgH5gLoCPE2rNy1JXrz6O9vsiqjciPZPPW4NT9t0DU7Nk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9oNsCRA9TVsSAnZWagAA/VcQAJJ/mnY/F6x5nhv6fDTp\nhDxz+neBg1UIbUtIqjas8l5mo9SCkI3m+NEWqLFMNWUMVxjoRogeQIVaiipF\nTYPShKH+N0Zn6A/0yXihcT67VCc26Yn7WqTBiEHKYOo6OJxAwabzuQgdjEhJ\nomatyYQvoxrRzR2I02U6nFsCKFT8K8gwUBHEKIiFlPUHbawYmuev53kaC/EE\nbr4wNdpNcpm86kRyqe3LS3rIoAr+elPtUb0xuP25EBrxqtnBAWAKYJzBILRi\nn00yZb1ILCeeF4aZkkKy7Fh9i1paE6OEw9u/xEvRBSmuyY2xDCfEjBl6efMl\noR7nmakPE532Ahk6fK7G/dQ3D84/3E93O3i7mdBfBfEtJcLYs9kyOl+lwuHq\nNR/7T6N/Du4xkAOCzlEjX9jTJO87MIhhcnAPJjMKvGNBJuzBBoV5o7Je/e60\n2qAb1nEfNfiPgPwjVg3CdfXUGrK8RQtCTUc04Nc0nZVKEy3FgGBvLsX2X2qP\nP9WoCU0L3HrrrZi5/gGbxCT4fmei8y40IAzf8GQ/up+5W/Sholit1iBMvIKr\nTvgvQ3v4pUhqGjJc4lq16z6iubSK35vwLpYlCO3/peVKEE+zAkrsbffe24xD\nRTeUJV4f/LNXntSC/PBlMeZKpZPuUi8AhCoAHPul2HVFvisasAuhWeXMWN+J\nTOaS\r\n=v/+I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.e590b376b.0","@material/theme":"8.0.0-canary.e590b376b.0","@material/animation":"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-indicator_8.0.0-canary.e590b376b.0_1593213804438_0.9308058414292546","host":"s3://npm-registry-packages"}},"8.0.0-canary.0c9d6bd2d.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.0c9d6bd2d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"d349729e2891c3029727cf28c9f87db09ddfdfd5","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.0c9d6bd2d.0.tgz","fileCount":38,"integrity":"sha512-D/FNUN6O3tsQfHLoeXOGr09nsc7rOKA/htJjPr6eFTKlfmr0F0R+EGgIDt5uqRFyK6+osjKjgTGWua2y9qYlgw==","signatures":[{"sig":"MEQCIFxoEtdcFirLOADGR1CvoxGmcSMpbhcz2EGyRN6/fnmHAiBiL+dKf+tfeWRbEi1wJkyVu8aAAOnChC+5VkA5C2qoew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+iGcCRA9TVsSAnZWagAAJacP/2NFzKk0zTbu0zSFyFwk\nDDKvV4JAtQ3vqr+v0TH24p86J90Yw9kyzFq/MDrlBlxqdqSsUF3LNWmhEocj\nwz0h+mcQrekn++D9gKTpmvn43XoEE5Ps3fvWIwfHg0F6LdEgaTaPSU+iACu6\ndA0P8Ni9bQt8m5wI6q/PqIo5EkblVM0BrhoD/XSsOZL305ZnZuUxPbZAVpq5\n+2yJXjJtZn7/X7h5nHZYbmu29exJkRT2h/DSqd2xOiIj8SQx7osmcFeihKzn\nc54fjlm93j+TJIkrnoPUv+YiHkDGwN2DCoGVk6noQLig7fbOkQSiHQrG1NkD\n4iMvWfDaNuKlF29mm3V3zJ5qpeKiEXeSf5vLje44AE7lY+xeSbKlS2CEt8p8\nla3tcCaY8MMOwhuf8QxXZoU/wJtq+xd90HtoNfntRZsSok1dB8nMDW4DMzuR\ngJgcqMfBuobA/jngP1hn5e4+ZDcLbFblbpo7djUyUnGIYfU79ZJKQVv34+Zy\nTvl/XbR3/qGOFSQFHmo6mfkQ3nAZAQdPHC+yE2dLuBdMqfYzFdlvtfjF6nkm\nQ5f5AFl7sKU/w8BwFSi7XyXJhJWyzAXG26rCpYO1O/tGIV2hY+G0i+RMCaVp\nKcpSO6m9W20fjOqjDewM86InXPFC139/AWIIsYz8h5DRYAVqosTB8tpXwbKy\nCmDP\r\n=VwSM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.0c9d6bd2d.0","@material/theme":"8.0.0-canary.0c9d6bd2d.0","@material/animation":"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-indicator_8.0.0-canary.0c9d6bd2d.0_1593450907629_0.8076824656177337","host":"s3://npm-registry-packages"}},"8.0.0-canary.c1fec4246.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.c1fec4246.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c3aff16b25bb6348deb8b5efb07bc6026b3ac173","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.c1fec4246.0.tgz","fileCount":38,"integrity":"sha512-eThOF3/pTyS1GG6tZ4yi44hpLBv7lIXYeLWWs2UpouDSKwwMf2xFbCr9D8/1/FQw1wDFWtQrLGp9Ax212wks3w==","signatures":[{"sig":"MEYCIQCIly0mL/ahmsEPVNymO0CwAg6K0BVTDbg0VelbiFlWVAIhAOa1zIvmBvcs+DLlpjnsrqMhqQy2sGGSDtAWV2HSnA0F","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+iUvCRA9TVsSAnZWagAA5MkQAIDv94Vp9BTHpDdw44Bh\np3rT/siBHkKi9MoothId/R9O9ctTnRp6ALDA8ZeVQQBVU03/HXoN7SpbYf7i\n/msvVugWA69bZHLQxbwwis58PrOFOFZxFcqXGzLaIxkXn5uGw1PZ6v56jsnc\nfYzwEQniwzsMzD9uJm2GBWSiQRw5O7zVurXUKooKp4MaeWXSvKRdK3xjPiM4\nkQhmO0hMjNclh/H2ctKE1Na3MM1J0LWynHMOA0KJz7Bd9b11+VyL9bI9izgL\nPNqnp3FggP24BCrVMQByIq2REOw/Ju6g+CHRT3YvZgRjtj4wAF5k1SwjDmkP\nHWO0fkmv/8pDIcL/mk1+IGPzgRrI8eiZ3Hx9kFolbxHHZWN8n3ZBnkN6mj+L\nA+/gPth3Z8ygzkvrXg2v1n4hrwjx8KzIGfrS0nSOC6rZM98KMSGPATBGdRSJ\nIoRqMwc1y5Whr6YcsHzVGD4IWcuSgeaKi1EY2tpsTOiPa6bwlXW8A+ZJHG66\nrEt8JPAcrH7jGailAbtAAlzqptwUiWZ38ZIp7e3HyijN+2Yy8E9uFefNvSKB\nNT1Z3UkYlIYNsbveLhYhM7hYTySiy/+8PMMVlZY545P4r/P0UaGwoxFufilr\nvTs48h67W0anp56AeG6L/Bpc5wWW/GyfIxBVgag17hlOE4LhOJDqOEUNJUU3\nNTfx\r\n=COPC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.c1fec4246.0","@material/theme":"8.0.0-canary.c1fec4246.0","@material/animation":"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-indicator_8.0.0-canary.c1fec4246.0_1593451823406_0.9254980644209629","host":"s3://npm-registry-packages"}},"8.0.0-canary.c678a9d34.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.c678a9d34.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"bf9a7733d58ba4308e87d6998ea7cb3d64cbdeb0","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.c678a9d34.0.tgz","fileCount":38,"integrity":"sha512-gv5yFH3jQ/rZXSD40ixnEoo/tV7Vuz69V8G07/Vm0ajJg+NYt3ufxLmsgg3WM0RO5lG6Sgb1jKmq8JamZ3Q7sw==","signatures":[{"sig":"MEYCIQDzYROn9Ump8uDNrrYzESxI/ZxVvUJG5ioxcQ4ysFLfbgIhAIXivUz43YBSGkPbV2IEYokebELZa4UnURtWuoIpf53I","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+iojCRA9TVsSAnZWagAA9VsP/RYXxCqTE5VQNUOE0duK\nqbG8A5fvUEI3jlPYTNgAeL8MplVLbldV9KXAqN5LlyaVlPLciCs5toTaUXPZ\ndfkRvFfxQIIYSOIpcdN1kHNZZIP87w0dBy635YNwsDEF6KghnONC5MxUdJTn\nggriQWzseheV6kajFRNgSnSiEujxY964nvD15s/ug4WRhiXPZTirZCLKU9z3\n+IKMXe9jPEbU1STeCCAHoFOcG0Hq+LrCSpgbCZA7VYfn1KHdqsM7h3KzAnyK\n7FIlhjhsKmT5s1hWur4Jg3POpbmVEIsog1tw/d/PxzJvd0GPjDtXjXTIV/mk\nk1PKsmhjyKxaQh2HvvHy7nWpmZPNVjfuUGCgZ9XIrz1vMj9CFZS891IRP4A4\naP1h7MjNTYtQO3VjDF6UPgHy7zthyzQm3rVrTfVibakFQQNo5opX+Av5AKbG\nNlvRetZDK0RNP3vpWcMbr2ecPmmD8unRuTvMgknfb/Wj7Z9Bx2jnNNaR0rvb\nqOkU3mCyHwyamsAZ3aVs26jKpXj7rk+ivOwDo5yc36nFnSUTWs64EHIj7WnZ\nQ5SgCLT9HdYrGzZL754UVyd+weKNRWtr745NS6T7ynXOvh80zpoRdL3OeO25\nl02VmAEnHVyaGew8e3GQtQVZy9bdRc6kkKqV7sRlE+FKveACgsOoBolpwLNz\nxG9L\r\n=X1AG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.c678a9d34.0","@material/theme":"8.0.0-canary.c678a9d34.0","@material/animation":"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-indicator_8.0.0-canary.c678a9d34.0_1593453091356_0.35529986825381776","host":"s3://npm-registry-packages"}},"8.0.0-canary.521afaf6e.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.521afaf6e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"66edca72d7edf1dad9a2f417f52a462e43f0eefb","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.521afaf6e.0.tgz","fileCount":38,"integrity":"sha512-6QG46BUzSBrFjklrfvrrCzA/GAodjtcPAmCvUgSKOB7wEm4Kyi5xC49Y+gdx8H8GBw4X+h/wic4cL9s5bn6tAw==","signatures":[{"sig":"MEYCIQCb4heaSOozWhVEwv3pBrm1Vb8v0/MZ/wCuvBbeWNsCLgIhAIP2zGperueAqRpK1SSHeNm/GG3lJC0zNa4YIj/29Cqy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+1SvCRA9TVsSAnZWagAAy2IP/jl6IFS7ec2Sl9V7ZlXG\nAVIjWPK4ItX8H+2i5n5P5xnBQDYxBR0/pxWYv7E1K3txzKp28VPBmstorO7Z\nEwqq6jZ5fa05lJ+92Frc0prs0miVzSDhgVZOT0P++2EWXGWt6wsozu3Poo1U\n0+WVgC2M3HXYMkS1u5/4CvlH8S0ijmSOq7a4IlVn9OfbvXapKV6/vCr1281Q\n2RO8UmqnZTCWI9rWdlB+tyZRelhXrXDYZzh13/9ORs+/evfRyB/fP1sM6GsK\nGcWd0ACAzq4PyuC9520b+oOe00DWivkz5odwSIeT6pFhw3zumHsChYPzkgfQ\nrmfoiWCxMcE4aNXZ4WkE8FLPam0Rk6FzZvbumpN0oxyrvowKgywAelKCC1Vt\nCMpq/iZ/a9buNbvTNMIT/q6wuiC7t7kZapjT7TTFa1GVt2+d3Qf8yvJgarBi\npxo/avi6BcmBW6yjBPWa94s7R0vXKyOpi7ijTtzttWw7c7GzAIc3jN5rqBoW\n9SlSB2eIBVzuAsIggmKA9eJxdnx/2u/P+EtfmdTBEDSM66PSFmhZNTNmkdee\nIhHzrBgaWquXOiBHr4QNzo8rov/HiJiWMCUz6OwhBNwJEtxZWeB3XhExyNYE\nK1pHhBgR89Tl5nkk4KJJe6YAvyW3RZterjMmvM5lzshPC+b4IwjaB01OuQpq\nU8Cw\r\n=T3Cr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.521afaf6e.0","@material/theme":"8.0.0-canary.521afaf6e.0","@material/animation":"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-indicator_8.0.0-canary.521afaf6e.0_1593529518754_0.10204056527891381","host":"s3://npm-registry-packages"}},"8.0.0-canary.a2ad48839.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.a2ad48839.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"da972241dbfbebdb012437074e93eadf154720a6","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.a2ad48839.0.tgz","fileCount":38,"integrity":"sha512-2BPgkJ+r0dTHyu6Yh6J+UsZ/I8iWyR5MEiawFDIfZzMj+XgyPritutXc6pDu/WUb8zS+NY804o/vtIu3Vd1AJA==","signatures":[{"sig":"MEQCIGOtcCzrrLmnmaM0h/c8C3IBkceefjmSAVkOnfeEGcAFAiBCkkzeP2iC2+XseNfQcbISfWnGosuGPKQBYqypHvvBJA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+48DCRA9TVsSAnZWagAAuNcQAKDUzEJU2MYwwmHruLAS\ntFGnj5bXn7H7BfI8eARJuCuPdXQ1eYpfxcqSai/J3xAqJhR4nCD195+eLbSY\noSJDrJNNEzdz2n1lmJyYt4c65tQfJ7kfmmdcvkypmIMQo3y3RnjT6/nWpErf\nWRNZfUQ929W3HYY0YkqwzeTzjKxOtenc/BDLXMdp9YYIPZWCaWrdW52Gw2EY\n9sb17Sg3K2VjjJPWtBGspvRgsSicvKfk+FLzR0VEMYlhXHAhjgFR9zf2+auQ\nm5UQKJNhqeaWZSv/UpIHy24zxeUM1H4HEJMlauv+wd+G7yd8P759GCVA83Lm\ndhAskWofeQuvzoOjYnOAsrO12TyA7XcaXiP7HimDr7P8fROu6MrsOYJtoOAt\nrwaoCyNyvwwcNfE7xFXY5wznZuW4cvVkqe5fiscs7beAr+nIPalG+yrqPift\naJBMHdBCUunIg6wMzE7vyUuhqDdee9E1tomimbEtU4HUIgBcXpY8951LqfYl\nEL66rl+n4LkeeU7KDtXETFX7+MDleDzf3zkmBlsV3Jaw/MkYJ/RODtZ6sZ34\ndnnsn1DLV3mtIi9DsZKcAhx1QMRFiwcpY98zUCvPefj5VhP+m8k2gAQJiOEd\nM30pe+dO8XlJDJMEEEMJSwBY6phzmvKZgpNKe2fAWx30nFbuH/qS3r+XoCDf\nACcO\r\n=DJtR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.a2ad48839.0","@material/theme":"8.0.0-canary.a2ad48839.0","@material/animation":"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-indicator_8.0.0-canary.a2ad48839.0_1593544451119_0.029062354267592516","host":"s3://npm-registry-packages"}},"8.0.0-canary.ec2385881.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.ec2385881.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"16794ab689ad5b28bc0104f5a4ff64a4eda97e50","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.ec2385881.0.tgz","fileCount":38,"integrity":"sha512-LyByj0RncHV3hkG0riiqg8haG/1kmkrFQLxWD0HxK05dGvFR1HxvtiAOL2948ioHbvynmhypagnycfAz5SYJdA==","signatures":[{"sig":"MEYCIQCNqYsLPd9Me52YDKwsc7vZTWtgffxaF7lxbjy7s+T5iQIhAIm0kBeL4L6pQHKqAidMRSuQJOxGsBfIaXNahn6d63IL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+7LGCRA9TVsSAnZWagAAyAsP/0EMFglKw0e69v0XR2yf\ndPbEkgeZZFzFJxZC/ygY8gmpZwsczyss2AZB22fQdb7aEqXfHZjiNEAnq6b+\nbD9yg/jgLK8W2kBqBEnj6zMrVJYd9C81yzr4wkJhCDDwVQRyLTn5IYFa44xJ\n7+nv0Ylr2yzkCq/tIo/pVm9BvT8Fkgq/ANomFtWUmWpogBn6nH4QPLhM2Lr4\nDFXiL7UgAJ0/9PB/L/ABEbc5Mqlk/W4WsDH7+ZVF97uKHhlU64TYQfYaI/tH\nAdkb0NjFPD9z0y4TQDh34yGnYrOHGvA/VQ+lzaMJqxyRHksCeeURUT5BXfgi\ngi9pnMjbhRlwOVlboNIdm9/Te7aHlzlv36E+iK8MCiNwtL7S1WlncgCEHG80\n3/JJDsQ17bpDqVyEulNNptb/3tTKsv2CBz1R6NBGcscKEhEHLPihNkMzkUgg\nrQRFMTwCFF30ggE9V30nNsiS16fSgx2OSulXF3JiqHE8KPT2OKsfCfuZVMLq\npVpomMJVSf67vPJXA5wvIBkZLuC3YN/RAf4Ae0FA1FjjOSJQnTTf/Zpgt1E9\nF2/lsD48nwQftgfujmfC8XchQc/RbYd/qrNKZZiYRYawK9bVMlucrdrh+2HU\nvsTiYehprwJQYyxtUF1bHL37MLjPbXxV592RrdVaC28GSQ9fvXmulORaMcGr\nqvLJ\r\n=p7Fr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.ec2385881.0","@material/theme":"8.0.0-canary.ec2385881.0","@material/animation":"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-indicator_8.0.0-canary.ec2385881.0_1593553605409_0.8343849178409117","host":"s3://npm-registry-packages"}},"8.0.0-canary.610c26c4a.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.610c26c4a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"62bb2d4859b633fa30f7bb58a3063b1eee8e1db1","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.610c26c4a.0.tgz","fileCount":38,"integrity":"sha512-9uwKkPJwKGFArnEyu66g9PvkC5dALQNVt9g9V2ULBETY9XLvbfjjYDyiAaih/xps7IKORxy6C2p/1RCz0zjLgQ==","signatures":[{"sig":"MEQCIDUt8W5O7zcvRDqZ8xqMg9B6kT6eWoqkJk4aVPzByeeLAiBPVp9031BuOHDvbQJT6zTDe6Ku1LYajgD2Qw1pmCQ/xQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/KP8CRA9TVsSAnZWagAAgikQAJWBRvdyFaVizO5zbput\nUvplCxVu9omeWZTjuxa8lQ84ZVf88RmzBH4qNqlGe305eIgd3Wb5g6KtiJ+G\nOD+dTiy07LnB8PeRrKAgp7Ay5i++u8qEq3EzvwsMH3FY85Z6NmMrRDLgz4Ym\n/A2zMFKUSF2HHMEL2UTRCXYIWyh2144qKV6sp446F9RiFtWKbkUnzjR4rvL4\ngHIIWpzkjFDCLGF9t6h7LzM+d/lWm+hLzfW/Qtpfv6wfJxxBXwd/ebT8rSsh\nc5oWH/QrTocU9YySDDlKRapHKVAs0KpUZnTM76o4MiKQ6SVuGryXKMkVKEpp\n0lDGnPFRfpzZWYrceGdxmNkT0tz9+5X0tOPymzHIzPFqmHrc0pPlYXY4RbFU\nAk0DA+tnUOpIvY4Zl8Szpkoc5tLhXXCSeIaAzIkRhmUhLQGai2k5VD69oxvW\nm9eOIaptd71LRdLeDXf0MRSck51TWsdOHK5ZqLilCFwS9I456Jx4iWRO4pDv\ngimWBSUykATm3fwUu3MieEbiStl5otl2mH4bBUw/vA1d4BvaJN8aE6/4R9fj\nmKzipEjSPgBthB2mS5XXNjbvbRE82x+5y6xdjbWUrC8Y3ETl5Zcey5ShfR6T\ngSzpu3jZyVsq/lcixhSGet7NAjnlBMXilQ+gaJ1cb3B06XwAaTZBdVVlCusQ\nJXvZ\r\n=tA2V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.610c26c4a.0","@material/theme":"8.0.0-canary.610c26c4a.0","@material/animation":"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-indicator_8.0.0-canary.610c26c4a.0_1593615356025_0.5760279497702971","host":"s3://npm-registry-packages"}},"8.0.0-canary.e2ea4a99e.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.e2ea4a99e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"b2353cb673ae6c9cc1a5781a36b52d60420285a0","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.e2ea4a99e.0.tgz","fileCount":38,"integrity":"sha512-uUqW3GkxABHkucLp9CKbNdRJR6mhoXiHp3cravfbWHFy+ILie9H0X0dQfbfNYfVah1J9umeVPOjooCtqQT1weQ==","signatures":[{"sig":"MEUCIQDt6ktwr4LH6M9yDjRhDmEhhGS5wI28RR2SY3YyDcKDYAIgIda4IUzXTsRwaWnoemD4Q5WGguF7OcmF5zJlpZZS8xM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OOECRA9TVsSAnZWagAAuVAP/0Rx6CmhldQFpxKP2llD\n96MP8EHTmw5uAgKwapD4ENPHNmBMqnZntJgM6Rpjo3PxXpDD35wcPT9a1yOT\nQRiRxa84wXTQeDz92OfBkpZZ9Zz9Liz95/CNrvpB0zwX111T/2T7k5Df0d67\nek2kfXNCYUZ+S7EZyprmw45Mr+xSQB1MMgZTTVhgtb6Ft4GCGdATPUkvLN4C\n3uu1FXVRzeu54NSAJBF2UglILwzpq/9FG8+/Us+PDj2bn60x2yzQgi8COt1Y\nvLfMpj1sBCCgv6xTFTJ8HZwhDXQp54DebCOMfjbqxQWZv6MU+JXsh8Pnhjct\naaa9z0E1ddJBKgyO5jF+zX+IHyHXEshEFQu3D8SDukjbA4euCsPUH1w3Iqog\nHxA3JP+jYVOMBg3sUp7sC/AUZAL3KtqEUk9LsTFiY7LMMKhCHw0kbWa+fWlv\nVJSu6RZDu75F+GXM7wxAtJq+HVe2S8Xd3olaDKn9c+RpWecp3nUGfLlKSAXp\nfup8UBW+oG1Ljaq8BI/UWfClmQj9rU5K8MnaDC57+xqPuEoAMALe+sJCyjb8\nMSnRU8bZMHBa7DMRAD+Mk3EumNKmXsQP6ovfRqgJrANBG6YgUr6EuVhrE7An\nhdyYqUMBs+31SbBD6qWgZMQMloPdjcxy1ugaeSoTiRjaYKBv6Pd/utMNeoa2\nxYP0\r\n=xRRU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.e2ea4a99e.0","@material/theme":"8.0.0-canary.e2ea4a99e.0","@material/animation":"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-indicator_8.0.0-canary.e2ea4a99e.0_1593631619926_0.27863417955118486","host":"s3://npm-registry-packages"}},"8.0.0-canary.a78ceb112.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.a78ceb112.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"24ad5d88b9fd652c91cfdb0c4f86eae7b7f48c4f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.a78ceb112.0.tgz","fileCount":38,"integrity":"sha512-LPh3RZwzbyoaCnCkRw2GvEdH1m3m49H+jzJaA56vP7XCrSqlFD0UvGHM622ObkFbJb3xV+SKtq+jcRzHcSlQQw==","signatures":[{"sig":"MEUCIQDXRw6pGClmEkq1k+ZvmSpmdPC+C37zD1YCe6rT7QDrBwIgUa/Gg/Wa7U8nuFF+akFNkJCM1+Cx9vV6K3rLhS5oXwU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OZFCRA9TVsSAnZWagAAVXEP/1YZmTYvOqu/THFAF3cn\ntGiuTLd+oOnO30cmcg2OIdvZW9dPPiQ0nPg2Rpv7dEJ9BBchLoBcwTVXU8oo\nNKhXoXPLMKQo6XipwM0gq6cI1BkIE2qQBh9bJ/0LRbknXLCovqMIVae5g0Tj\nz+UMoYRR9HnEQmb4R2RofqGXx1CaSaW195Uac9it7sDm0dzoQSLqZEtyjNnU\n6cZ38BpQvkuh3ABln905vZFfRmyzY2QzpWa3bu1E+EZKiUMPhxGXZFyR3DCa\nQpDGhfdjyb37RFH8ybjcPfsqf5gPyTQuEbsAd+9Vh0mCHgr6ty+EYg3iPD4G\n2GMmao49PicAb2ctFRyWThwOAkPJL42gYd33cnT9GwxJWc/9kemk2egHj8Wo\nNnfKe5ZH9Yo4FHwB8fnjctDRDHRhgkBke2ENgbomH/wZGvFPV5CPUbRla+wQ\nYPHtU37rMmqOh2I09UR1AYP8RnWFt1uA1kc58ZhqSTICU8CBdHuDYHioWBzq\ngi0bQ3IDvfxTP4w7XDDo5GckxGmOQBOVz/Woo//vh0RbGfo2fAi6Qn0Fmt/U\nmKFtE9Q6spDecJ63wABJ8mlibvV9GN+BIHefh3nhuxOYbdaVMlPKjOrDWZME\n+hxMx5QkjCXKM/GwvcnPunW2i6cOCLeRbHsQTk4WfsTUfUXnG3XUjy6pdWug\nbXhg\r\n=lSjz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.a78ceb112.0","@material/theme":"8.0.0-canary.a78ceb112.0","@material/animation":"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-indicator_8.0.0-canary.a78ceb112.0_1593632325360_0.16137741084225632","host":"s3://npm-registry-packages"}},"8.0.0-canary.b0c456d33.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.b0c456d33.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"17e18b1a8dceac59614dcd249b387cf8a8d3a90d","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.b0c456d33.0.tgz","fileCount":38,"integrity":"sha512-44qMZkEeJXXIp6nNqHkZCF8queEAP3/OeA/uFxZ9Ly+Oar/QsUg4MXzCR3nsTd0qksaIQjzuLlE/5jtgplczRw==","signatures":[{"sig":"MEYCIQC+XdRBUufZW8uVin1AZdjOwbXa8dm0zuvgPFFhaEt8UwIhAOPI65SkeCiJPc8IWGV8KSt0vv6dmPIi/pIepuSfZ8M9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfA6h+CRA9TVsSAnZWagAAnOoQAJWAXcFlk6pNSQLFkAYW\nlNGLdEF72TLl862J8H+cjsAojMOMWsE649QbRzY9R982EqcN3tLr/bsQU9+F\ngumDbxsXLk8K162WFvos6g/ARBv1Kxeh6WpSOthyLWk1eTjxtyQOuexfjFBK\nONjY7cCq+dnSD4r0QZpBvQAIUr5j5/6ZVqPU8JQ1EgV7iCkbk7es94VCu4bK\nUhuvt3xlVFjBof1FCWte3r9vpnnsj0jdpLpVNsUWfOsoX93b41/XQNOL2G5E\nH6otnDTHgIUruanvfWnBR6fXYubBectML8WOgTblTl2izaUgRYA540RbAVLD\nDeqWPbbs0eMheedVNJeyPGMElazP16StQUqtM7LZgCNJ8RYAZnOUB2uBKnvG\nZvzGvObm5j0W7FPdrm6596Vf/jkUkGoqWDgVLXgdS9974ahMmCoqstujYODv\nyzT9qjl/zL47Wn3atAHvHRDnWBIoNvBG7TFh/k6Q78M+kmuqT9VZ96bOSXlk\nyACsrYxDOlKtbweHpaCELkJiD62O1XlluEKkwpnAtpQdKljXZwfcuLQ9uvth\nM9ok7inukQ2HvX6NZN/y2qRlnzzRHl7wTNCNrDF75TxhjAq1kL7CtrENnG6p\nGtBs5EAIwDKA9MFA89v72I4sgWJG9w7ETgisKhcr6lye57GCgHuSKfB9CEei\ntO2H\r\n=1hjg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.b0c456d33.0","@material/theme":"8.0.0-canary.b0c456d33.0","@material/animation":"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-indicator_8.0.0-canary.b0c456d33.0_1594075261955_0.463996570914444","host":"s3://npm-registry-packages"}},"8.0.0-canary.2e5711e04.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.2e5711e04.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"8ba3d570ef7ce04a1f54aa2e0aaf05f7f0ef9aef","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.2e5711e04.0.tgz","fileCount":38,"integrity":"sha512-Yrn0suG+06QJ9h/hkg1BwD06tomuEn9/d7ZwCv5yS6iezv9whHFNX8Dpggr1UKzRUHKqjNKU46ISZMbUnXRCGw==","signatures":[{"sig":"MEUCIBQSpjyebDDdUz9o4a2H1U140yefXzQXkp2P7xepnHh/AiEA2nQgCC22I2Lq3dUVmCbRtZEWbrm37AJ9UNP3gLLEBbU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBfizCRA9TVsSAnZWagAAFxMQAJNURbcQl1LaCPI4IHdt\nzmBGuZo1UY8018GwAV+PGvODDHF6h2kYjksr2WlbZNxJ9uC0NIn0V4PpjDzt\nB6IpSyU0GSBgPYoHQQISng44tTdCnvDHoDcjzzpMF94/ccFsirkU/aV5y1Mv\nF70vXdOTflso/XMiQnnxSDJ41NAT+3PfFv/GU9D9h5Iim0gA4V/6fgekkFoh\nrVKP43djGMMaKmMjGBomzowXqkqAUz5b+nCO8oKqiCPMz8HoCBGUKb3L35wF\nqKjb4n0AWfyJoFGPK42aiZeYrVA1g3eXQJVHFMemUAo+0A7A6z2Ru/sNfD5V\ncJYxYTe9LfpoZWrIhJc5tsuJuMaLNe59sDmSf9YAsAxG0U7EO1LW4Vd0CczS\n1XgZmbgj3arPXNU2Mu2cXbpcMN26/vhoEHgUygj1XlLjWM2aICn/ScC0C2GI\nbJ/WypsTpH++fbubjC0gRb3yxwecSLS6PoNqlJfRd32iMhuGz5j9n0Snzdzy\nJo4SasaFkvMQdzlW8o1qqJkCsxrVj2c0sYymcq2wXAp5lX35n/gV236SnjZ9\n2ckWWlXPJEq5qjhX3YF0hsgqdnPI4TX/JG8bmHTmaxvmeSEg/UeeZIrPl2Zt\nu94X+6coCew5Q2sVvL4OXO75vmjjQJdfZgUxfnGh8uBG9Y55F7B8ZkBYbxU5\nWI6P\r\n=+jzT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.2e5711e04.0","@material/theme":"8.0.0-canary.2e5711e04.0","@material/animation":"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-indicator_8.0.0-canary.2e5711e04.0_1594226866907_0.28436585905168377","host":"s3://npm-registry-packages"}},"8.0.0-canary.811fc5d24.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.811fc5d24.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"bcfec206c2307150c29ac4cfe662ab69721a836c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.811fc5d24.0.tgz","fileCount":38,"integrity":"sha512-W5RoNtNdVeB0Umz2saM8Hq1PApYdo7zqXdc8jvZRe3nAjhhHEh0SDBErXDtmoxCkNL5dEyMXCTH/tGzCskgilA==","signatures":[{"sig":"MEUCIHDKCJnH0vNDPhO/vcWZ++ZbBtdo6HsOmQvP9uFuldBHAiEAr7q5S7oyn0dzI/oVFaHQDzMgBvTdoH51vKW2ZiY6ntA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBf8/CRA9TVsSAnZWagAA5CcP/jHnmoQk5k8jD6iP7C6t\n2PLpZ+q7GeRKwZu6vTAPwhmLY0LclpjjX1HO9SjmDiH8bHKaIhthCHe1RkIr\n9euNYkFvmyF9pyddOUCD+nDY5Iyr5VGpP1VLHg5nSotr0QS+9RVKX/SLBD5R\nqkkj9mRNPHZX6A3nIm7vby/WMlids823yjgodh8WF1AizTEdc/kWO9nK2QTe\np0aw6j+K2qZFDhinx4BGU7ZD2k4L4cKnj4YLsJJbgOyeYlnQu9bxSNLKxuIX\ntACVJdsSy7gbWmKzm0qy4muLN4iwnJ1XGTF5TSlPVBM/onUM/ZnBnO8ASDUa\nBry1axe3xG9LSmDeLV9GJRVjIq5o6oadH+FA/xRdxZRpW8Y3KlmDGS9uLDLK\nHoMSdQM6GFJOnJUHsxtRA6RYSj183DV/GVpC5thNLjfMlF1NGneib6XSR9xg\nri8piwRo52PJa8OlcN6FHPgOmR3yuQFmTULY0qk7I67rG5xdCLKvY+ceCwgW\npF9RfDXRmWsj9bHTQ9B5eMj9mVNAmNORFJRCNj1F8/X9d02OkzieIMNxbeJM\nzttGIxiJpGrpfdk5Xjl/1oo6OnjsUQclF7Qi30AYa0Q4oN+916gHBOv4/pqC\nB9sJ8DQJT5/93XvyKE6+oB/+QNSRWH8IfZHoa39Tcee+ZKSqfShs664Xp/8a\nOBWI\r\n=Z3WV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.811fc5d24.0","@material/theme":"8.0.0-canary.811fc5d24.0","@material/animation":"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-indicator_8.0.0-canary.811fc5d24.0_1594228543337_0.9084873914252545","host":"s3://npm-registry-packages"}},"8.0.0-canary.6ed717ddd.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.6ed717ddd.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e94fe5f8edde320cbadbd994d2d36eb034680d54","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.6ed717ddd.0.tgz","fileCount":38,"integrity":"sha512-nTwVhlk/R0tcjS61QapB3qYI5UpIbrsSX6Qv7x+QS7Gg2Ox0HONnnJCN0ZablazJmPInDPpHimKzRgTjgGt+ug==","signatures":[{"sig":"MEYCIQDvCNguyuLx8pbIud65u0c6MlehU3HSoADkxWVVH05t6QIhAKkoJzdxi3cqotEHSkL/9veGfP00zx92iuWvJOblVwnd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBiH5CRA9TVsSAnZWagAAElEP/iFZ7wZOgWxqkaIcNeIw\nA8e8AF0q3n1Y7vP04Qhh6DPnerAGAyS5kgMuRiZ5v16+NKpdX+vOtXpCf7Zk\nLP8IVGMVfR5et7ybAOJ3BSmtSpvVGK/R/p1ew3Kkash+pHpPFELhV71eJi04\nlfPA+qY+7rHqTOveBRjgGwDYq/FwT0p2U7k6hH2V161PTsk5/wl/4iIbijxY\nr2tPzu9gPjF3jgX3LakBUOzEz47wza5/id+23T06AribDtrpnNJt2W5ihEjm\njFbH975fonO8ZEb1lO7gQP7bjHsHN/kQx6Ju0wnUaRUU0ByNkRVdeClDkASG\nqYzWZ+VHPte/jZqTLMcCHWv0iI3/hYr/VvIwnuCSnFTaMkxborTZ/vILtuPW\ngjhEGmDk3R8LuAJYT39+HNq7EbV7K4CMsYMoWqPIiFzvwDD9HFISFQRt+X4G\nUwI8nAEzLIOmw5GzQfoj4QjA3+wuNanZsjDeLiilmYZXv1y4usnb9Uo1Oxr0\nYiogt1yWloXle04mN0himtt7p6kkTgGmD2kjuAWP+skqXpOIeP8GV/PHRLGr\nITGb/taNKUK0d6HLGENmOqGS5G7u7k3hHtcL/lFR+Y0GaQlEDTpTr7Is7qWf\ncVQUYxD892w56+EJCcWtClA51WTHcZfTzf4IhTUB/ScFTOKteKCGaIcURt1q\n3XT/\r\n=E/r7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.6ed717ddd.0","@material/theme":"8.0.0-canary.6ed717ddd.0","@material/animation":"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-indicator_8.0.0-canary.6ed717ddd.0_1594237433375_0.2367339197788476","host":"s3://npm-registry-packages"}},"8.0.0-canary.d850de590.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.d850de590.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"873b21492cacbbe70b8e12c78ba531d91270f6a2","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.d850de590.0.tgz","fileCount":38,"integrity":"sha512-ooFLkacr5raUqqMyXbPTD9iwPlPsr/r4KI0iOgUkV7U+VmDKtu5G+NknrHO6bgVrTVCxK3G2/DhlSrGS+5xygA==","signatures":[{"sig":"MEQCIFNyirr/IPn+XoZtYlivelPoqI/yYhZL+RPXhGjIGDK9AiAFYN37aERqUWkzM1GDLUIki02SZkGC74tNBj7AGuDLvg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1xcCRA9TVsSAnZWagAAcjgP/3KNGLpjG1NGP5VCD+22\nsm+wJNEkgE8CtoP/PWZOHdrG/MsJYyi1QHZk/Teom/HVxQGmHH895OGLkuP3\nblyU18yzILXbBj/gEhiu5/kRKF1eHZpZqxLWYQqmAYLlHFN7P6LTsmYILK9s\nqJWqPga6e3WoykroWB/saxJKRsMUkzPzNbkBkUNT57GPdRlgDIoz4mlg9ZjT\nOzZJlE9KVUjWrUAw3TkxPF8bD2KWAhKGw7QfPIBcDyuoG3uw+8Od7XrmfRPh\nT2RUfYV7sDUdxUBV11pvS/7g6/q1d7owU7B/HfLsujo3jy80Lc7eAJtCQwOn\nlgL3F2PJ2Lynkao1gfF3ZUUMd0q0l5hdZD3yR0N5eh4twNWcOUmWnJZw6KdL\nXBa5MTjhJH2G/O427jHQkucHvYfJWU92aHJYYERfDsGoDtPhBxUCtglSsbwA\nI2Srk1kuLvsd5QhBDi3Sw0ZabMqt5C6smyl7tzVBPlsI9SOSqaMuTzGHxw/o\nyUMpOt67CE4JOrtd112tYdrHyb9Dy2mb3ImuYf6ifLFnP8cdaqDNxwJp7I5q\nhDMtU/okeJMTQBWf6f3H5ZodaAiDYtCCpvHN6Pph9GALtfuurpJXDuC8NWu0\nSC55OxI2JNT1zD8t7R3nbm+J1tTZqles1VOFObmCKZs38CnDgf5K89nn4hbR\nHOBq\r\n=TVNI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.d850de590.0","@material/theme":"8.0.0-canary.d850de590.0","@material/animation":"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-indicator_8.0.0-canary.d850de590.0_1594317916001_0.6429426281189845","host":"s3://npm-registry-packages"}},"8.0.0-canary.e07a70841.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.e07a70841.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c8afb9bae8c6dbea4201de471834fca039b380d7","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.e07a70841.0.tgz","fileCount":38,"integrity":"sha512-cz0JHsMIMa3TNKglsLGhapwIM311FdfRZ5FfFr+W3w0zVJ0FhsloXjyCyWp7LHyXHE0GQorA5h25c0abEXMVpg==","signatures":[{"sig":"MEQCIDggotAA95LnRMfQnkJbmEdCUg7MhrTS9yfV4OEe052NAiA3K/xnlnihFQuKaGfnKMTQNXuii7KIbML9SILySjJKCQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB2NZCRA9TVsSAnZWagAA04IQAI/so0b2I2QOF/rfw+Ev\naWmdA22okjm3nUgNKuz2P+5wGrUi+26DSQ8v2fe3GxZkMrEp9efY6xb7oMN5\ncRiy96QhYmUEj9fWRm/oU3izqB7qoBNW7CufS1qeeAoQeNaGQDBIqeWcKJBE\n2D6y5Dl9HtOjnYfvyROHGOv75xCiXSm5EMXf3XLrQtyGnEJdynA/0XGcxU2h\n43jzNYXy9YxX1zSi47iEdPv2EkLjRKo15V9QKabk8fPjLuw2bRfrj5yc2k8I\n+Llca1skG5cveA8lCyHMiXGTEE7PWPDzkWHTLTdELlLPIhaE9YlsWFOawdV0\nAWGGFF8W3h0N+NmPEYrxI9IkgDtgDYjeLj/fMetYZQWLscktJK1hWTagsYrP\nR4OYQ4sM+AHNoqR0c4blYPFlLk5cY3755Rcvu2IXufZCpxDGu/ye8mciARFk\nmsEA1WmgeufCTKdvDhaw8UfJKI9EprCNYLVIWv90aaIVGtx2tobYBSsU55DO\ngzxx7+dNakIOG3Q8vEHN1ygaNVOx1YgzTBnwy4RgoqMknhyuwjCPBrvjI9WO\nx4SbUW+ZAsfsjuyW7uPtO+Lm6YLg1rrrSGPkbHo++wL53s/fXPffrLue5fPx\nya48oxuH7/CExLM8AvR4hhrJs4vwOsztRky1aJQEueqO20PujiZ74dfFAmU+\nyIzN\r\n=0h3j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.e07a70841.0","@material/theme":"8.0.0-canary.e07a70841.0","@material/animation":"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-indicator_8.0.0-canary.e07a70841.0_1594319705207_0.12302340461529959","host":"s3://npm-registry-packages"}},"8.0.0-canary.37947ed6c.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.37947ed6c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c6e4531187307623f4de29bcb110c68d03820a81","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.37947ed6c.0.tgz","fileCount":38,"integrity":"sha512-rGWUxewVufPwGEgMUOP1/z2CihxtmSl0Up0P1OLz3wjb+LPfJMhC6LP1Ta4Y4GvS/sLK9f5rjpcDs82dk1M4xw==","signatures":[{"sig":"MEUCIQCnxc+DI7UKvKDXLXFm5lqfIxtP5xrYd8XFEKe+vmkCggIgQ6NqpMHn3X495d0Cx3B8MhnS8TH8kqYVDQn+/62X9FM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB3+vCRA9TVsSAnZWagAA2y4P/jBvhpFIGtLboCmQEy7R\n3mfhKjWJ00epayUJJQHTDHuRkO1o98dhb16B0UImZPXDlXbTieZYcHDufFOQ\nYe7QYoH9P46LWGOv6fGIuriTkBKXg70xLAZHIOi9OHqUeMvce/l0sUlauYwO\nIgDRbHJAvC4rY3XKe7VCLNXzYFFadgyNxVT0YEkI7BklWWvhMp6UZ96AD5R9\n3frxR6ZRhhJSeASJtH+uLsRP1PyrK1kGDanurHtvDYVjRZYgor1FV+3Q5ogv\ncr+yScPsYpxw5FVOa/bkinj+76MQcPP6VrX/ZHGgbF9KK8Yrb9D8xrh2B8jZ\np0Rs5eoHc2RmykRcuYjbXNdl9dlncLO05eZ3N2M7/YwRFgL1Oz38pg6YEbav\n0/nFzDJrweqsOf9Tx9y+Z/EBROHipV0INc7FybPae46cCsTp1dWHNC6TEeRg\neEqRuGkP5zzoxJGma3VZuaikxBFx1AYqmwxY9+X80uNkT2YsYej13Nz5pDZ/\nJAD3GvBHFd/crEq7F+EXsB3ZzYPmf67QPMvOgObNmruLTFUZafRmeXjweL3P\n28ie7nazAqOheHSb3eNyVMCO39e2Vf/tvKXQAm+DkPK9TePLPGCd6R87VaXm\nVVQqr85+sKjO78u/gbux/WNxDSQRhfDitvpYUpuCrAv6e/T7uQM9JLWpo0yQ\nSHhC\r\n=oOjM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.37947ed6c.0","@material/theme":"8.0.0-canary.37947ed6c.0","@material/animation":"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-indicator_8.0.0-canary.37947ed6c.0_1594326959319_0.22312429608364615","host":"s3://npm-registry-packages"}},"8.0.0-canary.5d443afec.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.5d443afec.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"762d7ab78bcc1cf5ab962a9c4f85ea6ba611b071","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.5d443afec.0.tgz","fileCount":38,"integrity":"sha512-7o6vb12aH9mTwIeTu8/6jp99wZLMMxgjAzhbDGPsIwqhELylKnicy4BSkBnCFokvI1vWwDrM7glMXO28jFwj/g==","signatures":[{"sig":"MEQCIHufR9xdFkaAaY2xKyArC35GAYHECcKkpTs92MFHC/YLAiBNFHot+zViOvxuAp0wOkgkHTvkRaRkh74ocVgAvpXUNg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4NYCRA9TVsSAnZWagAABK8P/2Ce5fuTjpBH0MAXVFia\nZABu5WTf/1xu2abSXcABRC1X4QlscC/sBtp4Clvo1pgWUDhWMJJvMOQ4NaFv\nO3jY+SX/as2FonnTttipWh0VuzeKdr1IgrWVqKgYh/NTf9DBuz5uHYYsxorg\no5i/ecY8X3x32BM7ah5HSDI64x/iqN82yFmuA9LWlSxS377qZuKPKtlGW6D6\nP9w2uu7JpbsjiCnN/4aLQPfE78bk/1bT140Mn6dvqsdhG3mGkDmpAACo7TRg\nsuO5I9VjjXShKMfCZiyFvJqBR3W2Fj3Z9u1uYzaEFy6W/EKyIyqvhcFl3aBe\nMzXzyNGQ8DQgz3ALI20mR9MQXM5kA0dwKmffDaMpGtK6VT1EUJ/FfNpiG2+a\nCTdQPKvMc/zrNmLByLkHEc2SsNuptBiiSEeidx+S0vopznxZ0gSodmec4ZM5\nn0V9R+2WL7ZLwcrIVFddEIzXV/4zXW64l7mCDSs8peqAsyouQnwB+hdPLlbx\nL1rYt/Bfn590hdbtN9wXrFm3tefiFy7io/7UjDUTkVe6500VRkgnuazTzy+G\nog/Qm01lEFEn25Ik5531/y+M535UaCQ0T0A+WlFLcZ+qpRp1lvQhppaTeVW3\nJdBtNvnr4DNsm6zm1IE34vKHwdGM6/f2JV9sIW0Qf1vsdzhefd12K0I3CYVk\nzmTX\r\n=Dxc0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.5d443afec.0","@material/theme":"8.0.0-canary.5d443afec.0","@material/animation":"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-indicator_8.0.0-canary.5d443afec.0_1594327896188_0.25436426203352447","host":"s3://npm-registry-packages"}},"8.0.0-canary.9ac1ed914.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.9ac1ed914.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"1716247c02b2573ba563d0c29cd1196c188cb967","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.9ac1ed914.0.tgz","fileCount":38,"integrity":"sha512-9R82ZFB/EIF1tDyxjnhFkHfDFw378maiokYqtZcJ/APYzgDk7SpjlPKcXEK0jc5dCKFgqATsveCFGP0PS/uhSg==","signatures":[{"sig":"MEQCIFAvNQ45aEppes5hpGSPjC2igerhDsxuY3eK8sdxb67sAiBKoDKrbMZZE7l1GIEGFv2/f3Y4UEoQI4dU1GyK+NNxMg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4odCRA9TVsSAnZWagAAVkkQAI0lFTzQwjYhRBtVPnjk\nFROcd9JUvgvkwHIcQZnayP3NskOHFKC05zZ7cXfa5Mrqf0uWXKi82rIrvDeQ\nT3VCju4MAHmot6DETeg3V0fqWNEao15pXJGt+dHmGDi7rnzD4POBCvYw1AOI\nEjdYmDYuGY4+S5+PO5L70EwEg6IChdYHjsbzow8CjOiqhyTRBjQnczbWw5lY\nRXjS0ORXdLds22IoPbCghhp1tSK0cuDvktZYkIyMa9CfjTZ+A2qfK2nSM7tJ\nJw9OnHGULRVxJFYTO6DaBYzyG2jB5eK5plqK+Y2IHPNtkwVvvNopXVclVcTE\nVGoCSIhFIjFoTBo8EV3IjFycZl/XLGigq1WMfb96beMb/+Vy4sfH1guyO+pT\nUTbn6uLrJNftSo8HTGY/os/lKDnh+jRT9030svRk/Tpi+eAbIsZ4zR8ga+oB\nDhQss2OV3Z/0GtS9RHJCV5ygX/VbyNgTKfo3zJIi5hP3Ik+WftwU6MmfBJG2\nhj9Gew2Jchn8piMWOsd8MjewFHteWPrP5G0zl304RwTnPV9j9DQfq0cS0PhY\nNPZuGXpGUxc4+d+jTrFSxhM4EwURELeClgZ0oUg22MV3eIx3Eme9f9MXwhcZ\nGTn7BvS3Ok4INA7UdyQdeKFCwbr9B3w4wN8bSwAuA71J8YQVNbMWRhGh/8IH\nXJIC\r\n=YQ8J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.9ac1ed914.0","@material/theme":"8.0.0-canary.9ac1ed914.0","@material/animation":"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-indicator_8.0.0-canary.9ac1ed914.0_1594329628809_0.5618745970616501","host":"s3://npm-registry-packages"}},"8.0.0-canary.1e7cb6198.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.1e7cb6198.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"b92fb607636379508a61d9af00cc705c0b916d35","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.1e7cb6198.0.tgz","fileCount":38,"integrity":"sha512-q/d/F6kh4C05AM+T9AByxKwSVKOfHxqP7HkTOWchh8zAAL+0ShWl8R5y8VoO3pj6XstN/eTmW9b/ovQf+1wj2w==","signatures":[{"sig":"MEUCIQDUz08Sbl48qyLnTUua1Dbh4ulqNRbTEbmk4OjP8S5cYAIgAjIhDps77+X1IdoiXh+iulxpVIwvnrLqv1imfuoHKY0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB5Y5CRA9TVsSAnZWagAAJHwQAJzKGsQxtPHLBissitMW\nDpwqWHykIsuATzyhWEu8Y2jHli8OmLY7mRRnPB63oM5zYlHxNhGiB/1OW9Zo\nMjiY73MSNJYvU2qsSwNpuaWKDt05g/vyVu6oxPd8XfvY6ntpT/5+TySEVX4+\nJIlcpnnX17CY5nOhiqyt+ErhCIpy6UBzn2niLtSpoyN5MpOESfTckQUZj6Gm\nhhbGppDTdaz/ryHDVQn+6vMrMz7SJHgekG3Ev6gSD1mA2WiwBQCTI8OuPkkC\n/BbXyoLRKN8atWsJtSx8C8F/QuV6FIJw6VBU6vJjA+pLw2X8T7DIjNtdMWUx\nA1lmJw4e2fOhOdhn+qorKC7YS5S6IM+LuFoBWlQSGM2/BIHJA7UfBwpSXGVr\n8CM8CSHBFMpPBnar/wzotsYw0pAu7WH08517WKAxbmmsbQthCMfuhoxtHBAW\nL5bsjGOJs0CVQeq2SZJ/G6Mey5Glb+PMU1DK0YuY9bbMOhLib5KiRY3zrrmA\n8dMkMnD8kSh2GfpOTFQ9b6kxi0zejCe4rDFWwVAi8uGHMww0WmxC6TJwSjx8\n+3tmwtVnM86ZunULDjdr0oqyu4cerM0uawVKmjivsXWJ5JboM4uk6wd1uq3U\n7PHdd2K/DxNtR0InJ3765hNnAeNbmpvQ8+YYJE4YwxfOXvsG738+BvqXQyIx\nJvj+\r\n=fRXF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.1e7cb6198.0","@material/theme":"8.0.0-canary.1e7cb6198.0","@material/animation":"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-indicator_8.0.0-canary.1e7cb6198.0_1594332728621_0.2671882080021346","host":"s3://npm-registry-packages"}},"8.0.0-canary.843f636c0.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.843f636c0.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"6f94d58ebcf4d97ddcb3e636f43fe3d0b9eb0644","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.843f636c0.0.tgz","fileCount":38,"integrity":"sha512-kQFYMCHAuQKM4OPFFQl9DQ5qaU8u197YtuTK5nQEHK7A/AofR0hb+zUY7DWn69wh4r5+BPioS0lqyIwR1ym8Aw==","signatures":[{"sig":"MEUCIQD0wYMc9HVCZUT6lwp+jE6Y6Y1ddI+WFpPiIdDdgIz6oQIgI2nQjUPRs+3u+4aH/fMvOpelX9n6K134DqjhYYhjKF0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCKiICRA9TVsSAnZWagAAbKYP/Rb7BXiEr1B0c/D0Fb1S\nLn9vZhP78XnwngEpdgCMqvJMH9WM8ccLV7wm6wm4GLFMctwV/7/M6IQYwdr1\niYaTIRu7uxxJHPLeBeyWkhQ+HM0j47NXfwO8pB+Mcdy2D/HkDw/w4XTnl70g\nzJVORVB08d31WX86eNINkg94BAPnp7TdGYPqWsjH8sGC2U7UO+ILd0SVqqnY\n85ZtfEBDVdFKJmZjJ26xNsRgFutUVPPb7QSHacwrlWKPO1mBfmEBtC+kul6S\nHrTcR+0xlwkk1IEovMod0Gss1NTC9yNR1PiK66hfTyWg6YQPOg644ol1XnZ5\nDtAxAZFRmLq856UmkarwNXwp4vv1kTlNs96SihLsnX7y82AFQSTBVJaMU4f/\n+W1xpQ9LJdy1MTOrBtvhJYsk9WWAbh97xQXzARz143nbcp0iWDIZKXn1JUk0\nLjMAeZrASKYl181m49AbEeN4SvfSZ3e1Acy0P6HwTQLEyKlhWR1EuDQo3lvd\nJdcPPZ/+QlfLNpS94AK7KIpuH01nn2/hQ66RcTywu7WhltrJgn4McdHCUf8u\nHGmrAo5+DmUDQc8W5S8Dd+KW30cPvN1TLR5t9waumoIfJBuMvUJL+EKeRKE7\naq8Ee1oWGpku9mVLlyHnAUz1+fc6wsKP7mG8T22PgVhsTHizmhrva5f0zmwU\ndLKp\r\n=7MBD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.843f636c0.0","@material/theme":"8.0.0-canary.843f636c0.0","@material/animation":"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-indicator_8.0.0-canary.843f636c0.0_1594402951514_0.9321975928074653","host":"s3://npm-registry-packages"}},"8.0.0-canary.b2edaeead.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.b2edaeead.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"96fb9b42c2b64a5a4a7260424e7ebb5304d36a04","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.b2edaeead.0.tgz","fileCount":38,"integrity":"sha512-2tHl3/Dhw/UKfuuJIH16oK/8aHJbSBHqu40HscXl9Has8bmnVHYMurIAe+sYiAa9lmawlB+/4RvzROZwF2otVA==","signatures":[{"sig":"MEUCIED9RNMIBEHyurvcE+nIKWFmmvzzye/9gJLsolDnDUm+AiEAxfV+31cJFsGgIpNo3fhAhCkhRShth5mApv8l5lIUBEk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCK5ICRA9TVsSAnZWagAAKQsQAJe0OmSRQ5R6XtxGHA6k\ntphNmSZgVHrXdeIrodPTwkG7yMaZf7XQUTQ/jMEth4xKjax2vjltIZ/Eh264\nc609xBWbVHEf+8dVB0X+1dYsqau4/DAX+AGo8cehoq51/78/YON3gxcn2K48\nGeMqTSxmzBEGGpt1lzdczUV4QuL3oV6ElKcyILjXPktlhYjvKDF8ILRzeP2i\nYad15bYw84iXUDqJxGO9X9BMuQRky02TxQ1ulnkfatf4++wvWxbVwnT5XrOo\nuf/3+SS4ZqFRtQjsi7cg1MzAWULkdwkfk1JgsfG3ExbNCMFird+F77Fh+wTu\nOYLZsov3S1W6dyKYLLS+/m5YYoAiX5CrzUMxkBKxXgXJdsKCNFtH3guuBjYL\npeFtDaMevBYnGcGmuvdRG5mYtuc9oO33mYIjR/kg5yEp9zL0GrGD73udqebn\n67T1GBW4KcPHlShr+ak5+cAK2+ElK2d5h4uO4APzYbOfRxTMCq3lJfPhVBbL\njpQvrUYk5t82rmZBCZ0oTxAXLwjujXQephad1o9QfKZD8Ll+1BazzAYDJinP\n3hdeNCtQnYIefSrI6Pl+hsqCac+t/Yk4vtBNNSVX0fk2HQK1pRMJ5Ybbp+Pr\nFydcnOLfk161qiJTIechAJNpHegtK1JCYTWj1lcfd0kOBuBoajjWbLSwEdgU\nacXz\r\n=izpg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.b2edaeead.0","@material/theme":"8.0.0-canary.b2edaeead.0","@material/animation":"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-indicator_8.0.0-canary.b2edaeead.0_1594404424163_0.06693643365045832","host":"s3://npm-registry-packages"}},"8.0.0-canary.5dac1f624.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.5dac1f624.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"84c91ba8547eea5ca4eca7137231c7c8084c81cb","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.5dac1f624.0.tgz","fileCount":38,"integrity":"sha512-qgyXZpfvLOk+eRG6zkYRn+r3YujSsbt7mCbQRDBiVJ2B5tHaR7RgKsKhd5IeX5kCIFzw+hOUmh0pO4tXnWdW1w==","signatures":[{"sig":"MEQCIH91fMHIrxXXYcKvy75aqIXuJfvM5MqyGFSsztZhddpjAiApPLR3DpoNxiDnojVDjPbGtqJFl0XK0FSMXNeiy/pvPw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDI0ACRA9TVsSAnZWagAAt54P+QCRgrAJIoEJg0gw4xXA\nMThfpcsNH72I7Bk+s05k0Ut5gjuzPPzywE8PHVuns3JAhISY+9EHkFG540to\nUp5KRzDeG65aWQaDEoi5kpRUSQn5fxANvJ895q6si/vtOAYPIoAZF7rH/gqQ\n5kvuEECFCJWqa0HhU4OSBvqGXusg6QcRqsa5wrB8fo7hrwQvxEf6wiwkwxmZ\npxKch5NVjPhCDsLSndvomu0LqP3fXX/z4OOB94tD9IXF2jA2TGGWHnvg4hb3\nv6Q5rGJMdehsMKGUjwvsEZwipH7hr6pS59FKzGJAVg+xHfr7BLBOv+jlLvSL\nVwMFeMD4L9sm2TVvok5+aPXSKB5Qvpq99c8zn9fo6kpKp/HIz1wP5UTzEW2Z\nWeaeISKwtpDveHMmj7zs/65sywnNzC4VasinkVsfvlS7BvBnGiw+mpLTPIQE\nQwhgqDkWnKC70FQZT5bnEswKzQDH05SqJHCIn0AhpCTbJTV7HrkwsBvGcMFe\nGyb5E73PyKLPk5QZxicbO5XE70IQQaBIT329wrOjjROMZEJAypFwryKfKpYT\nNrH5poZiB7bWMz5tz7dQcgrVCHfuCnA9wv6+y8KYaCv1R8tOh/uddAhVyvX/\nW7wlxTBgpbSlGMaKvhihqdvU8puOr1B/RBuw9GqI88yVVAJUPMlQ2jdKEMW/\nF4kF\r\n=np9x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.5dac1f624.0","@material/theme":"8.0.0-canary.5dac1f624.0","@material/animation":"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-indicator_8.0.0-canary.5dac1f624.0_1594658048156_0.10977281962017726","host":"s3://npm-registry-packages"}},"8.0.0-canary.4497acef8.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.4497acef8.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"a7e631d53aae02f8a7897fc6e4e0260e6834bc99","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.4497acef8.0.tgz","fileCount":38,"integrity":"sha512-tYS/Y0hE2BzKobH3U8YOFQmAPnQ30vB01/2R2/KKNpmixj9DJ11RCVTPaSbSSDMwPiHwf9e4TMsarmbrj65q5A==","signatures":[{"sig":"MEYCIQDS2NlX5aqvG43d2BwSnzguliHBKpj97u9bT9dAvmrI2wIhAKpi0deuQgxTYKYlHD0KLkfB5ouln0wLobGlCFAEiSgm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDb8ICRA9TVsSAnZWagAAM7kP+wVBIzzEbMU8nlZ/ic+J\nggX22Ljir8c2tqA8Q3FrOsrNTLOa/Ql3z3xIAft2h65A1uUFDRS0F7fPYTm+\n75ZkBU+mnw6fvYB/9oSmr+cA60yOh6OT9G7XPjmOi4/aoMqD7ZHHZsV27tez\nt+zzD4ClRxxghtLrbBT+DK+YPra+BLj/56oFT5jltPZ9Rfl7JunrOR46jQ3E\nq/pfQZ+bfQZ+bE3FGQq75ROZGHnP0l6ovEAMhRdnD9kGpwlneGBqISNBq2ht\n6eSbU/mCh5KvnqJBLg/RABsb0UnXP6HJF+PzRzwSk4NHN8OqK6mkQqRf7IZy\n5PO24aSz41nSl2eUwgfkGWqzLa7CljCi70v9Mnui1UXPR+NpvylhQAzD7CGm\nhT4kBmaA/6NMv+zJVMrTRII4z5h1NfjKnGOLkgGfLqNjU0IJvhUtRzV6/cl+\nA9TMfixAWqRFb7QulJBIrqW7Obwk/gdHIne+ZRi13Jy17H3PMK0/P9pe+2y4\ncFuCyC/G/XkND80brvaynffpIDWuKkiLkxZyZzQjN0OQw50Eg8VNuc93UEnJ\nrToBxNpzNpVQpZPWQ2JPxzOta+oGEg+CVN8vmbhFN2HtX3f9thyCw7PGwUtD\nue0CV5oC95xWI0sazmYpFs2rIJejiWPszw1bxQ1/KSoIPqAexnR9+CdCepWx\nJiMS\r\n=V4aN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.4497acef8.0","@material/theme":"8.0.0-canary.4497acef8.0","@material/animation":"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-indicator_8.0.0-canary.4497acef8.0_1594736391936_0.4182286751243094","host":"s3://npm-registry-packages"}},"8.0.0-canary.e6e23019d.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.e6e23019d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"1b778a30bcb741ecbecf37274c2174108effe5b8","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.e6e23019d.0.tgz","fileCount":38,"integrity":"sha512-RZ7tQBX/xjeKhucvlpzdaywtwh9EOACv4SGTRfISr6p1fGJfnel3Z8ZiUbmIykJNpx1NBpxgsI9ot/NWIxmG6A==","signatures":[{"sig":"MEUCICzpEmCZnGrrhw8kwzwi49UpyEvaK+oh1JFGqC0jRQxrAiEAwvaO5tcGxk0+RejBDaZp9jTiMBwFziQesxcxVay51fM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDhEpCRA9TVsSAnZWagAAvfoP/1E3NpncyZX9ekW+qsb2\nO9zTwTHLJ2uJcVu02vArZ4Nlt0qrQEm8/l9zy5xkErdDklHtvWB186Zx1IFZ\njrbw1bggwHquaaD8Gfj5WO+K3er6z1lp8XSgsyBAal8tI9nkqDCOS80X91l9\nfS9ZBMq4kaRR9dv5ZPmEnbwndPJGHd/J0dPTnzcLDHaeoJ6nhw/LTsAVPcov\nFx2lslrvJmK9GRqL9U0aP9yLSQarYptCCl5CFPdGykosxtyieGczyY5qa0ML\nzz8U71/pMLcZbyS+hPo3+wAKx1vPQ9+4GecmpjmgjpqWekWvUeBSmjkMytVx\naD+xXOcoi3SMZotb5T7YHNpgpT8iB/nLw3b0EHq5P6uDKOV7L8XVdnXMGy0h\nvyn+X8LmiJRkfSMDBJuwb+B98bKEB0fk9bVHlh0vJ6Mn5Pc8hBGTTnSBBQd1\nXVtD6SIBkOIRKQGFU4bnNDd9sdcuo12wWNJN/+6jAW96mrR12oX/S1x59Klf\n5KB/RWXmB0yZXMvJTtWpbqTKi0n3oki9FuqGbmjeXCnDNiBxnw4A083NlsoT\n4vWzx7lHHHnNoU1pyN4LIhHB59IfdyyEcabqL1xhzsxv0h5NruZQ/kT1Rh1h\nZl/qOsh6U6dye/q2870vsJVc2x5TnfTkwRdozgGAW4o16VbtbMS2eXYMN431\n1GtS\r\n=V+pc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.e6e23019d.0","@material/theme":"8.0.0-canary.e6e23019d.0","@material/animation":"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-indicator_8.0.0-canary.e6e23019d.0_1594757417179_0.8447863479969056","host":"s3://npm-registry-packages"}},"8.0.0-canary.d548d7a92.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.d548d7a92.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"3617964ca6f3fa5445a75752fc5b4ad9bfc88769","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.d548d7a92.0.tgz","fileCount":38,"integrity":"sha512-VqsjJ/ta01OQ2orRbjAGVzqGqPPiLUfy/QZdiqWH5RFYWQgPAzZ9wOyaDez5hrZqzEuh+c8zkMkM2ZB34Vmm+Q==","signatures":[{"sig":"MEUCIFACJl1c+RqG3xSq0O9toI/YQzLJKGidBa1B0O7nIl68AiEA/gsJ9S+FJ7mSyd0BX7nUJ9g2RfYS9kLbA0aq0JfFvDs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDh/VCRA9TVsSAnZWagAAU1kP+gKgbDuNBdT+3T+L7PuD\ncEE/Ba50vJPt9SLmRfF0cO1JxEg9bBSUODYebv11YUhbeIYVW1K+kjIvPHJs\npUGe3HJnxPFR7d/koy9Ek29rfrf31epu+Kmz5mLPQlSZxZ+NWwI58A2ftFco\nP+O2J1+OfTUavXRT4k9WkCLNblQ4IILBx/hm5j2ykfsXYvzs5aZTy1eSxSWq\nO/bA+bobcTSMttVH8/gpQhcDHoGVckQldc8JIYYL1c7QPG0Rs6eSDtb/LlQ+\nEueR6MFpsT2G5BCTwot6peF9ER2R+MX6ROYInBVJM3aFopJkgWgE+kyKYMon\nBPHJOrGSFv89gDOZGdljPmr2Sc5lD3YIm/xhgwwhEQ2DVdBmnbz6qXoRMypZ\nUV/+HBxGftSvxEj3VJI4iCN6GTygchcYTzGqHiEOuDiLTKC17C585jssHvrc\n7HK9u8S1SJT5Yd/FjqGLWEeYz6Lxtaz4nN3IrUVg7UbCiwVmTQwuw2gqM/mE\nvf9MImoG0jnH3aXcMDV5n483QXQe+rmirxqQl0FbHciut8yN5f7lwFfEFMpK\nj6NtWCE9X2pSjP/XSzqZ3aeLxYpAFrdjnYnF61nS4FiyKH/nU2l3bMV+2E9y\nTk7e/jeywYEjy3yNsB2gmQgeIA9qlTPncra6xMcY4boenjRAA6tVtYSx8Iox\nZ/Nj\r\n=/B97\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.d548d7a92.0","@material/theme":"8.0.0-canary.d548d7a92.0","@material/animation":"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-indicator_8.0.0-canary.d548d7a92.0_1594761173294_0.3882264264232058","host":"s3://npm-registry-packages"}},"8.0.0-canary.58ce529cc.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.58ce529cc.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"088735f48439b7c13851f562bf77a76b22f5a4f5","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.58ce529cc.0.tgz","fileCount":38,"integrity":"sha512-2JSDMfioUHdE3ac8jzjih8Z3QcM/3WFW7/GuPUjaeB280DYLkoo+vI6APuLbzgMvxPgiqh5wgp6UKcYKShZGaw==","signatures":[{"sig":"MEYCIQCDydtWWJA2d/euU0qtlYJIgKHzSfnUE55RRXSZnNAIEQIhAMU0G03fd8GDVVL2xf5VhhK5b/4+6CDPicJo9ATdAQGE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDiBLCRA9TVsSAnZWagAAz0oP/j3fcVTm7O9WrpyY2vDp\nBOQv9P7NGqPtJuRxc6UahtgmLNs6SO/q3LVyoIs1jApeIp5/zUcV7vGYu9nN\ntMDpT6UtoVQ8oNEyT0WgBI3AA3V5zvklotkXvtG2op+K1d3+mS7zmBWWelyq\nRg3VUGOphf/FRFfWkDbdPyUY0LF4jEItwqRAmdI0DKyNwZ2DoMtgvca5zEEj\n4AfAn66OU8mJMg5diNquhKtrRJAA7hyiQc4hl0D+TCOfLRadLMTBYlSMsUrB\n2KNH7dNoLmjP6RceBhVcX50ktHyYWLbLzB0+qmo3Z4NBxGwne2rCJMrUQR9Z\nw/zPx3WujZuMRHtR7iQSk3wjJNzqZMKWl9FNenslOPkgL+0aB05YwNfzz9yA\nnWtE6SStobOUtTADHPpFrmcEHC6Pm9W3+DYJFWrmJkh2vkUaBShhU2w1vBIb\nnom5HERvEB7kf4jXuLaQ904U1zIw8YQU4VsH6uuz5dm6EWncwA77jS6Y/l/E\n49iwOB58uEOxlKgC2OiQ/GRCGJ8rxz4YvR+m5yuf5dw+bWuxCntnUJp9CVDv\nPlzZDikjlGBzXmmsR1igDadH2uTv+B/YOXcPz41W1jni56HwcnUkFmhVv8f1\nkbAo27//w4KqqnRRxOI87kJSK3DjP6efF87Kr9rcQmr8bjyJJMruRSPsHzqO\nwT9P\r\n=ajpN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.58ce529cc.0","@material/theme":"8.0.0-canary.58ce529cc.0","@material/animation":"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-indicator_8.0.0-canary.58ce529cc.0_1594761291004_0.6650982065684892","host":"s3://npm-registry-packages"}},"8.0.0-canary.a0f1202dc.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.a0f1202dc.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"dba0ed3e66766aaeb6aa6d4bdc10b6eec4bdda8f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.a0f1202dc.0.tgz","fileCount":38,"integrity":"sha512-OCQaz63MiTSLTAyrBNF/Vfw0awiQ4QDUGqftrQ6MVFi9AXmmaeu5KtWFEEuWtH6XD5wIkJWO1kmrAAh+kkEEMA==","signatures":[{"sig":"MEUCIDOYYe8zOqNygrXh9+q/1yvGstUOVt1YpPI4JTQa/Zf5AiEAtOeCytBAMGW+phMDA4CYAVvqqfay9Tnn3SfP+T1RPNc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDiTPCRA9TVsSAnZWagAARWIP/iwIFQOjb0WNu7XtWlNN\neFHiRwj6YqvXn6Te91Ax4ta5NYPxh6es6h7ou6sCjsQmgefDVqYM2EkAO9VZ\n97E0Vo6F0sSergQavNmsYdGUWrB3BRrTgrwRwqPEuuM2xCTCeyC0kY2ouC8r\nPxWFhEl7DloqwFBCYPPjnpuctAJUMSFsu/gndDS4tM7wvXZtLnhysZEzkFve\nxUWbirXeE07uUwhtLmXa4t+k45tzjWLrAhH3LcbtPApalo0Kq9FJnD8Z8ewY\n7Bz+dS8fFDglkFRZrqLKfVdKopwBI90VnoeecJc7ByJXy2+k575oC3zQjUL1\nbIjLnM0XgG99w/RWoQ5APfJuxEWmNSqFVhY9/b0cFnn5D2V6kM3150ZTIvOu\nCt+btch+a2MIVdEEGfxtJLu4v/Xb2hlzWbyHkpk+DHwvIJizWMDpjcSDaBbu\n4tGVWLiM+vo5oPEk1ebT9BmJQ0q7YbEnLQ7RvLYcvyoNkWMNRMKqHeeaIb88\nEeEwa3JuXBWl4mDtg7gMYi+VqFHjobNWDFIDvBkudt7JfDU0qUz2RvyH3Zn2\npCMiAR3rfJr6WoRCClG4oMFNzZFDdTbeWMsVFUxKkaAciEirEXc1tNKP6RXv\nYBLBBZJRxqhLwwj6wOup/n+KqcslgpFnZMTz93Ny2MP4B4mvest+HJnap0YV\n44Kk\r\n=EmH5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.a0f1202dc.0","@material/theme":"8.0.0-canary.a0f1202dc.0","@material/animation":"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-indicator_8.0.0-canary.a0f1202dc.0_1594762447261_0.6387089166008075","host":"s3://npm-registry-packages"}},"8.0.0-canary.ad4df58c1.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.ad4df58c1.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"fb262d46ae674ef8f08bb9e825000c8ce759322d","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.ad4df58c1.0.tgz","fileCount":38,"integrity":"sha512-+BLm2wQZG4UmwQ2FJFVUEUt4OKy6xVSDsqJ7wMwCifERVXbXSX/GeEjT30Q371MdaTg/N/+BfSZU3VwwoFP+FQ==","signatures":[{"sig":"MEQCIG2/PNRdxesZQdBdakSs2/kGUczJQsxfLj+tgjSg8B24AiA/IvyTQFm6lH1GMzAmRNKwOZcGUcW6wjIwCddz+QaP/A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDkkmCRA9TVsSAnZWagAAPMMP/1SGlTKXN6kITcU02B0O\ntwjCzfZYuvv3Imh/HK1U2DgImNt8Z9Gsaq0HvnnvuslDv2f7EAIihg2vgz7s\nA/pN/gAIHc7JdqFZXPMg7XwLOSJqlujDNsNc24ew9G+3h7WVIJIzhc7xr7UK\nioCall4qO/moIlBJTSmSPcSbiUNaGnnhaW3rbbXpPYJo7cr4CENYBWnQ3el5\nMx3OaPUTRk1kLfS7ANB6Cr17GYmoJuKMYFVjksRqpwEtA37NJ1/Upgz97Nhd\nVZJ175UgcP1IsrWib4SkXUJiVoIbNanrXf4/0aiiU4mJ9RY/DrWfHGbfWsUm\noZt6gFVnZ9ZVFeWBL/F7Hw+Oga2L5m4Bj8WX1yybfI6qyuQqutIHe3weQqaf\np+/qD8A+3pbLoW82VV+CD94yUpLJ7CMnMoqGSHusMTJaeU9NqGk0PxfDv8Kh\nSzyS8kfmcH258RFQxQO5j6ZawqlmAKwS6hwnqNVwDObi9qj9//yz+VqJQqyF\nCUqMITUgaYeJYNamieuAydEFpvepPUIb565gtQmcIyJ7O64putmHgDQ7pVo/\n0t9pScRhdXoMBfpQwlqnVg89Y2RmoktJrrw3BPV2EoQPKAJ6bTcXs1Ydha8C\nuJCw7RvvevAjC8rdr10Uth8w5hTsr70Yoz557WOLMWAR7exayShPyqGK54Er\nhlQr\r\n=QmU/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.ad4df58c1.0","@material/theme":"8.0.0-canary.ad4df58c1.0","@material/animation":"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-indicator_8.0.0-canary.ad4df58c1.0_1594771749820_0.9771401518941809","host":"s3://npm-registry-packages"}},"8.0.0-canary.01db89053.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.01db89053.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e9e3927c886965f2e749e48c60d4ac170f34b69c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.01db89053.0.tgz","fileCount":38,"integrity":"sha512-NcVfebXO1UGRblgoj7wVUilwwECSqybK5JFxzLDwW7//IA0vA369jsY/+KaX3lbdooPKrYTpqZx+YRMR86rt4Q==","signatures":[{"sig":"MEQCIBCMM+CKz/eF/GF1dbBQSOMFHHqQY6rJoDWRBX8mkN8EAiATVNlBq7qe+He/7luqaFVWllLYaIbbu75Bar200AfBUw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEIKjCRA9TVsSAnZWagAATP4P/jDKyEbxcwBCKZG92Duu\n5bMWJsSD5qIbzlUSqYs4x89gYJJSPeo1Lf+qqeeoGSz6uZFJuVsSCzV2l0Rz\nZckw3FSOLG/IjRLFhUp5XsFPLzB6+0xnL4D/nyC4+G7yLI9fn2LuZ8+bqef6\n8RTpffTuofIC2NMzUhBzVXI3UK9Y7a8tCEwed3HQa+hq6JMesHKXpAjOBHIp\nBXgOhnxhfPZoN39R9zTPzdBvkq5gd+dH3l2FcElzzummvbJx5YziEsBug9nQ\n6VE0iRiEE1agPH9TQIPKiacaG39Vr5yFIEoFiB2YtNr2pD6B+ZTKXvWUAph3\nRiQc6sudDr4G5RBoLjsnjtwaUo0yQBpw3HnBWZwZAT0DXolzzn0xi5wKtQ+c\nUDl2TtW6qmKJhtmALN+54DPimKbHzKRFSlpaGrtH90VJV/rOk+qWVQZSxLwt\nY5ZMYun2UouQF2tURTI9vOJRgcf9eCz2UON1kv0fGPEsSbRIu3qfdVPa4mOq\nRi+7S63m8b08bYMiPosjb+MecdQw8PLT3BqVY7aGSd3j80DTZFTmJX1fqMnC\nDYqcohvWUot5tGfVU5Ac3Q3RA9Z2+BKABgDGQ9cmy19aY4p7prx/pxoA+XS9\ngSqfVlpIJgjPSDHem/tq9IW2u4IfzjgfPoAYuqtD4DCgT0etmXKaraQJ+PW/\n3bxC\r\n=s3GX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.01db89053.0","@material/theme":"8.0.0-canary.01db89053.0","@material/animation":"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-indicator_8.0.0-canary.01db89053.0_1594917538783_0.3580448683626227","host":"s3://npm-registry-packages"}},"8.0.0-canary.fb5a4cdeb.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.fb5a4cdeb.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"eeefdbb79ae8d5b0b002adf7afef323b5e37f4e5","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.fb5a4cdeb.0.tgz","fileCount":38,"integrity":"sha512-eg7sG0o7wmi7+BHFhN3H2SIdxckvAZkGgNHMMI38TA8aHyABv1Qb4mdIUUtfqoDq1/plr+ibuwfk1UCAu4QQeQ==","signatures":[{"sig":"MEYCIQCIV5KHLlyRd+B9mXGbJZxcQ1HtMuID24h+anRfodWiNwIhAI6MNdvrcHlynZ7stFaHeot+LicsJlOeSz+ysd1UHtdz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFe5VCRA9TVsSAnZWagAAtIcP/37uWL2zYggSG7vYcXsD\naVAjhV9IlwQSN77bURulhtXpLFUsQEPSxbp9p+NgfUsV4ELplXeXekQfxjtT\nsp34eiXroorryQYVFk1nd0WNbJZp26c0Nm31MbNcpk6zZVcj790TWTaFv4jA\nn7C+2CmMcrteMwXP/9wgaChMo7hlWK8V3s130Vb5aKD8Dkwr2ba/wIFuqSZT\nTlLG6UhFBDqI1x9bSg5Bk0d5zdrmWrIKdd9DJKTR8gFE/CSu6fv5uCRKIY74\nO7/8Zmo8WRJxQeJcvsL6vge2NPzFb6e8OP+XumN4XXz002eT0RYYMM2GwAtl\ngV2ofGd/mfuh2gCG6BE/KWUj0sVbNwDxlnyr56tjp5zSbxdvHPR0XqwpNTph\n/iF02p+GwA8aVoGFVBlixnRkeM1U+MpKwt7BGJk7b8pIEoPByxMZjV/qtglo\nmaTA8fIEj3l8lgmECBrjcsDt0IoX85vE9bKO0v/eDx7bV6yNltmkDKTIrW/a\njUi0/V9N2gUfxmkN3SXfZEWYTVNhSObbv0ajBhj/MwNPtLKGZiGAnXgCSLyc\n17fx6PdyUtGLl1N4kslASDMXUzuleYFCsPF6kXHbERr/snJHfos+SdEs8wMp\nD5rG3kaJyQvv31+Lj3FAPYLdJzZpBQ5gN7WttTjaJgAvVEkn28UpAU41yMK2\nQ1dU\r\n=BCnn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.fb5a4cdeb.0","@material/theme":"8.0.0-canary.fb5a4cdeb.0","@material/animation":"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-indicator_8.0.0-canary.fb5a4cdeb.0_1595272788785_0.9316557786363298","host":"s3://npm-registry-packages"}},"8.0.0-canary.8df0f517c.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.8df0f517c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"7371549a80e7b9fb38742712281bd3335f903183","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.8df0f517c.0.tgz","fileCount":38,"integrity":"sha512-0hJOAy4hz2w2j+M8K7+T00FcTSKHKyk0I8bAHD75Kn2gsSktrw5EokgdDDc7IT32eWoDFt3zRpiEvfKjLacWAg==","signatures":[{"sig":"MEUCIAub2oulxagrQEU+k9MamuSWUJxtrKv44eqIs10+0Ki5AiEAx8iHiuXucOXpuiYtu1bS8I7EtkMv0cnpnRPCEwSZDkM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFi7uCRA9TVsSAnZWagAAYdkP/3tEbb+iyhuyVhsJmAiA\nv5DKxbgI6SRl9GGY0P5dZZmQg38yOK3gG9Q3Ze01X3/7tutgoYxUdRVlEjwO\nYcHVOQWRjQZ3LC5Y0uPHIVQPfVJ/NtTl+g/vsfI7nWE/uHuMScfmr27nIc7a\nJ4dPtWO0/JinGbdIOosutiJQFecVArmiM7T7I1kwME8PlVRLgPHfn871UwjO\nG3/ltdaIAIun5FUv8Q1Bh/HfiO44Hz0MHGziP85OgA2tK8/87Xg4z4ybT51D\njjFblu3QwmV8Y0e3e0Q1/5RAI4O56DK2rjr6h8aT9vMEjOSrkf6TZJPUOZcJ\nZ0CgIYGVMPiPe5bSSqZ6L4DOL1B0J+vf2ZUP1SN3K1mkI/YaxsKbzT085Tr0\npQmQWSOpvfELJhn2CDduuYSRUQumCMdTlfp9GbZThVwOWMD5Z0vnSsPQ3Kkk\n/UQhX72tC3oQfxTKyt0KycN2IMWJXHi1ovsV3UlZKQXJDekyaFsGGHCpqSGo\neOtZhXPnOje1+Hz75AcI0Wd3FK1RohcV5Uwv0qYRjMqz58YUhVxfxgNqnzwY\nTy8tldY62kQCsK2zBxW7xtdqvJV95ztJgyKJ9k9y6GbszPDnwagS6jnnLTqd\n1vMmn6WZlCLm6CVk5ucxiy+31IdZwYwvkIX1rZPiFdO1b5f+vHEGGHXkowsU\nkb/X\r\n=DTZa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.8df0f517c.0","@material/theme":"8.0.0-canary.8df0f517c.0","@material/animation":"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-indicator_8.0.0-canary.8df0f517c.0_1595289326251_0.8284622765249685","host":"s3://npm-registry-packages"}},"8.0.0-canary.abcdbcfeb.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.abcdbcfeb.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"31b5da17b36bd91669e1382d6d2bc8d6cbdcf107","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.abcdbcfeb.0.tgz","fileCount":38,"integrity":"sha512-RUhiy8jTpbUTUvmNBwvvF0sGqW7LfLLMB4jn47LAUZIgtrRa+sWZYHcei8cOHJobLUfPEJsdQW1Omc7tOdisRw==","signatures":[{"sig":"MEUCIAymXtBI+S5ReqBt0QvcWdZpQhatVtQeGWXFuieTY7v6AiEA0MjXbT9JivapxzuMyCZxKkbQxk8mVTYKGzCGb9AmZQ0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFju4CRA9TVsSAnZWagAAszEP/iQdrhWnY6qQVOspJ/w1\nhDrMsDHj8itSOGt0kkI+dv0M/YC8R82t66qtdJXRVbmZMPWTDiophFJr0VG9\nIkS4dwmCqDoSOk24hSEUsYxMBjAHoFCfVjVBbMMXDe7lBF38xc4cD1Xh2m1f\nZIM86hzo8ut2zxvmGUSYexYe+mtTzEyBQ4kP9DN572BhQwqVuLdoP1baXLDX\nG5SG5QYbWoej2IMpHA/I1w/oW/ne68afgZpTU1EqwNiYJ7MkWTDWKFmavjAQ\nxBG+ZlEHG+V4Km5wivlQCNKqhUGtyqBmAht9UJbFQt374icKHBk6uYTjHJ5o\nkpfo9nw9mmFKtVIsWr3ae+4h3xX9Ad2z1uJrDQYyHSjnFQz6Bg/F0PH9Zrcx\nR+wgQQhh84eHwmJP7Pdz7e/XMBp3OdpPRGAPS8Dlib+03YrMGnYL2rztRP6n\ncIehRLQBUIHQ1T0l7PNa5+RtbadaekZSDRykHd0Q/heFhp5wf9yxx5FA/xXF\nf7WZcSQ+IkA98YKC1C92OHPsBKT90aab/1F4aZ2VGCwGStPqwXPqwhFYnXKH\nkRwSbm+/QHMfixFG3+zG6qC4tUbTyqO8t4+DSYBuzdcr/eF6nFsQhKZjWXgx\nhBzsKwsp9z895hkG0BKxna8gnG0IO9FyvrgSU1ByNB651gKic4lSuwQMyq2o\niUP9\r\n=YLyI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.abcdbcfeb.0","@material/theme":"8.0.0-canary.abcdbcfeb.0","@material/animation":"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-indicator_8.0.0-canary.abcdbcfeb.0_1595292599956_0.652812257692434","host":"s3://npm-registry-packages"}},"8.0.0-canary.7bd5075de.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.7bd5075de.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"5c0e4077b10b436037f117beac0560b34341bb1b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.7bd5075de.0.tgz","fileCount":38,"integrity":"sha512-9ULbv2cfILEcYsZv55QmOseLvcATn4CEN9CchP/AsLckyf6Y4Pdu2Lom/V0BIZcGzSYpFRfaZYl/ZqxwhSfNmQ==","signatures":[{"sig":"MEQCIDs9MM8fqRpR73bTjKCZG1VmlKwSxUtAFrYM1GsO//MAAiBBfZwoWKEIhuhmjVZKQ+QWz7M0ok/01YPk1RqUJyG79A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFzgjCRA9TVsSAnZWagAAXeAP/jb5YLmtEQBNLr1xQMo7\nS3LfVnw/7ny5ksMmBe8Msrv4gwwObUD8sahk0rDZmO/EfFnGsjUIvdy0f/cK\nUbNFOMVSooHQ4Zedlw31U1ZegfqETpTvObghlZv4toWsFtXBeSeBGOhqIKFZ\nesxNYWjWWt6udB0zu1OIEsgrLYAbaLj4ZKu2bZ+pLtC/zqBK2jQ0/eIqLAOv\nIHEt1D+CtbfT/jnyvDoaFDWDu1Xit1JVU5vL3u5qcnmpRNh7v8OSWUAbo4/L\n84O8TUW3kRTaIoEagS/qv1QDSz1BioW7goZhMoRy5JTzkM7rSMWrxBRNsnQ7\nUqfxcxdR3WKKzjhzdlChIJzMo7h59KUim4pCjRWI9oP/qnriiUxTRQTr4mya\nTdE4WbBhzdyNwDrQesEIWrY+JRfzJ0mrFOy0u/Ze4n7422B5Bi4pO93dM/hw\nrayF1Wg+2+HY6kCiwA/5ASilP6gXFdyHW5Car73Ekwv1c94HCU8hvVnBIj5g\nD4a2ecEmzIj9ZLbk6JGRSumwOqNYHbb6R1rV0yKhE74Jtaed7jUAX7KA05to\nTpKdXWVX53YvYzO96TVko+6feynhC5Y/vJ4vZh1QtUrtQb/LcHSI8zHEbHzQ\n65+PrLUJecHsLV8fCdRZf3UhAoRySdqY3Lx2Of4iFJUMOBkG+eOO7GWTLVFT\nqKfF\r\n=wau3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.7bd5075de.0","@material/theme":"8.0.0-canary.7bd5075de.0","@material/animation":"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-indicator_8.0.0-canary.7bd5075de.0_1595357219058_0.3046705498510758","host":"s3://npm-registry-packages"}},"8.0.0-canary.405a29a20.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.405a29a20.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"8aaf3d19b7696bc7c9e9d3d68e2de4a6c6f4a1d8","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.405a29a20.0.tgz","fileCount":38,"integrity":"sha512-i5oaIdVVbDfhYshzzHT7DmFAV+GN+gj2WKiZw0njW6OgwKZrFwDdXBp4/ALl83ZCBmIFTTVDkI35GcHkgngsUg==","signatures":[{"sig":"MEQCIFTdj8u564t7jL1s+b5LCtXheVmAwWFn8l1KZuYXviFvAiAGWOIR/tG27vxVpySDBZ8mExqGJ8u6UvCihNPaPfIK7w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLxGCRA9TVsSAnZWagAAyIgQAJBuBg37644yksDt+l6S\ny/W884v7bwx56seUnC2lCDzWbCLXkALKUBkP+0ro/JmTTHRIPAiUMMBoMhM/\nHB1JImvArDbkbtKdtCfKxXXUp3gzv+rbjefKb2o2WvtHLkbWCFKYZ4Hnu12K\nXrRX3DJaWwYNnekCH7NufGV4Ymt8mzLPyjTC7q0aZgvlrvSTORCftV+AAZ33\nN1deDtgJgmXdukb80f/PI3Tj+VqM98Qh/cv4YPl7DNFYxnrKZjKG6sj62QJy\nUKBcXAce5osfmvzaJkWIlJm9E90YXFqtauZV7OVRZneAEhSUdk+AFKceIhZo\ngYXLLchqMLI/W49HXaVVqqWBVp4ehBJqO+7/J2DjVS3feisOBshPlewmqxb1\ni5TDhB+It0tIo+arEJidMmzaPIW5jOOwEbxPH9FPMp9T13GbV1pLYjiaK11z\nt2FJOLNBw2vumK9EL3njTvU+6tt5knhlZCli4cPjQWzUiadCkr993GJhy1kq\ncpI1CqXUos+bzfn3LjBcDRUS82LnkiIv8n6qGqMFLTap0gO5FuhMRsGLzFfj\nsMU7eSdrrlf5LFYV5LqvkPnjLrWGlvEPvB9zQjcx3Ph3OhbrZoBW1JSb1+cK\nVa2DyXVwTwZ3kUMX1MXaEy2NHE7m7FpjR2ati1qHsZ5Kuv1qxerscsTiTglB\ne139\r\n=V/ME\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.405a29a20.0","@material/theme":"8.0.0-canary.405a29a20.0","@material/animation":"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-indicator_8.0.0-canary.405a29a20.0_1595456582407_0.622239436847043","host":"s3://npm-registry-packages"}},"8.0.0-canary.f3693ac4c.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.f3693ac4c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"f679d83d6a12a39ca1b526b820b82e69a67bc57f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.f3693ac4c.0.tgz","fileCount":38,"integrity":"sha512-Xv12Lf3mUrp1kW5x7j9Gp8d/lTZub9VX7p1mvdg0ziis2uKqzQsDWQukHWb/WgnlJgpOQYN5K3KVeJd1//xxTw==","signatures":[{"sig":"MEUCIQD6kf59JPKElLsdt8SMnW3dT1VxaP30VGxYHf/1Bwo0EAIgLkjcg8USL701DyZz8V4tYKsGMlCIYZ4rlytpSKoEcnY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172034,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGL6/CRA9TVsSAnZWagAAx4UP/R3IVw/YEPiykdR584vp\nnNDcwaK3vxJ5JTHYtxT3qvVjYMc6KJRqUHAb10mI88LHDAvjlPmBXnAXbenu\namEp9IdbXGTP8RGeVFr3UU7AYOcMChE2Kkx/+6svr8+pCroUHTEquNhXCkxs\nG/zsCswayLYCboZWjL86wBIFP2S37/R3KrS8VCMZjqg/sSPPFRt/AhyjXE/O\n4d7hkieEgi5yTQUyoGQwBD3zkRqsg1261xXe1Rokt3qbjVpCH/ZPA0cuUoIe\nkEbO2BvgjLUGpt3pp2HxTpSOlNKhovI335GuWviMxmJAMD1y1ls/gfL+QEHv\nBs0KH3xGzTDyFRFoEgMVw21bh8qkAki2mfFw+3OJfRUfbIege3eTqZ7CpCv3\nGwIfFobnopAx7CEQPdYZGv7PFcskaSM5Y4VmIt1ASfJq+TQghPeUO3P4OQ6S\nKuxIbSLH8q/ehVVXFKXfbbGVMeR6yLygWQMJsHwls2HOO5cDD1+FjcYXoQTQ\n8DsxXrh5dGngYuffhux2U69nBB05dVoBg/rpVIaKSgfhbXDrq8W1gojtuXml\n0LJ7J1V6qtS9T8G/KWKP4oDWTAtDTsVKzvxUe+667D1tyN7/XRGetvvsJaLS\nkYXvDU9zQo5FIM8sTcXR5RIz6Tf7EWG7x0ZKBWY2etG2NY6WX5vTrKdpcGrs\nQvBw\r\n=Cy93\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.f3693ac4c.0","@material/theme":"8.0.0-canary.f3693ac4c.0","@material/animation":"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-indicator_8.0.0-canary.f3693ac4c.0_1595457214916_0.3616336500177799","host":"s3://npm-registry-packages"}},"8.0.0-canary.12a109680.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.12a109680.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"efb3f9d0e3945393820e6e69e4ff2ab0d9443887","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.12a109680.0.tgz","fileCount":38,"integrity":"sha512-Nc1YsZBM+lcJrr8bRLYgT825FswaS6dVRR151gSFOPp7jqiuF5dQ3+hH9+8n2BTcnG7rCvnZRtB/arcfE5CUDg==","signatures":[{"sig":"MEUCICSfAktIGVjquglUkjPMPaTEM5Qe89JioRw8WB9mesIxAiEA84k713/Cs8nmbAePtsxMajB5zoB0Vnk7uO5iTTa6FgE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172034,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGMW4CRA9TVsSAnZWagAAwZkP/jevnLH1wXqxRw8A0uDf\nfRKvsqKMotWNRFTk5ARlL2/1E/kyiOmg3FnRwSNZ23o3+FQ7fOkteqCK7egi\nuVjMGE+rHfjiRMfgwSrBdlJyhrPR+1CCZgfzQWuJ+K/YJgr23cmlMNpiVXGP\nZye/rgiFE5giPpjSNqIjDm/bendKBKbjmK1kyJEZK7hF1JiNPoPFkkQeXY4d\nf5qCyPW3bg/KoSLIV9EMbfbsniZJMoTG23+MQ/9K45mT1KNFdzmTkh3vKwDd\nri5X/EzHfDAQaPytle93r42ZMufxoSGio1c0HDQWIe61hV9EStGyLyCr9TXP\nfkQdgWk8S8jsxTZDRR3t7WdBOUe1xeXJd3ugQQGbhhb1giEV4/nasSu4sRGr\nUK97CmvzwN3sU8STG8MYjGgiBECsuX0aun9ZL3IfTTzVXzcb/U+t+Fg6oYYg\nbHO6RGmsei9wuKsVeIdBKWqG0eDy/UI8cOxw82h8ptkBbchkUc0u9164rnqP\nr+l8HSc25Gp/Lk8yPXTe7i9OTX49MjrbzGE2lIgskwWgcVcYt0fnRFSAnlZw\npAI5DXXv2mIv1IYR1O2S6r7g4w44DIIbrkB+m7SE0bZ4vi4fYTp7fK4apgbq\n0z5KW7ctvtAldGvPyT/uErJR8klif6o3KXJ/T4VjiBbNKGTv8MKzGGclh8pG\nuC1I\r\n=ihjE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.12a109680.0","@material/theme":"8.0.0-canary.12a109680.0","@material/animation":"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-indicator_8.0.0-canary.12a109680.0_1595458999861_0.42499277115341916","host":"s3://npm-registry-packages"}},"8.0.0-canary.bbd06696e.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.bbd06696e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ea280f4998744c04570a07acfb7b5c40fe737257","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.bbd06696e.0.tgz","fileCount":38,"integrity":"sha512-AWHAwHr462O0U09hKIMm8OBdYOxDBK3ppYiwgR+0j7kTFSTGTm2+UB3wcfoSYU2loPURBaV+bEohQlo09eRWLQ==","signatures":[{"sig":"MEQCIFSG7Coivg3X8Kb+sOwweYiC99C9n6pX3uTKjNvwaBTQAiBM2GHrtifHtSl+545EDO25EOX6mJu/X9v5IXT+wPCPcw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172356,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGNFMCRA9TVsSAnZWagAA5AwP/3yYEhGyCpO2cSAZ+rKe\nxbIEYnCJDen6xWheKIdPZmko8drOhnTsH1/AI+9GaN+GuuhaVf/8UXD6PxhW\noswNo6aKmgQaWVXGwNBi6A6/VoWTuUAJxFODIEEtP1izVzGLdzdJBCi7bMC/\nGYJIhC+jNziBwkeoQ/ZplldsdL26oXYw8Cz52hSbuL5Ax6vlI4NRUNxMpLBn\nr6I0KmnHWhHVJNCXz2Jj0hbXEvNK1CtpN0uJIFFJvrvgF7+ZeSPF/t1UYPXC\nLcdOTT//r3zhhtWQCZcthEho3+R12agc1WYSMegCzRZt6MX58r9GW8mapEbG\nkme+FCUUJNYQjMlO2yd+43i6SdFQhRWf0J1qXoBXhtykHj2ERNkT2Ny0rYFj\n+4palTooZSg+LrLybt/+tyzVFB7kmwtS2NCtSHppy1KcJmjK5KBsSFbmOo5Q\nC4kt2yuo8fmfhtZLEKiwg4CXdrFSXOkpselwSlJDOy2rIWa23MsFV5umJwuH\nZEEimAoDMSvi1lzSoEVKLyqPtcuI2rpoNUaxvpPdDYZuZA3Gk9xErut8cETt\nGfMTWRsJkvlVFpNjVOhTEc7RSu1Yv6Hr1momjn5RZl0ktpfHb8n401kUAUxU\n7ZebGPbBzkzi2utcDXcBBQ1mKo3z1KbCzEBbYeG1JXDUPFvIS5rw6O7NC0Ry\nYVy4\r\n=ihOX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.bbd06696e.0","@material/theme":"8.0.0-canary.bbd06696e.0","@material/animation":"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-indicator_8.0.0-canary.bbd06696e.0_1595461963553_0.8354491081506481","host":"s3://npm-registry-packages"}},"8.0.0-canary.4951e7651.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.4951e7651.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"dd1c5f21c3e6e6f708dd530e04f9f99ddd09c13c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.4951e7651.0.tgz","fileCount":38,"integrity":"sha512-ApIMc9jZ30xw389nqrw6k5dTAtwfvQ5RElxLNi8z18n/u62pboo3sLj1ug6BdY3goOAGwrxYtOaFKI1r/dQekw==","signatures":[{"sig":"MEQCIHyWZ+A3dyIzgEf4eyH8V4x2TzfcDLvq3IJrW1BM/MLMAiAlWaZQAeXZFQ+SGmX5bu5gVRU5c8KeysOrUY/qI09tMw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172356,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGOynCRA9TVsSAnZWagAApQYP/058RU3R9JPhsz77D5+A\n5WGlV0/n4OlAEIGIFJue7kVDV1ZaygZ8D9w1mgxb06hN2NEilLRFBkCl5Ruh\n1/cxrlXCY5My2WDO3Qr76Wc40O5MHpGE6MPWl+M20nYzdUsuCnTlkUFZ0CmI\n7fYtVtwGSaWZ6dauweHOdB3pyzGREOGuXNl/z26Pr69YS2MEjkLrZd48k6C/\nAffa5NbgyAmCLw5rpvXCt/RbjTydMBi/3qhC65JCPozNeozwYNB4Odw/wSrI\n4ypccRpCwMg7FHDxAfkpYhK2cAKPRs5IUr+NiAattTIOPpssHd2mYTrUWakO\nA4HkGdGFaM00qMi9JlULnlHrAPU8E7q4jjwE0g8n0rzG7LTSgfle2kvkTGDi\nDlK51GtTswyX+JVrZVPXNCSuIKBR8CQIJoP9ucXBpnoPhw5awsYJIqUrHeGN\nWZayj+HEfALvaAJrBDp5sIWzc+1uZI/9ql+UEDo7c3i6lx9NpwDByawlEzgt\n/yGFk/1PAVX0ousPI0aQJHjG7sUHbYh77Uccqw7T2wyBn0UEgyJSFm9za8Ao\n2mKwr3rQurf5tym0A+IJjLwvplDSR4SDFgz4j3mg6Pj/nGgKClvCeSp26aKl\n7uGcV/rMjeYeAOGGeNPYxwZalUCFe7QZDG4hsi7RYoAGHr5Ac9bYqD04l4Dj\nw0UX\r\n=Y+Qx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.4951e7651.0","@material/theme":"8.0.0-canary.4951e7651.0","@material/animation":"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-indicator_8.0.0-canary.4951e7651.0_1595468966712_0.9426494884932515","host":"s3://npm-registry-packages"}},"8.0.0-canary.75deebbef.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.75deebbef.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"b8a438536f27d1dceb48068adb4912e8b9aaf401","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.75deebbef.0.tgz","fileCount":38,"integrity":"sha512-cLOG9FJRbGQIQBIv0Mxf2ydNB6sgKEv6jp/I+lsPlETi7W/lwXUOicheUvaRY2AdsW7ZvPhUVQvZfMwHMnP48A==","signatures":[{"sig":"MEYCIQCF1WB7WVCFcfaYP1ubqtLKGr5Ro6i1ib37yHWNtMtgLgIhAKfp2wZjyYyy2HZ6yQQm39vDUft/Oluf1I8E2e3WFaWX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172356,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGczHCRA9TVsSAnZWagAAWa0QAJ/OHgmc7PnCv3FqbVGa\n1UXUNiPLgXfITaE8OEV6dVQu6syNrm2UIyj54n6T8+qHIf4EnV+4rW+JDDHd\nrtNlfWQpt2JmVNSJX0In85jXMsSEWO6Yqn5R2R/WYpUhqyPNRFhzAkHi29vC\noJxaKUvjB4XprTMbe05u0KZTYC8QsxE9XxeIhnbRPupKrOBfn9gHnLFSZH2S\nHQ+L5tfz/54qbVU9ySTHMC80TwnC60rVvBdGmwVpAJPlUL6KBj6s0WZEIW/h\nnxNnWRuM1jTdNVw4q211tsL+szBB+Wdqb63rDmUs/iljp5mCOeL+VwZii3jn\nrDW5I7mfTi7aXfx3z1kF+gv1n2PeZ6iO9ss7g7xd//gVlJ2qP5/qh+AtVA9f\nhWXMw4yFMAF3eT0zH6qGqnHZN88IBpmIoLTUAfbbTbEtK6GvVSpMaLxxnHlY\nazffpLxw9wxypV8FBKCBeWzDo2M4KWgO+heW7PxIttXMjcCPBp/01bN0F+qb\nCgk2DSWWHmmMoaVj1ybW7QH8ml4MxKez1cCwqBDifAL5BxcrngRndWj0+0ts\nZ/fJQsF7NP0h/iEUl8vMVg7QRjJshqXhb3KxZOVTBGeKCwARJfwrrE9DGcoH\nXRN6U93GMC97umspVihiRJ1AIRcSIDvNRydXkzmqPQX6QUBo/GwG8qo8FjIK\nDKHj\r\n=znaw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.75deebbef.0","@material/theme":"8.0.0-canary.75deebbef.0","@material/animation":"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-indicator_8.0.0-canary.75deebbef.0_1595526343026_0.5432779434416952","host":"s3://npm-registry-packages"}},"8.0.0-canary.95aff33ee.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.95aff33ee.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"09ac1a053b7b75d33f1c8a8fbf286dcab482071d","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.95aff33ee.0.tgz","fileCount":38,"integrity":"sha512-JXqKVpMuniNbxaIaTz5+4hFNjIYDTRFjorR0acHA19/v7EOxGybpWHrSNZNMNyTwu/3hSapVbKX/CxTMGvZ87g==","signatures":[{"sig":"MEUCIGBuLqGaA8TKExOoshNY96W/vHkhidDF9WnWVfh+lCA8AiEAy0DV6t+UllVXH30zA4JD78gCfvOMlaGaQlioPTzp8HI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171814,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGdsxCRA9TVsSAnZWagAAyyIQAJc5nv1kA6lPEt9gkjsB\nB+ICXePfmkANfBiFmwV2hBNbFc+YfOPWV69cYu0EOg1ChP5rOhHtajp3CB1E\nQg9XdPmQtj+vA7RyMdumxCieHck+DVk7Y2CZt98yaBIEIkd+BIvQccOILKl/\nBrBNgGCWV6TlLvJgZdsIVrzKGvmmcw6TELi39720tns4iaOMF0pDoKo6I3lE\nrClWdBJB09ewJqrZjmcvQxwXIck3EQv7QviPBr2vROectoOVL63aWY8E296Z\nJi/7uWXDfT01hxTnz00E8FlBFTSyTMjByfIc7eTPT6gvNVg1EG5WtxDOku6O\nZ6MqoCCzYaiELbAHrqH2H2CI+U0qF3EOMeckBODl1OxKxMVelt0+M0vMJ8SR\nuROC4dLuoVa/GDJyXHSxXCCXEJZJao8ShhOknGJ+0mYrROnog+gzYfa2YBpY\nwPCs8DRSMFR4ZhYFIlLtxBoRG5L5XEQfmtu+9h+RvzG4o1A0zBOWvOSoUMeL\ncs0yXZ7NYGedXt8V0/oALnQ6iay3nKwcoflLV72Y92cXzP+TRYFW73jDi/vn\n5TVe51R9dpPhNPCynIJ7ekvnPL/WWa7e/xAqgXwXlzNeU8+i6ZIXGYCKnAL0\nsJdAXxEskwUphGfGgRIr3YGya2pSa4AHhGwv23fxSLAd3ZK9I2d8YKN2L8Eo\nEE3k\r\n=ZIt1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.95aff33ee.0","@material/theme":"8.0.0-canary.95aff33ee.0","@material/animation":"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-indicator_8.0.0-canary.95aff33ee.0_1595530033263_0.4294029489713116","host":"s3://npm-registry-packages"}},"8.0.0-canary.9d9f47473.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.9d9f47473.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c080e294994c5cc52e0458769a51dbada041429e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.9d9f47473.0.tgz","fileCount":38,"integrity":"sha512-/RcyHh8+hyYe3GkdVi7qHJu5tuvwH9WBa6fTuEMngp9VB0vGlrwv1OXprnct1KBgfuLgMBdFLbGK7xrMpBBwdg==","signatures":[{"sig":"MEYCIQDOUGPub3C/5d8kEgN0L0XvlHvz4C9qNJsfx54trNuaKgIhAO1hHgFuvQuaHkDsu4G0eO1BOb4eGtP4SscLbdWcf4c2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171772,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGevlCRA9TVsSAnZWagAA8pwP/AjZSOwv2M5R7z8y3EkG\nya4l4pu3nMq86BWJ7uGy1dCelOu1RgXcZs1350KPpC/M6ngtyCXyC0+sla8Z\n1Aw+9HxS2LzlCT5Ox1T/9+xsewQfw6fLytSHSwNagvmnPF2nRGn5YxbRVH96\njHKdgkYIqgff2w9oTrarbDEOM9fQHAX/KnzhrUBnJw/4Z/tR+Y3xqSi7A3jy\nW4+kJwR7M+o7jfvh1iI4YpCZxoxG4/TZfIfXWwb0S53bkOw7aCBWD6L5k7IT\nlqccIjEbwaSE6RqZFqVHezQXH92ABOXDUp2QJKj1t4FWbkUQrJNpJH/nSmwP\nbOlf4Z42dPdxDuqssK/itUxsYUxXP8250RHshIQ3Bt/ORKvGpbaJY2IAFA14\nVkxluoX9BRyi1n5TIQmx9eIeogFXWaHHY+ljF2EYOicgPYEB9MdVv7gOu3ks\nlokUuu491JA2WmOcvhmAN/eOdqyd0srVCoiXG+6sbkzItRU+f4Fl16R/xrA5\nZ2PuTGW1EQMPmAAiRpKBnUV8xiqnacIeHD9dIVrLjYSwobeIWiY/Xlt+3Kxv\nLVzRf95Epv2aHEF5n2pZfj29/R/sWN7giIVLvvZmBMgel+awB8Ha7XNxLLxt\nhVvPR68Ib3F5vbaRXXxIg3cNr3vxH2m6aKKlD/yBuZ1SzurEXq/AmjHtdJnE\n13zx\r\n=tUAF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.9d9f47473.0","@material/theme":"8.0.0-canary.9d9f47473.0","@material/animation":"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-indicator_8.0.0-canary.9d9f47473.0_1595534309432_0.9673221985920162","host":"s3://npm-registry-packages"}},"8.0.0-canary.00dfbf6be.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.00dfbf6be.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"f9f67b8b42daad7efe19871e060be611445f06f3","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.00dfbf6be.0.tgz","fileCount":38,"integrity":"sha512-1jQPb5ntgmTrIMY78+FwYriscItI6kKYdrPPjeBiztYauV2NCi5g0wknzDjd7HNZiDNgMI0xjdjqQcI7uinwcw==","signatures":[{"sig":"MEQCIDBJKHW10hpybC6KEetZFUiBXehXfRA7dmdO3bPP8O+CAiBupzvBIsydO9jkGlwMHzEr+9NeQE8cGQZx26ggW3UJMA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171772,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGfoqCRA9TVsSAnZWagAAInwP/2V8rgPH52FVFcfAB9gd\npqcm6zHmGUd+hl5s+wDD1XM0NSmoxS8JZDXf/f3VFG3USE3vRRFptf8uiEF5\n4z9dHrjiiF4a/3SvdJaTAUAKY7XdymqC5CiPfYTl2K8EuMZKc6+vinU4y5R3\ndyiuCFgF4HcNBv1eon++Q5Ia5s0J3TR3oSs2wgOwcVTm+w2zwPJYX81zYlIR\n4fR6YV2grl+do6t/mLUPo8wY9MbnRPk+8WGSERksq7if8UpYkQIwZQIDBPMZ\np6R+ASHSwbzUN+WET92vnnRQbsUWxTz9UFjgXyMN0UDjppyOnILFotSbQ0rm\n4zULveJfIKtGes3hAJzprvA2a8YfKXcoBz8YAomf/YSwK5+awg5qA7CCs5KL\nXvwMZHE2W05VTp3O1QRV8cW34q3XBKtt367jEmS4Nco9c74CcRChH+3s7Y9W\ndagFXW/F1pRBmBg0sO1hL30O0+fxGze3HCLKu6+rtZEj/YvAPPe14Wi6MxXI\nvNYaT7fOxKjE1BPVByqWWm19ZIxOiVkBAxH1cWnEunBeK3EAv04L2OTGSNSd\nDSa3YYhzRDOAO5A2a6lOA03SP1sIY4V24qtkPK9bg6z83z+bTEF5DlyJEoVr\nLowwl69CzJ9VDDKjypjrpLQA56UY8E87cqhYx5NJRsd9hXz5tp1l7sGs6AVY\nMuL1\r\n=U6Cb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.00dfbf6be.0","@material/theme":"8.0.0-canary.00dfbf6be.0","@material/animation":"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-indicator_8.0.0-canary.00dfbf6be.0_1595537962213_0.104527894823911","host":"s3://npm-registry-packages"}},"8.0.0-canary.b87e522d2.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.b87e522d2.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"10479d359b06940f5983a5b433ca199d11a8f6c5","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.b87e522d2.0.tgz","fileCount":38,"integrity":"sha512-ev3gohhByERDemlZWdWIZdK012gk87Pt5BhtZppHZhH2og0WW56Z6LpbjRUnrQgjWHl6q718eu2eGilEXm47UA==","signatures":[{"sig":"MEUCIDW+a/Bk+8Js1mRJT/HKtp7My1SsQw6+05ucKs4cqb6BAiEA1XC+HBfvv5YU8vPUp1cvW0EnAvDtpRD+F7l8ae1y56M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171772,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGf/TCRA9TVsSAnZWagAA490P/j/TyqSw27XvwASaOGzz\nXdajmhL+yt9DfRJ4TmGYWQZLqGXQEoJ0qpmL/fyf35GCRNs9aBPubEMNuEg0\nh5fhEn8iTDOh8lzeNREC/aXgnf3XT3fYamkmrfHC+kJKQG0XMXAvLf+saxza\nZ6+Evb6pCmXkJW2WJ3TqnyA2/hkJovGHtbfGkiRfHxWAfrzObBh9V2aAwdmT\nXtDerv4FP94RaYP22klPVD2J/bgX6TX5VTAmNgyXCTLbtzj+/esJr/WZmCNz\nXUYvNcEu6jaiy+YlQomIpKLJvSby04faFvK0fbURytCPvR4CAsVT4meDPSZX\no6xZlFl0ztQ6TFya9s90XrMP0Y5oOxVCfntswG9yicLHq+uLyDPXRCqxkMAa\nHycrjTaavCLjBuCTiz8QN9p+YQvEeE5knd9URCdpo3d5aTB2lQdXQjnj3LdO\n3h5uukFQWLEv8j7Ywp5nZDXfVfVlLxyQHFO7j7hcQivDQzMFu3zS6O/bARHN\nAl/6t/QU22k+hMC1buCj3HksiCnMJ/rLmh6vzzu+jpfHvwn9/7yHR3mREynQ\nROt2kSjdobCwVfeSzE3+jpYuTZmbqsOvI7/Ix2JJJjXXwc1UNtgBMDpdNRbA\nyqrekGxroVe3vkE3CULkp0mU5zFFdx2QX+J5IdyatyG0otm/TwHPYUQRv7Z+\n6nC6\r\n=Vaxh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.b87e522d2.0","@material/theme":"8.0.0-canary.b87e522d2.0","@material/animation":"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-indicator_8.0.0-canary.b87e522d2.0_1595539411323_0.30686778889715094","host":"s3://npm-registry-packages"}},"8.0.0-canary.5b3e150e5.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.5b3e150e5.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"a660812554c5bf06018fe3028f7bf133d5d2727c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.5b3e150e5.0.tgz","fileCount":38,"integrity":"sha512-WTbMjocODO65dPAqOTBIycXDpwuz8VYB1aveDGVoWP2Ls9UkgturDDqpbWIAF9zEc8lTvE3YFtIbSOSTHTXhcw==","signatures":[{"sig":"MEQCIGIDL3oTWqzwEWb3FCGoR0WsjGq/0Xsq8QhwhmhP8IwTAiASo9mt4S/Few9aNilDmdkplg1ppH4UdenFLZZbTgvTjg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGjgjCRA9TVsSAnZWagAAQ+oP/jbVPF0qClijsNir0n0V\nnG0t4i0mwdz8oF0t9iBeaNm/+Q253GHjj6RTpeG+bFBzZQWhHK6kveRxI4VI\nDpOfX8HQIb4f9g7Yei6SaRZZTjh4HPJrppIVmbHQQjN1oQ7bDLvetlRdo8eR\nQwMrhBkXgLRLRvYhDwAu61kY91J+6ksEqG7TLQmI0uaj6O4vNWkJRqzuLQhC\nuh3e38GQjunz3lXY5UankMG2a74MJBzln4986tPAvTzJuhLEuMnoca16Ym3t\ni7F83w/U2ok2qXdrZvfdKDSO8xggnDTkrG68XJRiwh6RhzlM0wXavXtaiXpn\nFX6s5Ybx1EIUpOPNs9SuiVpYUdNET605npwMQqW/w61bYa/WSHxkaTKmhP7U\nhbNQpDYYlD2IjIBG2nCCyZhAkg2HJK3YtRRtpl9GlhxGEp0K1qbRcKPi8ZPL\nXNJ2+Jb8iksMVsoblALshN3+Mvc0trQ4Ge15Kkzxia6d4dSIE7gJgzAg37jY\nWOP8sGx6fmlyn6X0txw+7SaPXAMwg4l76U/l8crjOy3IA9kjVCUrVdXwacnW\nWX5OzGrOPtZLqkbauotzjY+hZQSHNsiNaAXepiEcAHHX8PegDJFRs/QOTkfH\nHIwBXjP4A9LDVAkzOmOdR6C6KQPSAfF7BQyvJIxy7twwCeXhk77ZQxMQ8YZ5\nVZpG\r\n=xgZF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.5b3e150e5.0","@material/theme":"8.0.0-canary.5b3e150e5.0","@material/animation":"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-indicator_8.0.0-canary.5b3e150e5.0_1595553827296_0.8039893172429438","host":"s3://npm-registry-packages"}},"8.0.0-canary.f0ae11786.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.f0ae11786.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"2b9ebe0d9e9ca51a870cadee78bd89f8a52c4787","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.f0ae11786.0.tgz","fileCount":38,"integrity":"sha512-m5g/f8yuvqTsVvL9xmC1aLfhEMvANad7/Pbpzubgf+c/oTFy8SPEHGrVCxGH7SFlxsJ9vpeP/3EoBIXYZhrnig==","signatures":[{"sig":"MEYCIQCo2HL/2dWRaIIId3Y4klGx4T+QwvvogAyBw5Wu9CF+6AIhAO2bfenWJdWl6TNZ6XQaFP/oB+4MhR7zVijyXqVXKkov","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGjzACRA9TVsSAnZWagAAVt4QAIYYUd9mt9Z2IMj/n2R4\nWMRzRt7SbT4I+4YLsBHGRT9YdrEliKSwYMCiXPfeiOVgxzjQvKppF4oa7fNw\n8u3j5anr2TQU291r6NPvqzkBJu6XxBpsoZW6P3g2iYxtfF2IfNeSEg1d6/F5\n9u0nHWuFwW7HgIVjr8xwH92YcIuEdTb4E6bs1QANG2JtKvW9CO68F8Oyqv7F\n4YdBORVBjBt5l3OsMGYoLOTLtKBPWZajGsWkkpYRmEGzw98P0zJ/D/TIDulU\nfjknDh1dt8UOowbKQi5INNxHm3CeEObc5tukSTADos4jlhF+a1erBUqMZQt9\ndebNpps2bJOtaSpMR38vYLTmku64MLtx73TlKJiIhO/Zhfj79pGI17I4rLR/\ni1ryyqs5RL1UZ5tCrRIlYtyV9j4pIh0oPKm9dAx85rcKvQu5o0kJltg4Sc0V\niSDpgzB43vlRGttEaDI7w4LCKtZJJvU3Gg5OKQ88aZMgAhc9dY7WFzdUCJid\nkRFQ/ytVDYAAlHpNfXX+dsbAqWQbC9fHZgGxeHtM8JKlzNwCNidHUND7g5Xi\nVrgTO6QMY45VKBywMkBSsXGntpUfe0BaCVvCe5pjULdyTvXayzSTE9jMEDIH\naeKj7jXinNq9rrk53GUlfDkDaMvPRODzFDjMeb0H5gtjoPdxOETmIEyW7R/Q\nQhdj\r\n=Oi1g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.f0ae11786.0","@material/theme":"8.0.0-canary.f0ae11786.0","@material/animation":"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-indicator_8.0.0-canary.f0ae11786.0_1595555007772_0.9689298026196878","host":"s3://npm-registry-packages"}},"8.0.0-canary.fb4ee66c0.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.fb4ee66c0.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"a25b925d92cee8bbded24c0c66ec2aae82192c4f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.fb4ee66c0.0.tgz","fileCount":38,"integrity":"sha512-focWPNDKm7kVWe1VVA2U5gTbfGBPgC1xwAV5vEjyDbKd3aNd1CiV+ouhDHZ0s5pSEg+HQr6AQyjjyAZEDIUhzQ==","signatures":[{"sig":"MEUCIGaWPyfCeoHU/5gEbmDf9dx3A+3Ly9QXT2hArayBqCSiAiEAoXu/tSTrJ3z+nOchlM7oS5Q9/L/s8UHuy6zJdE1TSKU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGkMeCRA9TVsSAnZWagAApvwP/0fYoWMzWrY8YUhhFoRr\n8PmJUwBEHv3Gn1Z64T0QaM9/oTaZ0vbx6e7BCCSwD2KJFsvhvDjeFei8+zp4\ncRAXrJhAUmzEoZOJzxJNK7Gqgt+HPLxjIlDFN2iGwBRJ7q/MyirSIN4uX0YF\noDyrpbMnHK44fzuSE9SqXLEqN9PrSVDbyexthDBi5GRdj2FrLw60GggjKQid\n+Tr2lxDQLgTnM9myW7fDfHwz1q+/rIqWO2KKdn7bC3TaCLzmZ5M1ctMLBlDs\nMgVlb28boXwM9bF65VXULXwAseEMtlCNIq5OP5rJX53j3lyHjU9tj16gQQwQ\n+inqZ5mqhi8D51XKlsJaFmbbR6NE5FGzSdSKjO4DdeqaSgt+XMN3A4C9n2pr\nGs9Xd4MmdmEhG2DpHBJbWZr7a9Jfy6Yx3TVzR8W1YUidbNTS+Sku4YNvk5mx\nHSdlYay366yRrc27lv4qH+i/kFu+5KVtIoAYeRrbAVsjOmHfeyjlQk8EzH7H\n27rCxUk/J9QW1p+nBhjt9CF+73HSMLGK5JJDZpZJQf2mMhb/a9D73A/+lrzd\nceEVBBV+N17bPYH+f+SxcZhvQl3uPtO07SL5XsROxFruGcetOX/Tvfx3Q7pf\n1GFf1BLUtoKEps7vbee5od2CvYBj8h3GRF5m4BDLez8Echz1E3WPk9yL24FS\nM3ls\r\n=82a4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.fb4ee66c0.0","@material/theme":"8.0.0-canary.fb4ee66c0.0","@material/animation":"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-indicator_8.0.0-canary.fb4ee66c0.0_1595556637536_0.27404889792747","host":"s3://npm-registry-packages"}},"8.0.0-canary.5511e0aeb.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.5511e0aeb.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"5abe404e88374f9ca87ea551a6b1b7134ea2580b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.5511e0aeb.0.tgz","fileCount":38,"integrity":"sha512-XkFT7SCz4gAy57W8l5WPMQp2X9iQPWtkDO7WpGdw3uvVW+AL5ShwU7HhMFBVbRplUN7hPxOnK3X4o56WGUtcsQ==","signatures":[{"sig":"MEUCIHfHeDXakQhJ8c0Wac39KBTu+wx83Edvlq8tkW0qNfIHAiEArFBcJ56rCVl10SLuTPvUWaSLUtE0wtHMUjYXKmfskqE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGxLKCRA9TVsSAnZWagAAv9sP/3uVig8zWdSl8c3uy3Zw\nSX3R7zOU2M6hK3pWI0CK2nKpJzsQRNtTzPqRPuhaCLkMMDCJ+CoOxrAJ9MCw\nuHUb/ZCrsQOpbh0m6MKQkPJ6uxkNIhhb4qvI1vGm7vLUEQ70j3squ2KlwRFb\n/ZsMgYiiuguVi66kslbQq1hMZn8P7eY4CGGW162PkfND50be28iRzaIKwesd\nO3GU6fPIwbVKAD2IRCTr8lHYKgx4Iz7q8q5/rBfdgVwzscFqpV3fprGdML3D\nF2ilAwJ1Xf5es45p01D72VTbGAopWtScxBtaXd4i/w4JY07WJL5kbY/9Pafg\nj1+POlwDFEhjVSDJdsmZjEczkQ0/M1TBQTB8uifMgC4yGRtlT9VDeiTnwmlt\nuJkuwO6mYPNWwM0AtNEN3q0UIkEo2wzUtQSejngqTNsCGfbwUnzzeFKZ7RSl\nhYMbbI+XUn3XR+F+szRz/kUTq+35e8e7dNP1Z79Pgojeks61t+Qb03s9J6lH\nvbnrYswmfKYlHpGSTYyxRup09s1ZUO5wju1XSs6ViIifDN3CEwZinKGJPJOj\nxpTdtIRVU4jvFRSiZXSiEuBZW22wEaz2MAhXuun2VNeh21u3OUgst6g4NfpE\nXb/ithJE+vnIjWVP8RlruTsM+5KYGLM1BPYj+Ptd7rsSHKUnv0u7iRtDs9HE\nzg+K\r\n=2MzI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.5511e0aeb.0","@material/theme":"8.0.0-canary.5511e0aeb.0","@material/animation":"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-indicator_8.0.0-canary.5511e0aeb.0_1595609801768_0.3264177136117443","host":"s3://npm-registry-packages"}},"8.0.0-canary.8388a9bf6.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.8388a9bf6.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"d748496e606f070b08d381c141235f655c7e1cbe","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.8388a9bf6.0.tgz","fileCount":38,"integrity":"sha512-pC/DXD3MhZXF+nZzpuZqcNtxxMDvdm8faIGLfeMihkUd5dvWYY2bD/KiRseXcR/S8VILZpPLZQAvCqwk3Z/8hA==","signatures":[{"sig":"MEYCIQDO+3TNnPQdBtJ9Vp8B89RrJwwv0I6/7a8ReyKdxdpBZgIhAP2f3Vh6PjJF2YBYHqMw8UMrRU8tD36qObMk4EyeUzv/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfG0DOCRA9TVsSAnZWagAAIjoQAIfYPAWv47LagabvgRig\n9ZNDf2yP+GST3hT1wkisJWXh2VE+Aa778CrCIx82x2xoRl/Lz4AYItkGtA4x\nbK8IRWo0iX8YmhpIrMhKDZdPcIkH0JlfGa/lH8/UfHMoPqG1nS1zmBhHs0WR\nQJDUOvXhlJvOTcE4GoIHY62BiHTT0dM2DALyrNQmAMYdCkMizbKfjUah5CRm\n5lNsEYQe4ozYs/eZQuZkoMyUMuT97pau2dIyxCzUU2EpF/lekVUD6IZCw75D\nROOnbjXeawvDYAaPE8TUEj4kNxS/PmhMTPEHmu/e/OXdC+oVwcvxydEa8zsl\nTdl8NOb0utjj4xIaJ1Pz4Z3F0sz1ADwy56K5mEntutIUTJu5szVlDfGpHFNv\nW2lbq46sHdNUEVrU7+6i+IbGD2Dn86XglpOBoFr6qEnYlB4690zxSWcC0AA1\nT2Pry7hszDZ2sU+xg1uyCX8jhJXN6vUXpP1N9EhKq9lpghG2zuz9AUQLFaxB\n5cOVnxM9fQt6/Nbm3x2vt8Wi2lhS8WCTeq08uzzzDnF3Me2f25h12m/dAtE+\nYCsFjuF0Pg0il1nPNs4lo1AwtrKb7G6KWttEpy5GzA3cJbCbfkD5WFYJXq+I\nWmWMWq6dBjZwnWaqcIfubNRqfcCiwR9uSFA7cuBbn8uXlWGJETNvRZbPVWFg\ndLPn\r\n=wdW/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.8388a9bf6.0","@material/theme":"8.0.0-canary.8388a9bf6.0","@material/animation":"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-indicator_8.0.0-canary.8388a9bf6.0_1595621582368_0.15263907036846147","host":"s3://npm-registry-packages"}},"8.0.0-canary.ac405eae1.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.ac405eae1.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"bb9afdd266ebfa4c93bd09f6a07f2ac69b0c1b9e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.ac405eae1.0.tgz","fileCount":38,"integrity":"sha512-Up9BSycjzhL0WgHCz1whivRcQuD82NdJACjnT25wgW1zSBPFVnPtxO72mMs8tjIvh36yMrP7UH/rJVSTVhp48w==","signatures":[{"sig":"MEUCIQD3KsJpmEOAjeUpqIGGtwYbEz6QhQcqwLAzB97otrJ/dgIgenpVBgVXCgYp+FKqw/SVE+5lD5eg7/tcxSXq7E9+LC8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHu1pCRA9TVsSAnZWagAA/R8P/A7+WF872jSeW92E+qVt\nMVJPtt5HrDaF31cZIzKFlgB0UxnoAQ+YXxJNGqr12ziyWyuLYsla+5tiRxM2\nBoTzjjRim3r4og0g09p7infaGIluryxRSgCpV+yYHqG07g5TCViHE/4oOavP\nU11E7+R9XVh865lROlIELhxw9aVmdZ3Ku7OnYq2awm0uorN2HaHhV4Cn45Cx\nUHciXYMLcFLmMv5HuQ4b8aZoi3AEzKFUT4LphChr6qbnywiqNyklYgY9gAMJ\nztN+RuUqLd+mgLffE4W5Pb52W9Mnivzv1zazN+/0WxXZ979E3aiQikoEqe/F\nSNTRnROeu0RasBoto/kfKRmp7wx110wdfcwqCM+b1+7vvqBxTmq4B64OqsAi\nR8ZtvCvkwod9TDaIl+8hjM0vDwgtxEgq54ysEs2Lz+aRDdVtMam6zOObS/do\nGtVUbyvlM6AD0ppYnv/2cg0U17rAKJb+AV/i/llYJ6qyAk0R7ZwXR/d2sEx6\nuKdYvqq0BZEWk/N2ijlWABSDAZQlcAEU2d6P3igDN0g4SiqbAgdrJOMXIRsh\n2SKVxBBktWeCtdzbgvkzzQklzP43szlDE6rCStI9M1AdM/4UjfA+wLjcI1KC\nVzlThWspk47qTr6zty3Iy+CJnhi91gtLdFzjsfol2ZPSm9yv9X+C6uUjuYXp\nft02\r\n=FZbG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.ac405eae1.0","@material/theme":"8.0.0-canary.ac405eae1.0","@material/animation":"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-indicator_8.0.0-canary.ac405eae1.0_1595862377372_0.9064007559580496","host":"s3://npm-registry-packages"}},"8.0.0-canary.75553837c.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.75553837c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e2fd4afe7087ebcad2e4f3580abad0b5768ac01b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.75553837c.0.tgz","fileCount":38,"integrity":"sha512-OXHUDB39ac7sQDd9Lx4fM+HfDV6FKWWHykJFIwg4hxDzjnq+dIuEsNqzMI0GrlFdW1Xnf9eA3x/qpxJg2zsguQ==","signatures":[{"sig":"MEUCIQCR86biQHGl/TuPv/LWS0VPTywOnW/RW8FSobOKi17OfAIgZ3YKMPOaLKmlOBb8rH41u1Bf1IAQ7ghvrVK5Yynp4wE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHu7PCRA9TVsSAnZWagAA1CsP/0xkdWFUtJAF1vda59Ls\n0W/tuS9EUrQpZBGXgcMPkcSb4GQcyIm/koYM9qCGS/N6SIGAaobgrR/Ciure\nh1HnZU36BIslPNuYrvIObUjwTEY4UdkjrQ8IxfzTCCzK0mU64/C/NqySDERH\nugpOKD0A2Pd6mXStZZSbTxV/qPqxZ8s/kd9V8/eUlgEg4jXGzdS+Yvij7yBY\n6EA14QIJPKdY3bYyH/HLOBRboxtALlk94ouK441jJPCcfPcWsXHhhiyhyDVz\nLsL3luW6fdUu0izb9BAuVKeNI+kAnNEMfx456qrngq26xOqKRMC/RdmZtTbB\nZSxI31QgniIYF8Fq6df6ah3b7Y8nMr28k8FQIBA7mVEP1SpAuDmH/axoZA7v\nx0AwnsRPG4qWslKXzJsFEsoQqPjYilKLRpERUuLbf0PI8leFKQfZrqT6URFv\n0SahxqT8hatOk7iP9Z+hVv3QkE4XsyIgd+bU0JhsEImh44ltzj5u44eN/Gnb\n8nXaf2wt83L8QHNla/mortC3B8nOeuKaNge3rxWMhhkNPPQasJzQA+Ix7Om6\nuhUDs9J3+Kbnxw9g9+fgWIVmEhm+zqhzsL3QnUod2EOGFN73+41ReASppBWK\nfYsHYhIBk/FVbH0rq3P89ice5Z1kTr7b5OPSEgRHs3WpI+8wexJx+ZwUeXlF\n7V9g\r\n=hTWm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.75553837c.0","@material/theme":"8.0.0-canary.75553837c.0","@material/animation":"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-indicator_8.0.0-canary.75553837c.0_1595862735116_0.2748311005616382","host":"s3://npm-registry-packages"}},"8.0.0-canary.b96fbfc7a.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.b96fbfc7a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"3cc4a9e41bc55d985ffd1926a618c13d32887cf2","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.b96fbfc7a.0.tgz","fileCount":38,"integrity":"sha512-5no4+CdgvcnYwV+4906nKngDGSTm5JxZ6F0OklielxxYJoePxgaUlaoNwkSKB5bn9VE9DAMPbkNSApdk/ucGTg==","signatures":[{"sig":"MEQCIGSDdYHutXCFy6UGzXFsuTh+jj/9LCt8Dx52YASxPpCoAiBZBc/ksnqMpxZ5UzxOoRRmuNRapCfg+D59MhyhDXxP0g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvTOCRA9TVsSAnZWagAA27wP/iFPEtFvVxuaqRellbDi\n8Ol7w6fW5k1aBDS8UDBXnSstbXFVL2nTSFuURBTBeZNQwDzxacJWI5RivigD\nlJbsCTvZ05fdIPV+ireOjvvfBfxWLT8guW2BiAlN+pqn9LiQFORX7di1E7tt\nWOVoI0JnwMcNqRK5CvtJxOZfU0FtY9ZV2wMZwGmhzOB8bED6Cgt+OWv8dEn+\nNx98bvL95dHXNT3v/STvk4DtrOlxO9Tord5vUz/tCkUqWLhNzfILNBC2cCCI\nAVu9jvVM2CPq4YyPMwTLRN2ekrH1j8ZKyx9blpkvJRHLF/KX2jRc+FHsRGNf\nIRaLSrRfbtyF8VgD/w31G53EWspebCIsIezMSEUefJo04GGB8RbpkFst9vM3\nAqWNyKu3p7HjgUsRUNRuuobTXDwT5gjK5iIThnpLreJAXYVgajncRSdu4gPn\ndKRszcJvyC/n0kwS5Wvh1MMvuWpinAkbjtd/VzgH0GofxfaJU8+/vqldXyyk\n/86rSNw3W6GwNqV1odseO8gBH66kpafa6fF/GeLHc0HyKG5dAsgB2ZF6srjT\nChDwv4qMTB8/+x2g+69ycoUc9XlZozwGwDx7Js7T9vF7XdjirzHJegJCaiup\nJE/INLTdVh2LBzPLMQLsdqCnRmrgbaqJ2rXx4Dm/74EyRB5o37iSAyZLF8k8\nyJU2\r\n=hR9h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.b96fbfc7a.0","@material/theme":"8.0.0-canary.b96fbfc7a.0","@material/animation":"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-indicator_8.0.0-canary.b96fbfc7a.0_1595864270300_0.21901466534159875","host":"s3://npm-registry-packages"}},"8.0.0-canary.61f1a8d85.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.61f1a8d85.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"127bfb81d97f2ab5657f78a92db60f5b22b36bbc","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.61f1a8d85.0.tgz","fileCount":38,"integrity":"sha512-q0oxTyymeVA3Sg2AcGkTjlPS0ZWE18H1BZdKntMMsskF0vPn2a0NvCtCo8pPnhCsFDEj//5PtO1p6ot00AmXnw==","signatures":[{"sig":"MEUCIQDM7sJJn8nQz3Pv4E2GH7+e3BCDmnk9ILDDTPnpi/PovwIgHsbOzoREUc3yJdYarMEoXQcTQOzUgpgAD0x+w3mCSYI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvbvCRA9TVsSAnZWagAAM+QQAIBINh5jsrW3HNXBCNA2\n3oA8gUfWpHbbVx0Nnd386vY9BOD+YnDGn8kyr2KYaNVFe0s2gMJ22uqvk5cV\ni1sYpfJP6oUDDstc/nWWQYzCQOw43xZun/r3Omz3SFu3sl/bRvsOCj1yPIOz\nLuIuHjodPG6/OLbqdum3u9MFPsJO1plGidtHiIz5B/6rN6Orp4dpSMU60C0T\nUse/BoMv/a1jAH8nFvH6kPV0uAogIu9y9h1SIWARBP1DSM9vDjPsIPkakGz0\nKzmUnx7lLHE03h9Gqccs0UAfJPXwfCCJEz1BH4jEdlncUaBt2ZZlVpLU1XrR\n4zrH/7aCToE0mn/51+rXulc1QaAQLgH28cZUwM66Llz7QEDi1owhQ+44Z/af\nVkZ+aDPgjoosM6Z58I3qxQhFKVXU/qsW1GQVBTkZbz3hdJBlWvsVGmOZKUWy\nkgAdJO/CiqComS9biYXYeeGBkPdOgE3GiiVMgr7ema6ULyJ59OT9yOAiMHNS\ntB/xOrmd0BWTRr1LtxYdRbVKy2zpRFtqs+7yxsA2zUI4KDQUh1/Lc2OEYvZi\njz9r23y2/16nYzSez1v4cl3VDjBXML3LWzRKy+5LsDl7fC8/sdPPJANDUd8S\ndbHsjLDTEYgBW/Q1yViEDLfDe6PRdb4Z/bcFPWIMfikz+9rZMKx+X4+wwfAL\nxMit\r\n=tHKc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.61f1a8d85.0","@material/theme":"8.0.0-canary.61f1a8d85.0","@material/animation":"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-indicator_8.0.0-canary.61f1a8d85.0_1595864814881_0.4373632903358693","host":"s3://npm-registry-packages"}},"8.0.0-canary.81dc33377.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.81dc33377.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"db542ba5acb185eddec78c7954bab907f66acf1a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.81dc33377.0.tgz","fileCount":38,"integrity":"sha512-nhgtd3DahJlt0rjZZecx5meip73JfxkA34GQD8BtnkJgKlWcumxh/bh4t+SQRSA4yN2t/cMzLtU9um895/B4Fg==","signatures":[{"sig":"MEYCIQC0SVyZtHI8hEZzee2y+zAhag0pBDegQ3aQbf8itYwFJgIhAOjZFuQ5uC/soLtL1vBGZ4/2HeG/Xjs70lcWafckyEmh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvnFCRA9TVsSAnZWagAAZicQAJ5hYulK14uGV9m4G8sO\nunEhn7FuW8S4eYf2gRPuPUavBn15YI22uaZdejQWijsoffSTyInquZruyLab\nNQmU34EjyRFiWwocAYi8GGbF0YwcvotjTXrUOZeApvfQQOu5KY4yIyL9we51\nViGe6goW0stbgrIRSmgyXgiP5/acNFKTtb7iEhsrzte1QUHPr2W1lRetscGz\nMQLc1a262o9GvylqDBL+2xeyOqwYcOdcaiemxLF9se4ZS9BtdYCARBRpmA1B\n+BzU+a4YFoEtrlZZS22xY4Ixjkbs6QWVmdHVpt90r2h9SeDPn0vUtJ63JJMU\nlkSe16E2xATre7GLVrmFVZaBaUps0O+cqK+XlH3MipnJsOCcTyADGLKzbjPj\njBt7wa4683Lmjax5QHJB08m86T4bBPcGHwL+MnYDvk9CXwr9xaGxcSBgf13H\nJW7oCRi9vMrF7bGLJR1xReEolDpAK32B34GmMor+Y0Z9iiAtNpHQY7kWOR2Z\nJ9+wDNxjdtdbMfSE79pkRmD/wE0HT6X2o5XbyIPhk0X/IillHTyvv6SMkeOh\nPc7jnv+mop7/yXqUPvq/8ioakPq9Av2XuSaP6F2uR2g5OvUMGNe3A+4S9UWL\nBmApb97zR9GUmGNHkdzVEC+h45q7CtpY0L4g7lZyKUMUs2H8SOXT8Fd3J7nw\nTTQp\r\n=kntr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.81dc33377.0","@material/theme":"8.0.0-canary.81dc33377.0","@material/animation":"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-indicator_8.0.0-canary.81dc33377.0_1595865540905_0.8282911755329454","host":"s3://npm-registry-packages"}},"8.0.0-canary.ffd9ede58.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.ffd9ede58.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"a574fcf649a4555b6d59c3952325a07d97447753","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.ffd9ede58.0.tgz","fileCount":38,"integrity":"sha512-Fgjtydj6zAD3bsczKt1dwfAKshmGoTEBj24ERMPsh0gL7j8y+Eex1C2U0Dk4C9fDhLj8sVXnbISimyWMcMtR9g==","signatures":[{"sig":"MEUCIQDzPpL8Ui+dQOafvK+Sr0OMxxQSzw/sU+oe9bhhC2dnzAIgCrxkvZvDxHSJDUHOvvf87tcR5/iCY3eoCh67yE+d9Es=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHwGPCRA9TVsSAnZWagAADBQP/0JrgQfA93sfG1eYGoRH\nDTtgGXio8IWBJfn2RPKEj7n2+/8kZ1pn4ti9Y8mS+AY1j8MiDiQF/lQhjlXp\n5f6xYuKe/o2vRgHJOTZEQ84NEDv24u3o5rL+MpvftntvpXliJthSsVeYrupT\nF0uQIPvh01SIaOGUVN2/zNqLS8biUYnh/neoEHXMX/6NV/pLAB/kAHFH4fOM\nZejnuA87+50uVb87KA22tkFRn+tf5fXIAZYGO4zbStsC0c6fj8Tmh1pEcdWK\nADlEn1eiXP17afApVRXzijGUYtoAKun+Jg4kFMiLxjJ6OlTPAGzUtvXW6VEa\nDN1sZXx4LHMckfiY4sXdyexBiTARL3ovAU0eKHhX2Mo8Ugw4LuQes4gCDjUr\nQZDY6WlWxdcqegRp03S9yCg1CUr8FFUJd90ssYLidpZKaXgloxLEcyaMO+YP\nSNAGlTrJx7Hoi749AyUeQQTZmRoZinPDqObvastGuGJqoDZ5QNIESNnGfmUQ\n2htUFzkmSri3tEFtvvn6rGctZzpR7FVC1d8iaCDIw7aoiZ610JXlUxupuV1h\npwgijVXe4apG/YRwR5aaCmzk+xW0ZqJVcAqCL26mL0oeK/TyJb3wsLp+2QxZ\naUKog2QyT88CgRfHoSyQTu6VygJ0iiIYkkAB/Y8eP+fGEBtMhlfAJSXwT+qe\n1kQ/\r\n=rjXA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.ffd9ede58.0","@material/theme":"8.0.0-canary.ffd9ede58.0","@material/animation":"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-indicator_8.0.0-canary.ffd9ede58.0_1595867534855_0.4113170758355107","host":"s3://npm-registry-packages"}},"8.0.0-canary.52dc55acf.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.52dc55acf.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"22b75862418f90a78649f822fb6baba9958c8aeb","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.52dc55acf.0.tgz","fileCount":38,"integrity":"sha512-GyNX13LvRzI1qcs3YPLWz+kBPmiATz+30ZpmOT+InPt/Q3B/2UUnYP9bUT077BJlqrTJr4KPcuwXXv2D5vbTbA==","signatures":[{"sig":"MEYCIQDvvGk51Jy2JFQJh/4hovOtucSQoQuVuSCiKx1MU2lwugIhAMPUE9JUte3D2kh2V06BG87H6admIWy0wL+y6zzbuJgx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHwoGCRA9TVsSAnZWagAALWwP/A+rv66EjaRmJJy4pH+d\njbSGYWA5wOlbSDaPlJf6COhGZCW7VVQyeDeJiv/KHeH8XZvFwqOFaHCrE4z9\nFNJE2fIKlCi78bONJaWkhDttQaegT13E2sE5yvQxALXUX+ZpSaP/emNtQbsF\nYUvri59WvUYJp7CTAZgfH/kciDy6FAjoPLKt1EmJgQze0WhwoWv5as+x1uNp\ncfyKukIQLD1vUqYUMs9nLdxOHCLOUyfYAVaA5Zs/qnLYatGX3DzBHRAQyzFN\nDJsnyLcXc1c5goScEtphyPwojm5nuNrhLWY9Bx5v1F2fhqWT6MZKwhzXVdgW\ndRSJ4a0HWqF1vfSISdae7aJemgn9q6dQPB5GL4E9/tDk9dIqIy5wcXp+ROvD\n3LakAMHbOiH9b+37+dGeCCL8A1ioixwDqM/GAvl5mWUQ0R3rq1XfJDH4W0rN\n2FkB9GhbxpsvLvrOWkRpsq7Ay+p2QtsyNtC3/gGk12sCPYJlKXJneEr1dhKA\nIlyLFkJqueDHRItyFDj/SDDwAaAjy4zhd7nCxxbTppmoGrtITbaLC9GiBrYJ\nkwDkK2DlWFjPr1ynVgpEdhDq3PYytIX8SscAEWU2DBbOBKNejbjbVe0LXI8u\nEVS5lX+bGf36tX1IYufJ4rTbYgGkEIIt2/xoPslM5xbmP0d0GWDmJSh45hFn\nl5q1\r\n=B6Di\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.52dc55acf.0","@material/theme":"8.0.0-canary.52dc55acf.0","@material/animation":"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-indicator_8.0.0-canary.52dc55acf.0_1595869701947_0.23284782988688169","host":"s3://npm-registry-packages"}},"8.0.0-canary.d4274ff05.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.d4274ff05.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"44ca145a4797f0c91db0b4db66a3f390f3f5e11c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.d4274ff05.0.tgz","fileCount":38,"integrity":"sha512-5PnoNNQZtyW6D2xFmrvEoJ8VF3m1iluKdGLOAawroPRlqnYm/i453PkptVQWAnBLdi2wxyJUyfigGpECl3WLTg==","signatures":[{"sig":"MEYCIQDwSNUQ+j2hBr9ZzimspnuC5XYZ0oD8KNAD0mIS+5YfbwIhAI++HXGiXtgPhzP3RVRdtAeV7+2oMRfd7qEG5JSlohKS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHzArCRA9TVsSAnZWagAA3g8P+wVT0nMzEdhR/joLzQtb\ntHCQBXrBIVkxXf7ni47Wwmtrs6PezfbVCk3ot9fKsXBE6j+MAHD2iXckknDP\nsmst03gFkspoVBm2aQ/AeW6twSOO3T0vR00yMUznz7BoWsplK2GWPIPvofWn\nkS1loBhSU17lL1OtonaDho+roCO7Auxw3498AtDnHRRhOMxeG+lzOBXKYkiM\n8SK44FJMtFtRi2c4s1HbPEhqVlGxBtbu3VawSnnbNzJQslKSOPfydwIIpVt/\nZRYJt1/P8woGzBuPGiLbIkBVxGTsEmjL46H41hz8Uh//z394DaThp3+hlX7b\nD2X2CmwtC0h5F6Cp2uQeSHaJYtmz7WDrZy+wQc7GZfi+jFGzg/BVfvMfoU/k\nwS+gZv3W3bprSJlzmKISJjmHvDiGt7rz/3Bko97TEMsi8sN8votlXBqKCxqc\na5BKINi0cvHdywVMf8GRFhbqpOCzVmQtob6PBs9QBh4W8R+tvG/M4syWEkGQ\nV5sh5BBsvnVPs4s9pqtzolZp1vFci0EwhMotwUmETVO6L/33J4gUeY3Mr8Q7\nqw6ozM2NJhiJOBhgjkzTg7pmVURGgHJuruLlLWFO+IBYVF16vvVA4LskyX+l\nwx7/PW8fUH8TcZPjCNjnt9o9mIzxmzN6KpqSXDQLsz7l8ruVNq6o8Ml2Pfzu\n241V\r\n=3jhe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.d4274ff05.0","@material/theme":"8.0.0-canary.d4274ff05.0","@material/animation":"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-indicator_8.0.0-canary.d4274ff05.0_1595879466504_0.04300255936396491","host":"s3://npm-registry-packages"}},"8.0.0-canary.b82d0696d.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.b82d0696d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"eeb5ac760b84d71c54d3c48014cc296b312b4d85","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.b82d0696d.0.tgz","fileCount":38,"integrity":"sha512-lyTSll9h6fYKOz+noq9CGz7ynn5/Xr2Soc7sgc6T3FTWJR525TZ2z1WA52EfN6J4RQ7djs2tMiKWmEHlAD1Lkg==","signatures":[{"sig":"MEUCIQCLOEBNmsrRCwJ+oVMwAa5cTtxRtRPfPBDiENM2HkYJqwIgH9y/F/Q90FCVrDTLLS5G+ZcxL/kYJQEzkOFcrUz5RhA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHzHBCRA9TVsSAnZWagAAJZUP/2AAcirdhRRH5YFg1Mgt\nUODM5k0DR9EqUpEe/DXOfeOz4D0jC5tPcPNL7tTKrudl6f5IE+5jqA81VVxl\nilzELoOBU/8DUCeWHDYgCBLjA4ThqcFrA4vp5P5EUnKFnwOpy4YsKByrsAJH\nZosiW2W/97zLYtIrLqaYV/5yeMDrLSTb4u4bUbU2hhjB6P67catgu9vEYhLm\nnT8CNYkcsodCrXS46pKHRZ5JcaT5CBnjwpDhJhRvOS8VgTrVUBckvkzM4+z6\nXUnQnAU6D258PnixpWx/dbFiPZGHtYoOuYXBQJLJuTdHw61YouZmbYvRmKxb\n1g1/ut9xipgwfF41iKUYxtknTw5++BikOKTf9z9CrDqsn/BLyAQWI3kHmnEk\nwKKZuJF7Up5pzvTC/EG/QPMdSOdQEJogoHqhpMpnbRKUFyF8SrUE5Ja2fEGq\n+Ku61sGsIp4i58pLtgM2aHxGUIMCseiihkFFH4a5sK324ugXjlQ61Znslw5V\nXGYbNsR5c3fmrQjg2AOHbWTjN5xQXNOr3ckt6x/iytrQUgMTaX+Mgfz1xhbs\nkWNj987jah3ghY7Fy28YQ1SCuYcRz+H7zPigV6DQSovx71q3hYZGwXw6JL/c\np2nzFL9/WQcSB5bzFm4VXezbloBzjSiUtV1PKa3/BynASKnKaFALkAt/bHOa\nTlhA\r\n=bSwX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.b82d0696d.0","@material/theme":"8.0.0-canary.b82d0696d.0","@material/animation":"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-indicator_8.0.0-canary.b82d0696d.0_1595879873171_0.3145089701106569","host":"s3://npm-registry-packages"}},"8.0.0-canary.c2852000d.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.c2852000d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"79c84befb39f81746ee566b8b32513f58e30d58a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.c2852000d.0.tgz","fileCount":38,"integrity":"sha512-oyr7ziAsUC8zRBNwPkTps0JcJ4MyLV9StnmRzlzIQZhRud1GQB+2Bh34I7744xB7CYacekTTKXE+JLe+Xn6u6g==","signatures":[{"sig":"MEYCIQDNxPwE2GL2YHtec7aourCxnxK39vOr4CaiZtaMlJ+8mAIhANF1nwjE+C7aEepiL2N0P8P4FeeGe1ll+xDvl9vHbIzE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHz/fCRA9TVsSAnZWagAAhBsQAJZW0M6vHMw8ONjCEWsB\nBEygL5OouHvgI1HxRVGzREWgulE77xpyKu/A3WxRpAzgHMxV0zDZq5zkJItK\nTUKnN5l1YowlVtPX1YcprsnpfLRu0B8OgxWud5BWj31o5z7izJEvL16vuYMK\nu7xGq2usp7R6uGSbPiNfhiB4sdiGQKqofQPOnFzgmlxF/yqwOksBnEQvTOZP\nEwVMLQV2yd6/5w8aWSijk0mwQqAi2aTMAe+ihg1WIsmQtMSobNne2izdHp44\nmqvxmsN5EiO7xpl8RWWzS+vbj1X03/5VmYpiw9wipt6t7e7o/mwXay1HAaFw\nc16ZWH3wg6Gecf92ymMMGmQ6Jbs/z5Hb9FxeQ9LC9s8nouJ3CxfMwBcwRayq\nmZXuanSpeWVxaOgmak0g67jZeejwHi5rYHwKAEa4LufS+9eS5ichhFa4XceT\nTLNlZuE3UY3EDHoTxOcDF2g/Cks4aZ1foHlm7rF5QHZ37Jq8HoUirw1H+hnd\njQVNy684aGjIbDG4qfm35Oa1q3A3mZC3AOcRYmWEIsCNusdSuYuIrV1ywRVb\nOcXugiwb1ow/4av3V/xTe7cMg4Cr6aKbsm0afw+WZ2sxK5xqYYk7NP6t+2bA\nysOUhKhnhqJxvbfrTbyTP40VgwyxLJVOnpAc/kWlFtnKiSOO247/mvOPnaxd\ndIH1\r\n=grQt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.c2852000d.0","@material/theme":"8.0.0-canary.c2852000d.0","@material/animation":"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-indicator_8.0.0-canary.c2852000d.0_1595883487341_0.9342619032078017","host":"s3://npm-registry-packages"}},"8.0.0-canary.f86f83f54.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.f86f83f54.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"a95c76667b2f658c3577d130e922527962837903","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.f86f83f54.0.tgz","fileCount":38,"integrity":"sha512-W5oRk7ukfnozLUSAOOatG87GCxm9WI7FmToaPtH6bbN5B47gfTRGuCC7epytyqrdYvPhW5hStTWI4bM23kk5Ww==","signatures":[{"sig":"MEUCIQD1Am20MtW5J4v18veE+hvxOQG31gUImL2lfJsloz7zWgIgM7HbfFms5dEQTnM1Tq8UmsmEREoh11+E2wVJpvgNRm8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfH0z0CRA9TVsSAnZWagAArv0P/1KCuLPCIlZBwmDclg/N\nhXJTH9uTreM4efqdb4h+9aPMWx44r/3CIeIoH2cg2vjQFUgghzKe4qug7vjQ\nWKQEO+MPs0+cf7gPKcSWbS76W4ShORhQK4Gb1Z/kaMhXCCfIoMbNS6IWko+/\nw1Xv6NXkKWJjhAM4TYHE07vZy6nCiTSvrqTGPjuKSpWZTlgrM9gGge9T57wq\n6vk6JSxWOwyYohC+ifbaLgtvdIhfdT0jo9uggvJao/xQ3OjhJr2RKQdDqHQq\nbFpbEXUzKS5ldaYh+JRynwnYyEsOJikqQquLy3ORTwyeTN8YXuBQx0L5GxUh\ntm3ibwVJ4A7d97ttHihD5S+DxyWGlE5msWEcqdFvQ8FipgDbbZrpEHjVqQov\nPUxNfRM8rVoKRKUQwWdPzophJUqm9ku1FY6QBTWEAJXoZntjpjHZnNQmX1eU\nYszTpmzdR9ebct087JM7ez5dlTzk8CYgu4BSFBfsdZwwqzjUYXap0/GrNaV1\nxiB+9qJpMne6sPkT316n8l0L8khKK2R+Cjr17TbVNeveERbwBX2LM5uXkgJ9\nJEoCje0xLiCf0KDUIfm1WrS7n7JWnQ0WuTwrw6qFx/J2qZNidRTWSsvuzPja\nIkz3uMBRAXvzGXIWSvPnyUhdpkYdvEPYwXcJmniPvMHIyeep956PpE0yeQjU\nJEdw\r\n=Pqtd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.f86f83f54.0","@material/theme":"8.0.0-canary.f86f83f54.0","@material/animation":"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-indicator_8.0.0-canary.f86f83f54.0_1595886835909_0.530080737792797","host":"s3://npm-registry-packages"}},"8.0.0-canary.41eb1684c.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.41eb1684c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"862ab4548e1b3b63fca3c9f5c974f3741223332f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.41eb1684c.0.tgz","fileCount":38,"integrity":"sha512-n/zvNakA/jUfIxoxeKtB3ZzuGXVJw/ERHf7KqDZL5Hf/hE+YXThz8CsDICwB5ALsSn1fQMI4ow7hzVMMxuQPhQ==","signatures":[{"sig":"MEQCIEy1vKjUMoV/4CRv/Keg8aSfI1DnceHnChqA6vaYZhHZAiBAAXdAK/UveK1IqzeSj2uvj0YBOXnRBAw/TbUly/edsQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIGVPCRA9TVsSAnZWagAABz8P/0JhdUUwABi+ZkprBIGZ\nYtnFWdS/WBEDtxIxoxO7uNh5cYHSDW+tvdqxj02mAmUQ/XqpYlKUQFBcic2g\nU4r1e/Z7YTrVRc3+1159lFS1uylhuBTXAVLAhBHMClGGS9yujSR825rZ9pIb\nOhMpCp85u7VXlvKPUrdz2xiwfKevpWgCKqYIFaqcBnCg1YdU44T81VOA7hzM\nzDzI6wD9Mq8p6HpFbbzQDMMHqp3RMs17zM7oOdrJWUpWjJPeyuMqu1kNyAbf\ncns3pRVy2H/yAX97+ixgYS6W/lQ8uHDCmDFkkbbVuvDjnj+7//OLSx/1SxbX\nYxfU0CyHrJ8AUqKr4yJugARZU8w1ejAQo/jEH48fvts/jqAwKD+ZeWG1+0n9\nDJqncYoRw9I8KvvMbIguXpcFDdapFPIeceWlsQGiLS+Qj5PAE3PhT6wnkmsA\niszpcOiWLG+UyXK+MzU/WHP+VHfyZ4SxiiCYHNzrTZp1p6oDxmJOAbg76qUg\nmpNyNF00/4ovbL5bfB7zSE5APArk1ETtHI8Ek2dy82g6TSgaLW7w0i+mXTe5\nfXiJjQ0sB0T3JcxnHzoTTO4PxCh1uCi6kxg8C5YOKbMNb3bT2lfxou6KXiz1\n8fL00HnLFoxJPBS5BoPQ8XKoQyKmB+3UrhdaPcaJgSw3WZK+EXRGUpNXl9Fv\nCPmF\r\n=a9Qm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.41eb1684c.0","@material/theme":"8.0.0-canary.41eb1684c.0","@material/animation":"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-indicator_8.0.0-canary.41eb1684c.0_1595958606969_0.680111655458876","host":"s3://npm-registry-packages"}},"8.0.0-canary.9e2f6c450.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.9e2f6c450.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"51a33bdc627f53cee4c7799f2a72d1e0f62670af","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.9e2f6c450.0.tgz","fileCount":38,"integrity":"sha512-phBejGSijtubvEoLnVBn66PEBb5MlGNGib6u3J0rJuW8STOqT0V14sJrrGdFmat3bFrGutOJFntcnwlWTVzfdg==","signatures":[{"sig":"MEYCIQCh/yefCnHdvwNqrOJH5MfIG1Cb8tPPZT04Yy02LPPn/gIhAMLd7mzM3982YrWXofxjbMH1bR7hFkT6CdZUIdxX2xpi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIKkJCRA9TVsSAnZWagAAC60P/iOkj+WafP2W8h+qw/9x\nq+ji8DmrtKnQXkcvn3Jj12WHKV7yk+DePZARV7oogKhY8K/2JFEu++tFeW0l\n9cAUM/3c+jEnS2cZ/z6+CAto9nulW9J+wpSXtWQavIfgodpZOeM0TCIZJosg\n9QBezzRFPiIetgDExFlRkhAPkDunyo3S97nOvkDS4EKc5RBkfbKgJB8huHuO\nscPyHL3lGAqL9rlyNaZITrehQcv1hLOmwJjzgcZsZST16FCr8EtYs8h2ORZi\ncmwoO8cm+77SrvI2LNZHypRi8Cb1kS+LDtNcpJZ6cRVkGo+IYKYcngkFMZdp\njXiydIX3qSr2xMuLtCPlX0tp+00A/QpS0958YrKsBAg62+OFiJRIJEyToidn\nZbIPUkrqup/zNJnKS8Y0CgakbCoxiQLUb6i9XMhZ3xzP0Z8x0GIEeAHaBtM0\nDAAohosWyGvEe9Zp9+eTAd1xA/9pjB7hvdZ25N6tZy6vJNKQbAJnM08IL/1g\nhi5JoN9U15m7S7FIinItsyZCJRm7nHxmQIAXRsvk3ERrM00EmjuqDDGVh9P4\n8K8imuoii+8iVk2XqB2Bnzt96zBcIL4mQL/3mOZNl0/woC3Neb4ttxVbr2BK\n6/RHXvewdLA7eYSDjPcaLRy70cRyr/eS+/jlJVwaYYlmbKwaV9K4ABD9Ra0o\n/4f+\r\n=9WFc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.9e2f6c450.0","@material/theme":"8.0.0-canary.9e2f6c450.0","@material/animation":"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-indicator_8.0.0-canary.9e2f6c450.0_1595975945079_0.4686023192225337","host":"s3://npm-registry-packages"}},"8.0.0-canary.e6950b55a.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.e6950b55a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"7bd8753f96af0ee45495392c542b32471bed2c4a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.e6950b55a.0.tgz","fileCount":38,"integrity":"sha512-XEfZhQzUXJwFFFGloyOo9cIxwgZFzD4WS2ejjQ27/tdrIeC6/SQfA8OmZY2of/H7htfdE4W/VKOSYgnyEcgeqg==","signatures":[{"sig":"MEUCIAfTnrRHpfwfQBSkSxR2rrOJfO7T6hGlUkqnKF8mc59rAiEArzhFJpsn85CHgq/68UEBt0ClnWXiB+KJJN1LtDDYPa4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIKwUCRA9TVsSAnZWagAA1xQP/2xypkYZ92EF6bDrccGR\nuoDYB+wXPq2kQNvguqT+AFicbTCoc9hy2XsrBgQDFH5uXyt/oFLtx6LMNJXa\n/IiVHW1i7+EMuga18Qb34zhZplbL+PgDpBfjg5OUqEfhAcL3F7/vYECLBq8E\n1+VUmJeT7j8JU830L4UunfJm73BidObJJvH8MoXesUt5QXTKibf4TruwXGXS\nkHhxPvTMfDuPuH+dL4kgzi55s98HHIVK9hPY8lsHlTrKzkBS2X+/+eejfiEL\ni8ensD7tA0IIdhXd9b16HZh7xE6L6tCH+lRDUGgKx0CFi6KATujxsHwyQi4t\na/q5JbnJH9wpX8pMS7+ClS6k1b+W8pbQl9xYn3Djg6iw3bVoMQGDKB5uFcpC\n5J/JxdZgSEdsAz4z44AC7GbbQxW0uvN+H5rlETmQ8PBctwyka7/xm4V7vt7+\nPRfK22nw7+CmuwnXkmUn0PagEWi57CatiTYIOOtYcPPERk06u7Hfk7VDmDDT\nlzRsOKi7wql8J3asuOGfMXnaBmKWcY5S522vzbvFjG53Yojr7kv41H0ctzik\n24jBBnL3hGALg55PfGX6/ByKB0z+ZAoSMidgCq9mLSOu0LF1WFUZ94OSn7EB\ns93RLYjmS93B+NE83SFPEUwHcaXcpbcvz+paXoAa78t3EFaaGKbVXHfPR4Qd\n3Kpq\r\n=t9Wb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.e6950b55a.0","@material/theme":"8.0.0-canary.e6950b55a.0","@material/animation":"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-indicator_8.0.0-canary.e6950b55a.0_1595976723435_0.14929509486062553","host":"s3://npm-registry-packages"}},"8.0.0-canary.5e51ee38e.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.5e51ee38e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ed05bde6187b3382b5f7cef15af46df4f87508e2","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.5e51ee38e.0.tgz","fileCount":38,"integrity":"sha512-/Ak34+56AVyOJtG3Tn5/00JJKEIF3JsNaCMWGhNLahj5zwXuFCDOkJyyhqyHqyHI9ch0iSfqZb/D5CBLCbZB/w==","signatures":[{"sig":"MEUCIBP8LRiaEHaOEwtozXne+gBjOz9cz9SI/udWZGPuc5hzAiEA8lpW/iJKVFg/Q/dVy6hk5yRMbLwfpZlQS5IL2omU0BU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfILGhCRA9TVsSAnZWagAADjoQAIjZbbvAbQ1YWcq36sX9\n9OdWc82i9/dUWXb/KmWOC2RPJuojA7OlHJAUiIQgEtLE08R8xeDqCzJdqBtp\nYhRUJcVj3Q/wfDjtjJYhxiaqSckffEIU5CRV6D1NSZi5pmJ14HgAq+/i9FDR\nYd583hbrQHmfPQFpAlKvsHHi6G5GMzGAVjxXuH2/53TPnR7nBqrsJtLuVCab\nrOIPs+NeQtoWI+2/bNZYAmKWSzhNzVxqErOWb42TahAZYji8+FpNzCImP9D+\nM/f/3viA6mtWoIlF5Hmjnd4BDu2nAgfoBb4wf8RemvLx/va/9wIjWEoKU+4o\nAVYO0xtHdEzU/bWBJGEFUcW5qLWxwUPA/49IOspxGK8JecygSZmaCSmqdFxu\nSDxTIyNRhThm5OdAj+9xule1PvJKMWOr3uR9iLANjjurwqnjbzPvLH6DshTM\n8Fr2vUw5HUYi7QxzMrJSbu1cDEhdkrhDoL2tSQTmStIInAfxuAiDv2nBvUPU\n19kU/Wb6hkorY8qUbA/Su4NKAKCo51/hQoTXRDM00Hzr7Iyq4sRpVPyvjfIh\n+QEWSwKNph8k44GCSDhNMtKfydyZMmXVJI0lr920ZaTV+71F5QcliFIeWpTk\ncjjMPCCGyXWxT4NKAa8mZx8fpV3iFLfXI0khA95EEnsMnVGbxGuziJZrFb74\njF7j\r\n=MyvZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.5e51ee38e.0","@material/theme":"8.0.0-canary.5e51ee38e.0","@material/animation":"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-indicator_8.0.0-canary.5e51ee38e.0_1595978145347_0.7192729153298412","host":"s3://npm-registry-packages"}},"8.0.0-canary.a3898ffcf.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.a3898ffcf.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c294ebef87e641fe03f8229a7fd5c58d4b753768","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.a3898ffcf.0.tgz","fileCount":38,"integrity":"sha512-EqKF1VBBHlGnMHbmyBf8rfpImMXJnvFfTeIN4G5g2u1GQr4ETGPlWmrp2lVAe6Aerfg1Ov5pjHvyjMc24HMxMw==","signatures":[{"sig":"MEQCIDRR4DAkZbuvUcA7V8AT/IO2SWeVPEf/wRr+9JmgExrVAiBPw1oN4cp8PrUt/ZC2KRxC/5H3pgnSVc17s830Iwk8oA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIMR8CRA9TVsSAnZWagAAgKAP/3Kt93EJQn9Jdu6+wPlQ\n9lYMh0B1WuaLzyNWjd8/sNryg9iblBqYn0R0p38tL0rMs1gDyMQocCmJgR1W\nVJSuuKEWRN3dqmjtuxYLg1RmPWPi1VglObsPEoFvXmMa+1YVJXriuzt9oL0K\nQd88f4uDGweGheRyOxfyG93BOxRZzmBAqXx3ySuXBYEpzKP2bnoatBWvVgtu\nXhPFF+pSJNhklhKWXmfIX7TxwmQ4OhBsPoH07w/QIbOCW7z41rRQtGA2l8+1\nHni6yNMfUPXhLQG7wYSYfXzSlK9YnXC15PEYhC0tlFltMRa0h10SWGPTVX6c\nD2lANrtHd9Pns3EKXO8qr4R57Gzm7iNb3h1YAimWm9wv1nCYL/uUvS881bJ4\nD3tDmCW/eqOQPEUMd/UkCayjvxQFx96uW3ozGFo6cMZREekT8v/p66GFi82S\n6EMpDy8mO9j2W+/HzRWCC1JLgVa+5LBgm+2lDtmwK8YSSYy7GE/o/Ce/YhNu\nlH9bBui32amjtikn+oc/W0Cvg+3W9ubUoyWZMvHCZYxbHq1Yy92QrS8Gao/v\nFUQXfKIcWRfpKP2bxd1I4lJFarJKBiW6IVHUQTFSDYFJ3SSAltyRr01RzDMb\nRorlgqeV8etQpaZ/LBeWYt9gT81DokEBZzSV7IGspxw4pmZDpMDp/ux1HKRT\ncP0c\r\n=qU6y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.a3898ffcf.0","@material/theme":"8.0.0-canary.a3898ffcf.0","@material/animation":"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-indicator_8.0.0-canary.a3898ffcf.0_1595982972133_0.4165723174515379","host":"s3://npm-registry-packages"}},"8.0.0-canary.bc5cc6c96.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.bc5cc6c96.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"87f8f4cb25ba2522a66f4d34c087235a2ca35250","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.bc5cc6c96.0.tgz","fileCount":38,"integrity":"sha512-aEsjwq838HN6uC50JaVPRfN8CtkejpkewVKG2m9VwgqzxK6rSuyfRg3oico9m34t8tZZtbrDH0BIsACwawVeNw==","signatures":[{"sig":"MEQCIGkkobjTxK1sXe/G4COlo/PXGvE0hvnG6BtE+l1UZZpCAiArVcpXoSjrPQm8f5BkwiayzaXySRvD3lWgQTt66/e8yA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIMd/CRA9TVsSAnZWagAAw3QP/R4msudDhUTjGnfzNmTu\nCHI49j9N+swyvE8e//UJu7mRqiUbp74qDLt61bt0btDhvv6ThX0Va3IuraP+\nBNVe7UFBOJbR7glMZTeI2NTznsAhVfJ6Uo8+EhcYziPI5Zj78k7k22bmvgog\n3VbBdfcaePqHFjYxvbWyjOqgm7hU/U3E6VBoihpBKRd7jgErWdQ+1hnl/I8y\nJ6aHr6xDKcxE6OLaeSRovmoKGxguBemnfPojhOQt2RaSLByR1sub5Coqwbjh\np3/OVP49rsz91Qtsxvx//K0R6v64KkbBnt/cWnRRsB6N+wFGA9aN09oqvwnr\nbrNbY5cLQOZUiEAjSYUqmxiskAXAdwi3n0Ne0XOxg9QJZyj/5x9acN3jpNOg\n+PelcbQMq7vHRSppnXvGjIcLeEIKW3ZZXb6DRbTG5I0+Hp27xq1KNMOEITKG\nKcqVXjCUkI8CIek3l67qlzFwbxK2FaLVy2t3/1LH2IHvHNZc/QUgs+G1Tez/\n/iw5kjUYaSFGhPkK2SJGEjj779znRRBrqc7QN5iIStdDpvqdm8ksKjvTeIXX\nBt8FzVxsm6ziTJxNoDlhJabJA03b6w1cRqP7s4cawg2RHYbLUN11z+X9IYfJ\nVa3sMmHLWBbD60wGyHfjrkdjIEj8X3W+mNUe78ArhUFwrJ+L6c7IARAHnC/2\nQBov\r\n=iLFq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.bc5cc6c96.0","@material/theme":"8.0.0-canary.bc5cc6c96.0","@material/animation":"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-indicator_8.0.0-canary.bc5cc6c96.0_1595983743251_0.7141891853190134","host":"s3://npm-registry-packages"}},"8.0.0-canary.9bdeaf928.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.9bdeaf928.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"2873c14e17a050cb8c00773fe0fa0b87700e303b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.9bdeaf928.0.tgz","fileCount":38,"integrity":"sha512-OdnT/TLiosGiZMrvPKKzVOyV9X24F4rHjQuqQpTdKX7h6RwA6urfZfRJhSrugnqaZoZaUIsNZxnqBH+ci5ZKxg==","signatures":[{"sig":"MEUCIEoiZCXC1m9K1HK3CYn6RbrEpmtunDkCtMYjEBjXRWT8AiEA2bTHRouV7XhnIvyhJc5WVGeJyuMUCmK4gNhd9ooLzb0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIM7gCRA9TVsSAnZWagAAruAQAI7FYLaUTun5T7K9AHwX\nXYPz/qAv48SrwfxqaaAt6YUNCut7wOaObylbToCwKTetJ5b3JXQRxqYlHmAn\nebPEHqoAI31oEn9VQHgsJ89epgBDdPyTp5gJMBYrwiWSwfkSBq9MrsuSv1Q/\nlh3jc680lkg0l4ZCof9monvtBjVc/7y0M/WG0MCg65Xw7C+Bi/C0hmkTGPbI\nsBKHqnEcLAeP4+u7ZkbCU4rjEDUCb9IcE3f5UHi0adBkFK1VIEhZFNOW/5sD\nviMg2UXwHdowp6rQCun4XnGaPN7vJOAX/qGH33ofyYyM6C7HvXpl+/hKkhhk\nbAc2gh+X7zL/qs2yi+C6c38R2B8FplUyDIXlzyWKOHS2RjCKU2H6BUL5uyqk\nKPpvmbmUIEI1K/mnXfICQzcFvqnyLgBlyhizWURZ+xosvLG479HCq84TYD6r\nU4n5ESI3S4EVpNgiAnupHzqCbBf66Bsg21kioFVJOPSTIYPUPVDyXvs8ZblX\nLrakzSYytPI11rSL6KBzW7PyyDr6a5ejZMCNWlyyYTHRIOBT7JvgElNbmt7J\n2/XXigxO21sKZDeyFMPdj13BWYqQROuzShUo9N9EV5KXmTvt0UBtOxlzSCHH\nMeIy052/zMUx1i4C4NZYsZ5/aTe5W7XxmO/p62kvEuzJ/8Z0HluHD+pzoGKo\nLl74\r\n=kUXT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.9bdeaf928.0","@material/theme":"8.0.0-canary.9bdeaf928.0","@material/animation":"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-indicator_8.0.0-canary.9bdeaf928.0_1595985631997_0.3500100756269464","host":"s3://npm-registry-packages"}},"8.0.0-canary.fde2c1f9d.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.fde2c1f9d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"13d6ca368a5470fb163db1ef5bbf51e1066c384b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.fde2c1f9d.0.tgz","fileCount":38,"integrity":"sha512-b/CvxDpihaNS8kxRVGDbdetI598OGcBWaosdhqdhFw3+amojcQHLZcmenQovUNGC0bjhvP4IRYM7c8KHF/PDrw==","signatures":[{"sig":"MEQCIDWWwCn1JxoXQlzkvYj7M9yyok/Xo8mRnGInYfXoeJxOAiBMq3I9ivtA9gcFzbsGiGG5hVcM56D6i4m7iTllYGeUpQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfINI3CRA9TVsSAnZWagAAz+YP/jnRvJVw9Up1s4W9FMFe\n9b3YSQILHPQOeIKGvDr1iQK7rg0H1JHfIAr9cr9NPs0xP4MbGpxkfnQxrtF7\n9igQzDCDEj8akzmrzqkv1o2WwIeuTk+limxTOYXjSsjVTudoVkCsCfCG7T3c\npizk56b0+2W/k1MCqqGcxbe8AOmPpZMWZP6a7ufKV73jl9h4Z9KfxAOQ6V/h\n3ruZNZGi6z1Ig/4fTNln5gVPDz55bbLplpnN5CvvJUrYKFaGUp/0QjwEtjKF\n+HAqqvjPeMkFijX8wMt3l1Q9fPzCorbwKPUgcCs8P365WdrbFhHDYs7YnJDy\noMLkhgNAWOZacgvEvIqGqEewzLA21PH681l/6rzua4KXFZCc2GUiAV80GAXQ\n9AY0t+BhW0kFJZazGwQ7gtrOD0Yt0Hy8fb1/DDLVAFntECLxdFWjCGTCU7dq\nW1j123ranDhAo29xADsfEiO1NOURuVmixDioj75V9MOkQSfqaNd1STlyUmzJ\ncrKgTg3ii37Cxbw7pEX3ciF5IuO4BlMtZ/qO0fm+d0rmm3uSnvnFiFvThdxB\nMSBp7krlCPRxV9iWAYIjadFxVcuSXoHlpauuALZ0LLlxs+sikiqhPcfzywWJ\netBwOtC2iidzpn1aMkaUepZ8S9jKiCs5Xj074O5EBKR6LnSLtSm0ou+YjRS+\nBcRz\r\n=qQuE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.fde2c1f9d.0","@material/theme":"8.0.0-canary.fde2c1f9d.0","@material/animation":"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-indicator_8.0.0-canary.fde2c1f9d.0_1595986486739_0.5478674532825811","host":"s3://npm-registry-packages"}},"8.0.0-canary.6b3876d5d.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.6b3876d5d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ec321c165ec43436462a76779948ebe863efc8d8","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.6b3876d5d.0.tgz","fileCount":38,"integrity":"sha512-P5sxrrcWLDa2xTwcdzk9Mzo+JICl6orXAXMfsgjHCAT3HWQ+QvRZ2MI+YbuQBfnNateUzm9lBjDztNxXI9M7sQ==","signatures":[{"sig":"MEYCIQCPWe2rJTQ4aJSMfVkvUrsuXL1jhLFWS1qAb6K3qw5TlQIhALn+LAuKoH+0SmFa28vBizlVIvfnT6Ar9Nj+hZrMHWtQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfINMbCRA9TVsSAnZWagAAl/QP/1avRYxVmk+lgla85rDN\n/bYlx/Y/pMtDe/O6uLeJQtwpgHtabUnJbX3nmxTp3hHKl0EQ1wchjwEu8Z+A\nwLQQQoTC53YdUT3MzCeb/6V6awPW59Kzcs7qPWkPczQrB6o/iAZ5ldmeXkV7\nqLCYv3TxGnFLgksVXET8yML1KPRPo8478lOu3lLVT2k+Gsn3lHZdmgqf9Mfy\nq9gz5wVAMeN1lDjRBfqUyX7KkLEtyqKL94qiOBN6ESMe+N7w487EVi+LmZhs\neOxnAXbWh1LuOjGjMdagsxWfh0cOvB906x028/vYA4Akc7CWRfTaOZYs1Nyh\nTgi7IZqUKCaSyro/Uo08x48tJJyE1nefLJq9D9o2XMIoAsioTV2Btb673aT+\ni3gEIDpa4EnSwjESo7W0n4InYgYApQuNjDz1RhwywQd3Ei3X02yq9lkHvCI4\nXR9xXAZV9bRM+96h91IdH1Vjtl/rU+NI1Aizoq3kefVJs+rU6dU7ABKQJwm4\nNASkx9tuRBr20gX/4kWYcnHhZhO+RNbPntmrlzVU1SkNJ7/SjDXNinbv5fAe\nfYVyDiq+fS6gpG3goyh1VeLKj4NJP1LAnYjeuuAL0xCqzzvGp48W8x+Tt2RH\nthHw8pawHGHcljLLtyUtMa81E6vJ6c5gBwPsntRuEPFJYnaO/U2p51Tn0WIF\nf8OA\r\n=wfDK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.6b3876d5d.0","@material/theme":"8.0.0-canary.6b3876d5d.0","@material/animation":"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-indicator_8.0.0-canary.6b3876d5d.0_1595986714990_0.3130303982971119","host":"s3://npm-registry-packages"}},"8.0.0-canary.30ce17873.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.30ce17873.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"651a52b86fc2cb02fd22d33d7feeea6e08acff74","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.30ce17873.0.tgz","fileCount":38,"integrity":"sha512-Bt1omWgUEzbOKh1RbiA34ic5RTPGjWnSLdKKnAOkCvsGDy4LADRGMQQ0XdNqxB33SWO2DSOLSlOxY2g2mwKBzg==","signatures":[{"sig":"MEYCIQCmi+IOuy2eM2Zr7uY3k0CoQSIljc6PThmKbMkWBtM2qgIhAP19TWpAWnUwUsUT3tcK9V2y2jEsIYk6QgwSJn0UqRtW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIa5/CRA9TVsSAnZWagAAGgYP/3RUzxexBz6tPX58UKhn\nsmNRUqDIxt/d3BmPmjCO4TjKtenshWbzodk38bwObi1zFZrcvgtbibjlA5wj\nGXKI9L85VJZvf9QxpLMVzDxd2gjdIsSHAhVUvz2VD5EfOgCgQTXR5JWIt/Hv\n0Yno+4pbmzFb6i+Xz0YZcpXC3SF7APX0Bf8kLrXoKYK8BCmLawzP4wPa0NS0\ndMr9v9xKNgiD79zrCbyxBdaJoOZ9ZY/BidzWMtxjGia66R3mDhuolz9tcvuM\nnfuOWFN7x6JVTJd5GYW9ehlXXBscfYFVyuFuNy/qCIxGwG10g80IriSp5vQ2\neO+59BcM0mvd4DTJKcp5hyPz13lpPV6KrJRIaQjZMt53JscZWvyINZ9GjXYB\nF1AdH7hr+HGSrQLXn2SbQjxZTCBVcK7Cpu/uu0lBw9tKjM0SqUVOdWKYiORM\nD8Bv5IaeZFdrMhbVAuzj6nD3+CRUjZd99AbEBsUMj+2gTdZ6JVLQg1Re8aJ5\nyzOTq06wU0lK1Z9TRGzAxSivjOeYyYyk5mBO3gShOs6L2iLmk52FhemRTX7P\nPAMA/Rss5kPkyaDN94dS16dJevXH9wTH9SCwikj/4IpdSCVpl2t+1OZirgwS\nORafbpNSQEf+FCZiYg3r8MSFJWDpN/9qcZ563RD8sXVwGkcD1HT8w4xzo/ZC\nGdeb\r\n=FOIz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.30ce17873.0","@material/theme":"8.0.0-canary.30ce17873.0","@material/animation":"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-indicator_8.0.0-canary.30ce17873.0_1596042878546_0.6511920030966882","host":"s3://npm-registry-packages"}},"8.0.0-canary.f6bb43bf0.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.f6bb43bf0.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"a44ffc91ed166945ba8f2a28a6999ee73f5a7b7b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.f6bb43bf0.0.tgz","fileCount":38,"integrity":"sha512-+/fH3kkZRwSFrmLPagkWkHquAb28dhhjiSpbVqo9PKkT3AcPrHfBczgToP2loDd4WcPbsKJumnryqjqlqsjWBg==","signatures":[{"sig":"MEYCIQCzRU8uFba7fJ98hmzb7KHzweiBlGwq7Rc81VkHnDrriQIhAOxxiY9AV0GNU8UyhHSmBWjMft8e4Dqu6UlKtH3l0wbj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIb8LCRA9TVsSAnZWagAA1zUP+gLkhSoFjywjhGm2CWnu\nMuPyFvcVt8CJdXPZ/9i/vNeXi/Z7+NeoS7BivG6kng4FOwCO41VRI/01ghQ8\nQ5m2Ht0VhkmyLeis88nRYIm3VafD2LeEvZ+VcgRGrUeTMMF21NKLoQpLLnYU\ngeYwidTe/SXu7k09JMR2QUrVrURJ8YUButTPuIqrxb/CneGvyLWnVXAroqUv\nMvjxz0eSIT0o6q9uzLSfFhEzgTEq9l2HIgrdkrZCmUxGChquLWdvD1ekPPQ8\nurXFl21CKsgLHiuRy1mqIhACxeHmVdXveHoOPOB9PDbUALPNmFwZlGaZPi43\nzG10gZOJnlim9aPLxg9toh+eqW3nVf+33rqdSxkL5ynw8Ngh0iuuAPDN4z03\ngpu79MlM4sLYvkCtk3P8p+cdwgrz/cAdU+G8qH3bA4Ol1rWdm1Ymhpejyile\niN+gEDf9JyMkiYhJOG3RHVir51TE2+dbkL2anQKnFI4LkL7eqxvI3bXL2rDX\nKU9MTbCq53dDASJnAX0TCye53ApMarwvc4d/LN9dwNl7PMZI2LhxX0rZx0Q+\nPrqkr/cCrNxsV6voGx6kePWCNasdJLFDyikKYxvHtr7y9scDXRnRrdAfgeUC\nPMFCkOy56AueMfW0PEZky65ICJdhQZOGBsV5mqMOOpcN21n+JivKzMgf1UQk\nwtDG\r\n=NIaX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.f6bb43bf0.0","@material/theme":"8.0.0-canary.f6bb43bf0.0","@material/animation":"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-indicator_8.0.0-canary.f6bb43bf0.0_1596047114738_0.10049879592355038","host":"s3://npm-registry-packages"}},"8.0.0-canary.6af75f6ab.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.6af75f6ab.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"851f08417a260d1b8a8b239f1571d653652dff9e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.6af75f6ab.0.tgz","fileCount":38,"integrity":"sha512-5he/HmhtLbczD9F9i3ZqrVtWMNNCIqe+PpttU+WOAKM32WvKjieR9p5ThqLTercSc/hL11Sbgd2gI0UPvL2m2g==","signatures":[{"sig":"MEYCIQCMmnml72ZwkaWzF1075TGsHBKvf1xYQJlIeFrAa3A9xQIhAOjMJ/SfEtl2GoZ4uyD/WjL2EmsZ6xusVkdAxzhwbKEn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIg3HCRA9TVsSAnZWagAAgS8P/AzV45yJKU4T+AZ9mJDP\na4o1FA05GRTQnoDj3a8Nwa3Va8O3xNCeDJfUSPUt0Spsu7RjWkGxeQiYfZH1\ndch65QQ1uOL97Bawz0keHNW8aQxgi5k7pgqU4R5GfTTkcSreeFk2WTT5FOEk\nrJoOXjOWEZWmNiGQh9WZfiyBnKo1lkrleayu0ZRyXVnZj80SNs5A5VO8UVJj\nP46zDHliQngUL9KHBbuCJVdENbuUXkvZgIyp1TOd8g+acEl4kV94C14HtCOP\nhzsBgPJ0L7VpFIPkBD0tZEXJydKraP0R+8z1eI0p+2B45l+sVQ6iC9RZAae7\n99VvjwpgSt7Yhc18U92RMKmaorIWBDFRaFRxdTVvIUXKn95npwXHo3KBJBIS\nYHnAxkfb/gnVTPU28sfp+qn0bRMy5Y6VfhTmSXcSJ/7SvlLeTdFrgBWXXxOq\n4+cLPcIXsN7U4XLskvNnN7pBhwSi9xmsCpPc2DuNlZirAx9gyAn6pir7OOAM\n4DhKhm9/mp2CfCD1kGPxhM1rJkyH53NIxi8hqdsrKRlNDi3YdnO8TLWT+hRf\nAGj2P0+C8C7dSyb09+nNpelTd/ejagXqyeaHg5A05cGO4y99vgVhctlSnRsp\nJ7w6+xeMHi/vAb/q/hI6LPpoxsA9bfdlmzrHhOZttXmSPfXtYYyyMp4NGiCo\nzdfD\r\n=cxZh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.6af75f6ab.0","@material/theme":"8.0.0-canary.6af75f6ab.0","@material/animation":"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-indicator_8.0.0-canary.6af75f6ab.0_1596067270869_0.01798794862525166","host":"s3://npm-registry-packages"}},"8.0.0-canary.42d7a65aa.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.42d7a65aa.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"8b69f646272e372ce85bb5e00597808f18708525","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.42d7a65aa.0.tgz","fileCount":38,"integrity":"sha512-OQu/1MMIlOXSq5AeGEQf1tDFAYzuBlxYvga8QzbBblpKTqPHx09rwGjUdxsmvCqxRzqF74biSjdaKyYaLteQnA==","signatures":[{"sig":"MEYCIQCfnUslaLLC7aevxixWSkDYNZjd3oIh94Qb32viNyZFEwIhAJf8ljDYLxZcVvJHKRriTzqmQictdHNmRZYI+FuNoD+E","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIg/iCRA9TVsSAnZWagAAqzwP/3O87Knoqw4liN2ipZV9\nwISffKIdMN0/Z1+gCKpq8j9/8fy0BujtUQhS2m9toxfPvjnAInxj87x2lM8i\nlxriWaBhu0GIsTdbe9PqWoBv/Qhb93R/YFgA4581gMVuvS9kih3/mDEINsxV\nogTLkXprmxcQ53kEsg90kqoxUdDchxYSChpCMn+v+qhtHqs3N+VirT4OeKd0\nswa3AE29LQi4C0BjBuLMVx7EPLxdvfhL24xqgWD/4J11C9I17fWS4q3RX0ca\n6NRPzW6/Kt5u2ESr3P/E1e9/UJU7N2qZV6eGrMe2zoxrE+VF4Hy03ttijGL/\nARSRkvO6ndC9lWiPV7bZvx50kBlUFo2fSXkroxO2S/bnyLLKJrfnHiLF/u4X\nJrwm+nkvPKYWcLjB4HzBjLMnImAd1tsF207Gbz7325tqzhuKQCawToxMcKUe\naS5fZ5mXNBvvcnvcAjDWupph5dVJILatEHvCokgoZwypDNnVnc0fIyYiajBh\nEPV8olKQ2CKWP6NoEaqs3r9OmUPwTPOLMdmWef50wCjSdgif96tQfoTgEKZT\nRrjM73O+uFJTDRG7QlJoiec2oOEc6Z7kmE8xuiS1oEQjPsiSU+Cbt5l6OShq\n3PtCO1/a9wjxm5qPR4VQTH4is6J5OwHQLwr4l84EyTyYAALlj84B/aIlOzUz\nUpkB\r\n=/mY+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.42d7a65aa.0","@material/theme":"8.0.0-canary.42d7a65aa.0","@material/animation":"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-indicator_8.0.0-canary.42d7a65aa.0_1596067810355_0.6469686762106641","host":"s3://npm-registry-packages"}},"8.0.0-canary.85abdabb7.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.85abdabb7.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"7f08b05be9610a366e8f507d1822315a1bd7f52f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.85abdabb7.0.tgz","fileCount":38,"integrity":"sha512-2ueajqR8uoj11oH7iYmTroFsXZN0O9FBTwBPJKAiGE/bNRP1IbR0cXCo7Bel4Xvun5R62k30y0VFtNwDr7SLXw==","signatures":[{"sig":"MEUCIEZIJyjOGvLzxygHFtgEtw3GiN7vV9VSgukxrjq0OYq0AiEA6rJAaOqIq3KqTlhG/whxQq69VY62ry4CfdevlN286F4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIhENCRA9TVsSAnZWagAA0tQP/RNmAX6CXttAfpoOCbal\nOYhAp7eHEUkH9pux9OM/7tZozGnGzsoYJjzWaThEWVkEQeHI5UCizod1kUFp\nr4AhvhuSTWycGQr89FvfBhcex09Z1H2TxFeoMVTZUl/E2ngMkyZBmp+tcUpt\n71he9W+M3Nt7/PB1Xg5518Nbmv6Sku+a/2XSZISpqHcRUkf0sCR62TxD+yfJ\nFuHN5cwj8kjJncb3bGiTwPRVrvz3/AkJQKGk+6RVlJy7Jf5f/nYHUGkrTrgI\nLe0eiYMyqv2cMpIktmi9cSQCMj5dNzzsQpWGqTjoX075JQCt2+C/ntoaCRGH\na4ZLxozMHxFWSx8IiuYQERh0Bjq7JiPcYdydHRpbKTxBTvwoh/+QB2S1CMGw\nVIhH1JwkGp/aBwbkzAK08mRJVES8GtKoAwv31pC5KDMxUo6CaNBDM3hIwjP+\n2ciAbkC07+n4VsENccEZ31r2UGWldmake0CirPkXPuIyWU8oEqAREKEPpn2Q\noJfLQOPphAeQ2IyapIpdrpMmIttyXItGgfoCmanX1uUoWsHVrOBGIX+ol/Ll\nZMzLsvgnTjPxYflx37CKXhwv3UIsSioxwbQzopR3xrR6CY6c7RNsIvijfmbG\nPZv0TvUr2MXx81QW8xlfFFbPNZit39CI4Frd7T59rx7PhOBBFUe7QhLO1R6a\nTBHF\r\n=7Ehj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.85abdabb7.0","@material/theme":"8.0.0-canary.85abdabb7.0","@material/animation":"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-indicator_8.0.0-canary.85abdabb7.0_1596068109009_0.780904196532388","host":"s3://npm-registry-packages"}},"8.0.0-canary.49fb20ca3.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.49fb20ca3.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"cf7c32065eec89b7ab9bd8d0f55dcaeeca9b32b6","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.49fb20ca3.0.tgz","fileCount":38,"integrity":"sha512-DYRzQYa1/rWDo9k7WU8onC804lp0WIQBWjgErb6DGI+RNDWer12OVR5aqTLE5a8QrZzb0CVYYaTGoTL6g932pQ==","signatures":[{"sig":"MEQCIACVNtn9nWzqAxbf7e5bF2F4UbM4P3zba5VbZHGXno/DAiAND2JAG7NdFUfOc+pXY5m2qxh0gNxERYgOT/cql4zfGg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIiIACRA9TVsSAnZWagAANYEQAIQ+n0RBUMM1GgoyIeBN\nft/uQnlEO9RHx+D/DJVuVj9s8/CSQkPwoWiLcoLMYEZFibqHAU66zQtBbaq2\n0TF1Gl/EUDiVw9ZK52jBfwnLVBaqXvFK2WcXeQ+Z5agKLIkXed5FlaFg4B0o\nZYNknnpXodBFp1iU9Xyoruvqo31GoFe2VZroqMeQcDdoGlzu/NIEkXNpjwXU\n0w+W42DDhiX4wa7M6Xj0zGTIZ2Rxm1p2Pm0vkftMfRqOIdVorSjT9PK9gmoO\n8vzIk1pSpJAPJXgqTdAZ5hkhgXhprbMIFpbnNEh6zZHYkCeHJcZNYezYwiKs\nK8KQSYk51FAtBhjICEQIc1ZuxlJq7xVGKnTuY6ghuxPF5piWBiijxSOWytjo\npK9i+i/hXruEhYgZsoCBUzGlV8FTmLR61QWpvHVjFKtgn7d96z7K9ztb+t9P\nCfhGmQcN78l6pWwdT/Jg/zE9IOpEQKQcvbpNocO4sRMzzVgqjV/5byaQXEjP\n+lgLj0iBMdcN0Ijchhs2vm26V+LRqIV4NNlxtK3ylm0wqC/9rnc93th95zd+\nifUDqHF70s24eHyrRkr6I3/Dg1oAxvmw6YQsH4HsFEddTzz3kL3RlqHT2CVl\nTSA9pnWp0ZVQvub/yMiypV4rCMJXqe6kn7XmEJlwYR16WHEUlnMJ9x65LWHJ\nbUb7\r\n=kLt7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.49fb20ca3.0","@material/theme":"8.0.0-canary.49fb20ca3.0","@material/animation":"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-indicator_8.0.0-canary.49fb20ca3.0_1596072447667_0.9589756367360587","host":"s3://npm-registry-packages"}},"8.0.0-canary.962d4abbb.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.962d4abbb.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"daa8683730245134b8e97c7ec44fa2eeadaf7933","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.962d4abbb.0.tgz","fileCount":38,"integrity":"sha512-soIu2n8o0P/xYSdMRFLfhMFBeeRCwHV4QSvborXmdPPixGh5UH6PwMe9gYLW3iumu3zYyqOf7pufggRsKODTGQ==","signatures":[{"sig":"MEQCIAszJuEiLOdOn0C48YakUlFFlYVDs/TM/BqmH5nBum4+AiAKebjJy9WnI8fqLFDtu5WgBmmDlXN1TeDPG8hPu+SAgw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIvDbCRA9TVsSAnZWagAA0VMP/iD6njpqKv2F1mOQc62d\n/c5h1c4YVAOv/NcDVKRyjS63OYQH7LMrEzZWnsFC+CPGJnWrD/OvZuaMLXZe\ns2vnfkohZMCgzqz7Y9ndqoC4OWxKHr5CVOorjoP//VD9e+/ZTl8jbLax0lHT\nwVD5FU/fR3nHvnGuA+UtQ8Y5oUepq6WrCK1CnzxdtQmSiC6Wn6tySAbWzMhM\nNSy/D8YmWG2SsymAViF/4bQUtuF6EVj/cKfv9g2AQFBezVkuH8DEvFiwT+Us\nF3VFmlywNKqUFwh+gF/FBGzFWAzzoSsQLDMhMf7hV2VaTyLWdb4EAeTn/jVF\nKWjxaV3IRSNhVLpTHF8VGYElEDPKC3Q+cdfFAkBtB2kQFC+5a26BH5S6EczV\n+9QRkNN85mx2uksTdpwTq+S77zUNVsprQlHtdHJOmoi73TpMmkYXEqHZP9G7\neIgnBKmY6VvLJ8mJf5muWHSl7wcd6Bypm+blPujRZaWz3/U7E/V8euJK+GYE\nX0VLMj3rLWd2UTvwf4xhlKC81RJwUtnEXiPCsOztFsSLwxwCLoyZBYT5LHWv\nCXujfJYyTE3br4iGdZvcr26F1Y6h08i3fdBXpr+ouOr2KeyIg3SbBot4XtWQ\ncD0yAMpjyIkSJOPqAnqOsHcK1IG0v0wrpHMkRXFoeQByuDagMJswbNwhHQks\ntM+3\r\n=2IE2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.962d4abbb.0","@material/theme":"8.0.0-canary.962d4abbb.0","@material/animation":"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-indicator_8.0.0-canary.962d4abbb.0_1596125403239_0.3920686232323942","host":"s3://npm-registry-packages"}},"8.0.0-canary.2fcee40cb.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.2fcee40cb.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"6af9deee646c20d264ace2674e011d6fd7479fc2","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.2fcee40cb.0.tgz","fileCount":38,"integrity":"sha512-aI1VSTL/w7IiIzrONq4VZbobxSs39XwUkYJaEgdzr71fXFLYUHrQ20MHrOPTPnQo8t0UaUoV+PDqMICMGmhLiQ==","signatures":[{"sig":"MEYCIQC/AdlqgX74KYIJzgwMs8IahS1EYM+2xAnLGPirHKGAKQIhAIHkRz0N6YdqEqbmpRLesT+piYZ33aRNBbnDh9YKKzR9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwGQCRA9TVsSAnZWagAAt4MP/1dns6he8urK7CTFaNUi\nxExGLGwNFwqvfxbhD6SS3Poy3u6qVTuQutcqhRi4YupUO27PUv7vys84adca\n6EYCNArwJqOUO5tHVqWZmULs9UDoeq0nYcWWNB5/9/p1A14buxEAv6dtkAua\njrMudSpISbmCrBa0Wus99JAx2E1mLKV6i2sYcYI60KheqEnSb3mV3qDDC3Pa\nlYpMR1InNw8rfX3ipN1MOuCxpIdQryt7vbxcfijEdR3xoByGRjU9J9u3jYgS\nThMAHyiOFyI9sGRTEiUS4YcPjdkNwjPs9xpLIBhqa6K2Xw8Q4cekOgIUWJxv\nt0dAmdrVmv3t0gADpIM8Z78rBqEU3//3YVrgGVdnq+kh8/fUyJ9PU6RWefT2\nsiLvvVH454efswHt5TlMllWkmpIDyH6dUGjfcLhUAi7UY0yTjjR1iuLM7WME\nn6z6o3ujDMZ96z81h7PhZBO8Iwg9Cyp4HOtc+b+P7w+e8/iaTT5VGtrz3a0G\nSoTXfPatkwMFhWoCIMYxKyOKkdL9U1f+jFEwc8uxMaU/54jy+7Nr7YO3Vlct\n4t8VDFk6MiGdS7M2gEj0CPDDrmrE775L4tvlqUHQC/H6ef3tIbcmZRTmb73i\nCxB0bIuVyPw3I4nKxqoyP/nR4B98mvpiHwUi/N66LznvHbmwQHFgDSNccrxg\nou4o\r\n=s1nR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.2fcee40cb.0","@material/theme":"8.0.0-canary.2fcee40cb.0","@material/animation":"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-indicator_8.0.0-canary.2fcee40cb.0_1596129680159_0.5500585630571406","host":"s3://npm-registry-packages"}},"8.0.0-canary.bd5987f5a.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.bd5987f5a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"5cc30db6315a8b61151fa95c7681de4af14c6791","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.bd5987f5a.0.tgz","fileCount":38,"integrity":"sha512-ukH72mzvd3XRa4ipGGhAFkXIXJ0f/xORrBNcXLp2BY2GeRmOA5ZRGYxI/eMyvrlTEv6jm1i1jJKdWJRCQSUk4A==","signatures":[{"sig":"MEUCIDPKPBJIAi/iqH/lGoamuPP9Uwg6ZwVxz/F8ZgllMUQbAiEA3m9+DornTiIhOm6y1jKyxkeFcZATmgw8v/EtAqlvnGM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwdXCRA9TVsSAnZWagAAO0gP/i0KAS0GPCGg3tViSIVU\naBqZyLCFGK3IiPQn+5yQbICkmf2p65KW/hYZ2OBI307dlbwbdMsTNWHS5KVd\n4d0qbzBoSiAY7TfPMSfMqIq+6ogx0l+/wSwf1rxS8iDJQ3OCWY8ulgZOIYey\nwB1w9XFUlP30+KJU7FQj7Y2DGcf19kLi+8WEhz8UH8OnxEN2xpM/rnfeyUjU\nT1Wks3ZAwIFTxnrvylZ+O76jF2sBqbuhYFzyWzyiLDZRvvi9p1z9r6RsHqXG\nlTf4b7IekN8D4g0g8zK41WS9OTBt1dickt8WzKWyLR05yutPqidR+TcbjNSr\ndbbu1Rn8642Vt+d5qiWZ2oQA0RVwDTn6dMCu7lZvJcCh3mIGk8Bngc5Z3w23\n4OKODQ5S6OMKwAPY73tyauCgCg8lknj9gzwY50eM/gOV5HVELd4tEpqazNnW\nodKI2ZV08ZQclVffll4AothLBmVUjqx95eQYPvSXZmOBvnohoQw3vWleXDhC\nGsOndmjtheFZN3xJgjQmo6adzyzruKb2781qvBXBjZS8zyUot39F1BChivmI\nS0MQJo8eHc93qDK/5P7xF+WWkh1bDrmPsjxjzSL75le/6XVk4zIYEuondaFI\n5knzlXNbIJsMF6klu4bjG3OAzD3926RQKKcVhoEjY1JmrZKT7XpeQ269/Vxz\nJ2lO\r\n=yHSn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.bd5987f5a.0","@material/theme":"8.0.0-canary.bd5987f5a.0","@material/animation":"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-indicator_8.0.0-canary.bd5987f5a.0_1596131159126_0.98997075278659","host":"s3://npm-registry-packages"}},"8.0.0-canary.005e86a9b.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.005e86a9b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0719ec317e58e2cbfb8706f37ea9168066c3d8c4","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.005e86a9b.0.tgz","fileCount":38,"integrity":"sha512-QTbsx0vFpEnq1yp4vBn1HU+d5myobbOxT1W7OKYNCIefgjEcIz0yX7n6UEO8OXaDcxTZ8LoWKGqxK3kbWd+5Rg==","signatures":[{"sig":"MEQCIBwGkVKSSzafuw8zzhPZ8iHmXxRq8GVIXc2ZzKgG4RIhAiBGtWJK3+5/Xa10Xk52cCBHEUEstP9Ayv1IbItoULo7jQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwqPCRA9TVsSAnZWagAAa2kP/i/+71426/B5pUANe8Xa\n4uep8HWWo5PlQkx3MMSfq3LSV63glg8Hqid+hQOrVqJ8trmvy50sQYpjRVyQ\nx2gN3jETthqdn/BuWwuh84jYffjcjmaKmPmjCPRvG1ENKcpI+DqjKxlD8NRk\npskKvyAnQ74mDXyNdiZ80fc4kTQOqHNwGI4Y7RS/NDowtihrByF5EVRY5XYF\nkEr6XrYr40iqqx+ZhK2pQnAwa6J8aCitKVuaDWr2LUtjvjtmN5u7ih4cXL1T\n3AKOVUhdsYT+aC76LCU9RelgoucpVFmw8lj61gP3jGfglv3u9SDDP6dKPkEB\ndl2SBdG5PSzdpLWvCM++RIJsXatESblSg0D4U79bBC+D6zNEzwmGotgIFH7y\nrdrv6fjQQ/Ozc4+Dd9Mg9xAe0i8SR5J+RcvxYidt9llNvozdZG0GSwNdoMUx\nJqDk+sMnsrbwVkrOWAQYxYw6WQzHbphx2xl5KpF5d7TDO5mH3AiBtjQM57HE\nkK/+9Grn62wZMUH0vhp8g76aOC8ZwOqyP2VRLh++WDPlzM2QWThs0ACEVYqX\nuW9U1cILrL4NBQzyK9JAPqy6wfCHHX6LElW/JpxRlzwf6l4aLwX2Es/reCph\nqx3tt9+46xeQvvaKD4eiVx5bptEhN6OYJQk1j85PcakKZDpQRErLOfZXM3da\n1LN7\r\n=CnEW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.005e86a9b.0","@material/theme":"8.0.0-canary.005e86a9b.0","@material/animation":"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-indicator_8.0.0-canary.005e86a9b.0_1596131983289_0.5451895424746311","host":"s3://npm-registry-packages"}},"8.0.0-canary.e309c7c68.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.e309c7c68.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"6ac106cdb075998644058bc5160f24e1de991ddc","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.e309c7c68.0.tgz","fileCount":38,"integrity":"sha512-q+eFkgCtCSP8XL02xumxYgyQHviDH6R1ogzaGG0Qbq/eLdjZJ7g+1VY7F3ba18P/2wNcM8ff0RW+UBBkRlzafw==","signatures":[{"sig":"MEYCIQDAGx0H+rs+Xd/BiSSVlBVzFrOVyAKu9GOW2CVPG/GQqgIhAJS9mMDVPd3J57P/6Wplbzvid2UGdLtUB1K1Nzzf6rIF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwyiCRA9TVsSAnZWagAA7sUP/3s3AGqum1WP+XqWbkyf\nAOsZLWNu20kcqs0dEbWKLqDeuudRa5Ee9isRARgsV0N5eeNXSAzxjhfHGWc1\nxEiVJW4vdMaxuSG1S8LUMmd49Z3XwwkU80hxcBE1lniRh8+YUIiO6i5qtfSj\n5lp0r0yUxGvq+j0vI9dYcJHqfo3yu20zqHV4UQYrChrHWKNebnBITi3ladFG\nI3U4lZpNsr9RI+oasS6zUktm7ahxgeMqqRJHpeTsCPAtYEy0pTJgxLsRPBJm\nuqxjCByGVndNjBcDI+LP2j6sjgZ0bUk8cUmvXXC5tve7m/n467Wps7V2lLAS\nmNCraB9YZVU5S2N5OT36Ld7aamYs+tqhIiQt1rQOfOo13FJXpHcSgUMsF4kh\nagKXzlafKTO0bEBbkHtERruNTbv+vXqb+VCiJXl/LuHGsnvvunqZF6sB9Pwy\nWHv5HUe0hUm2ISQLSVJ8B1RxQ6n4qD0CuuqB+fmmc5EFA2oD/xmE1Pp+xeH8\nEaMvQIMhkY6fp2Jwm5Rxqox8Q/ZDNu/6gYjaTq0E5qykj4SIpDuxZ9Jgqvbb\nSmurryG1GpR1wq78qOj9+IkXLQ9ba1jJ6r+LALfO8my+75VMsjw62JJ7tO6k\nS3sAB+6rwL9SzWh6ueg3NsqPQXqcDN8qlwhr+HV3KogkgZ+9CKgqRIdgS1s0\nG6c6\r\n=pBrf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.e309c7c68.0","@material/theme":"8.0.0-canary.e309c7c68.0","@material/animation":"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-indicator_8.0.0-canary.e309c7c68.0_1596132514123_0.27834974903072585","host":"s3://npm-registry-packages"}},"8.0.0-canary.935a51cc0.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.935a51cc0.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"4f7a8978c871134178b8c825a6a337c8e9cea22e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.935a51cc0.0.tgz","fileCount":38,"integrity":"sha512-dgwtvtxhIWBFneY1FExFKArD2MD/b1W3NrCyNex+uJxLtkDQo4LRa4YOb7+nIRPxvdCv0zjOSALtOF5tvjutrg==","signatures":[{"sig":"MEUCICi6KOtp+4j6CzikKkInRrZBeqjsVr97pa0fLk9TgxB9AiEA0NzF4zQ60HxhjKUKH3+ggwVlleLtKaNaLdnfElEyzfw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIw9dCRA9TVsSAnZWagAAu28P/A432XrvRiFp9MeSb4+v\nM62n/MaoDzBTrlJYpTVXor+muNWsKO/hcIC9IfygsM0YfTcWIjxpkpYIpUNV\nB+RNYhxFg5C2yNMMVy9g25y9bwTHXNhOyzdr00xF+GXw1MzPmwb2eCX6Dssu\nTrFa2EoIrzws5RYBOwMXl7LusZmSzdRAiEaAUVnb+jFYvG6tXXKQZfGPPIZP\nf6BeJ3HrrYVIphXPWUwbcUeolHjzrbnoLO/9wUgVxYi1EoSzCX8B/Gc9NvuY\na0S/u4UXAfSqkHZ4+BZuMnNWoDDUfKwNA0tyogeGhSbRLxmVWsLrIEVjUXXV\nUP3W9tNwIBa8ow+1/RxH4wxipvAGfc2XUBxrjN2PtIkG/YnuomF91jxn22pr\n6WT49IYuFmxh2T9QT6YXnMuMEDtsbJ9lvddO90E4ugGJ2Ck+d0TgxxyO7i0S\nVqgeFx0/R8EZPlymUUUNhv0wkbT62W/s/UwmV/bWEj/DLQz3MhQpCNpHACOW\n/SnhrosTKMyBUjJUAwag9+dSarYXGD+1cTTMHO1THOczTBvvTLbsrjN5tNbs\nAA1Ugl6JoAW22w7BN9BK8jabJPhN26A6vOK1cOoKxcvjNuZp9so8rT0G2eNW\nPZgMJ+uGI1K0FdiknO3WqzPPoktIT9QKvcZNgcYiNTOpbnMEZTphci0w4nl6\npgOh\r\n=1H9J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.935a51cc0.0","@material/theme":"8.0.0-canary.935a51cc0.0","@material/animation":"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-indicator_8.0.0-canary.935a51cc0.0_1596133212906_0.3251662470970087","host":"s3://npm-registry-packages"}},"8.0.0-canary.74839da7b.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.74839da7b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"950934b51a978a49e5b983a849f12b32aae0356a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.74839da7b.0.tgz","fileCount":38,"integrity":"sha512-YRyqQ/uXRXVvR3021Iy/Jr3CQiZRbfEBdMIJ8GCz2BOE11OSNAR4HxUeiVdzE3lB4Vt3nOIjyzy0cMcb+ZOPGw==","signatures":[{"sig":"MEYCIQDHEKEyt9T/9cbK4pSdRVEVs1l/VQnG2WTlu4Io3No+1AIhAPnGXo4fhcJ0nA5zoMDCFyiahW92CzDjya0FznqlY31h","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIxHsCRA9TVsSAnZWagAAiTEP/1tr6wGf+k1I52kSjGMZ\nPoViFf14rUgTNoDadglY2epFgC1aGfXtiWIMLJi5LyJ92hDLyWkydje5eEwR\nbC/lQKhW7WRFQJoMNdGHKjJ+BDxBPwGhXLXdYGVq6QQZGPFvZ8IusxA2WGky\n9dI9KCZkmFG5tc3xdflqkdgqkHVncNHFaH4Cqck+xEIhKHHsOGSWZlPCWQuz\nJOr5fpvN/jy9Olj22gyYlfZmRkKt8AaxnSpoG1AsB0ut3JJdDaYHuyBu7WiD\n3/vbI0KX7Ke25r9qUwn3uy6PYt953ViaRuZJBU24Un0Zgc9rMBLoPBVLUoUc\nZN+8Rc1oZ1i0be5MqVFsNBGg153plhWxJITjRJwCGrzS/9nbps4BQwUz947s\nS7z/U/tT9LXtOrLB/HydqzKaOKokhGgR9stBfer0fQgyarvmiZuqYpiz/YPM\napFa0vdg6S9XF+9iO3Z1VUaXRqRDKr9EpzreGtDuVh0Hizko/SqiwdslLZII\naQCCwkIlrT5rClsLnuqKY18lgWLL/4eGGgSy4eNsOzHO1DG1pDwKqzhbpVcD\nYgT16dNeid5gdLzyFzORxBlUWEOHl4icNaeBmswInHjinVLGv1L6V8FnR1DK\nZL1NTucsNcNXgAOZWEV7+UG7kIc9Hfbv1PhBX0Oq/+x3xaC8Wl2XEAbu6tUW\nn9Et\r\n=izKO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.74839da7b.0","@material/theme":"8.0.0-canary.74839da7b.0","@material/animation":"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-indicator_8.0.0-canary.74839da7b.0_1596133867703_0.5010969492533597","host":"s3://npm-registry-packages"}},"8.0.0-canary.f041a48c9.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.f041a48c9.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c60f2e68373825fbc55a6e42df4e99aaa7305fa7","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.f041a48c9.0.tgz","fileCount":38,"integrity":"sha512-igBngjmyLu30HuMl+plQM8VdZtExqmQzy8URCF5U7E7TDRP5EhkUFJP+e9NEH2NX6KymAY1kVNGYFDdy2Vucxg==","signatures":[{"sig":"MEQCIAHkJnGIP55PdHWUQ9UGH2zXuvo3Rktw5/OsAMlpL9YKAiAzynCT/pIsATpLlJJQCofxAIV5JV+atM1Pz3gS76tUnQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI1DJCRA9TVsSAnZWagAAiAYP/0RUxM7/n6DR6ctSdzga\nLhjMX/QDytWOuEMAt9hTevpBUb3RHSj76HkPY2AneTKBT7n8IXafwrcGBhIx\nGJA88AWtn0l9w86lfAp0N0L1885BnwO50H2bE/wH5eDSNI51EO++mSJuTGQq\nAR0BGfGHSecko7lY90DaU/6AvByg5SHX+cRQ/iHw+CJQm8F8X03QHgfJIkg0\nk9JGqhmQxpUY///tE2aFrT06wLBv0lQ3JNZ0xhfVClLDYVzltspBB0WZWFZ0\nUI3chhIyfj4/6zdhlRQQ11Fd2wQDQjmPuLafcdncUs0JJJ8M3q9/UwHG2dWX\nDIsq9MaS2HQwnFqT6VWG8DXcVoD1+wWKdz/Wtp1gGNb6QsDg6qREUCUhZvV6\nB0VlT1gS8HmMZhCuww8wCltskT7qnzct6ZjLTK+fF8RFld+b/CjuP2EBwZb2\nGBzXaHe8UqqmFnAZSH/pRO8/Uh5Bclp7z5zz8oDkV0kG/OidDoMbrZ3NFCec\nbMR4NzT5iUk0H6yFe70/RBCN7JzpkmJp7qbwHUXJnvApT0NRZMYTMGDRhnkj\nQqGCcsOSCsA7ILqfxw/A32yuwZjP+RagOB+n5VRuHwWBdkIFDg0uaC2m7c5L\nTUU8rv/OCibc8+qmKloFcy3TfciMeTBaYLyhOnVkMIfI4+iGdDuYqFnbbb71\nHhIz\r\n=/TS8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.f041a48c9.0","@material/theme":"8.0.0-canary.f041a48c9.0","@material/animation":"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-indicator_8.0.0-canary.f041a48c9.0_1596149960734_0.3663192113027265","host":"s3://npm-registry-packages"}},"8.0.0-canary.fbb1381e1.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.fbb1381e1.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"5b5428e9fc34432ea30719c68662c2d1c99516fe","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.fbb1381e1.0.tgz","fileCount":38,"integrity":"sha512-WegRNoZFclvk3N+xTVde6O3ZzEM1+vAD/GTITi0ZapFJLi2T9Vg27uex4ECCXCVDrZ4kzY8r1Lxt1ARsVyStmA==","signatures":[{"sig":"MEQCIFReGy1elfYru3mpFiRDVpxvHDDVaS68k1gnng3a3IFjAiBUSPCHG7iAhasEm+NJHcIxFVe1hCye/QBv9pxWbp71ug==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJD25CRA9TVsSAnZWagAASv4P/3q+guAQg55LeAAwOGDa\nY6WUY5JhDtmZOTGzznjIz5FAtojH6wiH2okO1/N3lxFpPd/QLD9/UtVYXkjJ\n+Hs7MquyaZnM7rnA/SOJqRK9hLneUIFtacwkbeho/MsulMIOjlNiUD2wJMMw\ngUryzNKXIJeFGyOP+JzW3kgY5mW/Fc3Tf8RTdwRXpa0h89ZjtoGmou56Fofa\npBif84B57tdlvOPOVOnyyNAuoyA8hL4OjR2jvmcNMsq6T2fAFrIOkqcKmIWl\nFdpe/IIgrxLW9DqGtON52oK9Sayw4wl1q+6vfosHWHnEdoR1Nde4c2E1cVqG\nktEjnC2ca8BWTBxQ5/SDtN7z1vdtgDTC/H07cWojr1HSSDJL0D+bcGoA7O2I\nIwQdUI4K/BjN1sxx6Fn5IvaQBRs9ymRPDoG81hUGdMZFoR1caZUt7kVVugqY\nyqScNMBffwOYjIERy6P4q5tlirHzjyUdNhU9l7gfL5WVtiNO8s6AtK+KAjOh\nLiVMRDEmdlOW8tEHgkqE+bk0JwY5eN/hG8BnrfZwA5vBzZyKrsWuoeUxkGea\nmKn77/oQoax33a9DqqcqXky3ksWDzXCcPyYkHwBSQNRNZudGAuGmGKRM3IH3\nEVbG6/jAoD7H7h7I8PufiYeLRifmxB2FzVa66PlOUOUPedMtrNw/HwyMkZz8\nK5Xd\r\n=tu9f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.fbb1381e1.0","@material/theme":"8.0.0-canary.fbb1381e1.0","@material/animation":"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-indicator_8.0.0-canary.fbb1381e1.0_1596210616111_0.742693587320923","host":"s3://npm-registry-packages"}},"8.0.0-canary.7f61d5785.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.7f61d5785.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"8c680960ea0a56343693e2f459a2e460fdfcc266","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.7f61d5785.0.tgz","fileCount":38,"integrity":"sha512-tJoup9vpIg5r5x0va0B3xC5Iqn5QVbN3+YDiwHzsBCw08sVx1fB9HN0eQkFRnKcQI3xCHqpKY0Ttuxzt4ECytg==","signatures":[{"sig":"MEUCIQDvV+Ly9n00wlVibkL6fG7W9vy//vaHEqrqS9ffATk4RwIgRDofHf4T/DFyH4zbVBhjBfSf8U3yUvP37ncW3cE0UcI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJFNsCRA9TVsSAnZWagAAhyUP/3VEDGSKXMHjoyT+6Vod\nB/PfKPL5adg7757FyFeOeXmjEb1zs3HmWLaMlKld/HKORJRmM32ALJCLE5yj\nbXtyN5rPRW20d4huF8Nx8IDaUVpaKfkaw1E4R/vPHxogmjRo2wynrBpwc6pP\nOp+JAE2OeO1xj+1dD4yvdFmtjBxwhJz4PuoVzJJA5/pQMUUmowouCfvDCGFt\ncYh7A0wXciTESulfltRgAuOtvedOGdsDfKMzVgzNSIh30Y5LLRUTzzlwZa8p\np2hzailmlr2PkXf5FwBn9yGzvktSOziFoyrirMx/5IpVtSQ1MMUheN4PsLOc\nPGkqDPyn4noxXG3hKmB8QEWYBBDX/GaUq/Dk9+KMm9mcrkmytmYdtOunx+pq\nNYMlIsEnqk5IvvozNuWXpROUZDa53iLoZuf9KPbYZqm/LRw5js5qBXvxZUwG\n+ibpGL2recetlmdEFvTK3UpGjuuRsF2CDHc2AGRSb3TP72xS4vXPpbdPAx51\nF2YvU8s+Sem3R8nJo6zOk4xw+NufWWPsCKP7BlaYNDQHlk+1omfGjK7qSOjt\nc+yAwT80QkGws/K2rrJz30ES+LYc61aJ262Zo9qSQUrSB2STsrKhsKSBf0Kb\n/8LAfhRXnedp9AnycJWX7IZ4YxOkSqVoo7hEw0W9mUn6PDqcsseto6QTC0pG\njRIx\r\n=zRTQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.7f61d5785.0","@material/theme":"8.0.0-canary.7f61d5785.0","@material/animation":"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-indicator_8.0.0-canary.7f61d5785.0_1596216172585_0.839558627022357","host":"s3://npm-registry-packages"}},"8.0.0-canary.e1bc84d10.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.e1bc84d10.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"20766429360213108625a88db94c0edf811e3b75","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.e1bc84d10.0.tgz","fileCount":38,"integrity":"sha512-gSZU2gOI4M6AQnRoNjJGxz7TTjRQzYT8/Dvpm9OYvlUOuvDYGaOZIiZ1Q4TCORWadeWw3mEHkwW3Kv/LFPoaoQ==","signatures":[{"sig":"MEUCIQDHWkz4IvYojX9vR+IX5BYeYx0/CaC8Jw6C4xEep4nIVQIgejdTp43bOgaOIZ0ebwr4sGy9+1aOJtEb5dccGHKiPs0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE5tCRA9TVsSAnZWagAAmyQP/RrrgzC7l3/l8NouZoIk\nst+FBTQi14INLFvbKEM/KN3HU1E+sX38paA9RcLm4yD3to9J3xVvIANOD7WI\n59mzM41pb77YBKtoOePJhKV4VD07ecGTwge9cY89joxc4stZXW9ZWMY7501C\nQ/vJjHYm0TO7Ia0EDDz6AeKyAwzze+7RxITVvYXb8ZwCk35PRZoXk24L776d\nF/8V2QAyH56BETlVeXzHDpuNSXWaghVV5EQAOlt7Y+RsJqFw+hUfFxTGZZMv\n/QiM7J6HvucRKo5tZNBtSHflDcLRIS5L8IJH46bW3QQPB4jsBSTZYD8xhqtV\nIQgS8DPI4uXPH83YLOBydphIteBY3o6AalJbnLTKRr2hTIr3awCJPLfAaqA2\n8dUuPStuxgt/fojdkavObHxz7A4337gAsWuqwmk+1/SNZRPeNGPlP1txoZ06\nyAFU7DrEurffedQnJ1eGb+EdfKHWn7c74NjUkaVMnx2YeapMjpTWl0hMJ8Uv\npDtf12jrt52aSA0u7Z9SIxWrv9kK0OKw6SG0i/MVDtmlpfBU1jOlTvQh0HMb\nTRMqVLk52cC/VURXOsVG4SD/pAKNS//j5FSbxkXF/+iPDAwu8e9nTKPumxQU\n2c4MWwaO4cOCwaSR1w89WWLQ1ICe0+E+bGgFk4NPz7saTOSaUF4ljaEfuCV3\nC7eT\r\n=QjzG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.e1bc84d10.0","@material/theme":"8.0.0-canary.e1bc84d10.0","@material/animation":"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-indicator_8.0.0-canary.e1bc84d10.0_1596477037173_0.5043779570710627","host":"s3://npm-registry-packages"}},"8.0.0-canary.096a7a066.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.096a7a066.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"995006f3583a46f0290025ef08560c0efd976738","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.096a7a066.0.tgz","fileCount":38,"integrity":"sha512-QgoIMscnLCIZmb2yT4ejGwV4jq2b023kVtZCi07sVVd34k2yE+fT0EB1KIKQLb6Ag3yACP1vvjmfPzHbwC2XlA==","signatures":[{"sig":"MEUCIAV5NywvotF1YnMnxVqWVB4lHVdEgf45OUueIjXDGw7ZAiEAj1z4NLQ787EtxytafrmVY+bhQ1jOdeAFlNCsfbcNZuM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE8VCRA9TVsSAnZWagAAl3oP/iAlufZ+C8yimTmJqG2W\naYJrR0shA2rMw/4mzYeWXExhfjKyW2sf3X33RA6qYazucUSyBZX80otLNqxo\nQ7PB+i4j8JfWdXW2kCGxmEa9+dUEMy7IwMBhEUVQ/j/SDyXroi3VILVmf21d\nwgh2tDz3pARPR1/iqgPGG+lwQzQpYk7hU7RH47Sr12CrhqNHNYVmStL7DKNj\nGbZnODV+hnbCDY4sDWApoBI6osYoNFltLrzSsYxTBPeWbR+k3GasOHBKB23+\nDO5moWEaTLjPw6juXOVUENu0h3O2FAnk3OEAiaT5nZoygt1Mk3Tq35DqjI7S\n0PZCLXSbma3QvYxW3bSXnA6KX7gxB2AcI4Iua9Ep1gVMWI5MxZe2yOVKLO44\ndjVyBCPTEAXR/9cV8iqK0YUxGq2K8tAt+0jdvwfP7X3CrZrRwGJQUYZcGN4O\nMycIl/fN0jlyGT6sXOFlAQiMNTLx2wWgOkywLXIDsvR35kipho2Cl9XHnSA4\nbGj/H4IjuohF36tpNmAqoup5b7ZN5x8pfpl49C0Vj5c+PQsDjdHJWkEtv2UT\neCPe8gBVAh63YwiKQgVDtRa64+q42mS+udhsWPAkCKZJmiHK1lQYjwRBJV5d\nF08i/54FwJseC7d5f4smtZtNH6li4rdleE7WJjWyxhvIkOkoseyc4fo6Eeer\n9l1e\r\n=hXTJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.096a7a066.0","@material/theme":"8.0.0-canary.096a7a066.0","@material/animation":"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-indicator_8.0.0-canary.096a7a066.0_1596477204584_0.4366140125756819","host":"s3://npm-registry-packages"}},"8.0.0-canary.aa3a3e5a4.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.aa3a3e5a4.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"9029b5cb233d25de5e92678338ed1467f2de809e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.aa3a3e5a4.0.tgz","fileCount":38,"integrity":"sha512-+rr/2aem8zVa2JgXcpjxazyX0xNM15XOY8GhijoMQ1ujBe4qpKP+VVzNwo+j5s6aZAt56unyETExdCU2xSiDaQ==","signatures":[{"sig":"MEUCIDNIn3FQOhWTYWdXD5qU806Qro8f9W56WplmQt7AFCknAiEAtTPLZGJBxMXbO2BfoCLa2d6S4WDwjzl8qtQCnu9+sN4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE8mCRA9TVsSAnZWagAAaCkQAIABY9GO1I2h6tB9RlAf\nn8DlDiP3izQrARpCKBfscK9ShP5pZgpC2SzxCgr+0k4+vqULoauRmXocvvYG\nKpz353eqBceU8BWyoaT9PQa5dBle86DjEHQ4dzy7I9A5IlrMxz7jq4MBlkJ4\nB5nARmaRB2HPbThpKKzaCTC9w3zdO3/0i0Y65JD1KAzqwLRtUMKPPqzVaNtG\n91C0tHXhfTLz2K5K76urA1VoIUFPglGimNfQ6Fk163VYnbAkTOyzlGISF3EP\ni53LyC7dIUKN/+UBQVVE5RWI1vmXaej9LACwUQc50xfFd8XXBUf2zOG+9uoY\n848p3qACF+UANF7hUT3QtBTd0jh6c+eunmnuIteC90CKG3UJzTduy+E0bvWQ\nRPdeYarirl2LH5S2Y7ijBunaSTcZTB+rDEj+bUZlA+ipxMt1l5Wcwz9T6l2X\n9gJVQEOB9M0vjszJJUiWI82xHRWBDoFFPeotEy8Nx8oF775WPe+H0akVYH5G\nP/CsWhLtsd86CW2Kn66wRpd3yu9YMcUio8I7v2xBkreSv61W/bphuiPMvVyg\n/wBP2dzlj1hoFWZJ5YMR7LfNDKcbjJ2dkJVrxZj8hlre8hgaC8khDsppuloc\nMoDgqNDrZlGTm8NKfQ8FxQoKLkXwCJ9zrVkUREXKHitSYsG3pJzJ7JKhl76C\nvpov\r\n=Z8F6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.aa3a3e5a4.0","@material/theme":"8.0.0-canary.aa3a3e5a4.0","@material/animation":"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-indicator_8.0.0-canary.aa3a3e5a4.0_1596477222034_0.3289671435609396","host":"s3://npm-registry-packages"}},"8.0.0-canary.5903d39af.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.5903d39af.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"33dd6c5c3ec440417b585d842285da083044f110","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.5903d39af.0.tgz","fileCount":38,"integrity":"sha512-jBjHXVU3vDhhHooLCWLDDl6DMf4bdUyFwXxUtTGsJ32ivnL0AZi413yCTEfOfK0veMu3R4/tzugSJ80Y1axYwg==","signatures":[{"sig":"MEUCIAZgbuTL1IuuXbOMWxSxtqDXQyCwyJm1oZ8NZ7Ih1MXLAiEA3R+FGFRsXQV8EL4aMuLxEBvioUzbf3E4MD4ajIsLTE4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE9CCRA9TVsSAnZWagAA0OoQAIDHwqBp3pjHfRXz93ux\n67IxMpd3H7lTadkkM4P4C5TvO1a3JVJo5l+aPCUf5TOaAJTWDsDpd47IDa5E\nDy4FTD6BkLFuAimIAW/MWOPBlcaE1RAi8MgtAc9KZe5Re4WZPNF6GCD78VGQ\nFaCvflRQYvMktCKZ50bSeP18UXc6/5w6uVUIXUymuPRUe4FCuW/kgG23ebNf\nXKATnx6hsJKJ4GWJ2hXD/4C88iYjfvQfYdld90fP2+LDXCM9h85pNKuePFSN\n7tu9GXlFudjW/Euu9VbV68DVw93WqWCTPdBlYR/np4PvOoK3uYo+K7ylO+av\n8eVF1lhf6jtUpkOyKOlT+HSh0fvqYKvi+xzw6EFJQrf/yuuZ9qkjkOQMU9DN\nPx6DOtyQijt5dqS/Z8Ks9C16mdbIcvwAW8V9b52/vRo9fv4/4CIUl3DnXcP1\ngSLQNhgxcYZQUakTeektXe9QIXZqLY4yxNAqykTakRAHsuuBdjzkb4ZpaES1\nlK6saATUip0iSZjkxHBIqkaan382d6CJIqLbsH4B9qbyJUp7st6xwSM7/a6E\nTZ/zw92scD+1fvNwBT9WWVr3MGz+ElRlmojmA96EnLThMx49m/txG59tj82H\nivHkkPraQ1lhb+KwggogzoqIeRCLEHqeADf7yD0asL0Ep1k3DZJXrXD0RICr\nDP9A\r\n=OLi8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.5903d39af.0","@material/theme":"8.0.0-canary.5903d39af.0","@material/animation":"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-indicator_8.0.0-canary.5903d39af.0_1596477250338_0.677895251470116","host":"s3://npm-registry-packages"}},"8.0.0-canary.72258f898.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.72258f898.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"2d9f81eb8a7b6754067f507031a9846cb944d1b3","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.72258f898.0.tgz","fileCount":38,"integrity":"sha512-PGfRC9PsVLVwqgL0MRWNGsbcCKfjBvE95QmYKDckqRqte9fukiGSVIS3vfwQfv3Agp5o3U1f5bkIUObMxKTKqQ==","signatures":[{"sig":"MEYCIQCIC8d36hByypq8dbfQNIybQouw6oai4LP2bpgiH7YYMAIhAM8XBTmD7/NMl7hq4fvoTgD/XjD2zj2zBXCOGh7A3L9w","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKLcUCRA9TVsSAnZWagAAqRwP/RvOEsbROdVtnZXBOhZH\nQgDPBTcEa7oAuUcJd5lNjhJDcIHHfKTmy2uYjSasxCvZjm+p7HmP7Jllpw0w\nw50ibH4WMxB1huCy9Oz47Lk1LnfwPPUQh6ryMLyRDrfaGkH182wiheLN3Rvn\nvBKN9usCghwBBDldGLteBx17BdUrEt4fC6453OwoUqRuKzeMuMDyIJIElege\nziY1C/W4Hcyan0ebtS7n7h/HicHZtoDxcAfSGXHti2muD4MimSd1XG3XlFst\n6UpDexZGnbL94LUzSDNqqfvoDLnEWcJbmq9O2bIvhcumBUmzskOKUECeolfU\ny7hiiTsEoR+1rqA/gvpFYHv2924kAdrEbNaf9zEkNVaFfsrq/K+MN3fGLBRq\ngAoz/vzrKqp2aeoqKWiwDVsUMABjrB7qQvPeUxEeA5x5xPQxLigbSfmOYkBx\ns6j4p7fLO/00of58rFoVS/t3HigGHlOTmRwCMF7a9RUtGphV7ElXtod2VFta\nRc35rWcZB5FV2R/dZ1YrDwungC2oRSm3NN0sy3CfWWdo0ADZaRxysQEj5qca\n1da8aqWD8CYBohot0NP059GWW/SfTSTnFBIlosKixEGxQ2aslHo6YWBeXIJl\nOX7Qud8utsyuWre5H1QB+50IGVYbpVCpOygIHit4gMUv9qu2Pp6pGMGLlqxL\nsA1T\r\n=Pk3h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.72258f898.0","@material/theme":"8.0.0-canary.72258f898.0","@material/animation":"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-indicator_8.0.0-canary.72258f898.0_1596503827979_0.7002179274081664","host":"s3://npm-registry-packages"}},"8.0.0-canary.1b44b43c8.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.1b44b43c8.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"2872ee92202128d01e53844934c7d8c527fa0e2c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.1b44b43c8.0.tgz","fileCount":38,"integrity":"sha512-eBX+7ykKX73gHR3p+ND3pQVT5ZE62gU16zO6cRap82H0mMuQea5tUKppiifvx9S68cQaFb+mzi/x3rET0Y9vRA==","signatures":[{"sig":"MEUCIAHz8B5up4IyYO8XMBrDkIVYtYQqjAVMQ6S2wOCT0nwmAiEAjyMZsgeQeA8uAQzZXZZtOu2/qVKC3I8e/e7RkHjaE6k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKZFACRA9TVsSAnZWagAAbpkP/jUZawQcSlY4pJqrViaJ\nNldcgakE0Nt/0PGBAnEfyYBG/O6E+R5cQSiWVmSKnsrQZujczME6DzPFEQf5\nideU6d38ViC/uA9FgY3GK4NCPWdijmpt4bsrJEW6iGAQW2WFDjH6Czokxz0L\nMpXy1Ksa65YYygPN0tCqgsY30SNPAR+xZAwZI4Iw9sNKFGhqGJ0lLwa9frz2\ntP4DCDzRERl+g3nLoBFro2PZH/u6W/5Zc3wm0zReJvCYhQEyHzbbzN55xj4v\nw9Nlm5Zr75JJ4565tPd3nzIXnZc/C/PbjUciPURXOC0OHQ4a5trBq1ye9k6u\npDSgy3+4xer8RI51gPOrnQymYavw0SA60X6Vhzdd72NgpKWamCmq8GZW33OM\nlxZd69eMum68NvbcQlR8o6TVtxxmQTminzLcNLCiEHdRACasH6iMLXW6Q40r\n8jg1F0I5NBFXYHpxuCSS9Sv9PEmSVr9yueghGCUGi3h2DK7iz6//rwjKIyQr\nCVIFR3PbFa06KpKsgyqr9Y9zdQIg1+44EdHLU0TRscU30O9fexXgywmFih4A\n9zq0gOEAs7h0qy5Ywh0EE7oAkRXPlL3yxNSQF0rYXjl6+fWxTaWJnMPdQE3r\nu2xaeX4N4PLnFndJ1IU5F4pYRu6mKMFoqLf+GoQ7WIo1OejCJ6DYBdFmgDxj\nUivv\r\n=G9ml\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.1b44b43c8.0","@material/theme":"8.0.0-canary.1b44b43c8.0","@material/animation":"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-indicator_8.0.0-canary.1b44b43c8.0_1596559680161_0.29388210129959913","host":"s3://npm-registry-packages"}},"8.0.0-canary.e9d2e2f96.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.e9d2e2f96.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"21e81d099be15d127cf2ec070682b05c5b046a8f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.e9d2e2f96.0.tgz","fileCount":38,"integrity":"sha512-VBaNQeeZO+IvbAHr8E7Q6TWj3TEApzUQtCCcKXXW0NSfyL0WEP+1K80ypNPc6uoH3wqLE3WBuNYePMRzIXuphw==","signatures":[{"sig":"MEYCIQC8kKLjs4zWmXVVVLmVgdDzfZlIAYzkhbcJp//hDYFBnQIhAK7PmRmmbrXukZLztOcZiSnrrjIBNDU7fXe02EpAmy8I","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKcPiCRA9TVsSAnZWagAAWBwP/jv9+J3iH3bk+1lM4Ils\n0KNjIwF30QWrRiBR5E3oXNIUytDohUOkIvgZIChEGyajp66rl6i2MpSdihDV\nrj7Pa9nKLkK2iu5yxGDA394jo6IV3Cnay0nNZrYjBv3Okmw4vzkYWQblf8ci\nbgu1wWj0M6C6VMR3CDDOiOp0uegpQp6YL5KJhpK0l0rdmQIQkZOTINWjHI7j\nwo7/KP4jkTy2rufP26kze4uznBfyhsxx1tNl2Mshl+dnicKcRqbe7MmKrxIn\nD/ZiwKwe8cPvLKbXf3p0ub4XTjhSKUedHieb27sQ/ppXRMySQj6Hj6jE+X1f\nNUl05e/8SoeDLgiA+dA/lHBl1mQIBxBQV4zh+J9RyqrqYsNnKPowo2k9STcC\n17LEhz9diizleg843MsIX4WgXEqdDrbAvczDK9dWGJKvIHNs14ctzfFow9Ut\nGcuIDaCXtsqcQ1N9FCufaVkm9wO3etiu6tiryqPcOHKXEY1n4xKIuSPkqIBP\nEdspmD0mHIA6f+r1YgcjQq6GpyHCMya4X7LtcW1xdb4hge7nAVo6hkyM+Wya\nePbWjc9NDjWQ07hrWN5TWEoDt9Mzfldtf9ngYwn2Q+Sr7kXw4JMnj3Mjf7C/\na3PHdAKXN8M/kyVGCJu7Yb8sjZ4ypOLY95fl7YFLkbfm81IukT6hj0/cWx7a\nfIRi\r\n=NTF3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.e9d2e2f96.0","@material/theme":"8.0.0-canary.e9d2e2f96.0","@material/animation":"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-indicator_8.0.0-canary.e9d2e2f96.0_1596572641529_0.1303094693051745","host":"s3://npm-registry-packages"}},"8.0.0-canary.b9dff0a19.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.b9dff0a19.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0b29f70dd68351734fdf46caf1b37f89e5d50273","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.b9dff0a19.0.tgz","fileCount":38,"integrity":"sha512-owgotvdoOrdnxR/upWfXpw35GbIpJ/aoU3xlb5j3+lzRjq4DQmXJaH+3YzkcF9eBdjjeuj4xMcJ9z4uZzNYQHA==","signatures":[{"sig":"MEUCIERzIPmrShV/n85ViFeW6STpR2wwlF3SjKOKgM3V3Ci8AiEA8lk6Zf+ct0NVhYIm/9Pb3mbmN+ZE2+r8kUh6+yjuaqs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKiwXCRA9TVsSAnZWagAAXKcP/1lT6ABmD0rKFSn9r3nT\n8JjM9U2gI5gPydWkpCbqj/Pg0V5U3HvOkvtWMJu8utR00HTvSuNpJwGb2ewB\ndnOHZlHeZoaVYDZoNcn4eSjrDR5pYAuHBMPDS5QdFPpA3chPceRIXzu29fT1\n5u4T3JegI6k9H7evS8D8zLd3awVb/LqYQ/L69wZfqQn7Eb1aqrAhdwgdaqq3\nm1UzwcpJc7aE9DfcodTSs4HAnltYUzJ2dhlpkdXNuP2VKJQ6Dc4TD/aUOtBL\nSgLyrVFlfGNu0JAc5Xc11roxbVd3i9AMW/CJDFLxTmcMxer3r5/jbJHkVJcC\nFxLi2CtSYU2C4G8GGNHvYq9jlKRqL4u8Q7KCHK+orXBUJOQPwacaxmsR+CxO\ng1I2R6d5ViDV3lfPzWVIDXZKeJYwN1HDEDb4Pw9nS+9GjW9d2MHckiS125Nn\n/Q70ul+ZhM0gQkpAKDUIQHkD39rw+i+mJKfj9t501aLGvQVE/v6eG/5HXfrI\nk8D3VaM2BtZccBdpJLFBwjA++4/g7uiBE2h8ZVRlbWXPsuNvVyXPf2KlF57B\nzXuo9fKYV1k/97RZ6rq+RhlQzbosCnWigPa8EU1JDrg4U6BLs7t9ivRbEyHJ\nNqcdw+jN7W8qQfK129CxOcvg8uHBarkAFSLv6MLlIGPIMbqip/B9FGbzpwE+\n8rmv\r\n=fC0z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.b9dff0a19.0","@material/theme":"8.0.0-canary.b9dff0a19.0","@material/animation":"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-indicator_8.0.0-canary.b9dff0a19.0_1596599319342_0.16245320314231093","host":"s3://npm-registry-packages"}},"8.0.0-canary.2bd09a706.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.2bd09a706.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"65d6d8b1b120c485baa790b64764195cbed3fd0f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.2bd09a706.0.tgz","fileCount":38,"integrity":"sha512-HcJUYNx4mPbPNE1SaFQPRaARZowfYCsF9Xzd6U2sb4CAPmV3P49xCVE2hvx//Wng+2Rkg0HU18nXT0qj6JQ9bQ==","signatures":[{"sig":"MEQCIEuwtFHqADJyIe2ljk4wbPpstmLxDsTvCac2qinDGNlGAiBQ3MmTXikIFkmbPQw3gO/K7Jww506mLPdr9E4RfQF/xA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKi1FCRA9TVsSAnZWagAA2aUP/0lKAKRgLbQuXMFgNb5f\n7alfypZQHOFu8BSu0NCX3brjMCiWYH2cZmu2HUc5mJi8188VEO3FpRgYN/Sa\nvZneZC1PpGhnV7Tlpjadk2+NK0KwhpmjlFpeH+bpSuYiLJfcO4TJ9Bn//5Bm\ns9PpUsRU6nrQyStgfLa/cagf96op9yjefhadT8o6AURYc9vFpiyF1jss932i\n8uZAejL8jHizJexvWKE5Dl5LLmlRynV7iscOP2DM/knVbh//saWxx5oXSFQG\ncGUsyFd8T2St76s3QKDKcM619IstHffK7M25rwPvGqECDvZUH77rPyCZ69xK\n8wFdNjLEnLMk1z2MJEf71qJzZN8yovg+tkQuuxnYXxA6YYpFtcYYs5+3Yjje\n4vlzwJfsjQEi9+up4xlygcoPfSLuQghMxx/i8EvzNGAa+6cVlL0/lx86Kx0z\n3xQ/F6ABdg6AAAnB8Qz/XJosJUgUT7tuMv0YStICNclafmKU3UXNra7uwkzA\nkT1LGfZa1xvrXU64mD+nEI4qPX+11xEnJSeUiZjj9NI2i0IMidEymxqC/8j9\n5SIcznBGNOI3Twxx5rnA7t9H79fjSaWJVAPIr1HgH6QOoByLJKW+zZx+VFey\ndU/TKneUD/Mlhimco2Uk+DODHFcwk/DBqfTGzAWsDnfQxo1tO+RMvySjrR8j\nEZX7\r\n=BcXx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.2bd09a706.0","@material/theme":"8.0.0-canary.2bd09a706.0","@material/animation":"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-indicator_8.0.0-canary.2bd09a706.0_1596599621109_0.16377520052062566","host":"s3://npm-registry-packages"}},"8.0.0-canary.e0560522f.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.e0560522f.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"efd6f29c7c03aca9442281373ffec10efc32bf0a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.e0560522f.0.tgz","fileCount":38,"integrity":"sha512-Oh65/MAVJM4E2y5lA7hszlpE2rE8xQ/Z2B1kSGdahwah3Zk7m66lZ4bgFSQUX/UupzEvrAeZM3xQdyjIEKZhOQ==","signatures":[{"sig":"MEYCIQCU04YnaV3mgBFpXqZSvvAevoi9afnVDTTyrOWpMfHUGQIhAKzRnJh25lMjkOoZQpffborYLq/nwFgo+ch1wVrwbUxU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKuogCRA9TVsSAnZWagAACG8P/0wilIn7POc0trhcdBnl\nMTZ4EQxn8qtWgFpfLp4ndaptj7OufNBfRMTdxRSVaBXWtzry0KnJDWlh/+vA\n7bqj2GKZDvbXPzd+/cyABuGHGSGwR6cTAT+8hkbAA/pEGgU8q78/rt3SsPyP\nNQWq1WGqQIhpK5B79wyWIkduj2e40O/BuBd1aXROujJcwHmz7CR/n/tS2XKP\n+iIPuQihx56Lt8bjvhqbhqxbqr6OlBw07gG1RQkosl+NYyjLiloI5IymK0A5\nSv3bNjgWhpfAzrpprFB5BdiFC3mz2wPN47RNy3KOF7SxKBu/w172T/Iu4YpX\nqo/0oEZcoprUevYX2IX8GFw7D+em1ZIYMC6tqAz0vO7W+VbTFquJW15yqM5/\nKb301I3sl+n3YLh9+jsqh/xIkuZ822OUX9zf4neDALAZqgP5X0icekzTS9qf\nHtiuEPy4kuF37K2VrOdQUHmFmscfZhdL5+NvyBjKVwOKzIAymQDvKitJR0mT\nUHbl53q1+rjZQYapt0210AAEOqY4D9ENnMCXZ1CkEJSmmocO/+uWvmAV3vcJ\nMg7ynlaaL9mDh3XKC+RTeTK3TEqhvKoqJ4cZYMYOzFFz729Sqcu9harNMWV5\njQ+pGNEZOjgyqjWf2RUQuxc6H8KvkP0qf/Za45Z1xuXQLijZbrewobL4+MWe\nRpkc\r\n=JT/o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.e0560522f.0","@material/theme":"8.0.0-canary.e0560522f.0","@material/animation":"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-indicator_8.0.0-canary.e0560522f.0_1596647967991_0.7627608875561867","host":"s3://npm-registry-packages"}},"8.0.0-canary.08ca4d0ec.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.08ca4d0ec.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"cf2059563dbef5fff0965b2b87b36e50376b2dcf","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.08ca4d0ec.0.tgz","fileCount":38,"integrity":"sha512-5qVnWnaqiRHIvz9KE8h/kA1igExOpZN6IsZFBydMb5TYBwZEyKHfsEZItGwWi6qoLhbY4EGgVN704+pvZHgEhg==","signatures":[{"sig":"MEYCIQDE0bMkUw9Q9V1y1ckZdJXQebmrW/vIbN+3dcMpggoSaQIhANp4MmerlqySElKIXAyapTSV4FxBfBGdkLF8DvEhcoT4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKu7BCRA9TVsSAnZWagAAnIUP/2Y8SY02zchu877R/PFr\ndZVrB7vzR2dyCqqZS4hIQZV3Ye1Os17+2BCeENkEIiftS7enl6un64e/40Gc\nKayrrS3OnxKCaHHWlCLqab/lkJ9te0cSXVI1Ah3evOFvKn5V7HrFiG/pA0AO\nAx/baNiTLFQpt/BiWs7gNY3T58EL6qMu7x1gVKHgMRLkRzhOg8pNJdRfbzd6\nt+R+ur92wsOsAN438CeZyB23WJ2KU7BbuWlAx2raAZcoZ5aOaaTtRGgt1iii\nMJrnMjXGdyeFHjv68GvgfUl2ZeTMzwRQpEz0dYnIodlNbOw2j9fzBdYDErKe\nr2OxDfwXIp1ejNZNmkeIb9MJoD9HMBzXtDWB/mxGC8x/WIO9DohUhmlIbEwH\nvhW6D98hFnpMKN6ShUr2X46Pm0Gl6waLIS0XdXwq1VYjW0mG7U5hhgKfXMZ/\nMe7BmnarqS1Pw99YhvPOhUWccl5h4x4zR3W/VSXSJEEqT7rbvrO7PWtUvQUs\nUSxLNpCfBx/IUzEf2Vn8qC5mtikYfPUtuGRsOr0PE/uqCyCrFRK9iAkfA1yc\nlaPcdacl3wDzNM6YsuQ7Ak3PDAakhTxHrTQP6jT7WFUWt1qxiP0Z9Iv7+1rB\n3ZPdk3XRwD8T6z5awvfycgkhCQcG69c6gIdEt9ccn3DIF/DfPsW/X/EAUHkw\nBz7G\r\n=aCmb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.08ca4d0ec.0","@material/theme":"8.0.0-canary.08ca4d0ec.0","@material/animation":"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-indicator_8.0.0-canary.08ca4d0ec.0_1596649153002_0.04695632077865253","host":"s3://npm-registry-packages"}},"8.0.0-canary.08090126b.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.08090126b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"657f55b3a9370c49c525b678c663c2259aaba9d7","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.08090126b.0.tgz","fileCount":38,"integrity":"sha512-GO7tobxvVkYcmHezPB/LHQ28yMQNxv/P+OA5ms+c5/CPvOemuWrndyGyIDSBhwUmdbCBop5iR8AxO2PcTHGN8g==","signatures":[{"sig":"MEQCIGIBKJGYhNh9SQctdIZrQWaBkQBR2tLTN+k38NQ4+DV8AiAJILytWSdghdhiRczWkr2yv2KKTtVUy7RfKliUGMCTjA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLFrMCRA9TVsSAnZWagAAkm8P/3au4MdnZKfd3P3Q1b6r\nTiCNuJLKifArMXXGaxcJWG8vDLN2uF+5F70MApL22xMuMkt4tbBa5sjPUC2r\nCbAcF/FLBN+7Yjh67O237OSc3cFHOOjCS+kuNzPl8DqDXR7m9EPtXwI7NACa\neRmmxGFnDZgN+LhTg8lQrLG6JUe3t9BsX6m41bN4bJjdyHS34GPaKRVQIWBw\n891VPQHflfg8P8bE5dXlvMz4R3OlVHBEA9rtpRn+emGGiAreVkcqt+vOHqP3\njQzZW5Z6buB8tdCbqtcpN65XL8NVc6QEZ5033OueMyrFJWULGOZ7WsD4Tnch\nns7880OUErwVehnLA9X5sxLuI7R+4qf8Mn1EvTx0rrDJtz2UNzlKTGcFiB33\nZki97xar53H3Bne4ECHxBpsfI0kPNwz3r02671OfEYFUlShh6IndjqR/7AeA\n+BV51pgLxk5TmDCMLwT2RdAnP8sCLH4LxaLPLXmckZpXlim0JrLAD8lO/HzX\nEe5BW/qRAooAX7kfQ/9PsXJovCvO98ixrOZlENymE4uHA+7a3ESn07cb+w7f\nuTl1OtsdnDnWmMt3g7NConK5NA5O4i9d0QVk1fmuh989GvY8JlqwciO+omBI\ndMqlalEE6ROXYlBDyk5977qzbkULt4jlAp06vsIXW7fSWN3Qes+JyX+fubmV\nQAwW\r\n=icCU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.08090126b.0","@material/theme":"8.0.0-canary.08090126b.0","@material/animation":"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-indicator_8.0.0-canary.08090126b.0_1596742348389_0.8393373150116381","host":"s3://npm-registry-packages"}},"8.0.0-canary.e8bf5b2ac.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.e8bf5b2ac.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"25b4508ecbf7f487f30fd06ca2fc19ad4d4d78bd","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.e8bf5b2ac.0.tgz","fileCount":38,"integrity":"sha512-V2MqmQ67QHmSexToZY4lB5Hm/tsAFyeqtcdBJJA8CAu37Qtrm6wgnSmNBJPJ/10pQk+2cYn4Ml0UI0LA3k4lRg==","signatures":[{"sig":"MEYCIQD1SiqigQsasM7Eza0sQ3PBM4aHK6EmyRVz9bROY9tmygIhAPPUr6RxqPbWGSAWIm0cqNWSx2yIy//VylgxKZ3iKeQm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLHr6CRA9TVsSAnZWagAA00IP/ikF99sB2H9t3LeIdADW\nx/AaraFT2B489T+iFLpyS4+9MrUEHBuWBM4ueBxwZ9eL00Y6roQ7PZmF+91D\nYeXNUYv4oAZVWElgvLIJbKJDcau91//jcUa+D+C4wkbcwdwQomQ1s9gihlYU\ncc3HmVZvu+yH9g7aubpzCsS57Z8vL0qzTcgcQ0/7v8fGMXIDMzeR4di9dupK\ndojm7Rdg5BJkoJHASgaIFV9HPrQEsc+eAe/ue5RG4yqAGSgNxi2icQsaRE1Y\nIUUw9wYbrslQSIdlNo/AOKtGmUb2PzvSxnW0I8JH08CVxScNloopFwKR2C9X\noYzzPxwWw2MqR8K9+wuwkparb3P0Erank5EpPI/tCEljPJ75IEwDoUwrBCSD\nXNDCzuUMOUiFDf2cjUUsFVou+zsNojChFgcETQ7rIDIPYdiSN3fDgbU7U2sH\ngZ+bBy7J9fPHJr+/eqPMgGM4HIK/zbW0MidFPKAqsinfY/syFZ+dybLBBlkk\nIecMlPYBW5zAZ5B0PpkNK9ky+LauXBWE0ybC+pqS/a5/gthmMue3WRTdKxWh\nYNXzoyUbcKFKfV10CCi9fd8LNUvs7icqCAnixjRtJjn90/eQ4sUx1HFfeRln\nNz8q4OmzO8MEMhGmIQbkY2Pp1wc36hd4lbc/0pzjiIGwFhHFyHDtkP4Qb2jl\nd2y3\r\n=7lKX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.e8bf5b2ac.0","@material/theme":"8.0.0-canary.e8bf5b2ac.0","@material/animation":"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-indicator_8.0.0-canary.e8bf5b2ac.0_1596750586073_0.21933629246785036","host":"s3://npm-registry-packages"}},"8.0.0-canary.e3b746208.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.e3b746208.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"43a7c72ba5ce0c086b2971b7dd77a3f1ccf606b0","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.e3b746208.0.tgz","fileCount":38,"integrity":"sha512-sHH78y0wIm+XXtYxGmJ/fDOnuIa9pS//34KlSaoRkrFXk7DmPC1sJ5Mz4BukL/FRH7G5GgdQ89h6TRMM8E5fbg==","signatures":[{"sig":"MEQCIEci3uI1Wg8RNcZQ3lEDJpJQ56aMZ+wHDQ5v0H7MjB09AiAXiHqVrA8cBnRPNxFW9Dbh0c6zZWEeDcEw1G6kjjgSjg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLIOZCRA9TVsSAnZWagAAqnYP/0KaFxV2BVdMvcjo2huu\nzlHPA6BtQ60VnCfwpLXsH3Cmv9IRio8SkkYd+IlXfRUBVZKHT8CL6kxm0YcC\nfUSDdI7GymhvFia2eyYi5P187Z3XIuvXq61r+t0hnzq1xAqRAg9Eube4Vzl9\nAR3gAIjouuVuRW2Bra0tdM5qFp2jVyAqAz1TNbGEEPTn7WQSN+gSE/43OOzd\nprco0VmjHL7ai3ZEH+vy1lXZrHlYTk8HsmGtlJ/zXfGWzPJ82dBvt+NfRlTN\nYbiC0akh4liYHehwmJMoGDEjol/dGhOu90CS8qM8kuT6TktrMG7JXulTbHSG\npaMbQIDU1eg4tiYRwiM7zEgH1m2qHWDglVTxlIqlolIbH/gdofpwUJ5BROLF\nAztTDI2F+FU9whuYNHZCbCkb2sekkZf7FH6K6yB3z29ubPIDIxMO9c55z406\nDQJlp3w+EoQYZfLcXSJlaYjUwBSC4yfN4zjIe/d6lyCuF+ELRiT15ChcMONV\ndM6MHEjGjethVYImQcLJpaWe2QxtAx+2C64ECD1kqZsFkmzqasOrQhh6yK1a\nz1g9VnaHNos3hJL8INQurhLLzSE8Lk8L++5D+Rdkg320lCJlyEwu+azv3VC9\nyS20kzdqOA6XOD6j9AnbfT8XDgk46EOPUuo3vtHqllvV7KRMB+Zne5IayyT+\n9+/8\r\n=JgAT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.e3b746208.0","@material/theme":"8.0.0-canary.e3b746208.0","@material/animation":"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-indicator_8.0.0-canary.e3b746208.0_1596752792865_0.9277184958347555","host":"s3://npm-registry-packages"}},"8.0.0-canary.96a640534.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.96a640534.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e3075685c34db03fa328e838854a139d9c77e5b7","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.96a640534.0.tgz","fileCount":38,"integrity":"sha512-Dro6VqokAEwSqWcpYWAswvzlDuWaqGKyp8qIveVElGAK+ksfTEpIpnrP81RE+EADNKg4hOY/5SqTLTWgsBdbZw==","signatures":[{"sig":"MEQCIHw9ajr1F70uAbKC+nM+auJGRRvMqtl4RQ28wbMtiwHHAiAx6Lyom2eQ6fRC5oILxr7sG7cF773/K30o5If/OqMqPA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168948,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLIcOCRA9TVsSAnZWagAAsQYP/15zF7//i85T2EZO/0bh\nkw6JqqxUon6UobF9i221//+f/9/kjZ4Unn6QzKB6vqDcrIhsJqGSGSO3wAZB\nu7EmD3+w0gk+PQ0wHFpijYXVNtudZJeSUh95nZL7OG2ckAtPFC9FO56M/KBZ\nbpKQ4SPYaS0Wk4FM1VaWeXz+NPD4cdbsz61B2UeaUIvZubFAmLASSQTbFSJM\nt0jCm1Rsjw3DBWPv6d48wlqsZc+0LaKrQ5PL/tJFLorxjf0bd2TwFxns347T\njNr8eMUOwMfha2lfhaanVgMkqmhpU7qgp/xZ3K+1rJt5ghArwxMpw5PlzE/a\n3AEBH21IPwawHt6rpiytY8u3p7pvoRX2hViNix1XyRkRWowquXIOOhLjxWf9\nJQwI7vtj5MGfKBWfO5TPUslWeJQL4+iHm25J2cqVzpo3G0NiO1eNcg1jO/rH\nEnbeae13YzLZ1a1OyAdjZO90S371iNMu3EMETV26rg1aFnUICFu/PNLBi6IO\n27DKs7MPwMkSNRGVU+iIIluuUKXW+68Q8ekIjVl0oEScAUms7Z60AXmVK+U2\nlcdwISegHW2WoglIT5Ikv80ZV0S91342sCg+UQRCmxCC8M9+4ZfiI3thZbaw\n94Wef/spzH5M3QU3EfUW1juu2hPXxn0ParkwDMuSM/DY+DaVnNP5CGtust2h\ncsS/\r\n=Bglj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.96a640534.0","@material/theme":"8.0.0-canary.96a640534.0","@material/animation":"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-indicator_8.0.0-canary.96a640534.0_1596753677317_0.15016431019835585","host":"s3://npm-registry-packages"}},"8.0.0-canary.9f9aac825.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.9f9aac825.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"b3fff41a5ea7d14503ddaa38bb16783b778a4d5a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.9f9aac825.0.tgz","fileCount":38,"integrity":"sha512-cGWdOTp3D+IL22TZYAato5XGDCWxSZqq3YIn87U/zALgAIh7Bnn++KTZnvkCY3ZjlVtBtBUVCPXpzkQBWBfM6A==","signatures":[{"sig":"MEUCIQC5eASSwBdj1ipzc3HWP1DDY8oHs6/Krj74L6jfr3TdRAIgAloH/+C7NWc3w2SwZ+eekvEdXrYZxPu2btIM3nBCvh4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168948,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLb7ACRA9TVsSAnZWagAAL0gP/1T2Ab3Fy18RnEG+mlcV\ndnso+dP7kngVewSBJAwKK5w65KpJ50XCvUMBio8x4kSY+T2U4ygeapJ0ldT+\n/d0CWMuSq48m136fxhI2/fGr2mTvJjwsJLvMN6Oa9ZwNRmcb/lCYg9Zv2ha5\ntQ6rUD874wrSvxXgWen2SikUYykAzXPWmD8OTs39CBMTzfmBR/sy2Fk5HAGZ\nQONUicRAQ7KTtb7XZ5rGtEwB7aJfJZZ5n/BaIbcOh1DvgCSF6+KVKLtVvgyH\nVEal9D7X2rQ6ltXj53vBFnQOPC5BHKFy3r/NpI7eIonuw5K8iQLMQIIo7oc3\ncWVpLmIRDXZJe3Rf76D90YiaMREZgJ74liYdAv43AGwOdiSGhGviI4KMRI17\n9CcIv0rqRhV57OrVGcb+4cfHH//vtLORAuOqUh44lMwJr5ZrwtGzu6v4Bvei\nNN5OJaiKFDkX5Nsm/sscgB3/WLJoMDRsdGHIFQrsU+u6HpLeZbZ+lC/OEYb4\nQPzxxwuJxv4YzDHtTxz50OgqBHDjWHbAeS2nYZayXWh6IpRo6xr1WPOIjzqe\nt5e0aL4GgLktezpyI0N8P6Nd1lPQPyAD9MtVQ2yh+5kU9pB518LrCjxff93G\nD0uhHEbeq1QfBvbNtW9k+fNEoXRql5lMezN4+TopIlWiN9F0KklfvSBs+9kA\n34Ys\r\n=sEk7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.9f9aac825.0","@material/theme":"8.0.0-canary.9f9aac825.0","@material/animation":"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-indicator_8.0.0-canary.9f9aac825.0_1596833472032_0.7620982470171642","host":"s3://npm-registry-packages"}},"8.0.0-canary.fc65fd00b.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.fc65fd00b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"34f0b647929c776c93bc9f80e416d91db1d341d8","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.fc65fd00b.0.tgz","fileCount":38,"integrity":"sha512-7eqzShRZoDKRuwmvBKIyJ0kM07pg3JGNGiOjj9MKfVpmAK85hsSUpejvulPhNgLWQ7wbDvuBd8AWM+yHi1uf5g==","signatures":[{"sig":"MEUCIQDL7ytzAA6OSk+76ZgFaaHPqY7Lo+zNa1/mrwcaMRPrDgIgDvstnj5770MDDyIbvmenPRkD9YR02UpDOedDScXlMuU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168948,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMWWrCRA9TVsSAnZWagAA5uAQAIVNAF8GVnttKuOzqGVn\n97zchlZGotGe5/mhJN7/9J36Sioq6Er4L9g4MAMNqDZoyVl/vMK788eb6MwB\naKE5ZhVWpzu4WZ916x7rUqrREqtZTDuoKt8drWSIZT9BWGOx4139yMIAV5kP\n1LMpEsnaQSGQ/R3Z/esI5W4jXwxZT9j79QF/OhTZ1rCF8zTubyNdN1DYCgoz\nrHxsWpjYRxEreQ6vRAR0IbGLKyBaKHFyrZc6DqcJoEaPVQhpzHMC/HUTXnKH\n1Da/hr0QewO6qwrG/1HVCtbxE0lDqK97lcDHmTGxrbuRi9i4TNKUFUK30FYf\nwfHYXjbd0EXO103XAJENxGYBv+oCmoNnfk9VYpEDZ0ZWS/asugdcTeIkB33Q\ntcqbKW4jm50OLBIqjztGUPj8o8VDGk6rw4FCDSUpWS3ZRfU9p++BrZiBJ3fr\nR4jQwKRSziIb7LnfaZBEiQrcJsUF0unM730olFA484E6BkGZNCfhRX9Ms2fp\nayQAp1dCM8yZjY7B6gUy3w6FHTov/4ugeiydJOPASIpZJL4QnAP+U0WqZ6j3\nf1+RggRyv5tcpzdhcFWQmS8g9mILknUVHTmJRl5F4oFJaohLMllicMvpk7LO\nh2osLpx6pe1uw3ZeJJm7QA5eR6F+J3S3wwRBE2fzchM0oXZt3UupDyX1iCAc\nVfI4\r\n=8+Ui\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.fc65fd00b.0","@material/theme":"8.0.0-canary.fc65fd00b.0","@material/animation":"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-indicator_8.0.0-canary.fc65fd00b.0_1597072810911_0.10096390617981132","host":"s3://npm-registry-packages"}},"8.0.0-canary.02e372c5f.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.02e372c5f.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"fdd3ad9896eb656e3fa6bd47fae2c865477baeb8","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.02e372c5f.0.tgz","fileCount":38,"integrity":"sha512-VIz1u5BTwdh+5eviD92PMBuG2lnp2tk4IOYzpQ7hJqXwBC04+cpiTUXF2HbTFJnyM+PpN1AqBs3WczdzwPE5PQ==","signatures":[{"sig":"MEQCIBuZn/M4Q/K8665UKUDPBmxzY40UnAKILkAHJkoh36WEAiByiNafqracnts2zQG+/fqMs6TEmw6MQD9nHon0D7aq0g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168948,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMWxICRA9TVsSAnZWagAAhqMQAJ3yXbAW+A9e7tX5YfVw\nm+QMyRO31FsDStPm5Ilo96V76OctL9HnK9prsRr/rN8gtEsy9YEoRfZRU/ad\nOWOJuAqmSkSbFJu7o7CdXslkXk3WZOxOTOei8C9taa/1pglOglzDixvQ9Bn1\nwor+h2MqZGebb+SHfMVwHP+Wv//5aijjz9ir00/3ads3eyz9QmLfEi8EpeTU\nwbCsNBuL/XGKPuB35dbaiZe5qyS2G/uUtYFFk9Jm4NfY0aG0LG9Un3IuyvBl\n1V7ME7cM5IX0ZfbD2XWLQr1DsNqhLdbOSSwPC0yt5JN64oqBPid4bqt8agNF\nWZTAHBb/Uuc1NlImWebW3uayKcFx85J5g4CJ3gr6DxqY/wBEPurlDR/MpG/k\nrXvzDPPkkOJDLNgRE72QldAKsgzlRGlmUeLHAelKZvsLmFjge2s65aimvtY9\nDPMGPxfITFB8+hGgUv6HN+VONkFSAozUBMqfQjIAqfvwy/xy9y3hlm2EFV1k\naBKqvNgPFlezkxrqOT0O/90/Rn51U0Cm2beXF2rWBG8bcyxw1AfiZpZJUsri\nOxFbxm713xkAXM96uaIoVnGE/6zBBXSGm3nbHZOdpo8MtAo8lpG3jug5MUgz\nvQYI0AOM6PHV2SGX9blwGar/aZkxbKMqNGQv+zxP6EtnRQ+MXniqYl6dGmYP\nrVQr\r\n=DLgd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.02e372c5f.0","@material/theme":"8.0.0-canary.02e372c5f.0","@material/animation":"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-indicator_8.0.0-canary.02e372c5f.0_1597074504175_0.4215285787595524","host":"s3://npm-registry-packages"}},"8.0.0-canary.66669e3b6.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.66669e3b6.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c4c4504aa49f9241411c244bc3bb53cd632f325f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.66669e3b6.0.tgz","fileCount":38,"integrity":"sha512-3zuAYFb1l1XaKdTXH7p0S8ddMbbn+BkNf9413w+YtLxkMCT2TYsg9FesPQd+IEU4Fw9dbkg7jytTHDeXgkTYlQ==","signatures":[{"sig":"MEQCICad4QQreZrpHG2siQUmUVYqr4jeL8I0qGUNU4v5fRFRAiAG8LgzIWBMuf3HgvdGAl95ZO6DJ9B/bc12CbY6aGK2oQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168948,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMW03CRA9TVsSAnZWagAAH+wP/1ENrpePtj0/F4hs4GgP\nGUb5EnPeNMgb/ZhzeNZHs0KIEGjVOhc4B8QcF4W3hI6CQWU0o1wkV0Y1A2me\nS9jPT+pYa8DHJ0xFRk9QvUefOgn7iTVuHsI2EaRtKys/6hYO5pMeYDlrOEqY\n4E0QJnRhag7NcL0svZZk8w2iwyA5h5/9ES+WGh4R9hQhqRweUKp0FIdoxSnB\n859wwK719FTrbNUUx6LHixOo4f+Q0IXOjpA30b0D2fr2ziEbyPD5rX5L7Y1d\nJzK7BambicQzk6mKRIa9Och2tzbo5q4S00SpAVQVMCNo2bBtHJl0SuP55jo3\nOwyyc8CvJqKhwwy9Dvsqcc7D6VsHEnusVk6tcRnWJNa87n6/n6HoPq9v6SEx\nNih37xe8Gy6/VvkhxBaXDuuqKZ/up8Zx5C9CnfJ5SvqOKw8kKWAU9RqZbOxP\nAZ88qU2bPRC9PLt9kCjo7CL4tRYHE6iTE2NFM9BzmU8NW/Okv8nBw+It2l9M\nbgRvaj0MmaYQ66/m1TX53X+Dhc4bZJenBaX5fpOKaxnwgxIum4nlwh3wGgV8\nD5LtwZEZjGZwzVNL69ajTRBR9JxU42Bu2Yk+IHvWjCOmSp5klzjVFQRrG9vo\nTp0hBTfLCQHQvG7pstb1yC3XQFO0JWSrUKya3P+UZp1GqAG6g6zi7XQGKt76\nT/U8\r\n=ii5o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.66669e3b6.0","@material/theme":"8.0.0-canary.66669e3b6.0","@material/animation":"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-indicator_8.0.0-canary.66669e3b6.0_1597074742700_0.9426650818504279","host":"s3://npm-registry-packages"}},"8.0.0-canary.6d1ea9761.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.6d1ea9761.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"d9e0e84fed58836fa2b0b2fab0606ceaa89c1291","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.6d1ea9761.0.tgz","fileCount":38,"integrity":"sha512-f5K07bHvdNz0yNx70/NAh8uk5f4Gh+eiyi7SR0eYEC4/+O3kcnz6DbVBrNEdbHm/wUqWuSEkchkVJMFZXQMa/w==","signatures":[{"sig":"MEQCIFCpFiON2JTpbOFPeBAbf5GpOkOIbIy55kVjCdihkwplAiBqRO421JLIgqwiv6e+DQXhtk8DX3V1T4epPeCpXeKrXg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168948,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMquKCRA9TVsSAnZWagAAxgcP/1asT4R+qx/aXJVmF+65\nAW8LqpxTBewt88peckhJEmhOMSZfOXsFUwNLT2YPfbCCcjim3SiYqejlpAgy\nuJSibxdmg9hTxSVN5YqdVILxtOe0hnGJnsSg/CRiOGS2VckzJa50W66wFtlW\nuJl+58bqh9SonHGADav/4/E7LH55O/tOaL7i65vqveWpT3KsgbkyF51soowD\nyUOzsUc3OA5KUM075oy2PzUpeq+u8lXAzfy0PGWFOuMdtzuAmJloB2EX1ROy\n4h9AHdJNNvsCSQyV5DbykxKkm3GHmBTUd32aHgAyjR1kPrMcVUPsBzsNuSFa\nPeg0/nRBKVn/raR/PgebBeNV1PUswgJWp+01k5OPgcXYR3cbt3wVWLCapK6l\nnCFW2suFF3mqwb3p74S1gHjCWtKfR+ZRTljNeW9IM9WRhvu2SqmFsc0bJkeB\nGLMhPWRl27Xk1fL+WGi7FiyY46x7pafy8Hx/9XZM6AIimCptnWBT8ZlMN5DV\nqAIKZ9Qofz9e/age46Z4z+xUsRDjiryEp8aU1W6qoyf8WsXVAxxhc1/f/nWM\nmOu5gmYZ7dR7whkU1YTq02GhzSRsyPCYjLsL3QbFCbLrffIe81PKKUoa6zGs\nR1cP+BIJDJ/cBwB5bp/OC63nJiZn6iyBHquley2qYIeEMnb7os/wQkKv9w36\n2t2t\r\n=vfse\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.6d1ea9761.0","@material/theme":"8.0.0-canary.6d1ea9761.0","@material/animation":"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-indicator_8.0.0-canary.6d1ea9761.0_1597156234394_0.959722774033414","host":"s3://npm-registry-packages"}},"8.0.0-canary.79414bf9f.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.79414bf9f.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"8fa9b04c11082440751433a34848f67979ed862e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.79414bf9f.0.tgz","fileCount":38,"integrity":"sha512-Ano13pk6yq7ziTWkPNVFPlN3EmwnNBB54FzLT/RZ2n8kHKaM18UsWMwg2B3zEnfYCjuWjLkilvWhh2dy/jc8NA==","signatures":[{"sig":"MEUCIApxOgS41uaPfYRuBfvzkI3BEhjQEYqQZv3aDCSrywMrAiEAkKsMYo1p2KOfF23h0IqpiNkANs7nmW2RZKuj3+DGMME=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168948,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMusRCRA9TVsSAnZWagAAGlkP/324zlWCcdqfu7d1RTTj\nGUJ+RcFSdgNGVfz+5AZ51O4PlK8sy1snS/W52HElYEOl+OrgYWDpUR+wnNPe\nn08ubpqWo70GsGPjXNs4dzEFj9bHmikjTf1AJwiDfKsF9Exl15KMHwotg1CH\nGQ6Jv0Fitp7hGqy2p7h8pQG8YGzqCe0+GYYFhPNizmbeb+x+TwZyAeINtFUF\n2aEnY2vXmb9J+P2McbVeKGDkqufsOmFP+/GiGekM+sxGjASyoYsfKh5tjBbf\ns2Q6I4fswsXSoOaOJNFcrtoFHmvJvVYqWW+Iap+ZRtdDU6e0PcrndK+AiA2E\nNxsHjAFkE+jbtVhE5vgNVSF9hjC4COa1FPPG9da03MxxmJlbtKAX7xSi3Gxn\nY3h7l4WrGe9bp6TOCVsfnhmz1JWrNY9AIdx5qFhBsxCwdYgxr+5a6ZgH9+Hw\nKg38sV4cNCXopl7iFGBfHh1aCTIbu5Q+efdeXO4wK8uPgCXa2QY2cVY18rEw\nvAs5jlwfb0HoOczjIXMcrCE0smbUjUY2vGFHa/C2orFl+YIZm6swDXePNhb8\nUqnY0+SLpJzH2f/KXSBXaWNxINAU/aLwd9MGEF3OvDzo1Zjz4RH5lozWOr08\nfm2uoJ8nllN7DGFP22EFdLIze5vqbFDru7tKs9T+nSbwAgBsEEG3DUvWrWE8\nSgZZ\r\n=PeLo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.79414bf9f.0","@material/theme":"8.0.0-canary.79414bf9f.0","@material/animation":"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-indicator_8.0.0-canary.79414bf9f.0_1597172497334_0.3354021699249288","host":"s3://npm-registry-packages"}},"8.0.0-canary.85a5272df.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.85a5272df.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"58b5af6aaf4dad326e3430bde777703731208585","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.85a5272df.0.tgz","fileCount":38,"integrity":"sha512-4kc6PAkCC0MlzPyOuelBZAIMJ1PMIV1kqTbUYKtJcsB0LrIWCcgJrTo6CGEE6PZOkGw7PXbhGrIoJ+OxReRfJw==","signatures":[{"sig":"MEQCIBLNy4WOzWc17TSo5e92e5rliogsoRpG6YcmtvK5RkPdAiBthc67Xaau9tBIGD/yiy6kY08Go72BILyzfZZIgwCiqA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169600,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMvqeCRA9TVsSAnZWagAAB6QP/j7AJHNvYP2V/he7Z/PZ\nFJgbilu8h+BZeMx0yPfG1yP88nHIucA0wRGxVfBgG/qHXGHccGqJGmmgKIi1\nCxNK2jFcyiHu5sotJ3kSfo8HcCE2cNebQJND/X0/7SWGt0RUyoyfa7mzPnIl\nJSg3lyei1in7g5rQ9YfaZhOxscPtQ3GrRUYdECwGWfVO6JwhRdHNzZkdkY7o\nF9fkcM3svV02bR/Xjg9wug5KXsXPhQr821xSqsnL0AXpxT4MW50pphcLTz+J\niEUFIV2jbw3a1JMpTq8LjapSkDOmgLa553Fj0RtHs0nEwfQ6A9kpDfehX83O\nSQ/DJC+LpWgfiEh2jbyT5qBx+ltYVKAlY/p6umodfZe+2oMExoXisc9Azjqk\nFa7JfrSQpPt/a5ZAC6OhFaKSnW3xsnS+RQ2RaeUsLi13hm9+TjtTcq9mtGmv\nMq3PCdN2dkdBHbTn7ptAoiaEp6wYVyRxSGnLNy/4VxV7teBR1pljlHbqpF9w\njOeoR4asJoAftMLl095U6yg854QFhYB4i5U2W18Ht6HeOgiQeum5yosmIaCk\nOEvPQnuB/stPX85rpza9g3OBPOwf4tIGp5CQtJSndYxKjqjgUoGrRdVFSLoO\nBoTkDLwiLU0ORYN3M04PSh4NR4h/ZPFai/qP45tUZu1LwZli/fPajDfxG8UL\nItzE\r\n=s8RV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.85a5272df.0","@material/theme":"8.0.0-canary.85a5272df.0","@material/animation":"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-indicator_8.0.0-canary.85a5272df.0_1597176478207_0.09477792731565216","host":"s3://npm-registry-packages"}},"8.0.0-canary.fda053eb8.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.fda053eb8.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"96a987e90fc578a860ff39684bdd025c10c82d11","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.fda053eb8.0.tgz","fileCount":38,"integrity":"sha512-DBOdFP9J8Apd0l6T+sp+nfx2KChl09NZHo4OV5jvEGfqhguYIvYobeSnJWbPxJ5+5PwODEmnTkU/uJnqoUNe9Q==","signatures":[{"sig":"MEYCIQDFQ5GU2p7D5cI48sYFyHbqyMHHoZgKDEL4S7seT/On7gIhANpEuPtWLJ9HEUoKp6zaxiTCXgi1IGXtF+a9x92h4H4B","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169600,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNEstCRA9TVsSAnZWagAAVFcP/2NVJmnqMyWL4sDg0Ov7\nPa2UHOBSOFO0BgCrH8sZJmR4w7x+FFaWwc5dC7W1oLBpH/jvOj/qeCiHiNQ/\nVSv3bl0qZqzzpglXFLH69tBMeLj461JvbrbbSRkAZvXKD6z1+zlL17McC77h\nD9ANWOT6YlRULfysld6k1jfo1+NVpah6oGg9KckrGMaIX4vN/cA1zZeqHkKA\n5QGZxBgMqZPWwjLV89eclKNJISU40baHrLoVi3TxluIh7dhXtMThrlMW/ZHE\nmvvkto9SdMnO7WPDl5Ndej/YCkZrnOX6S1Brwja/2ADzsYPTMCGHQTD1Y+iy\nl1F69cqndSw828NTkVJLaoVtG8ie3htGcrH9ekczIFT0JGxnefeyZcJk//23\njLwQZOBfwMSQiT9z097j+pqvNKii9q2yJ95OPNz3SFdvtac3zr3Ktq7IxEPl\njg1KonHkZmW0M+1o1ZzIbQ4J2RQWPF7K8s5N4+x04sPQRV+bGpjnfpNi0vNG\n8fgqu46/OOwx6S3GZcGBS6/ye+aI8WRjBx1JnaK9LMKDEcCy1ZjeeFL+IxD9\n6vUNDCL3xRivFxSzr2gjdGj94b7Bkrg3DoQaPaVaq3Smj/C7UBHk/qLPM56o\n/eeTSkOlSp0Uz5AdVAesRx1gjzP5SjIx2alBvRve8Hdi7yrqOguyIct0EyMN\nSMik\r\n=qj9Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.fda053eb8.0","@material/theme":"8.0.0-canary.fda053eb8.0","@material/animation":"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-indicator_8.0.0-canary.fda053eb8.0_1597262636774_0.5089283880128057","host":"s3://npm-registry-packages"}},"8.0.0-canary.760873445.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.760873445.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"58b32986954b6862d3eba7ec1cddaca95484bc64","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.760873445.0.tgz","fileCount":38,"integrity":"sha512-aErVxa8wtZXJbS3veGvQkBWtJMLV4lq0tp7MJyr+nXKxTXQ85q/oSa5hRPH5/e3dslVX2CcXVQORUpQlahv8fw==","signatures":[{"sig":"MEQCIHiCRCupACxt4/hI0kK/n6oulPphBBpq315BjkXl8JoDAiAPRKTS2VHwgGyIBtau/hDEbKS+A5M1c0FigxpkQViQ0g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169600,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGJoCRA9TVsSAnZWagAARN8P/3Ibk+l0EEPUIIGCl4Te\nh7RMoQE7NOOLt5i0KmkFNeguv0qD/KLLPjx+neq7H2wM+Qq2JVWkzjNUXwXL\novw6ArS+D1cL0Jiu6SFrzNAx45t9QX6wrkPbScCu3t54VA7/mNLZQ1mcXMOm\nCS2mvdoDU8wL2YT+kMJoNnK/szOuBCDGFc5V/Pqzva18068sbjvdhh3pZwTN\nQa6fmYpTC2dZaBHK0JqdktIULpdmOun4OhS/y8QuM3mrun2VdyOXCpBhtj/w\nlJYMs1bSplHgrUUoyVeZL/6YqF5TaIBPIZG/pXIOpfTgU+mNU84eLEVv7TD+\n1SIyfd4JfIrW7PI4D4O6cEUBdE5CmmqC81CbHf3FUPmrHG7CfEMkuQHnsjMs\nemCkU1+iUNtOVvTWE6Q25i7pqBhAjz07jRdf9WDJ4DywRsy2RCjd6Ni0hQOx\ncuIiVDm+3yX3s2v4CEejbkuVz7xGTgPPBX7y9NUy/9YVs7Rc2PSFJRDtP7KL\na+TOqzTFbTJsw8bOR6KlAunwMiCYYUT7OspNNRFTjdAw1HBKKX/hBTr2CZbl\niCBTBWIpZLT0Aq3DcjbX9C/0LuYLtgo17fPrY52kYEgaGkW7PJ+IHzQ1MQti\nklBi+7CkW9d0dfCZDoj/jWmezexL7vIxWxjJWR2MsgkA1BA7zUxDs67TckCx\nGkki\r\n=x6op\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.760873445.0","@material/theme":"8.0.0-canary.760873445.0","@material/animation":"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-indicator_8.0.0-canary.760873445.0_1597268583986_0.9712286147903797","host":"s3://npm-registry-packages"}},"8.0.0-canary.2f4711a30.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.2f4711a30.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"70d05e79ca9e9289d5c47bb0b8370c40310723b2","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.2f4711a30.0.tgz","fileCount":38,"integrity":"sha512-kCRJwEDGV+FN0K75QlMzEdUKKvCJkuxuR0Xr62hGcJmX313Dh4L4SmIR5IU/11bpj7X6rNFSRyzALbWwggAQxA==","signatures":[{"sig":"MEYCIQCV57LafDMMDGrdqd6nhFaofctojTOcqfJ3CMP9oR9vcAIhALt2ExRuk3X2+ZVTdf26t3N/jQ1vJ6z+eb5/W/Oj+KhV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169600,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGS8CRA9TVsSAnZWagAAGiYP/3T2MCDhNER8oJPJs0gG\n3JA57F20bzleK42cHiDOgiQEDlOyaxnZhGxwCMngCofEQCpe1KPBX0Hf1Ire\nmSyRX6HQoI5wyfw+eh/n/NWr4h/uX/nY0TLYFgkEsUpyaNsx2zR9s/420qaj\nTFq6An+ouIbq64X/UkTkSbALl76diK/MZaI8qZA5VUZzxTjDDJk9wr63lLVJ\nI/1UQi7ICK5epA4+QpKhU47utGY704ChdHy7oAKwYKj+LDcaQIBvpmqA+LYx\nk259J/OZ3jANslDxdZ7zI8XpGft6EAGpBanPLQk6gMViqWv036LsR5yqBV1U\nxaeoKeM59IHddJt8r2i6dkj2dERZwiefWQNDkUJ41yyDRUeli9VZteaVJ8bo\nFfrcaLARMJMRu5k9EaZNxbXcQhNrA//MM7ifEmu/Q8bfOlii50pjXi3/4ONQ\nS1y7Ml97NpuBUy7phgNYeQQS83CACtIvQQW+2POw7oTf+94uIkJV45nMsINA\nDzBFPii4jRZExbRFVipF72GDTqaofnB5Ab+OF5nSOHK0LsKQTGN29vIO8/7O\nxPvO1HMtCvZ6iTUh4Oki6wn3hUY2qFivF82Xp0jC9Xwnp2SNBK8CJ6hHcybj\nbqOtqcm7BsxbRJ9F5DhbOWD58kSza8IkpOicEhNB0mOgopNFm0w8oIr5ImLi\nxZk/\r\n=Vstb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.2f4711a30.0","@material/theme":"8.0.0-canary.2f4711a30.0","@material/animation":"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-indicator_8.0.0-canary.2f4711a30.0_1597269179629_0.6412054310697075","host":"s3://npm-registry-packages"}},"8.0.0-canary.2d72f3659.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.2d72f3659.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0d9de1fd6c04afd5a3df1794b25e5ff34f139a25","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.2d72f3659.0.tgz","fileCount":38,"integrity":"sha512-kTHbhVv/IIgLtr1Mc+ILk57i2tbU+nD7nfZDt68XHcnScUdn1rsktYGP7ky8gPTIKu3IGQ7Lvdmk6pKhyTsyHg==","signatures":[{"sig":"MEUCIQCRHVp4gSUyCUgy+YWLV9NWOtLRPxvYuKIzOcYM8Xz3/wIgBkh3V4x7NOj6ejq7Xk4aIef7zbk7vY752niYEjWzppI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169600,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGZ9CRA9TVsSAnZWagAARhEP/Rtvq3JeTr0LueC2L+5p\nRCrq7hP2aBHRCDKTvgE58qNdbLOFDd2pE+Jfc5CzmeIhm5RzEkUWxVPDtzSg\nxkKXBa70NisiiZyMX9I9X5b4KoN0mSqdTHK3GzdSEuerazsSJvOP2Wb0bJXq\nAgRr1yTzlYt9XUkksBPkit8y9kLsVtmwTEfJt7i0p4/FVbXaaKDUqjNyV442\nas+BvPmOEgiVVyFHE8xpo4RGN6pyWdjG1w3D3R8nufL6Es7wnt3TRIn705Iw\nLNuFSSt2YyB34X39cgXqDn0qVWQcSqlQQLcP3kzQGp1OMnFaYkW1I9QJJMFn\nK3P08uOtPHrwid0gxEHZKTCx9JLrF0W5lq7bLsxxT/NxqN7VK3iNDSwOI0wg\nVnpdSdvcPx8ef6HmYb1JudsoiVhjuA7DByBa904Dmgv4UEh4w9GyiAJHjNmW\niG1pRsE4jO8Cshms7sibtDD4lh3/bbQSTLAMX9JhDR/lCHu7bgEfXLTHAoJU\npTkYwltz7HDMi1o+yzonGwIwISLAkd1338HVnG6/klpOsu4woTcWTQ19EV3J\nmSyaVyCaEOciNBZ8GRUbeqJxE4LwWWuEchO0ZkOhOEPYv5xu06jiys1LJRzR\nUMZpfbcwFJELfWwdOLy5U5HbtY7duZEAVpnWXM7hwuw+pARc/Pbdy08MOGjG\nxEMv\r\n=5fO7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.2d72f3659.0","@material/theme":"8.0.0-canary.2d72f3659.0","@material/animation":"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-indicator_8.0.0-canary.2d72f3659.0_1597269628678_0.4551233910315715","host":"s3://npm-registry-packages"}},"8.0.0-canary.1fee70a5e.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.1fee70a5e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"108a8140a605f08ac3f4deeff163f2400750f853","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.1fee70a5e.0.tgz","fileCount":38,"integrity":"sha512-o2oBtyN3kobnUKdrYQavwMkOFvT+ctLg22P5t2oau9UZV2Sc6VBmTYNVB9WZRVfddKg0wM9PteiUuPY7suvXQg==","signatures":[{"sig":"MEUCIHeA8+zWVIRtp6F8uuPMCZAkSZDv6Zx/JQLmHA/+11WNAiEAgv5oSAV/31ZfwEno1Yy9q5vC8o2PxYlLOnWVpjHyt+g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169600,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNHsdCRA9TVsSAnZWagAA45EQAJppJZ1TDpDzNj6AhtJe\nV0xYCvG4zo9Q3T8dj2jjC+ylopaNVkD/nb3YzN/eOC1woyCDg/GUDqnIQ1lI\n42pOIINPrQSYOnNF/5irXLUfPLEb4Q4/Q1Uuc1MCnY5OCl/yfbRUMFgnrJOm\nHI2F40yvpFfTYubp8W6ILt0pG7z2GOObKrpMIsTw8NiFOXwR/3CcPsLPikhY\nic4aJ5/EJKfyZ7RHrE9kWNXTlwpPWXmgJbO5x0FmNGqoYyADS8/8SD5hY0jR\nFUqBgHsljavU/0yn8SDubt+EAMBXCXbhfHtGNDKhTzYKW3yjAYuCpslZV0zD\nrNyuT+J7dQeFHhUnohm+w5m/oxoeiB5sTuJBVQRxIgUMIJjzzEFCK8usy5J8\n7iz45wG7NzfY3/F/UBW3rqpFbIygNfBLe33XNhneJsSKeEBeQEMk8uZhrPYs\nAhMQ57ynaFxkrWIofRdmcManV/+a3OA3oySMwkKRxXq702G9nTEYPDCYrQpg\nSf4BB1IchxP2yTVS/MNI2xLb3d3SfSUHem98CGMATCecwszVQQ9yGwxZk2wb\nGmuZzfazWEPmVAgFx8af+JLPFYqcfNGamSVqH4yCw+lZY28I6KasOAn/vHVm\nnUhnCBPpuXwjmVmEz97xwv13i1vF/m9xCf3+M0Cz1KzzWARbHE7rvzp29hwO\nGPSc\r\n=UCN7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.1fee70a5e.0","@material/theme":"8.0.0-canary.1fee70a5e.0","@material/animation":"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-indicator_8.0.0-canary.1fee70a5e.0_1597274908697_0.7349934777164862","host":"s3://npm-registry-packages"}},"8.0.0-canary.023f3fa34.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.023f3fa34.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"97c1043628c2f6ae99e2fa72aa315f325f8bffca","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.023f3fa34.0.tgz","fileCount":38,"integrity":"sha512-h5TVHCIIhr/h3f98cmmA5UHrKsCQsMbCZocTei6AXD7O+lBS3un3pLTTt94a9ErGzE28G3qtN6hq8JBEfvo6gA==","signatures":[{"sig":"MEUCIQDfbNRSE+uWyVH7CG1qGfdu6FkH9OEit1XeAWyfkDnVsQIgATpit8xqVQ+OG8hBBDoa9ayte7Vpi2EMKBcR8YEjEqc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169600,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNJNtCRA9TVsSAnZWagAAPNoQAIzQQcAD4Nci9T4uNY0E\nlO6Mq3/xVwHb48mqUaiXCiQY5lI6tEv/+10oyLteIKwXRuMnkim4gcQXB4XE\n5bIiKw7edOpY4w4+AamZ9a4FolFW3owFKWxPyIQIEFlhmtbFIC1BsFaz4340\nGCZNy32HrI50B0IKFpNs1ubMlIbJR7TpqHoQ0EvQNpD8HGedI0Pe6cZ00zVu\nkNyWqLfHAIzZI8fZyEj5spoWzPlgyc2BKxVl6CyZjDSgLIulkT8xjcT/Gztq\nP+EOP/yyyR+1CDbadFRHqbF8/D9B6AV/giNOvnemEQRW874JSEAuKGeKfNv/\nVIY9WKFgCjk9StatKPJtnKWpuzp7W4D8wnQsD6+OYmYbz7sbgPgVvyhJZ2rW\nWXHVE7+g0X6ytnRrLUCCN5JJDFXDCu5ne+fL0eGsaa+c/ridIVXOY/XAk+8d\nRmcu8hKMXFR+0RoxYuUf2Ovww/nhqPHBMdaKCbhxWDHF0m8biHJg+bcZrNEh\ny9zeVCeQ465LrgpW6HqK6UwQKLFJ4ksakN/W9QhSbPmTXi1TEV//vjVBbTsH\ngoZk+czFtkxL6NgxPYwdFVHvKhtX/YB2Mjp/Wq/re/IXlcrkcc5+cKzZygS4\nwqIqRecNoe/avHTyGUAWpukkavaXI5XvJ8Xj5iawosNk6Qar6+7GeZ19zyyK\nIPpJ\r\n=/xTO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.023f3fa34.0","@material/theme":"8.0.0-canary.023f3fa34.0","@material/animation":"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-indicator_8.0.0-canary.023f3fa34.0_1597281132918_0.2366114654212299","host":"s3://npm-registry-packages"}},"8.0.0-canary.80f3a9e5d.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.80f3a9e5d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"f3f922a482e61ded60d7115fb251152f24af9be2","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.80f3a9e5d.0.tgz","fileCount":38,"integrity":"sha512-BSoCaqANvyubxyyxCua0uVZdWtTVQv99zB17PxA6qbFfWswhTlA+TeGLpl7E0V6L8ZEZHCLmejoEs/MoH0CzNg==","signatures":[{"sig":"MEUCIQDe8gtl6UOikdW5/HZRbFnXYTar4pnky3lR0Z73qrY/nQIgawNjwZPkOYftCoYLvQt/8kc17AWDaZs4kIL5ygN8DHA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169600,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNJdNCRA9TVsSAnZWagAAjwsP/3tutYoERS1A7lYaZTe4\nScZr9itcB3xse1PXfDl6KqJ3TnVh6NSccaAM54YDnfqN0dHPmZkAt7ACwtX0\nk7s4HI2FRkaRY3GzA7fpJd5KGANhytfzx2x81z37qNib5UJ5tn7QdFe/zOUO\nnH3A206/qUNptj4ZMXAexn/9S1Q8qXiph8A2qmeeUkgbA7w9ZtWWazvJzLmw\n4j5qQiH0Nnu1KcZ3RRmX6rmoHVHV4+4fnl6zRoXWML8h2C3hAs+vLMUXdLMH\ntsf/AyKY2Y8RGFzVXM6mquOVTtqhkJ/TYjSB+bBotG+SVgGJdBN4TCn6IsYw\n9jerNn6LZfOfg6B8g5g+5Ro6u4Xwh+wW0XSzxzi69KJOhZMz+use6f4RX7ui\ndDYSrjavDOVirNljrfz8KTJrNnwtP15MTT8fikktDKDMlA+Qpi06Up3hCUa8\nuq3+0ZlbXFePvTZQVdaEbIAMGhwk3zRhSzpmW/jY4El47C7UrTC3oTlUYCzZ\n9gKu6GTUw49UlsjK9xkyIQUOgz3MTDsg1MCxN0zuCf1Kq2GUnjAuB72UVSxL\nBuQTGTTZS99O46qYi0zXfAvoND9y+oW/5pr92dzc89hppzyXbVksI1zbmvsX\nxGhuBDSVXvEwEL2b4bjUgrodpedeYF+Ud8C1rFGvOY0Y3D1KQRj4GNu9aApn\nV2PF\r\n=nEZk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.80f3a9e5d.0","@material/theme":"8.0.0-canary.80f3a9e5d.0","@material/animation":"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-indicator_8.0.0-canary.80f3a9e5d.0_1597282124956_0.5069652122905386","host":"s3://npm-registry-packages"}},"8.0.0-canary.a1dcfe97c.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.a1dcfe97c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0aa14251e5b561730f925d6e81c758d3050d56d5","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.a1dcfe97c.0.tgz","fileCount":38,"integrity":"sha512-MlErLLJniQ/SRInCiGUVfjBfjMksuva6j3IHM4Sq9LmbbqWekYLPjIPol2j4Gc/Ccce4cYy1CySp1ZvP4dPEUg==","signatures":[{"sig":"MEYCIQCbgRwS06h4D94tcHhBAl/VtNsTlSmISXVtjwkYt7lpeAIhAIkRRSGvZB920cAIfCb89wLoXtanlYDFRVfkUQTiw9zB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169600,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNP6bCRA9TVsSAnZWagAA3R0P/35EN7emeFFAob3sgGSZ\nJONYdVRnKTk2EKe0eJBw76fnjaqe5dcgPn3lJfkF9Nqn7nFvhyLXsgr98p+/\nWG3EtpqI7yRGUu+J8cxwd5HwTyFyS6amw8II0X9P/8TFAER8ZATgrgW5vjly\nEaYDOL9SvsYRpIJkysBOJHH/jCxe+Na0qnOeQYSkbX1JCWALAhrZp9MosEVl\nshYNp7SS6uQexYPubBpo6ewRdLx7Q5GR5BXUt/okwXsGHBLtnHBUH10Ug2sD\n55QSCEeXyw2DKUyvbVT2knxhiBS9rxyes4WqFtpjckPGsum4apIjTyOKG+dZ\neAwu+DzHBHdy+PZymV0mf+mYGrj7f46SrO91DwGdeqhjQLnz6bBfTD32q2bT\na78SGFr2TtLmlRIjEM4zMyWDXpnl3IhTKor/jiDtMA0RuFeUjL8dg+uNXWGF\nvub/57zzwN3CNexAoKCWJ/YQ6drTC2dzr5ZD870BSgf2b/yq6p9H0fTE2ekv\ndnP2uw2M5nEY6de10UW2ZQMn+BD8LASfGWnzJJBPkjZHJItzfJ3gnFcyVT9A\nE+JsxTFP64EV1AksmFZn0Cr4Vf9Amo1Q9YJCMQr24qJOl0Ncsl6k6HzOIIER\n/rxd+a2yvk4QvhvyCnWTYXQIVz1FclZjwTfRFgOROIH91Kbh5aYh1MHsQm3Y\nUFIj\r\n=mPCv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.a1dcfe97c.0","@material/theme":"8.0.0-canary.a1dcfe97c.0","@material/animation":"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-indicator_8.0.0-canary.a1dcfe97c.0_1597308570798_0.7192367306600636","host":"s3://npm-registry-packages"}},"8.0.0-canary.af332d5be.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.af332d5be.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"260b0f771b073cca82c556e40da23d4b2c90fa3a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.af332d5be.0.tgz","fileCount":38,"integrity":"sha512-0M4aKPher1UxR7b+ADnFgut4y7qmllOTGkGcjx6W4eypImx6FYSrfIYZsu55212xUbYZv/DRAMSUMLuOmxBScA==","signatures":[{"sig":"MEQCICvzhXyYi1kZ6vdu7AOknc2WzSNTMvbHjYQ5/L0ZeBGjAiA9nH9vIS5ap+pZZp5PtLqAHylHwXsDS/4RrE+qb8Iuzw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169600,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNa3TCRA9TVsSAnZWagAA5KAQAJ7cVcSlgRHuDSwhVJ9d\nMjRMG7cNzBty7LsD4W/EDduT/M/5r4aMkqiMSsLrBKnpFFnti5yl4XXgMc5J\naeqxvMe2naSUFCSUlxnCu5qIzDgSTBtLZaOWmAa5ekMtzdLZoDEbixNFHOqm\nbW2en+2vuxGclvSWZNLX8/O3yybIubFyl9BUrW8zITNvdXdtm+cEGOPCTqK5\noX8LNCD3KrDyLw0q3Tl4RtxxLB1edpibdrIUJMbksjQ4kbQ7r0ljCULBUkVZ\nzHTwohlhEPZQ3erJQ3afHtgWDxeoFLRp1GPsfvJ1Ogv0GhdvXaFM7PUBhw3o\ndiOTb8vfHr+fv2Rm/3pKXk9qPA09Kwwt8wkWXMWCkOvVRBpaeJ0D0EpBwuHG\nSYZ4H7NrFdjI6vvGpHOCkCWyGii9KRYts65nv/6lcHVAy4Jz1rHSZp8iL/OS\ngJ1ejQN+xxj0pQ75OoyCIar1NbmplB9dBLmCJDPgdea59XMgBTtUVPt9EuaS\nBN6d09L0GvsIddwRALjr7SlG0QFitMU+EG6FBLn9qEBCXlaF3gnjZ9lpIDVf\neZbU+sanYcpDR/8c8VzcaizeA4yRKV02rn9f70KGwZ0HMgbBFU0yQvyF1fJv\nBWyYENbiUSsAAM1YJhu4EMTci8B2CPdostwPVmsYAywqvOVvdSS0sB79h92Q\nrYas\r\n=y01k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.af332d5be.0","@material/theme":"8.0.0-canary.af332d5be.0","@material/animation":"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-indicator_8.0.0-canary.af332d5be.0_1597353427091_0.741401843325215","host":"s3://npm-registry-packages"}},"8.0.0-canary.7dd4567c4.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.7dd4567c4.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"580f4cea3ea623fb93cf8a71ffb969244677699b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.7dd4567c4.0.tgz","fileCount":38,"integrity":"sha512-MYm+KjT46rUGmoSlg/hs1YWMPciIj1QOQN5qbcfJAr0B6wFmeBVw15RbInSnCXau/jwoubUrcjuBKTFZgi6wZg==","signatures":[{"sig":"MEYCIQD9SIc6SBQySJwqCToBXdoVyXRgrXG4BmQTsAPS6Rvw9AIhAIB8Kf9ZFToA1cMTX+uubURNcJwrBLb3Rckr9nHuZir6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169600,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNd/lCRA9TVsSAnZWagAAxZcP/iqQtpoSRo1MGG0lzHv/\nNy4JUshWU/AtqlAXk9kcB5/cFFZ5NbX+4RpdtOt0qIV+2lsBdp47Q4dpXpkz\n2aH7pG2BjFqsbAf8Rwl79Y4RxbIYIZ9cLwteJb/ucVNEQXBB8Ga1Oo4BsQ6T\n6D/GkYWBV9vyOqvhBtLZjCl7tQaeD2h0skKW9LrQHFs0HFgxRRNd0ePg2JjG\nXmTRdFZTmerVHdftOYx3kQpG1Jt1AG/2h6rwQJ08qNP+SRnOL8LCH7QlEXj4\nc6evyHNIPDh+3GFkQtESnRGEa6zgFTUBgMxx65wp6xAwEJzf/BHpuTAwM0ce\n8qh3at3JeUSIs+yTuP9tMs/emHl4lT6w30rUhHHWEju/XjUOt/mlRVARXM9z\nxuqCeLIHx+0nM/EPlfUF1xlejEKVzO6hyks9Ikj0YoaPWVn8HtxCYt8At6PV\n0YS7NLGjClDg6G8RRRxeRREP3cD1/beJDjO4MYjt3fM28r9+JTTi0NY5RQT1\nT0VyuKzzt8VyeSqVFbET+Z3ZN8tZxprSbDwlWZZxJxXYxs0Sxyy7bzTp32Jz\nDmRqdUTPrV2ZAoPbX6+TfR7CZqXZO+qgGWLDCHUXgSmzTGO1ksquztMqbaZW\n9vnON6vu24sYsybdSGATV+FAs8H4c9NPSUZNS6BxfMiYrJZVnPij31U0qyZx\nrl/K\r\n=bk3R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.7dd4567c4.0","@material/theme":"8.0.0-canary.7dd4567c4.0","@material/animation":"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-indicator_8.0.0-canary.7dd4567c4.0_1597366244414_0.4585332738230916","host":"s3://npm-registry-packages"}},"8.0.0-canary.ff870005a.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.ff870005a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0c927a877e7915f8e9211009f8e1ecd47ec84af2","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.ff870005a.0.tgz","fileCount":38,"integrity":"sha512-BEU5Mu7kHXsib8WhxVBZLW65l02E8zCJRY/TuC66qjWPxQvalybBbCu6blYcBl+V7G3JuIbmv2VZQI7K3kzGqQ==","signatures":[{"sig":"MEUCIQDPcF1v8gU6uuXwD8nlIRrcAbb0yezln/TbgOEy1ml6SQIgBjutF9SrvqqxQUrXJ/UysEoyCfusZ5kBJ1+hDnfLXL8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169600,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNeXQCRA9TVsSAnZWagAA2MUP/0dIgcA3vXOoc7yXddSX\nGo9EHxf6BP8sNsExxeYHInLvSi/nSTyfzyh5tYiamn7TzZ7q4tNMCKgRxw3b\nc2Bp8dZYqKOVZFGdGu45dhb9oHJS5eWVimIlhvW3XafMvuq59VZNg7o7+3hE\np4dIC1+ANHOX1a0Ts9d3B7y5ii5uQQ1eu0FxsFwN+lHHV6rUrynMghO8kpGZ\n95vHltoGYavligV3/kh7a9ocPzX9QMw0m+ayGHWPlhEQfUIBjHq36YJ+9UcK\nUiIFkT7HS7LNf2HiGDfEuiWIebcwvtuy9MDBRBjJKFUu3NBiLGNn3aWW67+h\nhsur7+crh1QVAC3HP7F+8dm6ByhGhd2ZR6GQU9k4eDYcxhg0gBnBfFZOCWb8\nFC1NEOlGJrRFJzbQWPL4qk7SmKvCiW1h+XWtFKk7is4tRd+JtrIn/d53oSYH\nlj1yUXC+oms+J4YjV0jt99ELd/ICDZc2l46Zk9sirSBN2vqHj1SodbeFRQGf\nbu1336xTSCeZAm+LXSjgRFhWygLQN1xB6yN5BhCNJ8fXNE4ns2NX82FwfAkB\n3FBqPZa3e0a70VYBQ/Pcb5bG89bftNJVYi0J7jAOCWQ1EFp3mFQECWWr2QIZ\nOks3rmMtbwAXaOsoEDm9qdLqOuOQe9cY8LFygs1RlXbHRdhDKPodr1ViSgTR\nBRwY\r\n=K7yP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.ff870005a.0","@material/theme":"8.0.0-canary.ff870005a.0","@material/animation":"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-indicator_8.0.0-canary.ff870005a.0_1597367759697_0.7825091499190917","host":"s3://npm-registry-packages"}},"8.0.0-canary.150f427a0.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.150f427a0.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"8deee87980cb1b4a8bfede4f14ea6b7efe370a7a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.150f427a0.0.tgz","fileCount":38,"integrity":"sha512-d0fZRI56VY586zLIanopw25DHMI/kFeWwlhizIeBUuEck36wtI7v5UuJLzx+r/m/VKhcCbwR4dfqMKOxKjiePQ==","signatures":[{"sig":"MEYCIQCGTzxUMX/Nmb4XgdntOSrZOyCjsmANh11biYDCH/gqTwIhAI3FFGHnheRVzJvFUc0i93YEpQcAYjbEPrqmWMGTRZ0d","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169600,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNpGzCRA9TVsSAnZWagAApiQP/1J1ouvSHXDxcRBMRyLA\nIAk6j1OorUB/MCj6Z2etOph+hvWdC81RKB8EzyteQlvfcoK4/61Ubtvi8VUN\n1d4OeLF6SvkHtRAQkRIiAw0jNHSRk9hNj8SPTWBzBwpVXoOsa8fBKmsQkv1z\nSgT/bcmDegm4C8aGm3/iNZXrXGN8WE/wboGtAv3AVOoekC9suvQUgXtNFigk\n7vEVuDNRjBpuFX7D6e7pmGyh7EMxZeG697of+t1V+DPxHnj4n4KJioBYOTkw\nP7DblTxanOT5zzuTCiWGnkv8Eckk9t1407mT+qqUADD+1Gdf3vYCp9ruWuEC\nXifferrs/LOo//5mK0vitrxBu8NiWFVNb/bPjLKPobDx2ZSoRtDX5cNPfx8V\n6S0P46gmoGhfdB3Bhzp6sU5cIEVjnuWSZNkwbNTgPqbmDm4Bw7o6SkzgKKIy\nmm8SHLBF94IPlmayeMyLgK8cyu4E9YY/Tq7Wt8f7bMviCjoC4C3w3e9RZ42v\nud6U7CpxWWiw9/VMktldlrUkF3wX0+a2RfbuPt7NKC3ILXWzLYS8JZeycS6n\nzUgPCO4YNb9b0XF1WgGx4pebW5G3uOMieOtZNwpzqO78D3ZzRXNKQe8ngMFE\nNa08h0OWhX/wNsqxvGSgt5eXwnmcTc1MHGE7BwL4tivZAFNxyrVD/QzB9bGF\nA8tk\r\n=o2Jc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.150f427a0.0","@material/theme":"8.0.0-canary.150f427a0.0","@material/animation":"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-indicator_8.0.0-canary.150f427a0.0_1597411762756_0.24355769629537827","host":"s3://npm-registry-packages"}},"8.0.0-canary.bcc58290a.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.bcc58290a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"963f6fca7084d0e890c46c5be3db0e70c1af8e76","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.bcc58290a.0.tgz","fileCount":38,"integrity":"sha512-KZN0Hn+8VBsvEWyeJYrvjBVotvNlejDElwjfubbTNbCfHwzvvbKRAUrDw4KgZ7dH7KsCeFLAeZOrVyZj9arQwg==","signatures":[{"sig":"MEUCIQDmgbAhyKKuFrGMwusgxBg93RG7BC0LyM7aPbAQIlnkjwIgO8JK1mgOJbfAAEefExqYn09WxRk9w56jxrUS1H3BAdE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169600,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNxyrCRA9TVsSAnZWagAA+6MP/2cS97lSbWa5CvAkGLh9\n35s3pYzMJR0SxWAfieFrZujRD9MS/mUxPDmj9OFjd+8wIye+T3vWlgxVg5lo\nC4L+emkIVHsAOBSZ3whPQW4mMLC1LPo14GC3p5baPSrq/QSc5Plpni6hfTsJ\n7aJ0uO39vtxJK7JS5NeAuyAs0S6P+cIas2U231IgQGr7iBM+pya8gb5ZQP2D\np2VdWnwxUQbGfg/avssWVV7POhYt1bQZFp4+0171WLGIyE62vyJCNOJl/NAG\nKZXcFhdD96/A8tUaIE2Ka/IxpX35GEtK34jWPI4kOURoSBPZ4TVxCYtbEQny\nnLmUnLuHv4tJoeFtUEzy+mVBNBgoJSyfnRF/Hhl0aGYfSlUOFkwvCLG3HLUB\n+aNT/0B71d9PSuoE9LtgtKlxUAJTZ26TIUqkiH1wNrQFi42/kSeVZdKwk3bU\nPDedt3Pul3Ve3mII5F7APez0gXD/zAzNDlp6hgPlmEWTj7W495Qahu4aGqGK\ncBtkDW8jmByG4Mr+ey9nr9ThQRaVbS2XAKYpb9TaGSdeWvDS7IXFHxWWuxHN\npYn/wAmzhCNyotWU6E3RoMLhZ6lKcshZ7H20Xt0rpEYwDu75gyEXGnGi6piZ\nhxZxJiXGHVftRAioPY4/f8Xp8LmL6yb9cbIZtMg/A27flfN5QZBlvChlvrRT\n9O9P\r\n=Y5gv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.bcc58290a.0","@material/theme":"8.0.0-canary.bcc58290a.0","@material/animation":"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-indicator_8.0.0-canary.bcc58290a.0_1597447338705_0.15637477207754236","host":"s3://npm-registry-packages"}},"8.0.0-canary.4f55400bb.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.4f55400bb.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ac888ac6055cef848a49b59990787fa704086c73","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.4f55400bb.0.tgz","fileCount":38,"integrity":"sha512-u8PtXYNJAagH+V8xezXecdvcn/5ALWOzEPv/96KmxFByj6pTk9/ZUkxoEoqlYmcyAUMm+tMvaamQ21UmUxsCVg==","signatures":[{"sig":"MEYCIQC4fOVbuILivJ8xQ0PnxTB/K3awWaZ5SD7P30XGvVxzpQIhAPZxQREQlKUbV+yp92euOfxG7dHh+HlAq2DBKA/KvpW1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169600,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOrJ2CRA9TVsSAnZWagAAWKkQAJ5OeRuK82sbqf3kdjVg\n8fjU3lrvqZRVgF9DV2cHioBlbVMzEMWOFngd8ZfD8E9KiNRS628+dQTRzAP4\n5o8hSo9L2nd6hC6+uN7NUYFD0J/oBz71V4A6txB+hjrFfwh9Oqu7wZoMK8IZ\nBNg8X1AcIIlEhQUKSPPgsRkJdmHqEGO7SyEBuEkMUE2nttOS/C5wg0jIHW2r\nAQ1QXymHmrRd8Otn/eYkycVbr8wlEbY0n2wmTgkUSTd6d5/IodNQcXRlXnhj\nkifcE0Kn3p7fxj6A4ZIcmioGhOFCzQd6wMAKExqFTNK7R1PX8020SqGdXqhc\nxUPap4Q7dNpJEuUhu64fstsgT/pmhXgwLw/FClfhO+gGYs4Hj8eNWA6s0/KN\nCrJmS8Z5+c4xHwdC38PP2/BrQN0mUUQTbXY7nu/RuprBtCyfio9VBKqsk3VP\nEf92jk7xdRgQHghefOovCooDk6X8dSq95+aMxTyuHCP634RNZ+pMljGY3xAz\nrS6s0FnjtRFiUuAdOnjEM0uCmuLb4UgOgAVOI3yuOO1X8jMfArbJgmu6WrVO\nK2TD+Q+yI5rtG/1JanyyKoj9Sr+eQdSXQB2u/8VC0RT+zvF7vqRYLiKLZhCl\nsXPT+mZCRoUFObNIeGi3uV1CbHUNS+QElKF0bUrYonJ//QOaQiM5W+hF+DOK\nZgw7\r\n=zp3I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.4f55400bb.0","@material/theme":"8.0.0-canary.4f55400bb.0","@material/animation":"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-indicator_8.0.0-canary.4f55400bb.0_1597682293822_0.4248969841112138","host":"s3://npm-registry-packages"}},"8.0.0-canary.000d64815.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.000d64815.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"3876b79f6dc06bd71cf226e4bdaaf0042a43cc79","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.000d64815.0.tgz","fileCount":38,"integrity":"sha512-bJ/wcL5+o6IaqUtPXycNubMrILlrLB6gLH9U3xc3w5rsIxWXw0DdEdoOsJD/YzEVldQnHqfHO4cUQ+vKHRs4uw==","signatures":[{"sig":"MEYCIQCakXvHBuU5O32kwA4MZQ5xx9J6okunUytkNy6czf3w4gIhALSKeHggHABelXwAclEpnEdNsFvXSqq6taiFFWjurlFY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169600,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOriFCRA9TVsSAnZWagAABYAP/jYuqs0tm2cCROX+ZeKH\nMZRfqyZvryPsEjbKn8J03o8glV7rip5iQrTS2Pe8VTsTo0v/0hpBCa/XVx7E\nyvT9CzJFvHkaIkrcEL26h7P+uBnBRISzzgMKETU1Sb0NalgFmhr3b/oWCye6\nqs6lBqqrWUU3lIRoUnyDhYT1748xUfcLMOSarMKl4YrEjJFNBaEkpIzDP2Vc\nBZHIammoVgpb6XdVs5mY/7XQ3idqmHJd3PfZ3QJ0Y5GqhJ+r3jY2c0CICSgm\nx/AflMG5tIxztYf90cQpk1VLGtJn3Uv1WTFt7eeI90oBa6XGRSXZlnI2rOFn\nHMoq2c3hk5YqOtnaPtPkPk0gt6CzqfEtMTEfE6Nafl+ryQ/MnrUSnXX5E0tG\nwpnTb3Pgtp3rhGTbACB4RwY1Ex070ZhtgO67PVDT+sTsJWxa0Nqu2b2EU2F4\n6tnMLasI+3GPQU9VcnQtwsPx45x7AQqiv5IdD6QIQOcSAY9ID5jEwFs8nOMM\nEnBVoWRyJqXv3H0P0QDjL/ZIooPWEBhreLF+d0pCihj0Ts+VBRjbsnuBxqBV\nPqysXo5+Rvb54lh2vXq7b0cD7ImTC/ZaM1LJBr1D9hpkLpXC5bRhviuHeIKJ\nQrwelLD2NZ+7QTtD1hP4RizKxTLVCEzHXyb1gE02LZLbuND0Wm1FFRbkrAK2\naASH\r\n=/VgU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.000d64815.0","@material/theme":"8.0.0-canary.000d64815.0","@material/animation":"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-indicator_8.0.0-canary.000d64815.0_1597683844894_0.9341750306433132","host":"s3://npm-registry-packages"}},"8.0.0-canary.defa599a8.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.defa599a8.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"652aff612acf561751da5480207a6f4e8e080c9a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.defa599a8.0.tgz","fileCount":38,"integrity":"sha512-Xsy9IOTFWnTSUm8wFzhM41nVgDq/cKksQ4ahfTIBEq0QrB2gcHtbneT1nuhwt4daJMEfBB0gJui2E0njBGyC9g==","signatures":[{"sig":"MEYCIQCaU0IklgJHUysub+AKMrNNPUT5o/SAnT1x7L5fU1eQrAIhAIm6WJ10xdWb6q22MYvI5MehBsy1g91Lp2wUvYvSNugz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169600,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOukqCRA9TVsSAnZWagAAzUAP/iET3EQ4JTz/7lKVMYOT\nOHIxe3Q9w/GOOYvkl5S9uJdRnzj/9Or9oxzf3PLJyXQzlJGVroHsVj07hDhW\nIBIkXfNqaEwN/+/0xAbkXUCp7HScOpZ8VQy3nxzTXqwJUpGb9FJueGsePHe/\n+oNP2gLCTnLJ4DKy+FuiA2+Z4hYTAsV5Lw5hNpfNE5Zga4sZ/5C+Sstr9oHO\naI65p42B5OXP5xB5rpv3n/QvVuCoDcttQ4ibKp4v0Ll9MksZi5QcI/wsYh7B\nfDxHaoO7qqNe5YECyY/z66jkPuxsciL9BmRxtKRA2+WEOH9ITAGveuiQFADR\n9VuFiAXbNxx0MAQ9p29r9iKIntdihKjeQfMTvBvlOxzrY1sMGQ1vnm6AYU0K\nCs69bsFPipQy4YOvmrp+V7eIxpbV6JphVmd2V+PFncLu99cg3YXLq7zgrjnp\nbxQqZbeJvxGwWlCsbk9mwR0YRkH0I+0sm/wFjDqZvdXejEKgZQsCXfeZhsGf\nGoYy1AgdV15uMfleJbasfpb0iwoRRr6xTe/EugvpXh1ZEK4XGH92otEs51ac\nRUYOqXLkcEkBT7n0NP/RVi7tMd9/QxqmQP0u/n000/iGTxZMuVmIXk+oXKLT\nwm37ZrimuGLpaVmNaU71D/2Srxp452ZtCCXdpzqdlU7IBwRONd+FENSlaz3Z\nwahK\r\n=hEJ2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.defa599a8.0","@material/theme":"8.0.0-canary.defa599a8.0","@material/animation":"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-indicator_8.0.0-canary.defa599a8.0_1597696298235_0.007822326838973881","host":"s3://npm-registry-packages"}},"8.0.0-canary.66b8ed7e6.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.66b8ed7e6.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"621294442d10447494a7cdeb52667f2fed3947a5","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.66b8ed7e6.0.tgz","fileCount":38,"integrity":"sha512-TDD5C0ENvMC9taWgCUWS3pqGYzK+bsxyLh9Z1PtLKWCDc5n8fG/q0iaFk81tI5QEnrKn5cT7ol9+YgAqN+KkWw==","signatures":[{"sig":"MEUCICqYFLLpXmcDiJuPTQhSuZDtuDun3fAC8Zg38HFRnwAoAiEAlO9eW0rP0FtW9lIpuQ8lrHG281JKN32fT/c+YkNl4KM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169600,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPB+0CRA9TVsSAnZWagAAiw8P/jxW1k1q71oBGS3mBdxl\nnm5GUDV/wHCXfrHq/vwIaVAJrHygOkynEBvF+Z6UpNMGWqXcry8PaPzfjfWt\ns3PTMo5tiEE6POlob9X0D0LOVRUiyc4//slDkXNOBig/7E01IPrk7xJDHQ1V\nJrygUfUc3kOlLWqQTJLhkKSfaYd48FtqZ+yyc4vdiqcvyfla6OlIwXlf0hyN\nYeASwfaHOJj2P/2OQA+D+NpD+v5YXifR68ylOmSLB4QpyNljTZ0bufEYv70d\nO+lMsHz5XUKIx6q/rbViXH6Y0lEKx8nCGlVqoK8RxXBzPROgygr34cNtZoo9\n6ea5t5RUjEU255kIEsL6MnoL40KxAfo6WU4E6dKw1m6H0CJV+hUXObrDsbD/\nLSgLlB+bsUHxHxR72hz4eHUG7KVhqvw99kMCgzBvqCeAQgk22RQVK09zxPDM\nXiqy385F3/hal4rg9WKauVGzyDjXSVTKfe1+v7RUk8QMCL12P2nZBmMJ5RYz\nIKuOmf1WoGCpiAN0ukLg875kH2qWAM5mrzgrwDE1HBhIQQKYFJKdLqICg0PV\nQplcaqeE25eF17sDWd+U/LLTjsVafayFjt9NMJT8m+F/l8WZv9ZIZNio3aRY\n5JAZZ1xiuiUI1RBus5BAT+oY5NvJ6RuoiwL/rOeXsjQ3kk9rn8vDPGKqold8\nHoxF\r\n=UeLr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.66b8ed7e6.0","@material/theme":"8.0.0-canary.66b8ed7e6.0","@material/animation":"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-indicator_8.0.0-canary.66b8ed7e6.0_1597775796125_0.4041317422512327","host":"s3://npm-registry-packages"}},"8.0.0-canary.e2b1033df.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.e2b1033df.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ec1e9da64faace95f8640d88b25495844612fcf2","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.e2b1033df.0.tgz","fileCount":38,"integrity":"sha512-nP+ihN4t5lvUeAO3UkxtvujZ+YxMm7v9KwUipd9p7HQNdx8tRBvncuV7Au7fsuGKBUHAMG3XdaTC0HMbpsCoeg==","signatures":[{"sig":"MEUCIDRFc/BW4vcstCYBmTFUlNRhF50gxWOGO0kdwQ21TqeIAiEA+Qsliez90lXBtz77Lh3ASy3wrk58mcYOUe6P8FhJQos=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169600,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPXJoCRA9TVsSAnZWagAAOUgP/2WtuFEhMoYvpwjkS+cb\nmH33dHLdEWsZjoB7uk9eNclFZs0Lg+reJjKMDbo6sw28+EBi4Uk2l1UZ2jP5\nLJ+HHlf74FVl9OLzBBKlD5OQyDq5WAYrAVPnm5NIIG6bNlnZss21jnQpLqXD\nGJjEp4hjalAdJh+PDOj76Zokyrc59N/uyuY1JkKAfTFe1EjXLRsTDQGDy2I3\nB62aFcq/qZM7IF6zSS0fSUuWIZ6x90lJyHms4rKmwRJD0u2uIJMjf/dyQA/R\nS3dpyE1tr162Ru2l0pZFblKE9+ovjWJrXxEU+0YGiw/dKIymSM8p4gvOedMh\nSs7060d/Zar40bv+qV6UkQpaDXomELq6xi3MjQBjr6tR3UwXsdE1/FsRaec3\ng/iYt2qMLTtM115nLWDHikqHfGgN7/Ks1rlG5Xq3RL/oNFuKBmIJ8irzl9uQ\n6cb+MsYuU04nPdkb5JLEVupRniSXrJGAlubma4amVBsFvHV2DCvBBCg9xkv1\nb2hJKmsZKYELbGwg9VONNFuTSH/ppds92q21mHv4zOPdd/j5N6ZRLxQlLcCr\neuccTSiAXYrf1JV+sb5bey2p4VUOtsCS+a+Ip4b/5i2wJ0ywMo+p/PQ6s3D+\n3gw3iIKB6bUJH2ypY8r37nAQgN8UqJzkA/KgkjFz9/HFqaKH8yl/pO0cULG7\nto3g\r\n=sedt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.e2b1033df.0","@material/theme":"8.0.0-canary.e2b1033df.0","@material/animation":"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-indicator_8.0.0-canary.e2b1033df.0_1597862503747_0.6283629132872246","host":"s3://npm-registry-packages"}},"8.0.0-canary.2e8c3dd2e.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.2e8c3dd2e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ae3a95a9b8957d8fcbd733fd003946a5ed92f436","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.2e8c3dd2e.0.tgz","fileCount":38,"integrity":"sha512-MpxaQVL4TbcCu5FCcnBe1D0g1T1gFgdGoDxBHY3nhjr7BDy925kFmlfpsAjvMz28hdvkP7t9bQs5X5Xvrf00nQ==","signatures":[{"sig":"MEUCIEzxNR+T1WUK8KH1J59OjX43imJzpUJvxeeGqKYxuaODAiEAs4LSJRmEY+aYQuQHXErmNY2Ku8pTWcTuMttxCXJPPKM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169600,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPXw+CRA9TVsSAnZWagAAB/8P/1Ha+7mMpsz2p61D6vUs\naiiZoQ1IcFmnRTCDIlVyJL7QvKvujHeGuf77PfKWfJQ+hHWs7gsToNDhHZW8\nHqiS1Ja3rnk7M5KJq/BBO9/cen1ESuWHtknck32yDjp9WyKwcJ0A22tM3C0k\nKEcjDk6Z68ZdKngmeApkUY1pSH6MqJ0377UCBKmL+p0x1DItLbas4Lww/Z0C\nGp3S7/MY7vjVt56dErs5CJ79tDpG0iGNNiXlln+je0e89gcErPxLolyq598f\n1Vaic6STJGKHB/Mump06c7s/c3EJjj974tkz2Hc+UpP8xtbiM0eO0J2iB8R3\ngzJgew6NdjYfB9CpwpN0jZNBMPD0O/AYq3QkdQwm2K+iUVVXr7Bp4KEmUN3x\nps4NRMHylYzW/FPy9ASdnO0twmDn3JXu4Mu6ko3JiikFahc4kJ/5Hpk/QsyJ\nHiVcAfUcYTOt8PkRAYbSeCXuLP3TPtDnVBnIYQKZslSTaxRHd7Q1eeUhJkIK\nnTfe4NY3Q7OD7e+ic+bQiTilqSnaoRwxlEjFiG2vjl3Ez02+IDZ64j4iF3DL\nofIlE888tIN9GeKaJ41m/FIFHrpFia2w4Jf4tCV+wlpO4vON1WZIfJxp5ukI\n2Yu3krBhicJ8KOqfa2qqzYMTAzNU77/TwZZHYb/Lvj9mGUc5hT6OZufqbHSR\nOdrD\r\n=g0su\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.2e8c3dd2e.0","@material/theme":"8.0.0-canary.2e8c3dd2e.0","@material/animation":"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-indicator_8.0.0-canary.2e8c3dd2e.0_1597865021866_0.6108493385695375","host":"s3://npm-registry-packages"}},"8.0.0-canary.b2e80a5d9.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.b2e80a5d9.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"d0281cb081eb6b96257730f5c6b277470c8ac472","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.b2e80a5d9.0.tgz","fileCount":38,"integrity":"sha512-YRXDN5dBsCuBau9RR3SzLh42565pNYyjuGTDLbdhgb3rnip2z/rAf85eipyam95qUxMB2l09ojljxhkuptFLLA==","signatures":[{"sig":"MEUCIDlKCn3OP//xX9Osbi7hy+DKHi4BqF3yL3z8oOtLVjLLAiEAs0BCwdqYgZRgrDOdn2yfybPgoWII4cGNnezSxlWXzQI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169600,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPaW8CRA9TVsSAnZWagAAU8IP/AoS9VGUM8fHVmmOtiRb\nOqmEURiZaNvfislLkiwwk2PI33brckYeDrV3Hr56Jo4Ivlgjjn4cUMLaXJRW\nHcDElezpwv8PLxYhK9tuT0oBfat9mLOAQ23H5d2a1k+aMi6nhNjxdKDHLC7g\nRrfDGYUFy5L8YVlrdBSCXYqEanYGQkPadll15aGl/2KER8C9r7JLm8ySv/nm\nHuDlOf1Y0FOqSdUZwisGp0gU+G2Cc0vuqvSz5hYh8HN7RothB2rwH82sFlP8\nD+3wY/ibDVKITY2ALvmJeYI15BQEe5Vv2h0el+2DtjOOmBV3ls1VRSE1bYPa\njDwxdbhKLiseuWxj5rIpjE7sJ5alNgWiX8XurgTY5cye+lT0Q++nijvb88fR\nX8IVNaTvVTGHGj6B1YCFhWqZviPIaGCHFJGn2XFAJjFS1PBEnwC/TR0kfzxu\n63qtQAdbfkuhoNxudE0qzhT1gQRv2Kqc1/Co/vg8pZewxptY/A+w5vR1z3Ug\nfAfKt+YhCtG0TPRd1XJjBz+3PfbRc23hIktFtg1YlwfNMl5NQQYKogEIbsD3\nTDZuR9yV+SrVG7y1dfz748yEuZ1Ge+tnFNV365lr3ngFLBxQ3JGJui2Ly2Qx\nbj4yAo20ooR3YZV99me8sPbGd5o7Lzl3rpTRUkdNBepktzeLokZlZkE2Sgwu\nIIv5\r\n=wWJN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.b2e80a5d9.0","@material/theme":"8.0.0-canary.b2e80a5d9.0","@material/animation":"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-indicator_8.0.0-canary.b2e80a5d9.0_1597875643699_0.27101712762382824","host":"s3://npm-registry-packages"}},"8.0.0-canary.ff88df637.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.ff88df637.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"32399eced20aa059c88ae2072568c0859676dd9a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.ff88df637.0.tgz","fileCount":38,"integrity":"sha512-OPKUaOzhEeciA19hfvvsiXfje5mGM0RCrGSZ02I+2BURfOMi3y8wQCGL+FSn+7ucJNUs+BIvZ4LOJvWjfG2qhw==","signatures":[{"sig":"MEYCIQCvPzo84o65FYNb3IfNzGFXIi8C+NsUzcTotwZp5m4OjAIhALmM4law1oPgr0iHZnEyUhcNAvawXppaIJZumZcAJqXs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169600,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPaiNCRA9TVsSAnZWagAA49MP+QCxA5aZyvUKaOKnFCzO\ngTcbs0HDqHmjhzQGeaEUfPbAxSUGlNT7KcFVQNE+f08AExUpJEBr3nbuVnt1\nIUY/qFrP/K4DB9VbJ3GSNcyNhb8388YKSz+JYBvcdoa8LBjyp7qEGzDuugMN\nzvjkCUz1xwEsLDCjeIAAVhMPf0tCyDrJkrS8mSoIM59PcC7izh3lpk3H2DjZ\nHJNjjCeNdbiyyNlsCKxU7lF+dTq34kZGf4uqIi54Edj63HVojF7ujkF2GVOJ\nnnQ9AIE4fN0oSftcuuvhVCgo3mwbSiB62y7QckypDvtAPHsQlDohoSYoJQWb\nv4wkSpSPDmN7lFQ/7bVxoEfEAHSOacgduSpr1dU9DtD40AYGf8VV8RF5nFNv\nghf+R8/xzgP0dzN0tfqtGW5ohIGoRh1/YlqIbd1BiABTfcnR25rEVhdAwI3u\n3l6gjWcLMDzT5KNyFS23jzN6ELdGHwJ3Beg1VdiORGBT3YmQq7QDnGE0vHgb\n3J6swjZN0xa4+Sh4MVGqa6SBERx/DUFQwut+EZRSkuk2I/H4ps3PAZrohxcz\n2FRm3OW+lDg8QkHfTZtf7l8ofw+qqLEeQNdHLC5HCWcpjxXkrpm0e9uJthqC\nXeAmleXtCiBIjXKmPr402LL7DVKKBHUOQYeW/L2GqhlBcbxbuVGjFuHRUb5B\ngrZK\r\n=tFt0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.ff88df637.0","@material/theme":"8.0.0-canary.ff88df637.0","@material/animation":"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-indicator_8.0.0-canary.ff88df637.0_1597876365041_0.7921566409162555","host":"s3://npm-registry-packages"}},"8.0.0-canary.32fb314cd.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.32fb314cd.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"af9145736521a517d8fce5b4f5c9704a6f279060","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.32fb314cd.0.tgz","fileCount":38,"integrity":"sha512-iY9ocGGJXzsp9gly6iEBQf236HH8X6c2tCv3oOIwM5g/rAnlXw4MElqQiuqpzQrXo3q5fgoUcdKHe9+QF7M/cA==","signatures":[{"sig":"MEUCIQCVHoSBFJopEcZpgU2glzPeFbRZ+UOlxGx76JXovu9clQIgJYoTw+AFqA8Z5texeCDcX7MrSEySZl+CllqVt/aVlKg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169600,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPlJfCRA9TVsSAnZWagAARw8P/jx+B6TFHgOn+Cif/ebk\njqcAncXNBxPdAqScfYdnAQqVLYwA6IsGxiiUONctl5xly+v+VcSmMLp5N1Qm\nFzCrLaJ1a2C5fE6wpkIbh5lL9NtVC8c4GObxiG+aurWJ6KJ9FCOQapGCy4gS\n+kLGpw9j5qfnjdoEN/6ua23vqsWhDI7/yJFpRdXG53VkD8gLTnX9IFOhfK9s\n5lP/zmi1dJr7AdGWDrDCdj+TlB+LgXctqW7Y+/plH/L3CYoDj+k4ckoZycCp\nVSRGP3EjgRTSOtwcMOLBmqD0c3DCQQeQPmoLb3dDnXSYsms++ZyFnnt6Z12U\n4Xi4ysSAJSwD1XmLM1tG5W7fTGW+zy/5TKf29DRQVA4gWFLyLG47WnBwUgGA\n3SXZNTmzpXLni1g+8xPxEO6gkUiXQqarL9WgikalTWuDSOkjt4k5yZa4EycJ\nMgoe2RnpwQkyYUlh3tTln0nWHyD+LeetTdPLkc90Bgn7zZ5XFiNnb+U3aqil\nSvIvBsQu1hLLCLKZqaqZ9Fi71l5IXMYvidJlyyyAdS5D1K0dMZg5YBLKHOlO\n30T3cqPG24+M95dTj7+VJtwaSi0np7BZf1+kwZe3J1Cwtr3Q55h5mJLTb1Al\nhp0KvZvZaHaN0vcU1qSbOHNQ4rTP6BciLaY1tILfCDSCUOZVN5PekLO3bUwg\nZ1a0\r\n=CwU6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.32fb314cd.0","@material/theme":"8.0.0-canary.32fb314cd.0","@material/animation":"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-indicator_8.0.0-canary.32fb314cd.0_1597919839277_0.9456309402029592","host":"s3://npm-registry-packages"}},"8.0.0-canary.546277d32.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.546277d32.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"b724bb48db3504ae5a948e46e93eae637e1ce95c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.546277d32.0.tgz","fileCount":38,"integrity":"sha512-fJphF3XIj6uB2EjzOom/t4TRrFy9CtXN+suLND8VIh4+kDqv665xZ5gI4qIoum3bVBrvH43MN6gGTwu+zae7XA==","signatures":[{"sig":"MEQCIHhQ5Z1fTfcz6Y6XtXZtBvPrb8VSV2Mz6KqVyUxJJ3A2AiB/DwiADxIhTmIfDO/jkvQhdNFXrg5fxFhaVA6IdTT++A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169600,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPqgNCRA9TVsSAnZWagAAehcP/RYhKcD753vOS3nZXwB3\nf6ywOzZiD3ktSkRqhhjZe81EU9qV0hMDo4NH+Dq9ZpreDUNYg1q4FxsOL/Ob\nZGTIz42KcszJ941ed/xbX2t1SvrdAe2WLCub/NVmodE9fN5inn6h2+xLc3WK\nA41BPGH9h/33oXbphz46r0iX1rXjFRSLWQAl+cYDZRtzrzmopgfdIsFj0EqG\nhep7ZZcXS/qhq2ea1Q1qjQHwoaE8+pUziSqboCXRRypCR7+kCb09yM42zErn\npUPLxNosA10r4h5kkZgy31HOsfo7wkGzvaudizLX49cdyQKZZrf8V/qUkdYY\nVJ6IsJl5KiVhALtwNkJqv9/jnV5Wk9UxU0fU3YXlN6klZnUOKVXiPasqqVnH\nWD1xvIM4XWUuoauicErlkw0KSgVMhmXGiqfj92agn0xSoK06x6MZkcOzFDmD\nDrQjd8GiCrxLVCrGqHkTgJx3rL8+bl+s8LyqBThdLg4ocKhvRHa5pjoYO4dn\nXERuv+nvjvR/7MYmoySaGdWBP/xyCSaBGw+cq1nJclAxIFIDz5HWOCpexq8Z\n4deDOzhGwDa4+IXEwwIcNDC8tnQUFkxaZpXIWypIKd6ZbwS9OjjjwX0zQJUm\n7FI7H5S2lIUQCtN/M7PA0K2t7xP9iSb3agbDGGIf/7EC9+wzItV6Cc6/PfnF\nnIU9\r\n=+uc/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.546277d32.0","@material/theme":"8.0.0-canary.546277d32.0","@material/animation":"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-indicator_8.0.0-canary.546277d32.0_1597941773421_0.4179062589987206","host":"s3://npm-registry-packages"}},"8.0.0-canary.da72839f4.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.da72839f4.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"af85c32dbda4fb75da490f2630d815d7050eeb71","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.da72839f4.0.tgz","fileCount":38,"integrity":"sha512-z1Nd4sEmKPD3xvGBmuHmsuCmteNPj/lZlEO6bFsduGTTmdd7ZoGDSER6ELLQKJsLHQRKvWm3iSVkSoBDHLVvXA==","signatures":[{"sig":"MEUCIAJIh6Q1jcH5gkBEIbXoTTysDdhG9wVRWCQ0eJOy8ybRAiEAxYzaxfXVeOjJM+jC7efXgpwMu9B+hqvPaLSB59rX2+4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169600,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfProKCRA9TVsSAnZWagAAIFsP/0bba5pFFn9JzBCxdHuj\naRyjHSnsKpvwJGwq8zNN+/9retfpFe1qTpYcRUtopx7LL1fMbYmvZL0yAXjP\nBSb1qOwe5g+sv+aplGfe5y0e6eds4kgmUgUE42u6LDpy45Emq7SvQmiP32Kw\nhn3MQRLnIr4iQkhB0owa702Sk0DtdEG4Vj2GtlXM7jHn3kyTwRg0fr6oJmQ+\ne+GXPJ7y7SC9j+QU2swilH9FVfCn6fxjdDGiwh0gcOecV8Mc2jt1vqQanmdt\niE7oRF1HRIncpu5eBJl4HdMX6WNOTD19ilVwtWh5l5uQoz+/INCLtRntkhaq\nZFvPU8iG128Zt41Ybf25oh4ta9GOiSNk94mCqyMRBl1mpjhmsBWHhmM6oTPX\n5dRbl1vdR6AbM1F0m76ruxzMUA0ytSANoA7VO8G4ncJNyDjJyKUe+hPko/JN\nDX9EVCWHMGOljVC5QB4zENy/DG/IX2gFsJez4PCWm/mpPxgNY99faLCtF+xD\nm9lYaue8F8L9hgawLLkpIAdNXaXun3N2NKfOoROO0Hh8J61EBMh0MUZcOi8A\ny5Hcf1voAZPGD+EcsSWUJCLwMqpL2OcVQuP/nbMqRcLpd4ibGZvlfq3N/N8t\n/hvZwFFMnFd1cQIULPSb31YEFn559vExTfmLaOPKu9Z+dAO+ouW5fSmLwNgL\n961A\r\n=6Jgx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.da72839f4.0","@material/theme":"8.0.0-canary.da72839f4.0","@material/animation":"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-indicator_8.0.0-canary.da72839f4.0_1597946378034_0.6624855412160284","host":"s3://npm-registry-packages"}},"8.0.0-canary.346069ccb.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.346069ccb.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"496df14961a1c3ad343ba4f4df5eb6789ff8998b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.346069ccb.0.tgz","fileCount":38,"integrity":"sha512-0zGwKEKMTt3eSKpNXYX6vdxXs8pXHN20oUIFOXlINTqEx0OajkTvWMrZzFKz7ZyGyCC5KdA3RHQndQ8j/qv/rQ==","signatures":[{"sig":"MEQCIGlybENAA43WOrC1e8/pUcPdjRm76uE4S2zVzpWRy6kLAiBdxQg5SGN9xg7Icqm6nWRIj8X7CYLyoulNTRPWAPVPjw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169600,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPr5kCRA9TVsSAnZWagAAAjsP/iNsVuqQA9qYYvpH1GXh\nMrGrmX8DEtBQhZyHyUg34SrZe0pHSStba01GgCed5zZXotIHsv3rLXGLNSNp\nA41brpE8DIuZOfkDUx4EhFirLxK/ccm+VxlsaG3PZ40/YowwzlVOzh0XtN+z\nHNYlUAH1pw4HhqxxYF7YedLWvEGBIItiFGPJxM/NvjyyUBOvtwppT9e54JEC\nYs2YGPgsLQwb5f3ld7+aPmlm3ugPNZ6kd4GNJ7N55G4pRww5TcUDHPZoGIuk\naGARLbwtAfXYIiSAT+3V3D4l8xQLgtIvmmkuMh5A+2wTGeBBFf4EraheFGI6\nsYPNfsCoAq6tNLry/qbx1WBW/GLJUE0rtXqo5cTx+pRfHX8Jy8rdQ3NC55JI\nb32BNAlujSYWe/2eIHBBZVbx3NcEPWk7EoNg7RHYzO7reNL24LxEZGtNpOXG\nsFsK5EGvIUFjHCqN7FmQgGtm/TmBIjbdy+ScV0Plu39AiOBoRM+JqO9LWASL\nZCPlD6yjXVH8B7YpCfjPY1qB6isn0+xsVygT+QNfHyVAPhTwQASC4VueY1hN\nWfSHIlkeBSawGAC5uHnW4qfs5/aX6y7xOzWckXSUBURwNvIcd/Qi3WNHeiJf\n2tuZs0UQFNtFAmpkC/1hONgJQB9QuceJKf1ZghE8U5SuEeD4+qQn9MQV17Pk\nJ43l\r\n=REBr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.346069ccb.0","@material/theme":"8.0.0-canary.346069ccb.0","@material/animation":"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-indicator_8.0.0-canary.346069ccb.0_1597947492055_0.009434311001720985","host":"s3://npm-registry-packages"}},"8.0.0-canary.e27c5802f.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.e27c5802f.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"5a9d73634d31d1d16c2af2f5b7f8c6e60077c43e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.e27c5802f.0.tgz","fileCount":38,"integrity":"sha512-ldNraO8IYjOhiLKpzPoSIIcA5BRJx6vVTwrPNf2IqKeTfk90+9B8GbaLv1ZP679+Zcl1YU4hZtgI4yyx/m0JNA==","signatures":[{"sig":"MEQCID540VcEi/D9okizNylpUzXv+AXR+jtGbAmSXIScRjfhAiBelUB0ME5M+1QLK/lxw6zvDcRtwbi6gaLWEswSa8BYaA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169600,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPsuxCRA9TVsSAnZWagAAaM8P/0RS/bU7Akop8fFST2rX\n+J3AEgRrnikyqLMHoypudhxuVySNFUepxulbX/lnaug7rY6i3F3JYjeilJfS\nzfv5NO/3b0McVWBeAH1LwKbx37sXYE+E7vAJXp+ClY/AMkfs1wVNgX8fLMXb\n977MpObMJayu6y2iMopPllORiZIWTJ0EU0ooaC0DDqRqrfJdHXDPO5TuftYa\nJX+vphMHueQPxYhvJ4V3ZFgcrnWONO60Doe1+20jJpqoXYX2gQTqdzHsMkr6\nJlKx9S/pMkVqwgDEotHuC4kpC7ltGCZXmYezpo3RTVMSAs6KlAtS3iI0xuw+\nl+C+Yo6f7IW82e8y+WSsesV90nW7gGiW+N1UjjYS3sxfQtriO1InYJHqe83V\nEWOC6kagQuYL5rpJCA7SjiNdsaJTPZ6HOplVl5qqzZt2mL9enJJuA40z4SyX\n4aqVL3w0/pNRBu0BqpZwJ+VFU9h/bpBfK98Ryz6JmZitZmpGSrK6jhhwK9ys\nSPsu6kCQgpbkwcSbX+bApKbvIiuaxj5MpKXe3NewCGNgScR5NzfEPbcUtN5b\nBjWrfKKMmaAnxONHhzWcZcicSH+LJ8t6xjfDxas4mV3yXhOvLPv3a067Ldbi\ndG1zRomP4NMrxzsfVdTPFZAJ7E8rtVGAQdgderqcA1xAM69FRucRm1Texo08\niL0E\r\n=tJpy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.e27c5802f.0","@material/theme":"8.0.0-canary.e27c5802f.0","@material/animation":"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-indicator_8.0.0-canary.e27c5802f.0_1597950897207_0.9156807748147999","host":"s3://npm-registry-packages"}},"8.0.0-canary.f4532b9c8.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.f4532b9c8.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"8c207903b6f739b85a60082cd7d4cba8a05d5aca","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.f4532b9c8.0.tgz","fileCount":38,"integrity":"sha512-KWTyQTcpbzJMg2/HdYaMrU4VEe39PdqVB8bMVSgSRVf0PIwhx/NRRYieHUUoD5UUIAHHuTSyMbKICtTAoEwyZQ==","signatures":[{"sig":"MEUCIQCEtt7p/eXZJMaA154AOe7XCfLphdAAIMykmLcTgH0o7AIgccJwEGQy6pEfv1El6RoyuMgDQFlVNR2MpzjwLWltcqw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169600,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPtWuCRA9TVsSAnZWagAAFngP/AkmuEM5H8OzbWHFRiPq\nKWhLG7U00e5QuaNkUFUr5dZi4yQfk9Wumfiy3WpZ7HILZLRwi9OOtJcNkE08\nUX/R/0VtYsjTOoPqE51I2rIZXNJVDsXJIiYTEE3gYNXvaLZRyRNPLW8188Xm\ngi19IZJWINFoQr/6FyMrhkwI/rDflI95R1xz8WqFA+5OBoUVxLcG9Yis/Wpk\n6ae5VpzJTSBWBxqSMC2CbYbXIug2kEDo52QVhj/XWkST6mkKVDHj8nJZQVJK\nCubJKuaHSQP7wc3zNSfC8ujOGfrZPeP1YGddd8/jp7uwJ2MSPrGQEQFzrBhc\n+YAYYPxhl3Vj2lwdTpawrL9z3vOgYCEt6cInoJB9enMEDgJJ9gbsH/0V9O9Q\nBpAaOhOf2aY65C+yT8sCneczbUgs/kaCC+TRFscV6GQQaHvLddJZ1eZtNlml\nAv8OqOx5bV5F3vNcz+WhCVlxTp+qmX6Ks+HM/1j7kCDnp6mkKehunswoLQAh\n6up2Wzm8ZLX737+bsXszkEs/KpvSW+k0v8A7oTvd4vzlYXNDo4Kxo37XI4d4\nKO5wmDrirkhHhZsldnC85hMu8sJdvtNx3Qksb7EHREfS5vwBb/qL3YU2m2rP\niGaj7jroZy4/ZaDVVnI9nM5V/k7Wc5JgGsHT0l5+jAnofYW+z6fFxiJz8aai\nx0Dd\r\n=a1dG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.f4532b9c8.0","@material/theme":"8.0.0-canary.f4532b9c8.0","@material/animation":"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-indicator_8.0.0-canary.f4532b9c8.0_1597953453922_0.17663965706686202","host":"s3://npm-registry-packages"}},"8.0.0-canary.fbf73c2a6.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.fbf73c2a6.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"8a2f20ff9652c191191d94a47288016fc53a9786","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.fbf73c2a6.0.tgz","fileCount":38,"integrity":"sha512-70teFxHGbEY6i6y7rtdRUtv6Ht+SNl5sxUg30sSfPUgtimvBt7aVSpmyzYPulR8uxHli212l4hxIXHjGQr+6jw==","signatures":[{"sig":"MEYCIQDD8Q/mAeQDSc1YrdhCE38gNFz7UHsgB8pKGDhM5FUfKAIhAPQTTmAdOojtqoDrY9U+JTZ3gLSfxJ3hlVYvvBfTwF54","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169600,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPuXBCRA9TVsSAnZWagAAd14P/R8UAvBc+JjdejOp/yMG\nKylw+Y3L+wx3T+xgEKvdiyjemRr/bxjRjbAlNn1edKTw8H/JfFulLrxKV92i\nad0d0wQMz8xHBLF+UbTpDJFt28oKiCmKy0ed/PTWSLdhBfFlwt+b0sYIjvLK\n++Fcaa4E+9N8AySfTGdvtJcA7i8vzU5Uuiuphnm2IOU2PXm3mfRCjtC7Zzqw\nFYhahmji9ato7WSJcVCrYibz24NpI+B2rtx6bqDVA+RfJ6+aOezs1AMOsRF7\ni3NjJYHhAV3lgAX0KsKj7ehGVCFHCzM4ixxWzozPY6Ut/Z3ChAQ3U3MjuPZJ\n/uqboaJ4lJT5+eOWFe0n+9Eiy88dudMxunJJTynSJ1X5hSZx4FdClWqy/7iD\nA0qJdwFxD3j+7qpfM0nj9PDewLHbPDnE5mUZVmIxNJ04AKUcSE0wQMpYrtuZ\n5E7REEhUpCWYZQuXPrCtWIPjefF1TJ+hufQiCnvIr/ktHUeY8spcfToXKzi9\nQavDV2lU39sLAhvnpxNBMQn+AqZCr9yxr87vc3BiCTM/xWREhdZz7AX+7HtF\n0le4sGhLozOSXg5TUespRr8dLv9gTBJl4Ukgelny4czmlOVGIAGKbpdS9hrq\nUABgvrQUPnLKDmrH1dLdj+6WhpshHK++OYDFSpb0T29Cd8EKUdwhEkWuuuzF\nA5VH\r\n=jzJy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.fbf73c2a6.0","@material/theme":"8.0.0-canary.fbf73c2a6.0","@material/animation":"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-indicator_8.0.0-canary.fbf73c2a6.0_1597957568930_0.7401242826810559","host":"s3://npm-registry-packages"}},"8.0.0-canary.cf800124f.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.cf800124f.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"b2c07f13cff0763c6ea218f88ced59b84739c475","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.cf800124f.0.tgz","fileCount":38,"integrity":"sha512-sGm/5keZW1fpSM4E/N6Xi55AvuKg6g4+4C7tWCINxVpd6cAXW4sOszCPZhjXgiZWEMB2TNUYkKbk20M7LAK+Qg==","signatures":[{"sig":"MEYCIQCq15B3wayL8MaGhOf8NIEtuBNwPEWCJopsOQV/l80GlwIhANDe4EVW09jlbRmqsmboefeH0hCjr+PJw9nVYAjNPytI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169600,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPvCZCRA9TVsSAnZWagAAyaYQAIV0TBvl1dCkBbeY5IRM\nw0s6lZ4NUEeZ/2BQ8hsaZesk9Cd3vrWg7wdldBieVf1DaLjayuN/JDP1+ZtE\n7oItgy480Py6pN6hkZmd6WbYwwr3xjSuIDy9qbLojoFPOPBb30RFqSTKJcpW\nZx886NrfiirsCizJtDzaNsz2qIbch6K3onmxmZqi5yogPSeZ9AklEfg6ttkv\nPkyc86i8tR+C/OG4zR5EIzYRZ+bij7luf9AiNwjZf/hWNfouz/yHMRkfKNLN\nrOAd9DjYTfEguLg5zyA+wCWWdzpX1MmDU9opHtTNQXsHVbE01r/7SeDKeZLk\nZtYtilbALGbB1KLwqfTuyvGwGxnoX8n0yrMRqOHgBo2Z/6od0oE7RZ7jyyrv\nMrd7ojm9LqYAyM8gJ76gGWdxfEeO2NAGAuYkqMLK7zQnWMB8YU2yCYpqaeH7\nSrJHiAuNCR5DIV1vRWkVC9MCLK12HmFtT3Ck3MynEoZMoS1bPp0GuzaYjzji\n38/vd9nelmLOYc34zwWSVW4UHeqOelZusz+oRFJQi3T2W8o1iFsc1RvLVaGc\nWYidwd2WTvJVgA08hEDsaYF1rAzNPNKLSY9kgiZCIAwEU0cpH7zC3MaaX2QG\nNTObkIwhjv7WpULI1/s91IodvPGYfPrKNYIyVYXBQk/3wXBra6HWJb9/XApS\nMNO2\r\n=mVoc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.cf800124f.0","@material/theme":"8.0.0-canary.cf800124f.0","@material/animation":"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-indicator_8.0.0-canary.cf800124f.0_1597960345380_0.07868286945632641","host":"s3://npm-registry-packages"}},"8.0.0-canary.95e4eeea7.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.95e4eeea7.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c44267fe10dbbe478af619e5199c9ca3b6c667d5","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.95e4eeea7.0.tgz","fileCount":38,"integrity":"sha512-VTVNx/NpAceeAwk1p0aTU/Uychwmfmu9ZqooNJALjTXeVzRrL2NOaCCu4DB6cqw1zRFDBCz5+1yyvmcrVHHboQ==","signatures":[{"sig":"MEUCIDPsyD9SonUf3ydVPsatrCEghua+OGPw75qhqJOGbJjcAiEA0vwNzAXJfHyeiVI8Q/9U4YK6wDnmPOJD7kyhIH36Kvo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169621,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPwcmCRA9TVsSAnZWagAAAQcQAJKtG8hcLCuWTOho1Zw1\nHNdoo2XddGbluQquv96m5xSDcr9Y1gTxIlXevpwcY5vPKbXSifsTPUTrRgD9\nv9QNGfmd6HOPuwWMPtjajJEHm2k6I1hRqGa83Z7E3XrMjTQCj+EmfthX9nI2\nMbh4WjnjeslItnjhW5aYq4wyrkyRC3NsGB0+Upp/WbJLXDGro7c8sHI5obkL\nWQrQcP+TsdfNKidsVnwE85qp+M7/mzFNYv3yX/7a7ow4p4dIvAxKwRZqTQGB\na0E5w/CCCA6bl4rxZBphCJ0PolB8FtB5WLbWd1Rv3cpvshh1Ji59OhZskZ6a\n2c4BAW6XoW6YzEloyJI/FxR/1T+QZ8YpavqjABGTSeBocBXASCqVqNa6JcnG\ngUNwwdEXbQGyZ4qXUARsSJZmMaDtDGSXiMt50wx+KzD3lSbh7qtLGdTNhoa6\nDNOw63ZD3HpWc+Ec/+JpScDPr1LJbOP7PiI4ZqBjzpGsG03h06/9Z2im/JEM\njfH9mEzVOxaySVfGLNHqEPWadk6ZpgFEazUNmXDPYJJcEyFtzA1Gpbv3juyj\ngMh3urqW4wa0iM0MlFOG6kzgOP+5Ri1spKaB5u2v2AGhVH6XrxjvQ9TT8yII\nJAxDK/ATA6/RQZuJhKUMTEcgxM2sXgTuc8SHCWOfupNUYw4OpBkfCC0UCEPT\nnCiK\r\n=54/I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.95e4eeea7.0","@material/theme":"8.0.0-canary.95e4eeea7.0","@material/animation":"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-indicator_8.0.0-canary.95e4eeea7.0_1597966118210_0.5098184837723547","host":"s3://npm-registry-packages"}},"8.0.0-canary.91ab1c62a.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.91ab1c62a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"dd0c5af42c2f2e541259ac965b942fa5c90e3483","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.91ab1c62a.0.tgz","fileCount":38,"integrity":"sha512-z8Wx2ULtmfbxsgKj14W/nZrAdAHVEn4ro1crtsuSBfi9/kOoRAcW2cMH7faCEY/FrthUNCCNA/UCL/H8okxt+w==","signatures":[{"sig":"MEQCIHXSbxB+mKJicMaHrN3tj4MBgQJ2/ttnX6GKdMdaS4RnAiBsIt2ncyx7nXtFm3G7wfAQF0h+obokiOxcXyftt4VDpg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169621,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfP+QlCRA9TVsSAnZWagAAJwQP/ijUq44Z4tppPWc97fqj\n3674qGaYSBwGa9ZUC8SwrbHUCqvYSF7EAZdWmLoo+r9GbtAl78R9NCTb4J9D\nIx2kmaW+8b6DnfklSZT4LAtrqnXZl3HT6PhQ3xYelGgTGdtxHlLez3qIjycI\nREHbEQrM2v/3e07i32f7VVbSJIe42yiTdQBglunmXwiupUy+NPu6GiYoXgRt\n+6WS24CTauRZJP0XX0HIs0B1R7gkQWZ0RQwHEz6qwnygaYFKLT2R6e+yekYB\ndPovTmbvzpaShA/m7m2bKhff4IV+YkuGybjrhTfu8MFXdBMFXYVSb2myoloS\nmXjbtl13TitPOAGvw6d4Z0cILb6p+WiR4UdPWB/QVRoVf447TNXo6hM4UYRd\nb2WMrg0SOD/7j6o19LExVudGoeIlsT64POrcuyjginGU4J35BMSDbORkOLex\nmmLqXdUF+g/Qt+znN6a3Wj5lsVOTMZyq9E/aZHD/spZaX2dsFqAi5NzDsN2X\n+c5TBEnnvu5/NATpQxNHRckzqz6ng5VFGZ8oGYhH59LQif/Rk36TnVCiP6oO\nbwjh4XaG48p0ZmZD8FnwePmnBsnSr65ByrnOIMTZMrJH85jGESb4IQdOUijD\nkhX138r3fyhDgYw30sQ3gfSBCBHwxDIVZ9e+FvAItbWpHFxGA7xxvxkDr2/O\n8BMl\r\n=2ucf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.91ab1c62a.0","@material/theme":"8.0.0-canary.91ab1c62a.0","@material/animation":"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-indicator_8.0.0-canary.91ab1c62a.0_1598022693152_0.9526640884638287","host":"s3://npm-registry-packages"}},"8.0.0-canary.58eaa9f02.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.58eaa9f02.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"49a52ce8f72f9726999501ef00564b075cf18529","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.58eaa9f02.0.tgz","fileCount":38,"integrity":"sha512-XhOgF3JWikstP1Xqg7Ntcsk+8jtCz1pGChyZGF9xUV3UX4QRmRmWyxc+91xq7Xws2upwad+WQf0JKC3DpasV/g==","signatures":[{"sig":"MEQCIHvN4upTVZ/azzxFOkzq39s6EL4R5e7bOuXibqd/lwTJAiAJ92CT16hsagZ0elG9BP0av+v6DUmMo/m49iZdh3ujmw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169621,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQCfICRA9TVsSAnZWagAAno4P/i8+tcji+c7G7YPOwM69\niqY0NbggKi06EFVAXlnjXJNfqNOaypXDonZgiix/N03qnf/nMcGxnrpIiwey\nJ4PDx8MKWBSy1WgcgynN6TGRJwpGkKrOUuSm5KFmSDxvVHEb1sGjphI65Nox\n4UZOyER2rGwCaaoHC6iawYiMxAiu6fFBbjQNE/rLYR69B+oKQh0m3kFO2E0U\nIwAdVhw6E88zorgiNR1v3QyIeX3vm2Y21ssWVCGVBKMVBdst74qivi3K8AoP\nRQhwktzaQI+QPiQqqy7xdq/7U16LOqEvR586/UNGXwL4KqBi86wGkM8senjZ\nwn2fQEVENH6oD+S++wW2xL/rrxHI5DZ99H0LrAhuL5p5Eyb2XPslRmJMLK0e\naID1qSF2TyNvvWub4jqR+k5f+9NQ5roO0qX+IUU1r4ArwDbhAKE1YkPHMuyj\nxZ/nfSykQiYWF/BIX7Wegg3LpxqS37Lq+e6qkPLhvVTIopsjtc5OdH2AQ6kP\nzSNU5KqGzUGWGnkERiHlEXcKNxnv3wwQUaqpqp6sHGNX0OoDRIwzd2SvINws\nooH+To62sUNLwm90fSYIRfzRg0f5+sGb7rF2KGdqozkHra2Q5fD7TyjAwRB5\ntCkfHF8vrFCOQuWvTyqHUg2B+dTcUNbEWTiw6OyRo800npmP/NgZl/xs3SIT\n6MFe\r\n=7rWR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.58eaa9f02.0","@material/theme":"8.0.0-canary.58eaa9f02.0","@material/animation":"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-indicator_8.0.0-canary.58eaa9f02.0_1598040008032_0.20925504192545352","host":"s3://npm-registry-packages"}},"8.0.0-canary.238216fc4.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.238216fc4.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e67cf45ec55c0b648fb91f6994b31c7683dc0a24","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.238216fc4.0.tgz","fileCount":38,"integrity":"sha512-i1yLdBfudY0Q7IIWVppAjlWh0OohvHrrkcCth/Qp0ekbYoDbsMZIliNk9/Cz22PcIve0/pJzKdNzyjtwzazwYw==","signatures":[{"sig":"MEYCIQDoHS088sQUxd1q1f3Gy7oecvw7FpUytvbzC5mfH2LCfQIhAO7hiQG+opiZyAvSK/2bOl5NhmJ2C9KZQw4MBysvcyua","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169621,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQ992CRA9TVsSAnZWagAAwzkP/jwwYMGf4/YoO36o2FzE\n6dcxnfCS40B6ttrZsuMXbi3H2s1KpYqG7jWw6uZ7XQdbAxlfECUA3bMQpBhh\nX3uPkv1FLvd8t/iGjNwT58gRgIYUCNFR71LIWOXLCh9+pI6UU+0sap1OOVf+\nXHGkP9a9JoPCPTqHb0o4qrOw6KlcZcSSAa58To6dmfOWRmBfYVAv/J9fN98J\nxYXFJJ7Lgmq6g3iBuIooOOtfNLLjY4dQT+F3zEmJPZJxqvBWTuPzgIGbDrVw\napB9YmIUj68aVpJBN75PeCtkefhjGCXZUb5cyIQaGnpeg4kLYh55qo+4HvKy\ni+2zrLglgBKOYPBRheVUtdt4BmnCNhmnkWzDp4IG4BjB3Vsu/FQ4X2fGbAlI\nLpq9PkSo4WFAXML/P/BzMuvHRdWPzSlC5ET3iYO8b1xNwwFUln2xESWdm8uz\nTBG1g4SJU0H+1zjXKyRC0IW4Gv4ZrMzBcLcNnlLejG+01OEJRREDdArmS+y0\n/dPgy5vX61WtU34KOIVIfwBbSDd0MrCxP6ZpXbKqoU0szsl/Cn9GSENjRNCz\nMnH/oBlnqT5FgIz8JbfuBozn3/fEQc+SgPNdfJDztPxmNMusrhJstzOuoSqE\nhCwB/IYeNbha7Qe5XBIq9PuxmWz2MkrPlgNa6hqEXftzpgUM4dUe04cLDxVk\nMIWk\r\n=cWCB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.238216fc4.0","@material/theme":"8.0.0-canary.238216fc4.0","@material/animation":"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-indicator_8.0.0-canary.238216fc4.0_1598283638078_0.99852287388895","host":"s3://npm-registry-packages"}},"8.0.0-canary.a1c65593d.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.a1c65593d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"bc05b2d12e79443624258a3ff5c3b31691171b3e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.a1c65593d.0.tgz","fileCount":38,"integrity":"sha512-zvwUbJuLdd9SaCRgtB99LMhz/wA25jTv1flZF0MsRUtsHtaEbwqIC90eeyNda1AgTZu3QblFcLBH9sf9ImOyAg==","signatures":[{"sig":"MEUCIQCBp7BP+RUh56FhNNxnZEzuIGT1GViKzg93ZSx8Bvy+CQIgeH9iUAny6bUoJWWtX6BjpoeIa9ROoRrCEtY7ZB5F+9E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169621,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRH+LCRA9TVsSAnZWagAAMj0P/0HW5hCQLY2T100VGBSR\nIltgDv+AJGY+H5ekpE2C3rfxyskZFQKb0v8M39ojb6QdRIcwAkx/KGw3H6do\nxXkmwY7nBV+B0lR0A5AVORL6MLfq508ZqdJkOjj1bUsfBLWZT/QYhDoO9xGx\noPV6bU1a8E+IuRJfwGHgM7WfukDN38B5Mvg+YCV7QuFiuL655NiLSIDcdqqS\nfwCke1RDTacBkzOCl7PSTFqI2L6Uh3ZSx1Mv6A0TsaBk1cGOz0szpsxTjT69\nSmfyrQkD8XYHU5ycs3E1KFZy1gsl27mcbY4DAAbBKCDtWsgfOGUcq6vKdf/P\ngBqRtwkEGnYSr3TeHdkbuwKJWawDZC5xJ717P+oYk7y+8XNUxKPCL74GhN+h\n4khlpqf/xWde8ITaS5Uv1ULHHhECI4woQvDNFjyc7RV8KlNnWpOHp20/UO1q\nCD1m+jaPmaTHDXJ3ocCzRFfUs7k+mpO07dsNSXcHx2trWNloEl+9Nuj+Q+JP\n9ra/wmoYg0+QVjbq8jM4F32ttc9659aI37klFrZWo16QtYQLSJ24qLt2JS1W\nc0/WfalXFsG3igOejphkriA0ZomjWyNeGkC8++rIELdSRzeyNaCssxAtJwHJ\nw/ME/CNDfzxM4KrMqqoX7phH3h7SsxblYzmB0Ay9+0RP9O33+nZHR0BQr2lA\n6pvC\r\n=arEE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.a1c65593d.0","@material/theme":"8.0.0-canary.a1c65593d.0","@material/animation":"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-indicator_8.0.0-canary.a1c65593d.0_1598324618960_0.9328909341825413","host":"s3://npm-registry-packages"}},"8.0.0-canary.708cc09c4.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.708cc09c4.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"31cdb83504bcfb6d688f227f734bc6a79388e88a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.708cc09c4.0.tgz","fileCount":38,"integrity":"sha512-5vdIauyiiu05thD/RnLj8otoNa++okkTt8/vgqxJbK842pFe6S4EjwEniAS1kkthjQHB+D26LdYuptYC6qFjMQ==","signatures":[{"sig":"MEQCIGFNsKthoU5mkvx2KzTGS7Tpfxe/W2UmnHDSm1vf2ZBdAiBYmFnYpCM3cVLOwR0s56wGM8kHuz9EQonzJ/NNT52P4A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169621,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRTScCRA9TVsSAnZWagAAR68P/AyMs0pDFyDTL6N7+49/\nHjE8K2DeBxRGAgnIKcN/QfYTKJp7SwKGWbjtNmQMXlwu3/1FhLsA7Q3/Zdws\nXw63mXaluubgAYrxkk/5JV3tnOxy0G6at3OalhI8ElC9cxj2Dmb8qBpYwwdC\nywy6nKT7U7as2pJKM4/nP6/t3mksRjiSEmj1W+2Y9yTc8Y9ADdVj91ZWAjuy\nKUKMj8qq2lsdnQLv1WyD3YvyeDiWnV4MWS3sPHG/zqFKDmriWTG68igOVwgJ\nzY8bk+JFyC21uwcbBbu7wr3hXYN3MoqwS7aW9ETTxb2bPfBhJoy9TzhCm9cU\nSuY8ZlkMXCwdeIHIwPB0RioiXQuAvh5uVc2rtRjXNk76FmJZQ27dXU3Z3KiS\n+UWfE2vKQSjn2xVsxXPt2HtatxhQDQ1FxvcDBJZyWfeJQb6XAM4QS+xyibSg\n8uR71wB5m6hKWIbAPRNVnEL+1uVcflcmWPQ4NQ5UMtmdQa6NDes7yxvnZUBM\nasIi929CKdxy63f3s43pWPwdoXz0flZpkAFpHCkA4fn5xVeAha1lKBekhRXF\nBRRiFPkeVcnPdB/m5o+XHuZw5BK9ZpEkyXKuIl2oBSovztFoiwmshT3EYEF+\nmPZ+K3tXSgTDcQBu7FULw2usVlBCsro3bKKnz9zllQx0l6vfaK6vk7R0Wu60\n2w6l\r\n=peek\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.708cc09c4.0","@material/theme":"8.0.0-canary.708cc09c4.0","@material/animation":"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-indicator_8.0.0-canary.708cc09c4.0_1598370972008_0.8766083604761663","host":"s3://npm-registry-packages"}},"8.0.0-canary.19bea2ad3.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.19bea2ad3.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ed730077170b30467c1a3916d1f9fba6a5c027cc","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.19bea2ad3.0.tgz","fileCount":38,"integrity":"sha512-ZStdd3V3YjoRAGEiEWvT3a8VhKQ8tPtAAbyeAATlVqSfEYxSx/VPS2A/8SVowf2zUeme8G7a6SmERi1tUmCZXg==","signatures":[{"sig":"MEUCIQCySJdAS8N+KNbWb9jawhRKaqkZxERbcvqd5LdydWoX5QIgYvUQg+ubb2HNW14c2MPQLD/gNFzWqp6rlzVP/Veetcc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169621,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRq6hCRA9TVsSAnZWagAAYFkP+gP4dtvKfl7EKLYwflw+\ntLca0JKmY+51Nmki+Tz2VyOMiwTkPswUhB9/uyTrpVrWYbbA7k2JHBW64Tff\nNb59Wgfs3Tq1cpquzYltrDqKwjiRDbiYRQ6Sss6jQCMgY524BC52IYMVAB9I\nKrTMvogLELI/Q5Mbei12gxwecJbbkaIxmdPsPfFhN96D7jZXcryjNEetZ0VM\n4EwwE3g0D0a3kA3vhJSnRKTmumj7cfdvqnEPba4GnjzAJFcftEElaa52Ppfb\njYMotF+6fmwOzWLx2NbSwRTmk3Q005PqLt1FKg/Yvg3NFo9kcXufjgUpVbKc\nttt7yJZnFErnpkd5IpBnxlQa7MGA5lre9P3y3OvdtBYlFE8iNgpLURU2wapl\ngyKzrFh0H9YtGSdpGuOHjMWBxTat9kwLJOvPvFueWqZFDNWzLoQqVnX0Lr/h\nPMwj3APYJ+dH1UK4jZyASTwA3pKn/ZmU/0uZkKPD1bJCv53uErPZjthsJI46\nq1sjc6M5LuTErTtWTMgir0Z58xkVREWVH7XSbpOyN+fG3RWItW+0lwkHs/YD\ndlinvMao5nwcncxKDkhX8IU1qg1fRthuMyphQG2AGaqMkgMtExa9AB00WOXe\nznl8VHvVnmBcV+eud55usG7LdrYVJaxaDV8bNXvz4BVNKD7fLkVUL3SiXbuh\n5b6H\r\n=UpGE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.19bea2ad3.0","@material/theme":"8.0.0-canary.19bea2ad3.0","@material/animation":"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-indicator_8.0.0-canary.19bea2ad3.0_1598467744709_0.6479451768800963","host":"s3://npm-registry-packages"}},"8.0.0-canary.911014711.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.911014711.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"55b093cc89a3fdcd08b1f3d2bc8d6f7b57afffc7","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.911014711.0.tgz","fileCount":38,"integrity":"sha512-MYy9PjSBCbcAbDFu28oMXtNnmxp6+RwaxXNnSKMGpYrvxAp2eEUKfYXAgFA7qSFiXR+tc/NFoofHzb3SbVDFXQ==","signatures":[{"sig":"MEYCIQCWhvBeoD1tX2vBpiOA5EQjvEcyyclf7XtRKYKHEvL4QgIhAJapdTeucl/1UXzniUHkfnvM4IqCGtGYrHyUm+bT4kPh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169621,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfR9pVCRA9TVsSAnZWagAAI58QAKA4iHRqnhfThQLfKrvE\nATfISemWBMrV6zb7v/CDURcCrq7//Cb5XREN6nHLRFrxDbWiSmeB98e0LZqQ\nhu6APi2fpk/aRHjxT+XAQd0Y5Q+l+FhFnkxzGhvIw2RBLRrIcVcS4osdRWY7\nAhGErrlyx/Ia6XPMBWDMSGlhlytTFWtcEARrntLlhpvI8VPtoC2UTku7o9OP\nDTQkdMgx7lNE9sE3IOmMuZ8H7giYgZCRNK0Brrjly8kSNTU3mkConPQhd4zo\nqbueKWL7NuW38IqITEPVhqagytQijcFWLTiY5OH8Lz0Yv/2/4IvEmcZY6n4d\n8Z2RCBlgNYa/lBMexH308TtC1qHaYvc3r5j5KVPixINLSM8DFf3WGYrLaCoX\nKFlKjAjOrwJv3g7stk11eywML+YYcrLoqF3qmp5AUty+UwVeDaEOkEEVyQmq\nq/vch7ZusG8iqUeS3owdTyGR4iyyejIBQpBUS1eMbF/lM1wuf7lbqbkPkV9U\no55uEPEd6c3BGqGtxjBcpyz+LMKK9zUEEWKNCrkZDU+DkobAl2c8CIeRcuJY\ntS8QVa6TT1hWpN0TwdYjPqfAxhGnFaSGO+pndTh+BHdoUwhOcdXTQfSsFuXl\njXeGHEfrBzys3rB1JAKrh226lHYdg7XPuQ3CiVyOo5sE/yGQW9J3hETqq7R/\ngQc/\r\n=ozQ+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.911014711.0","@material/theme":"8.0.0-canary.911014711.0","@material/animation":"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-indicator_8.0.0-canary.911014711.0_1598544468735_0.45183503641964284","host":"s3://npm-registry-packages"}},"8.0.0-canary.d3387f54c.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.d3387f54c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"bd57fdaf641dfa79127fa17d83fbd47169aa1372","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.d3387f54c.0.tgz","fileCount":38,"integrity":"sha512-6KZFz08HTmkAl1fdUSghtDxoNALnvyN4KxeJj2B8SkNsEdRVnJ3LQPsG05lR3ajmvcMbHAJhQhL6e0jejz74Fw==","signatures":[{"sig":"MEYCIQCXWR8NeT5+GOglBxTMXg2IA4AexYh8pLEdhzNBAIdhjgIhAK/bOK/SeOrZtAiirY4xA74eGrDRxdFPDVimbf4IpRbU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169621,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVgQCRA9TVsSAnZWagAAPJsP+QBZ2QeRLkycZeqTXCqG\nOa9jA1eMHDN3F4wU/IoW4IvmM+9/dSiXZ6gPNyPDhCop/2B9i7wB0B9kJrAe\n7tFzVj8SXmBOVBxmo2OEkEkNJQnlgVIFUvHJ2PNdyJSLKE7ZD2fjyyHd0E18\nFdkZilLpsxsv4+rCN2ZSUCSoDzQW4bHBuuGqG44KgI3NvAHddJUZ/VTNyfhl\n9CFfT1w2JnNKqHa4WhDRrHNawq9pM12ggn+9myKLLjdYFJOHfhG0Nc6KWs5H\nXX5A7V/n0F9VmdKdJ8onqiM+n7muKexVjdP0CI4FQPeI5vudztWfKeDg6859\n+K1JeUFnFnz8KpBuhvPEppQeG/njbvBWJB0BhC3034Sn/CpcvR+HqKbHJd2L\n2TIGBqbfYDSJ0TTVAbrwBd7j6s57LWoYkzW7EclYF+H6vilOIgYbG0YT+cmz\n5mKPyqaqOCaoK4hAygUKVLLnrZ6xQfnft0/09TzWgCGSi2Di3cJ7fqXWpZO2\ny4rJDlSiQ4XnyN8aADWdgb2GBLwbq5Qk6rofiKzdizms7PFoK7atXSAefQWZ\n7pxviNrdUM67KBppyc2HV0EaDE/do6xd9jIfDNd0UtgY2yEhwUXeTkfmDWJN\nsufuoSPs3QGmZ4t8ECiknko5p5pjbQ6cMJd90Fx6djwmjDoqyslQs4MaTbhi\nGnOV\r\n=DQ1R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.d3387f54c.0","@material/theme":"8.0.0-canary.d3387f54c.0","@material/animation":"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-indicator_8.0.0-canary.d3387f54c.0_1599166480408_0.20521639614528464","host":"s3://npm-registry-packages"}},"8.0.0-canary.2ccf996cc.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.2ccf996cc.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"847b538c71858b91a21c5dda84db9c29c2004d03","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.2ccf996cc.0.tgz","fileCount":38,"integrity":"sha512-CN6cWzmLmbiyvIxTu1mVLN/Ppp35CzHkaDRnU43swoCtbewbvKEqPA+66IiTEGSJ7GutlH0Wz0z65DU0boey3w==","signatures":[{"sig":"MEUCICIBJm2Q/OypZczdN8PK3GU113OBs27LV8h1VVboGjx2AiEAixPzuxf/Zxn5MTQWqYNxdZp4vPr4+ZbSQdJtF5LNuCY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169621,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVgsCRA9TVsSAnZWagAAANIQAJk8L81Q1ukVgWcC4lSb\nUwCfUlxxMEaGH3Q42X1D9OFNds7f6EA6r2XFkZ1HloWuOn6erWbi0h05J5iD\nMPpHW2mNnCFdADynYNdRD+fiLZ4UPpit5xAheagMIWrwZCkNAWksoHTE5gQH\noNu6Xg4LtcI0p82LlChJi/0SLNeMOhW0e9Yyb38d4UpKQmZUf5YXLEUEOxf2\nqM0Uned9ztBxO7+Hmjcj2TnZ24DQFct2FChcYg90RbwUeURmxHFYmBYzxfAf\nFZCEeICdfRpBQyFGLL9klM/C3BDfyr26G8dAw33we8sddWwCBYFShXOrVmPd\nmOUU267aDXVgg57ARGSncWpC2zGaUYr49E+FGXw2g6my3KeG+y13jhH1rZHM\nYrxlMCZTYzdH61Z1hlDRMU+X04FiR8XoDo3X2Bane+CS9SOSKJX3P4QIXu8N\nD6X3PU7sKegoKurfUyaqh9IgBmkre085A2cRtRCP5Sm4YhOPaG5zIlchYfIn\n/DJCCG6JYIm3pAsScgbOCzDYskjKJldkVC9hr/sZJvdMmtoG1NOKSTVJ9icG\n4RCeokEQSby1NbxAvTLl85VJB7IWM0PwikB02m5mVMMalM1X/cjbASfTsgqq\n73hEjrCmO+Gzv38Bgi94IyT8tSUJ7oIAPdhjVdpQIYktph855iEU12wyT/mb\nG87l\r\n=oj8t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.2ccf996cc.0","@material/theme":"8.0.0-canary.2ccf996cc.0","@material/animation":"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-indicator_8.0.0-canary.2ccf996cc.0_1599166508522_0.563239964675935","host":"s3://npm-registry-packages"}},"8.0.0-canary.744bfe5d8.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.744bfe5d8.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"d730766642d44dec6fd1605cdea0689b3f319030","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.744bfe5d8.0.tgz","fileCount":38,"integrity":"sha512-hepEv4luP5AhyHCs5grn3iSTIInpgVn3xOhvw56BprlLYrqVEsR8InzFPIWlmo2586qKD4RxjdTYbkUnL82/Gw==","signatures":[{"sig":"MEUCIQCAOUQ/KF9G5w9nfKi1f0l5YL83JagGlCaz5TqqS4ra+wIgFVZ5bzHwj6Hvu363dB7CA87JE4DJtIfTdO7ol797zDk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169621,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVhjCRA9TVsSAnZWagAACzgP/R7/f1u6Arpp7gcIMEpf\nAdQduMu3BBlJx0l6wJiSa45tjicThkvdGNIX+3SE0U0G00Smj8L9Lda471R9\n97biuDaNefdGt7JOBO2+5d8YN+llB4O3WXPGtpyCaxS3H7RertHYduLIzQgi\nMFgBZrw7U/qRf3IPV/NNF4ptjhIXnbzSHhGZVjRLAEnVyaZtnzdyiol7+4nb\ndS7KjYgD1dd57cPuTCZfuSKPH6QP936prQOpQ/BCz+OZ73uFW4HvSZ+guyE2\nCxVMaDcidgG3ASnkithNQAV+b1Xyjf5SDaqmTK+p2+YH0jkUxbSSQRQ5KkCr\nic6uXpdo1T4rdP60+V94Coa6/Gas1TuRwOeLVyPe7sEso6Owr8tu1Q91h4d8\np+AjkOw9w3Y/oRdh8qFx41caQfYYKWm/ULKpfxftBWHQJ/bXqtlbH/VXJmDC\nMLtJJJt4y+ONp4U5P88vxBwW6pXRLQUWyakuvXayTagPkmi/tcKMaV/YJKRI\nYQdwZnTesrQmD8fjydBu7BnDi1MtCDpe0CIE9lZjoO1IEH8fI3/HXaLRZ5CN\nOLExhqqxGgu1KIJIm2lpse3CrZOStRbuBZv6iZrKcK6CdJrfxw0NI/NqLbMI\nIjmw/876aesfi93NHaQXt6FM1+f+DnDD7I1V/HaW1J6XxT0IQX375e4AxYM4\nZJzm\r\n=sScL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.744bfe5d8.0","@material/theme":"8.0.0-canary.744bfe5d8.0","@material/animation":"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-indicator_8.0.0-canary.744bfe5d8.0_1599166562704_0.60907918601496","host":"s3://npm-registry-packages"}},"8.0.0-canary.78da96eaf.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.78da96eaf.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"07aad9bc33a7e14d780540d92b8a024007456c6f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.78da96eaf.0.tgz","fileCount":38,"integrity":"sha512-X22RBU1GvnpFZrcTS8ztwmuTMtyhEQNKMhsgwf74J1raa6G5mSEAg9JHyP3mw0Ko0oBRkRmbya0BUu80DxLxuw==","signatures":[{"sig":"MEYCIQCfVZpJqbNOQ1IPeC+f8ApVHSXksdephUH1GV4olmjj1QIhAK+tw2WeTINFRUpjiAHTLhykUwgi/ywWs5gVaByDTrzc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169621,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfV9ekCRA9TVsSAnZWagAAhakP/2Xl4dB0gPmPkn7o/j5V\n8z/40vn68M4+/0MZExq4TAfQxBk0mIRReqWLXCVGY1Toan3DXWS+hs9gpUkx\nSpdwRaPOLjiFsmyI9p9I2einyJQNX6TS/M+dixB2o0M54kw8yq1shfzXSl7S\nL07HYex01+nJtGmxsiJCBwPgqLwetL5+qw0NI/itm2aOjnKoEPtN4jUTnhNQ\n/OL5PIgZG8vLhQ35qDtuog7jDQ2F2u6zgvNS/GXmgdFRAHID79Fqwx4oJAZS\ndemhqk1TfO6K984fh2nDdjEgrt/Od9Ux7GSy/Ssu4tKPLCOP+Q4tAgEHf71l\ni0l9DtwqxcxwrPDtSNoVzi1p5BRdHJGy2tOyp6ER/svoo+m68ci1t359nIow\nBjO8YR0rp8t62paH/VvjulIqkZd5fOwdBl2ejnq5Rr0jrdgp2XkSQgLsqICJ\ndloZXjBdKMWBVQY6UV+g2wY+xdIuhvITVCd3eQNgmqEpGnPZfsY8IHHn2huY\nIP0p87ik9yxDylgHbAQVtroChrvTYxfURYHS198yKtnlDt6BZ0Vb7KVHSm8F\n64qHgAVxg8HYO4A7jzEX1ZtyjUQKapDxaTrarC1F3aTlF5xd1ryL65T9IWwT\nwYs0WQpZ/D08rFc8i4cUN78GT9z8BbP6+NZ/8icbuMqMVAymneWeozmyUb9F\nQMNz\r\n=7ZYT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.78da96eaf.0","@material/theme":"8.0.0-canary.78da96eaf.0","@material/animation":"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-indicator_8.0.0-canary.78da96eaf.0_1599592355599_0.06856656370669523","host":"s3://npm-registry-packages"}},"8.0.0-canary.b0ed593cc.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.b0ed593cc.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"da5fd8ae9945841df2425a68e8ea3d9328838a28","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.b0ed593cc.0.tgz","fileCount":38,"integrity":"sha512-sUtmaMMOFsH2qHMhwiL1aZHVQsVTGW+oObMoomqappvf78XZsA6kOhnmdEnMMpcZM1KNX6Dvm2bnVuS0hwOY3g==","signatures":[{"sig":"MEYCIQDAQsT5lJg2CWgyavigR4c/T87iKeEuisRcNlF45p8m3QIhAJ2quGfiGlibbou5xYvHhMSDabGyC01CFnvXGWiWCIza","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169621,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWHMWCRA9TVsSAnZWagAAcXYP/1a1WJDSk5aSGhkKWwys\n0GYsMQMRtij4xFWQ9wVqV4DPIsvnqfYdIU/xaLRte4kknJTqJjXRKCrRn5eC\nhz4nDUkUMkSr0cSp6D09UGuS8VNPvlgT3Oer405XCppPs4w6guN3YkmWFfVp\n0EpJfz4ef8tMKqPI2RAG/QF4KyqG5kn2YGDhjxQnxpAsGGQmnwsA81xbB+GP\nB0eJLxv8X/uX6lNVLRiJxwL+JB/VOYCiZI9Ao3JtcB1cPoQbcUkKiEdi0ZUd\nPTTsIKnnNNZ1xbS8AP1gwkrwnnYCQIHC/cCEz8h38E9NQXBRAs+7Jnsdu9/O\n1GsQq0mF2SgytF+tjGp8bhu2o3jDdkdNYrbONsbTX4ToVEbcaXypyeRxxxt8\nD0iABLFVE1IPCYQT2bMJwHaRbE1LwnjU6hXdq+5GXpJqULfbKmFnW4CmicRh\nf2llFy7Bt+1OMUCknBBUK/d4xf4K7BA/GjLxgFeQYt0KdyC5J6BucWZIq2Fn\ntfYFpl4cXm/WQjbZICr/OxtYa8H2SFqClWnaNzeybewqjNRJo1BpTYQ4f6IT\n8gxli0R9F6VZ+DwPQAG0q6ZpGfX3s0hjTbrrrTRZf2DxNAT0Tmb90wLGE8Vb\n6JcyvFSRfzQcnzxOH56L6fnJ8L6hxUK7DH5DIbvI88ez7OsqzkVV3pdg/MEL\nh+pd\r\n=j5KA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.b0ed593cc.0","@material/theme":"8.0.0-canary.b0ed593cc.0","@material/animation":"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-indicator_8.0.0-canary.b0ed593cc.0_1599632150081_0.9705737749578836","host":"s3://npm-registry-packages"}},"8.0.0-canary.85a1fa9ea.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.85a1fa9ea.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"9932ccb3f6b7c08de924cfcd7ab26614b89f3b9e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.85a1fa9ea.0.tgz","fileCount":38,"integrity":"sha512-77fYlTjztVhdfxpQ92tfXLU6UshINaSa1LmHtqz6oaT/Cj7b9DIfdMSbBq0FLfLRcWM2K10SlwpMKEWv00/bjw==","signatures":[{"sig":"MEQCIFHMDr7YX5PYaH1IGqDkv0qzJAuV4NbFqA+YqdpdxvCNAiAK2JNJjK2GYpU0oKhF+3p7a/XpVas4uKD4fbOju/Yyig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169621,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWpY4CRA9TVsSAnZWagAA+uwP/j1lNkfWf4bPWAyvnFSR\nLKewqGhgTGYXf++xY3uJK0aYxBGbnfdexgv/DOB1Wj+ob09PUIlC2MisyO1D\nclQVTIUcs8Rkwq/GX2cjRk6VyhiR29nAIihplBNiwWAFZhy+BZsZgAATtz5N\nhhTOtSUvOHepXyN7sKg0OtHD6t0oC2Ju/OQlI3RMMeY+qYlZq1n7aRoZQL9T\ncsdY5MTHR4AOZPV8RYji4osnEzDUtn7TmJ4boidDOeORlvXXNjqzi4gnP8mz\ncKp4OzJvQc33UWNdhpFTNFZ5hVnWbXHSTLB326NfCXIJYOdslJtF3NvcA2+x\nEjFQzghb1xeyzasWvifozLxa56AZPgkEv62n7620r1J/aNnih6DW7MwH20wz\nHT655XHfhce6YqCfwAp+rO+52z3s9bwG/fUGVD5Yt/aOR9fVAlZ9Fw3PJ5M0\n8dyoBEUL2E85F8S61Ar3JMpLycdiYgRpABJc6PrKSieKIi5ASTF+sXohtCd3\n9QQDWjVF2X0uH47o4SPZ7zkWvaHAdbRUVfuay8HmZBT9OPJei/aX8rfsBPqs\nz/Tc+JfATRBjxBqR26nXdgRsgaYodSmrz/mIC7QldNuuAZjLb5gdQfewXSGB\nG77JgF14HF8j7WXoMyKvAgyQuQybKn4Hf/ItKMEmeIpimraRwa4+PQGlrJxX\n93P7\r\n=nfC0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.85a1fa9ea.0","@material/theme":"8.0.0-canary.85a1fa9ea.0","@material/animation":"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-indicator_8.0.0-canary.85a1fa9ea.0_1599772215824_0.7849848431147011","host":"s3://npm-registry-packages"}},"8.0.0-canary.0bc41a9c7.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.0bc41a9c7.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"b5c0dd908865d564f136b24df0c5b27f3ef2e16b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.0bc41a9c7.0.tgz","fileCount":38,"integrity":"sha512-3qq1CTQCR3EdGJ6Z7sXSvWcqcIb1hQWqSGAqqctq4XTx78Qj14zentWHjqZ/YzM9soYXtRFVS+N/I55k/Kfqug==","signatures":[{"sig":"MEYCIQCgtg1KKGLf7Gtwm6Hc4SkFfx2ViNuKkawfvJ9QFNzyaAIhAJx1gUK6u8YuizfpDUl5lc43E7prU5iwQc7p1ukKgb8R","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169621,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW7isCRA9TVsSAnZWagAAKh0P/2PZ8ugupjIj0OnfrDoO\n4IUQNYtffi1UzZSJkFU6wjvR9OYGZlcLpvJtTPhzEIKlhR4aC0jmav7FsScV\nptvSPwI1yOuZtBaXZ9ZR/EjapHVLNP5uPmx2ghWRA9EJ7wE3o70doIWftIIG\nld05iRhIDG7+OFeYs0iG+DJHHC/WbBg1f4w4Oy79IfJEobvkv2V8Ovh3WrME\nAPJRsVkI//aiL3UgZtKGZOytOJGfghUVujP+TQDAhzwiQk8RXoovTVPGhxm6\n8kTCb3uUvrIJRvfKmUHKBbTb4SnCAJl+A7grGyy4eBySyhY+mOGCQveMprQ0\nvVtN4LInrgp8iD347sbnd3iDEGj6Nz8lsK+Nh2gBbIxL2N/jyVKYYIWutSub\nfIhPoAkDiGKUa43Ok3UeOE4oGRkBKWEeW2Eu/yG1xI4ZEarR9ZgjaUN2Gpyl\nWHoxafuSvNtwHDJJlDm2xuNWIPKP4lJyqnMYi3PBTp9JDdIyQ7+KOd9NPWKz\nmz2gT9ckPnuC/gJ7EEZaIzES4WmVsfUJwpVca7Kke93Ero2FiX9Y+6JhM4c/\nF6ZCSVtk7kg+TebrI83t89yvcsXJBX6r40uljqhiukuGvZy49EGQwW0B7rlL\n5wQH7fwuwkKPlTc1YY/MnFhT2i23iRZ40CyAIjtdyuoX5+EqoPNeXo50iysw\noeO3\r\n=0HLT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.0bc41a9c7.0","@material/theme":"8.0.0-canary.0bc41a9c7.0","@material/animation":"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-indicator_8.0.0-canary.0bc41a9c7.0_1599846571594_0.1216829820891705","host":"s3://npm-registry-packages"}},"8.0.0-canary.fc0eb5013.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.fc0eb5013.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"d7153b05546da8a6657cc63d1467c657df76e09b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.fc0eb5013.0.tgz","fileCount":38,"integrity":"sha512-rPAZrvSa8jdqGQACkwV3fCoT4ygSAG5lWgWfa2FgODecNfTlW5SOMAXrfuVs32xN6xVqPZ+zUw/yBmmfjrhiPQ==","signatures":[{"sig":"MEYCIQCbAfHUy5EI04R1DjZ4jUH5ZdEOdsvvXLgZFEHHlt46ZQIhANF2Cfo+5FLsJJJwztxNnL2NSCM6gdHYfXz98cOELX5T","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169621,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW9YmCRA9TVsSAnZWagAAZTAQAJNZ4/00JP2Hx1Qzg8Xg\nEmA3mBLtdeEkc19oH+hRIL9bQLP14xzREaZjcHu582Px9d2pNfIO80biBZ3E\nonjlzRJKzF4FdT1Om30t0yHdxNfpTwa2FQ4DVWc6Giry6zM7m57j46hd8E6r\nxnAr9aQ1FZuq17vlkKlLUVMhIEsBrFB5myMaGDgVKBV92UrSpykDT6xZO87P\n0Or8T9NHi7nyfnxvNZRyMwuZ4odrqYUUauJvyNCPYYUNZUYtazGl4GYSdcys\nOTVBzLYnsfZ20xAzBDOSAPezF3018HOFgvbEjJaezg00hHvPzvGvsKjxq982\n2lzuEVPgdeLyOwwVxeYyZ4rR14G/v2OZtWndw8lhyl66dELM4iEvrZrF8UDI\nL+28Ty+/oB6smbMNoXJ+s3pR0ZWMZzexLCVRZTgfCawWNO1OBXYi/gzkwuuo\nQ2nmgU91hd73utNIjj+t+RC+IjMXoc3fZfBKJSiZ6vxrZ46BUvFjaS6xXnl3\n9nbr9m6IQwJs6GYcSihQTPXtCfKk9Oj2CeNYs3Zqt5sBXt4NwkjRm2lzZ7w7\n5i3tjnAXYpoGxW8UGTrfE3c8CXm27HgaBgc7mTPVyxV+U8vm0D0l/LJx4zJ9\nGPH5lEOA1UJjFY7LkWi0YtmgQ49Gn4e++osR+z/Xgzp6g98dR9y2OqO98Eve\n4UPz\r\n=q7Ap\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.fc0eb5013.0","@material/theme":"8.0.0-canary.fc0eb5013.0","@material/animation":"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-indicator_8.0.0-canary.fc0eb5013.0_1599854118019_0.38534205458574977","host":"s3://npm-registry-packages"}},"8.0.0-canary.319bf66de.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.319bf66de.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ec4716b5be9dc18cec4b51834c0fb72c1735c8b1","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.319bf66de.0.tgz","fileCount":38,"integrity":"sha512-zrs9D2hYE+zuPi+yo7fLoqk/wkjm8BgjH8Jkow3C5T3dNYyQOQfTLkB7MLd4kGyPDNyo13l/mdea2FsUpFPglg==","signatures":[{"sig":"MEQCH1rPRzyEeBQZaanGJnUyvDK3PmAewrln02zuS8R+DBwCIQC2hPjOM+1O1bFez0t31CUueAYxqrM7vgIUvJMJeSh/zg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169621,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXAPGCRA9TVsSAnZWagAAEGwP/ihIVudInKqHqd7Hj3a3\nmFZBgkJ98eENVm/6vNPGs3r0XY5FJp6/TW2oHZjCkwO5pz1xlohoAI013hbu\nBKHVIcZ5al9WmYDXguGHUavoMsk/L9DPfD9BKSqBTEnlXG7DfI+uzbUAuqNl\nsvTOWb4fXBUCa/ntd/6V8xkl4jz6OEZRJuEl4zRf4dE7p4zdV36tSqOppqW7\n8quvfWVekEFPI2ykd9o40UxEZe9YQWTmGxPkF//PhGFhU3jyFvzNA/hLdmWO\nyNSZy3K3hrlbQdgCemSgUqTrIQ1jTs6fXvYMh572XyVP+RdZhY5xPQE/geWL\nJIDOlw5un1acaTVprBCF34hfF6EuytAM5a5CKACDOCa1bxhHS5WoigmWWQTn\nnQ1QCu292j6i/SNnT/TtLkpGyWDqheyzuFzgqHuRqZvNnci+YbBxwG72qB5Y\nzUKXfslLwImlkfI1MC2Y6KCBtp79v35ihRQOtE4OSd8D+48bZpoGoKcoB0ai\nely1phO+OJ/Z8OxYJOaMX+mRo91P3hKE9h0BvcaSpj+fyTHSwpcdh9VMQIB/\n9Xu4kNXVjsroK8QyLCBb+MpQlRfJwkRSFVRP/BlYC+VUnrx2XQxWEBiygkX4\n0xsEJ6V7ootCI7liRfOUnkarRXUXNJGvVrnFL9Ud993znaz002Eh4E+Tt+be\nbqXH\r\n=KAQT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.319bf66de.0","@material/theme":"8.0.0-canary.319bf66de.0","@material/animation":"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-indicator_8.0.0-canary.319bf66de.0_1599865798323_0.366746388247013","host":"s3://npm-registry-packages"}},"8.0.0-canary.5bfc305ec.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.5bfc305ec.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"9a8d0df7933639508ec279980bdebb8a8b75a4cf","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.5bfc305ec.0.tgz","fileCount":38,"integrity":"sha512-4QW7xdAipacWy4t5CzPLVkOx/x6CtLkuy8yxKMQ0mcol5p82hpVza1akyPTmwI6AP5obGvhIgCC/ErDOkQNSEQ==","signatures":[{"sig":"MEUCIQClBNhhZ+Rg1f7/XboQwCXZ3u4X4n8qpronYdZ92my1/gIgatSEX9gmpirCLHO7o8vkS3tRhQq/qA13PbGT1pqu94Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169621,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXqRyCRA9TVsSAnZWagAAiC8QAJt6cO0XgOJQzsgUwzYg\n649OATJ9oKzeCAPzmd0HepR9a3tZjBl9LK33+hfBkLISR8g/gha9jYBsxpzs\nalTJ6Z4Zak6StTpWngbIKUtz6EXfQRtycVl+1jUixdg0fTGKr+8tJQnGV56W\nET4pHAfO0h8sBOnurx+pqRqP8y1DMVpiK7Eysr27Q1xq3LOjOoaMH3huVnQP\ne5ib2EjI0EIDuqG+ioyy1tBRvhKKe8VYRETCCxKKietDr0NXNeKx5oFcGhjQ\nBFDfmxU1R4Q8hQmm2VS7vjcfVm4gpP7Q3QxYJhxeC7iODidrJ/Hk0STLI8t0\n46VvMWfCJOBFaUrpuurSUKnToYIiPCjWCmr5JVuzxYtCut36Zsrxrb+oCPTw\n6oxRe6F9aqi1w/jNv4VcWc/6SAackvD7eY4mVCXF45GxxUXH0B1DvpVQlfu7\nxj13iaPERgbyknHCg+MQVtOUAx2XwdqzgZXjOBHWLlhOd3A0lmmcWrHlDWPq\nCoWw1VC9X0pReUdoFviNcV5ZH6Hrqk3gHzd1987ofiFTiPiBvFdNHeU98Atb\nOhS2/O52kogDm0g2HhRlA6Y95kDBgmrTQ8xXtZiH6Wb6AD5Q8TfeX3ZS3Apg\nZ9HSdWwgNW1Dgtf4wNfi24AHcUpG2+YSUB1fJCWfIs+nEJJ8VEPnvB/IEliu\nO2bS\r\n=7CZ/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.5bfc305ec.0","@material/theme":"8.0.0-canary.5bfc305ec.0","@material/animation":"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-indicator_8.0.0-canary.5bfc305ec.0_1600038001658_0.6934588443128697","host":"s3://npm-registry-packages"}},"8.0.0-canary.83d83f131.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.83d83f131.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"308b7caef2519d61b9f76cda8e7190b9b10bb0a3","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.83d83f131.0.tgz","fileCount":38,"integrity":"sha512-F4kUppk8F/TzglyiKtvO34E5b48UjJuXIs7LUUVGZzXkW/Ky2s57WLuwPrLxswXj9SpeMJ3tIyYCKXpbZXmlqA==","signatures":[{"sig":"MEUCIQDgPmH8k0jCq4R8hqO24aVdXWKR+5JnNsgRDtjcDf0aCgIgFWy73ABUWAVhfDnHZXjN5zRxaGW0qtawnVQFw+SrAKU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169621,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXrobCRA9TVsSAnZWagAAgYIQAIRZ0xnD8Sm5etis3gI+\n2nCrbCJqTIo5dxRqlHXZX5N/+3EGevbRa+ghMTCFg2ZFdVZr1iQF80I574Fg\nhpNc/fPLN7X4649DE/ubHF9yOW6mopDyEdYS54q9w3TI6PyDbqEQ4z0AKyCz\ntowzxvG/PIC9LTFmvUosIfsSgQhmcq8jfJ/BbXucrrJxOkmihtfumfmoyjgV\n9fm4Y+jQfFYkeni/x9lV4tQV8Xxt2+Q2LHsFxU0zRTmy75fIJb49WQ4vycL4\nqBYQholxP/MZunKo7WI1R/HddN9wriAHyoaoEgxYAbPazuv0nEx5KYbdk648\npHy+0I+dw+/v895q5G9XkUFddl88bYFb0MQzigpEun7cypsVXwEY1j1LhAiN\n+b7JchEAaehxKGYyI04ko6LsoZQOeqX8qw90qOV8P7BMw18/aR2eGryqXPAw\ng4KadIPtOALrM4Af0giitKYYRng8McL9EdHAhvIByz6znGXCHvHT1ZnOT4j1\n+yH9JoWapVZ8xESwGiG/0Y/U+YJ2mBhXShKxlOi/5ktcZPLXJWYy6N0GCVTj\nX0OKldlx9gFbRFE+Rpaz2ztjYY0P5S08htyITyM9BNpL/5T4lwJTY2Ag7uXz\nuo6ByhE2bSRiAwKH8UufAfRhxc40onRFJDgoSgKXcIsk/VkhtqpB1QBLdVnG\nmrtI\r\n=AvPC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.83d83f131.0","@material/theme":"8.0.0-canary.83d83f131.0","@material/animation":"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-indicator_8.0.0-canary.83d83f131.0_1600043547229_0.5076507881373917","host":"s3://npm-registry-packages"}},"8.0.0-canary.40d8e4726.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.40d8e4726.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@8.0.0-canary.40d8e4726.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":"360f64af0149dda2416590b7f4444026ec6750d9","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.40d8e4726.0.tgz","fileCount":38,"integrity":"sha512-qDEAc78GEKGW82s93PqX3xkAqxPx5dPg/Mzn76oRGppik9ocSgJ9iOuCw5PqMeHsQXnfnsjbd9MoPD/4hSlR7Q==","signatures":[{"sig":"MEUCIB74rn84XwwC7lN3sCn7HRZLY63SksufsdcvXJm3sp63AiEAslf34t0AKrG2Ry9Oa7+oTikJRpfILbn0TwpFwvr/e/U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169621,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfX/zjCRA9TVsSAnZWagAAn6cP/3UvRqEwjwfPwfY6THhF\nfOMzkG1BNPYQqbt7/IsJy6ycLJlQGFljLwHCoM+eioC0xW5PYWZbB75Wt14j\ndVA/yXcP6+iSDQ5Aoskj1XO6Co/H+Vt02BXZje/dLL52YsDhLZe7hBmhg1Nn\nE6iX6Zjw9O3Ii8PBnMNro3Pnh8H6dCZx52lfPGIGlG5s5cpetzAP42KzLx80\n2cxI5J7YvyCznu9FhgT1omwuFP/ryR7LFhrXukX22gLyGqmRPmkgH2EVRywg\nEyPMpmMP51WG9TyyasgY+W6bfYl/KURBK02sfBVXexbe/qZzHL3KVuQfGtgA\nv8qMbaAggrN1iY3ENpVSzc+3h+eK752X90reEC1CAuC9grXRkKWApsMfORy9\ny4Gz5BqQmHeug1MTq7ap/8mAPasxMeS/p94bvIeT5YS6cN6n6KSbxtbXFOam\njXwJMt5Tz2UQBwyc4/jFOYgcBuArHe8khzeQFqrclpAZ6JnS0GhHcwJtEsQQ\n7PXP0/xqU3Y/fBB2EVaftvBlSKtTQRElSXnu43uPBKCA1+QXRNCDvQdZ1iWL\nTgC88Rv3dh31OjmHT1OaR4x+AyMFqSiMNCrGMQi0BWKRS0Eo7cKWSf2ZWFjz\nUi0z6c2899ijbmXRObUpD++HwK2U8QVkfrOoGJh3F2SV93XXVir67zbqPwOU\nzBzM\r\n=+9bA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n","gitHead":"ba2736b8bb826dac383c6f8f237a6584247d5198","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.40d8e4726.0","@material/theme":"8.0.0-canary.40d8e4726.0","@material/animation":"8.0.0-canary.40d8e4726.0","@material/feature-targeting":"8.0.0-canary.40d8e4726.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-indicator_8.0.0-canary.40d8e4726.0_1600126178333_0.6198722105500778","host":"s3://npm-registry-packages"}},"8.0.0-canary.c25d70a31.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.c25d70a31.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@8.0.0-canary.c25d70a31.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":"1266a3330aec1d5958ba6081c24ffb80a66265b7","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.c25d70a31.0.tgz","fileCount":38,"integrity":"sha512-0e+TqEZf7Ecl78i9CUHi3+DCLgFBSTqG/Mq6aRT00rUk1GHiORFifQUTsxIz+Q683367HOs3ukLgPFJfdaAjyQ==","signatures":[{"sig":"MEUCIBbaW741FE8V7tb+30ZAjc3U3RqZvFaW1a5i0SUQH85IAiEAkbyB4Je11LuClcbd0qn8W50gt4FI/GoNXfmMG+0kVo4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169621,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYCbQCRA9TVsSAnZWagAABRYP/0OoDGhu24syihVvRtae\nw2Ou+kx0WngbB1vURW0o4A+xeyYaFz7X2hZ+IqDD/W+rq1sRFDRroLod6p42\nGp9fEahXoGvVGB6nvrzVcS3AY0DXN5eEzpsOPRtWA6tBkNx+/HTlR1lcYEyV\nL8HL5puQtklesUdlbHPiElnvgKEnnAyeLq0pJ+HSF1FkNW0NqPOkZKmYOu9H\nUe8++i5ipoX9tk1/8S77c0IZvdwL8TBa7A+5J1pKQ1dGAzBb6GQOHfor2IIN\nexphzGeCb1U/S3PWUNOHSBvxVVl/Tn5eYnXsWOC9Ipr2J002u/gpOkj/UMyr\nb1r0/4hrZ9ZGFEO1KBIAqiH4FlHuOO9D9wUB8zoRoYHfWycTmax0WOR4ZEbO\nv7hbirKGQlDS5S31t840CEeo2Sd6TqlJ7Qjp00sKjKMKPJk1g6ELiFU36H9X\nSZyqefdXR3twY/z71m9hLaB0LQGR6QAL43pgsofUsm2BMViOxRsyLN0utwI1\ncieu8oXIlkdJppsTU+qAQ32/7Njgwfv3Id3OHmgMPwRvr9c3uP/GTs142Lcn\nsTOUZ42EgnrPPBZPbifRN9+Dkw6QEb/4MFQ7Pwx9vuRSo13+mRabHY9fh2p/\nPlSFYd1XUXRjy+/GlHtYklRxAY8MMAntx+mE280oGU7udmeYLqD/kcO9V4OV\nTcMb\r\n=Bh21\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n","gitHead":"23adc9426ee1c32d146e601987be4165e56c7934","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.c25d70a31.0","@material/theme":"8.0.0-canary.c25d70a31.0","@material/animation":"8.0.0-canary.c25d70a31.0","@material/feature-targeting":"8.0.0-canary.c25d70a31.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-indicator_8.0.0-canary.c25d70a31.0_1600136912322_0.9557874106368638","host":"s3://npm-registry-packages"}},"8.0.0-canary.d52b165b5.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.d52b165b5.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"536f4f28489101ce4c52ce875eb36136194aa78a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.d52b165b5.0.tgz","fileCount":38,"integrity":"sha512-GnB3H1Cf95ZDwax+8bLNLSwON8X9uWRe3vnFkgLLaggstMT8tljAKM8/W1mOb9E8Ev4iLXxZO74u3U4bHbQaBw==","signatures":[{"sig":"MEYCIQCy9ImLmvgfXARgRWSA1GfjJtxR2l4JSZO3v247U3SpHwIhAMCYFk1iTShHm776CETSFgG8JB2uzJIm5n94WMz9iPxG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169621,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYNWOCRA9TVsSAnZWagAAzRMP/Rt6fFx81ZZUh8jlqmeI\nRwv8Vt5RDtbtuGI28X/ctEKVop01pmMjvk8/NDTO0dJ/mHaauQd9Yto5Geee\nVzCO0Ovih3gx0h7+Sy2kaeNvYXoI0M7Ud+3dIaVxW3PxbUfwd9jTz2KMgJVV\n64Nu7itTnWeiPxKUbxJapC+xHZCfhpgfyX/L3EsA8cq687yKtzLbmH8ScrhX\nGwCzCIBZNy9Y8kNlfq/QUNKqt3gxsBihrvSP7U5Q6V9P9dB6tMyLDjKmwPj9\nTkUA9KBjnaD8qNbHPdDF3AroiJHtoIPT8os3XKw1Xv/CUwlf8CPQanbPsDw3\nfJ9SmxKKsWi279RKwl6WGYPRfQykxlgaibAMQEl5s+xE7BVW8zD0ASeFV+Tk\nLvlLNeis8Y/NPbZ7ZMAJxcndr8UEauNasOBJJ6OtzwirVzTBKtKuPzLXdfL4\n6hlXHpVlvXr9F5lIoHr2wdAsCoEAYKUWVCjZYRy0XOUpF00d7hve9hKKx9I3\nf01HXF8TU5srik6U0FNhm9UB3TPibmc9CN6GrAC7FOXfNYanFeygtn0vmJXz\nlJu4qRdT+yCT7oorkAUXGSob6qhP9LR6A6PmGkI/1wv+rVeW2Ms/lEXu3tOL\n3ox6q3YhPH6AbojsZYofcvTkVBwH6LKfKj6eytESDRPHUChVn77rUCQaytNb\nNsNm\r\n=N5fd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.d52b165b5.0","@material/theme":"8.0.0-canary.d52b165b5.0","@material/animation":"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-indicator_8.0.0-canary.d52b165b5.0_1600181646228_0.0973002784704915","host":"s3://npm-registry-packages"}},"8.0.0-canary.a831d4799.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.a831d4799.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"aab131317001e252c484653688ed4fe030fd935a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.a831d4799.0.tgz","fileCount":38,"integrity":"sha512-Q297LWBBFia31PUj5pEJl/5fiG5kj3+2pW5KRtclZdkl2YqYj8mbFhk/sqHUiuRDx0pFnA9h07ES/C1r6EDaNw==","signatures":[{"sig":"MEUCIQDu0V0ZPiM90YT/XsbV1bsIvckIEM1l7MCi5uMv8y7yOwIgJPGnDqdhs0asgmcObcnR8aar6LeybfunlpJqaOTpjFo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169621,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYP8rCRA9TVsSAnZWagAADosQAJ9kStnf8Pd6IgH0IxYf\n0qarpObz7ntJ/O5ru05JIhPBgpkECRZ0kH2OSWgTLdOHnienDMTVKBpxH+3l\ntQyizndxIvghnkYlCKJjyQSeQN5fM98iwTd7YxWnXEyGJinv+KDUclG3G0tI\nzv1oU33Q2sx2Hdy+tnBCk8/Kxrd77JUVvoVlDqIHTNQzQFVmmfu0PcuBw22X\nyalJTct02NEaeH8DywNb3INiTxaElWLO9et2GfApqslxKXzJ/1GnCrAX9jWM\nSSCSU5TfNNDS7wc4YWuOoTDYfsShBuqiEDwtpCEeduBUIiKGJfSdvNIiGMii\naiVUlXCx5ZdWcMTrZaS/F6F/hm0IRyDFTjQYO/Uxi3oz4rRKo1yVLrQMNb+A\n67Y48WrLMUwZIPiVXmeVfc5gUd0eMlF1HnEqhsIysvnrudcCx1KFu36p7vSn\n+hI6/XEp18XhdSQUsOQ1F3GkcQKhkqNVDx7oFB9DoaplvLFdX+3FqH1KzaY4\nMqQg+81sP1JGfJaiO/BFjWkgHKBWiQPJDEFluGAkeDll6zAf5BUJrRGWTGWB\nxcsE5cCMvLxhE0lh/4bySnZcaTIHkHX0ZzwOKm9b5+o/v+aKeWwTgv7KcLOL\nj+E766l2jt8BiyGoZ3d2HcM+zJ91dJ6mSPkWjo9UhiZjvwHf4nwQTPFz4S23\n3PXv\r\n=XhEt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.a831d4799.0","@material/theme":"8.0.0-canary.a831d4799.0","@material/animation":"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-indicator_8.0.0-canary.a831d4799.0_1600192299289_0.32345859956682044","host":"s3://npm-registry-packages"}},"8.0.0-canary.a306aa488.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.a306aa488.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"1fb15635700ad56540e3921810bf0394885b8c7d","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.a306aa488.0.tgz","fileCount":38,"integrity":"sha512-0JoEzVQMpBgieuYjjXBd360tbUtgichEHF7ZvVzs1W4grt5gKvThYsD/jGWTq93plvHSwDYLJ7fuSzt14jUdjw==","signatures":[{"sig":"MEUCIQDjKGadrUG0bhNkl1M1iYx7tI2GHXIF2ex9smqyyPTnswIgQDTQEq+2Ma+Mv/fVNeMDKmVq1JglrZiXIx0Hhw/VnQo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169621,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYrSwCRA9TVsSAnZWagAAXwMP+wV4+KSla9evpz9gSOPR\nrY8MKfgQyfRpsNqe/G0pCqoW2NqNp4tUfl14XC1+RKMwSLNHOhfp3R7X2tLa\n2W1QPygtkhTtc7eA3Sle/mzirEKhGJDSElk9vCp2ixQNLjoHOQPxBFXKFdzQ\nyTXEyl3N0iLL25NYqBCS3E2rhnRlDhyYsJnROuv6eGeiaVQLJ9Mng9f4+yzo\n39HH4kY+bRYtzQxXR6QMPxPKXuSZ/Fg188z6G1y/dZTSpdMwdAm2vP7pd92R\nuIocpy49MEhc+/RziE7qcKD679qUBjod2NmOcUvaUOB+O/tK+IzM1lU+al0j\n6tYt/F89w/dCNq2V2fV8jIppfX4Oz+liKCB4dQfPvTbTKH3cTGYCN3bKl7Yc\nmRZUsLuPYTA1+D6fwq2bBx6wUgxwc+F1/xdxSc3b9kFJeMqaFdU/lmCKdFpk\nm5hcGnnV1KbBs9lwQ0W33GwVXJpil1GknyxmnuPGhDwkO+r3/5Bp/gwZff5j\nwv9ENXSnk1hMRP0csg1fX6gYNFBkJKAH2pYo9MaCNZ0zGEgZ1x8U4aLpFAdA\nX7I11vP56d75HLa8XrmJDsuiZjklbFpoAQZk1JNaY4CPxJ5dyfOwWp855Cfq\najDjJek+xbtsHUszQHduCeYSU+hHLvORLZ2obPtJE9L469ZinfMuSParZCHK\nox5H\r\n=4t0w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.a306aa488.0","@material/theme":"8.0.0-canary.a306aa488.0","@material/animation":"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-indicator_8.0.0-canary.a306aa488.0_1600304304428_0.4142419566444455","host":"s3://npm-registry-packages"}},"8.0.0-canary.fd608ff66.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.fd608ff66.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"f17057a8b27533b90a25fa26fd84f16cb5d4efc3","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.fd608ff66.0.tgz","fileCount":38,"integrity":"sha512-Eg/N2xzn/IOfiTqTRZNOCgOwwO8t9uFeCGymzNRZP7WTROs1EpQ83NyckfDjhI/V2qjwhfbt3JobgaTpD4B0RQ==","signatures":[{"sig":"MEUCIE03HFbtvPWoVRMqDK5O92kpWb91Invz0NXwsd4vZypLAiEAksjcf4VGH8sYQnloVhxzIrDNAXPvuk3fJE9CK2CNstI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169621,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY3HZCRA9TVsSAnZWagAA1pMP/R3WKRjvnDv0GvKBYrVX\nmJ30lRzzu7z85zTQEGEMwEpFg352eIyjZocb2n1Y5lN2ZTk7GRoZhnOaQyyw\nprt7j+W7wd5wBcq6iouehpGl27yXiYq8t8BbxPNVfxrtMkHaw4cnnXg/T5dA\nYure9IfxdPhNJ17B2CpGyBmL5pRs0ZRAGCZNl+ccr8m13aCE4ASNJQg7BrT8\nsNsWobqV/M+JHgJWiK78XhmADVIlYNiqiSu/YsIUIjuUjlK7AqwsysQ9n9b+\nIdPFUORNBwzLlHbHnwfdY1QozvAm8MsKHFddth+jlV+2KEW/V5We4NUJDirb\n04+ild90U2+lP5XuhKREPFBT5VS3KWr+ctw/pi6DjxGxtDHDcBZPsSnBHUWA\nXrbaj32ezbt0Pweg2CjsMsyrWjbXIuxpto/2p4GdNSxkqLYlUacBzjYMsZmm\nI0fdtw3O8BLUeXW4cp2GyxiKZWZNK1TBvdFM7m8WF6CGQ6hzC43L3XAUhAiy\nlBx9iEf0SRBMZIa4Odp5nBxjWRbOVdLugyHp8WHKI/2CM5WYj9YlkS3tRNHZ\n8+Yd8A33OCczHOIUjB/PG1m9laA2rAJbSbamCmMZkqi20pZ7QC5UHR399iCy\niV0VfXgrh0p/rS93+vAxn/xTTMNI8sAqoW7rJXC9UtOh45d+uJbTaRBuxWmg\nLuuu\r\n=rH3l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.fd608ff66.0","@material/theme":"8.0.0-canary.fd608ff66.0","@material/animation":"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-indicator_8.0.0-canary.fd608ff66.0_1600352728822_0.7648488134031635","host":"s3://npm-registry-packages"}},"8.0.0-canary.3e435ba57.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.3e435ba57.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"d58ea187677014a91699c47dfd02246569c8a4b5","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.3e435ba57.0.tgz","fileCount":38,"integrity":"sha512-7eYfOZPkvntoyuvXALXuhb31j6Ba1y22onMdA4zygnuHUpMUwLlpfXhalKGe/Q55SF2CWsEJ1xf+++zJfzXsOA==","signatures":[{"sig":"MEYCIQCt70OjA0AVq4iuVLqnWC+HwrQXCssSa0tyHwn9lW6EyAIhAKvOESCMyj+uvYkJbxT3JvOEOjRMZY7X4YjjTsEu3YMa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169621,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY3XmCRA9TVsSAnZWagAALPUP+gOARyyH7iDNvW6D+T4w\nrkCCVq6S4hBc2eiYaatayuBzPf2Vi3dwlYG25ouvcsRpNz1uBwsx0UvHPds2\nFCCBhbFDiSokarAori99FiYRkTRJLE15wTfZ8mffku2dy10uToDVwwQATf/8\nBWHWJzdg7IvauhsN6pwTujR/z+2JPIIgJqtKMcoSwBOdyZIL4GqU3npH2DCE\na/YuOgMXhEPToIlxvGK1Esj5G2U552A8n1PZUD/VyB3DC1ekriyYKOuL8Qaw\na32zSO+vuva27+SFd7Yr9U64qtmZ1kY5R+aokWbT8EaTAPkXhsOb2D7wNOTo\nZylnsRysxPmjGMkhmveEsRPLX+us0T/wHuIwQn6Ua0fhV52nqe8uc7cRmwQ7\nLQh7onk/OWbTYiFiBoCQlxn4WlmehaNv/1++N47xkgqKlcK4tryAeoZlXaZW\nfG4ii3eWTuoQBxU9/qC2klLacpwFhxOi4WXoHxge2WowKFWHX5mvOFh31O4b\noG/nxNAFNVEvQCscHIn4QCBTcZdZoi+1ysFPf8bAN+M69V3lIJGYvXA/vN34\nWICmKGsZpsFLk2ef7yj+KTfu83154HmYkLCJK8ZZIzsFhVwoZq5gocV1h2PE\nCSWt+JRTx00LcuKtuGLmdBqnJ7F+FUP7rGA/75iH8wc9uoVhJmGt7MRaV/PU\nzwpp\r\n=q3gl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.3e435ba57.0","@material/theme":"8.0.0-canary.3e435ba57.0","@material/animation":"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-indicator_8.0.0-canary.3e435ba57.0_1600353765966_0.6337393623100094","host":"s3://npm-registry-packages"}},"8.0.0-canary.c250ec52a.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.c250ec52a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"b15daeff55cd6698989577e3c35012ae77dafa2b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.c250ec52a.0.tgz","fileCount":38,"integrity":"sha512-V+VDOGTLS8kX2pZATvSBWhYE889+2g89yeyqziZxTz2+OTGIAA9vLW2aFuW5QVr7JwV3IOfruIb/sFk7MLd/KA==","signatures":[{"sig":"MEYCIQCiM9JZy7paoyhEgxTkIsUyZQVTcTQ9h1w83geyu9wsvAIhAM1bJ1DAh4PkxO2ML+P3UbOHq49U4NxD3RBNss00hSc2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169621,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8KuCRA9TVsSAnZWagAATgAP/Rs5rLgActsCAdtstGxC\ncIXoSFqUCHSNR3JDIv3sG8gPLrxEFpRW1iwWSOXGUUfb3IZGifDjNEYsot3y\nfsGTSCP8Kxjz0gmYeLNP6wmcdf62G7RDWQMO8RR5Cg5cqTjyC0zFCqygQAyc\nvZayjaWxtissbDVOROnHUBBbVTtfoF7dkAWvyO1VrCQ0ZR9oUvSWdOekO/4n\nz8288WYW+wvmdM/p55eF6nYvSs0sj7IGzd2Q5KnD8EJ1jIBrCVS65PgCDnfF\n/CD2weq/lnm4IzaGW1R6bTx5BLAYjlNdX85dwnaRZWBTiajmbX02t8cDpLUd\nn01CsMDgwpy4biCh429ldqY88KI9eHUA5sI732D6GZ/7DErdDruAFGQpD3wF\ndUnRDmBhDq4xeL+RE2yHlOFh0yAzmXHNAwXFA6O22Dh90Oq1UbX1PHeNWLiI\nkseBtqZuePaD+RPDTOZI9WbNXRBPi9bSJK2EAgChcmxTlFdSzhsgHMAjXjOI\nghug2jauxdB5loYQvsvFU8RMAWotwAFxK9ftPlTcUk5Q4zKveI105oOHcymI\nfYF6ql5NG+CW3iM54E1z+UYSosTPg2S90tyEatTO3z4bPtMzTK6Nbuw77DVW\npjh2imtBHCic/f1nwDcCde+lkO8Fz7tb0wng2NCnTjfg9jcgj5CATFZMr4hS\nOoHy\r\n=puaV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.c250ec52a.0","@material/theme":"8.0.0-canary.c250ec52a.0","@material/animation":"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-indicator_8.0.0-canary.c250ec52a.0_1600373422213_0.6095925365323471","host":"s3://npm-registry-packages"}},"8.0.0-canary.e34e411b1.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.e34e411b1.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e9c129487ec161e7a0eb3e0e47d5bbf3bb7cf649","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.e34e411b1.0.tgz","fileCount":38,"integrity":"sha512-pwemKZNlLRDNqMbuBtZvdVzRPVa4R1+nuBO5X2uXu4jyhPSmX9Ft46iaoaUVTc2FrtiJt4hZeRI5wOghjBFg4g==","signatures":[{"sig":"MEUCICpH6tUiZo41gf++0Vk6XXlIhCOD9KAc1Tb4eSFCFHwQAiEA3N136nDYK8GosHkTfP46pu1joJ/kX+OdpvlKZe3VWDk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169621,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8RpCRA9TVsSAnZWagAAJqoP/3Jh4L75tsEn9U/1BxFB\nh1wMbm2If/Wc7/jIgbzLS/srUw47UzotbudZcH26T75wMXFh7geqnki931eC\nmMTmwS2QQJi6e6re3ZK9jmOta0vc8aZLS+82RLbfITYsZwE+piwbuF2FMJa4\n73HXE1u67ly9B5oFelozxapegqYRvuLtTkUnWJaJ6AUqH61cH9kGFFj4wzHA\ncbcwB4c9m7f9S6KAV1JaoGVWQMZ2QpE7PSxSSP03E/Gm5Pz3xbQ+UJn/UoOW\n0OLNK8x67nQ0ynPMul5Cpd7KyCe5Khh6mhwm7TNmqcrNdTPBNst8162D8zQl\nOkBFDg9aOLCV5GwxPTPRR2LQkUWHKqhfQlysSxZtXadaJQWXPcHTt3ROGcQA\nhsrIhyjDquHVpw/QRPSpOHWXTApPhYgFheaLgygQ8MwECW8aOScrycQUmBO3\ny/6zZU+RCaN3jVVklg7yO4fj1UZfSqMbRlBp4XchjHHGlGrexBcS2HvZMSVS\nCdRkXdJpOea9s2b7SEIgrWqv8FhKwL/s1+OQGo29sfM2T8rKol9vA8p/HJi3\nFua84u3sx55bsr8lAL88/lqUpoVH11OeByy2NEif0u4Dv+utK2oBuTgOYLP0\nQsk+AQ/CfRIES4QC92R6b/yMS/qvatwbBfNzvrcXFWU2qzSlNMs/ni2ZPhUF\nbsTb\r\n=Lprf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.e34e411b1.0","@material/theme":"8.0.0-canary.e34e411b1.0","@material/animation":"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-indicator_8.0.0-canary.e34e411b1.0_1600373864667_0.043194226952783854","host":"s3://npm-registry-packages"}},"8.0.0-canary.4e9343929.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.4e9343929.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"4cddf84c9d9f3dc7acaa9e343e490308e8c57bf2","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.4e9343929.0.tgz","fileCount":38,"integrity":"sha512-zkBpU3jgbKASuZzpHGLxPUYtghK0ORmxRFmHF9eSRif4te3/aTtXJydN8JrFQBKfUWl6d6v9YftsuSFKxxJEdA==","signatures":[{"sig":"MEUCIEe7hZYlgUUtfcRMLdNrqr1ZXIHbW/ffB1urcPAkADk/AiEAj6I3z6Z8KjzL5MlCzfjxZ3d8tcASTHSn/Cyf0hywKpo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169621,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8pRCRA9TVsSAnZWagAAUVcP/1MO0sBPTo9VyHXqt05O\nfo7fWBAFYfJLmVH0lrFEm4eS4/rppnNsKbW2OtUiBcp93ea/4Dgjay2etEpG\nBthhTihLM//hLsB1sbYFZpZrx6ttZZZaO/Fm0Lgd0zuIkvZ+sw/LY1uQKSUk\nXkl6BkFS2P9QWsC/imxjo/nRB+rjwUMymkEeh7q+pE2lY9yBpeUPzu6RMQP1\nODGK9R0Oqpu0NcB5G3huek7MWKmO/e54OewVhupn+OtXzincuYuqiwvb5Kl7\nyBheEZpnn0JwvPedz+ReMDXFUtSaXe0kiQzVg/2PuCM+todUJzWN86wrCLJE\nGhR51+MtHGtWWlXGt3t/txi+pnjDd4GYHrCvxsyEBvJvOnNRIWvA04C4a2yO\nGWH80nUUgi/jRUpM7G21LVKho7a8htYmFF94ksKUYBrAeSD5605qxU0mw68P\n04AAUczGbb0Tkz5OuVSXMYH9fjVpZz6QSpybRMsYW3yQ9DWMisi0tG/Yh0w3\ntD1B4unuiOtYHUk0z+2mB95yz7KOP7teVC/s8Yo9zcUFib2PR3j3qea6n+te\n65EmnPY3R/F8NSljDvbavC/mA7NhbuydkDV8Rro3QeFItD1IegSdPOfwixF3\nsuNMDlIRg5No8AReTgVGFvNJrL6EwKIMT0g57LP7LsufZU05sRlqr5Ft2JcP\nQe8T\r\n=ptY8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.4e9343929.0","@material/theme":"8.0.0-canary.4e9343929.0","@material/animation":"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-indicator_8.0.0-canary.4e9343929.0_1600375376726_0.38438206220061955","host":"s3://npm-registry-packages"}},"8.0.0-canary.4e5c350c2.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.4e5c350c2.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c7d493d665418ef071d300673dcc5c0006a2c336","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.4e5c350c2.0.tgz","fileCount":38,"integrity":"sha512-eYZsQGkzOAbhl6AecNYtwsr92SEetG/qjZZsmniktgJs8Ow6p4l4azSCvHGklhhVCU+bH8BCo1DGip52eLvoFQ==","signatures":[{"sig":"MEQCICbHQDJo99zJEg6c8w1YWcMWJuuUWC7hZip0GKtjiQItAiAgJ0sqkVC4I9P5o0+5sfv6uI0d9l+O7Fe8GogRRTE+Ng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169621,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfaReVCRA9TVsSAnZWagAAdRQQAJuJhq6W/4KQbYUEVVlk\n2p5QsaImgnbWv4aVvLWF5xKTFo8pTep3zEJ/8FV9b5Z4gewfd6a2qYSl5Uf4\nFvJSQbx9Pgpn7W2w1yd/QSvYIaBwo70cAK3s1NnsjtJmciNuFQrqzBQE6dec\nsecwy+Ejtiq4ox3bQaVE/73YKbPnc8ty/M6GtBPR7oCqD6hELozaqpsC8WI8\nhIuxzznc+WvJdLZNhfQV32pOYQTu3xfr6koTE9N+srTkwkDZcW/qKaRDFKG0\nehG4TPeCKkCB0VXEg8nVLuZYU9GJ+Z+hX3GjpcZTNDRcPICSZGPaRKqZl9zQ\nIKGnc7aKkqHuaSDe/GlpVAa34e3Cr7cabjxDOSNqu+m+kvq4SOye2jDPHoi/\noX+2S/+NAdGguqLw3SYNisXmZsabPz9MQU0L3knKXGW1gXIzvZUZ4qIkzYLD\nU6fZGwCl50UCa+Nf5amzShT+rXhlb/0LD2l5EUVfn/8byxWqssFa9jXtwTaH\n7yQDqAI5+nFQ9YAiryByWXjqQ5Fupsh17JglOg+UjwqtB35MgP2Zn+5P6Czb\nOLJeHfNP6kIUCXDseNlcH9CZ13t288198tv/eUeC4GLNIx91rijLQEXv8mzb\n0QNGiVL1m/8KbCpyBH4LrJb5D18aeeRUaRT1pGTPCuzEAyTsxzmRb2kgeZIK\n5AHx\r\n=kizF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.4e5c350c2.0","@material/theme":"8.0.0-canary.4e5c350c2.0","@material/animation":"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-indicator_8.0.0-canary.4e5c350c2.0_1600722837029_0.6029004191545693","host":"s3://npm-registry-packages"}},"8.0.0-canary.16c563ef7.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.16c563ef7.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0b46557d0ad626b805eca7ef27c0707e9dbd5ac5","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.16c563ef7.0.tgz","fileCount":38,"integrity":"sha512-nfsWgHdYh831aueniBpiGY5vZIpDml6O7mWW2MQaX9m41SmvMnBg/8Nkf1Uv6ToSQgZZo1a/OH709Y00L7nEqw==","signatures":[{"sig":"MEUCID0GI1VOl8Sf4GhANSXMa/diUBGL09DhShkRbK2qDmm+AiEAmOS4c9aZqSosR6Ai4Dd5ATay9xMw11x38WmOgBnhj5w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169621,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfalR5CRA9TVsSAnZWagAAo54P/1vHe1XPwsifYE7SRish\nDMSvOoBQJMEgGlwWzKz3wivsbrQM7X9y17mt0lb0j6sEGDkyzIcIeD/Dh4fd\nduZmcRXpz6PXyk3qmpycCIrBEbsAk9qCCMyxq7ulDzU9zWhh/MCV5qL8lo7U\nQGBzN7qQ4TcMfGGJZLRzbZjDlOAsG6zZt6LR2w/5d+3CBn9RCUfAjJlXrf9y\nYDCMWNImBiEubG63cXERx9qyndnxLxv7qJQL+cS06GH1Tx2Perbq5rTmiF5t\necEZZgIbdDBSdISAZ+7BWbRdTDpwebDVqJWo2gzVQdQCncQeDPYNdbRGlnfT\nEL+rYSa5120LXC4nMT9MCTzCRK6jiO8KnW1V1lreS8v6utt7uI3ZocimryR0\n4X4iuJtCJgmlw4NaZZYg4eMgevTomt9ozX/ar75B+z5EovTVxss2Tsoh4TIV\nfatvO/Nm+KUt2SxRdxhljsmIMKiHHq/iTiM2nSi4QzlMycmV0J3RSyuEDJsL\nfw+AibSZrS+AnqziOhrRiv15D/ShxVs30sNxpNaHeLjdBcUaeLCGq8RwsoSY\nP02tVJlpjYYwHjxWUJfreDt1QLsoiN1Xo19ttVgj0eay2Cdq/wofgWt3zNFd\nPv+YORmtTydD2J3hZc1PgN5YokDzku+/notfp7n3xvtQ275cp6XaiMHJ77I6\nLo2F\r\n=yWfw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.16c563ef7.0","@material/theme":"8.0.0-canary.16c563ef7.0","@material/animation":"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-indicator_8.0.0-canary.16c563ef7.0_1600803960881_0.7047531813644696","host":"s3://npm-registry-packages"}},"8.0.0-canary.fd8af3d43.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.fd8af3d43.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"2d3ece9ce04aa2c297e2fd14c5079b68d46309eb","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.fd8af3d43.0.tgz","fileCount":38,"integrity":"sha512-71r0xVqJKjpjQJqZ0lFCx4otxlRrkqF7XZ3cKIoNR2WtoAmSBcsihag4PdmqTkiidTON18ECSRaiJQdOLq/o4Q==","signatures":[{"sig":"MEYCIQDseJ6RGPENM6rGTIZ4F52xH3s/XJ+hc0GB/46uYTYpHwIhAJcafubsdim9WiGYArbz/HXWLflqxed9dTmeXh4uxqAQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169621,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfa6K1CRA9TVsSAnZWagAAwP0P/3ky5N3q6wSIOSRjESkM\nriF6OYBR927ojZZD1RfWIOi03lMPXv9qeh/1ha7krqHQC6pSSdlfQiHIeJXN\nIo8Ls+tbet8gb4gwfdOtqBFlADwmIVNAFVQigtIB9RaxpKGfDlJXZXErodK1\n3dwWzzUtwApM63DdRnXyuLy8azl/FKkQcUC66UL04TI81oWVhYABAVrvv++9\nGkQY1TK5H1QaDEC4cW2aPlogBvL4hdhnfYHbtMo60sLdPGQ2LdbdZMyE4ibY\ndbc49jwV9ksJ5fnUtdQEHcheRpTeKYtucmKimpyslmTre4Ya/SABTGbCNtgF\nD8mJGRnJHINX2tjiFDt4sKGTNqr+ZL6G3oJGHHQX14/s56hqxkoo2CJCvMNR\nvlx3betats0G7dlI9QXNByUiGQ9ixWsV4H4YD6D+f24uYM6RgsRqwKk1XOH8\nAMGIOs8D3EVMZud4G8F29uDasd8gKlw5fqIBgntx6PjVSh56qHRBRxvdOzBA\nkyXb3luHyHNb55cY3AbzcOK9VeDCGdXA4pmcvjtArS7B5tSchpdmfGw7+dtl\nsqcxBrRCnEaSzfFnUrgTQBNYa1o0KXKt2ofufDJvKj2V+DwBtkeAo6W5HQS7\n773/xdIOEACq69UWkqvGfyBphMww/aCJ/0S7ULZDDjzuQqzbJBil3z7zX/Rj\nO5tn\r\n=VQax\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.fd8af3d43.0","@material/theme":"8.0.0-canary.fd8af3d43.0","@material/animation":"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-indicator_8.0.0-canary.fd8af3d43.0_1600889524725_0.08274516293972534","host":"s3://npm-registry-packages"}},"8.0.0-canary.d4cd83a85.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.d4cd83a85.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"22ba5faaae0d1fbaacd581cd1099d778ad9e24dc","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.d4cd83a85.0.tgz","fileCount":38,"integrity":"sha512-zONp/UmtoczdmHtxIlfEpgr1DBnomS7AgPeiD8fcqMnh+1Ayp0iqnRJYODz6YBsWSq/czEMAY1fDF9F6J7ixlQ==","signatures":[{"sig":"MEQCIELhVL8cBuViW/U/9UsFSvRh54U7AOshCA1/gCkUwHY3AiApP9+teHFNOd3ZOqtgVUcfy/ZBwPJiXItyN++xVGVRjg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169621,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbTtECRA9TVsSAnZWagAADpEP/jwkci/JOwl0IQGhVHfp\nLmUy18FDPj+1EfyTGUmnX5bW4j/je7gN8EQIUn5eIdkCIVHi0d8M5ykPJMaV\ngFLUx6lyzdxtMeBfg/xZFPuf139CQGbDtNW8bv2efG9V+TgUcVwNQe0vSXJ1\nhNOmLZIWnWOs9JwpCO9IaJ++sPdZ/xMsVUm1DzFyn8QOyp8LzxqFSdlVWMXy\n9TkgzSlUiH81igRcVuB1gbDCi9cxuMEJZD/r6hYRPpJ6i2aGwQG5ufstqQ/A\nlvd8nc+0bFSXt4JrAftaqDVQCzR+/koMJgsNRAdNpW0yIRICWusvbKjbkQF4\n1LcJHB4+biUhXHMWOWx+IKNZ9LfFPYj2fcJxrNQHl6mhIn4xAWr19Qe6mQcw\nPauBNx47q4dKFtNUKsDTvw3LYkuaYYdeSL2Q9yYl7Ah/ezvOGlHMlBkj7ww6\nfJInWWXdEDDSFTFhYkA2aS84Kyeh497txk8MIpbxvoWMn5u44gTa0Wiokp6D\nY4gW1UJOPlSO0ln3SadP90slycpWOSmsXKkSmKHK5PFm6CEOi6XsNcFB94kE\nc4nd2zdLMlKyG+7WNiAu9ykWFtXSu5PhM4aV3ugV3FUXSxtZZukzEtY2UCrX\nMbVwYcbQ79Mo35OqQkN3RV6s5HMPH9QDAzr1nuNQUz+M1TT2W5KpqSwLM4SL\nfd7L\r\n=kn6G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.d4cd83a85.0","@material/theme":"8.0.0-canary.d4cd83a85.0","@material/animation":"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-indicator_8.0.0-canary.d4cd83a85.0_1600994115864_0.05757774349563527","host":"s3://npm-registry-packages"}},"8.0.0-canary.199aecdfb.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.199aecdfb.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"5b322e75cd92b6ddfa2617a7cc9dea24046a9a61","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.199aecdfb.0.tgz","fileCount":38,"integrity":"sha512-yUN897o6q6huOxHzEDy3Wt2KPYQh09NkDJE7H/smXY05NgDjwlQZR4ca0nWps8GLRSegG8SokVRFxIbXdHPC3w==","signatures":[{"sig":"MEUCIHom6498rUDkLt0A026x1mQih7rS1YCP1InqBUtjWW3oAiEA+njxvcQhAt7xYQdjrnK7tx+4BvQ0FU+RhDGmcvRs+70=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169621,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbhHrCRA9TVsSAnZWagAAPjIQAJO/uPzX7pQ4mtRm+ooH\nO22/IfFf1sxuaQjgIG5jFwkq/dW/TbZj1nFzhHiCR4FbNujMdiO+9ov2WgzD\n6GJAgxdcM4hkSWFXZYh0p8ttQObw/kezLuHqwr9GuDsELZds8n1uE8/kGGJW\n6/qWyf50umyyY9wbvBTpMWSsTPaC2zrah8pRFCDrRuw+E5lQX1Oz+hw687Eo\n3727+k+2a69IY0VwtovM0Ji2JLphEjp+J0e9PIPaXeO6CmVv0Dt1wpLk/7hH\n9vZUWdg3HX+zhgG5VPKW0CXYIRD++ogqnp4W/N3KKq2adNqMvo2mEpKCfOlU\n7tTIWyKbeItZVPu1zndkhQMCpbhAa+n/Osm9AE4bi/qsnUlQhrKT/3kZYKQS\nOiT2pfaw/AUqesXcysIpG8UPAgdnS89mC4tWJCrtiDcZ4H8wTpG6skFmJ/TP\nBpeyN5A0XmDcsLbtJTk185VSF8bqpeRjayv9gdVsKfJnHaZvX2+ImgTgmFx4\nvQRtfslQYaeaLkbZGU2U0j2YCgjeQqAEafwibrT466UJoBdvB+1/aWOjuObB\n4u4VnfFG4/I14hPuy4EYp7zx7hzG9IAHRi/LT3RclYXpEa4CXKG+8BNgI/xD\nuY+6T8obk2aRictHn0xzmC+EBpgFeOVYlUFSiVgoYXQfQ4Q+KcafNzK+DYAf\nCOAz\r\n=LuSn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.199aecdfb.0","@material/theme":"8.0.0-canary.199aecdfb.0","@material/animation":"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-indicator_8.0.0-canary.199aecdfb.0_1601049066958_0.6445461727501496","host":"s3://npm-registry-packages"}},"8.0.0-canary.38ef4501f.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.38ef4501f.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"cf5ba1f630c6611eab27b3837f1d6941b89ccbb5","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.38ef4501f.0.tgz","fileCount":38,"integrity":"sha512-0NA4EnJ0jtIFEA9+edVqDEBkd4NCo0OLJJHE69RSMNcdDJmJbPyap/UGoHVy6FtAQCSQrRtfXZ1KEYNAqMT8cA==","signatures":[{"sig":"MEQCIHpsFBUiusR23XZVwf9RlK0ztEfHu3wCUdI9CTtq3LVqAiBXYTOdbkFnw0t6jqDROofSAh8DSVBmV7SSAReO0IJ87Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169621,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdM1PCRA9TVsSAnZWagAA4NsP+wXbBo4mPlpt3JQWd991\nA4SntPeDGDqhHXgdXKoazaUzrmwzMhCqdg3waoP41rMFTSpf6jwEHW8d65uM\nFI5W9J54UJbcalKU0kruoEkECqjsDJLLGabcaBvSmrEQL9Xep3CQyXexWXHP\ngnR/Vbi7yegka5eQCd1YStDCATARR1Dtf1aD7rNUYgxQGvGtqAA/3v6Fzo5t\njawRaF/MHIyr2HIzcwGpxLZXgyCO9KPbl3w8vIG0AflAnA1SOA7Q4R5Gvv6j\nQOlXEjQDjh+Tkd15sbQ0vxWXMW8L8IqFNb+b6ELm00yvIT67pCkr0TfRMq9N\nqgx4h9589pEpq0j+k9rE8uxzbj3SB8LmI0od0tEGgk7Du7Rzy5TDviB7w/0c\noHB7bvax0n/gonArim1DmcoC4s8NK+9ABm4TGVXdopaxV7t0qEOCb0QcfyQk\nCaJQahDr3pAYEuvlEmAhzovNOsTr2NUyt+3v5dsAmGuJkjZ4gLNn8gufNv7N\nrtikKdGm8SuNff9UrUbR0/EkmBGhoWkyVJjXP4XowhXRRuGOXJZcO9pwpxa0\nfi52vxe7eQT8fhWg7bcKrEi1ze3M3CTGJ9oIlmBdr+vmJ6qCwmDxHGQ9yhpZ\nrHVav/TZyhwz8xae1HW8Gn6IMI+EPWjKidEkTPIT40Eh4ET95+VLTF/XnMci\ndI04\r\n=p2Oa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.38ef4501f.0","@material/theme":"8.0.0-canary.38ef4501f.0","@material/animation":"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-indicator_8.0.0-canary.38ef4501f.0_1601490254944_0.9327271862051674","host":"s3://npm-registry-packages"}},"8.0.0-canary.774dcfc8e.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.774dcfc8e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"a07e8e2b0ea8c22cab9623c69095709caba11f0a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.774dcfc8e.0.tgz","fileCount":38,"integrity":"sha512-vzwOG7uTwJIoUBRYEurQsOq3pPQbFTE3Y6G93rchUhSmF+2z1ivgPR3u65nWb02UBUEhJJUgHdkVfD/EGqRVIg==","signatures":[{"sig":"MEUCIQCG1ykswW8CdWZW1vSu9359G+Yij4mLLceKh2jFzmjs/QIgHN0gHkb7Wm/2gvzGjhCpl2ZNJoY/Nt8P+YB+kScghco=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169621,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdac2CRA9TVsSAnZWagAAeA4QAId3DFRxebdnjU3h6Ozq\n80o+c1AqFtRcsinSVqV38VA2jzCHYfG6WUN4gPxOQrwkvNuzi/EFSmzGBeYN\noYPp6IQdwPH2UuptUgUupmgf7+fkDbUCFZCshXLK9FruXdr/XKU4qDTYmJ3c\nZ3ohxVhveeHI7UyKcaSWZnT3vdfRKQ8F28bj0LArv3nm/kFrjZ2xe7mPcomk\nn1pPybPRVYz77yUHCahRLQi7CxfhCA+BLy54nz0YygvJ3byPZ235Qh7HLEhB\nvmTA2bhqdws7Bf1MS4ijdDdR9ZoLXQBR8zg18A90pOnA5RRSZJhlCj1tS8WP\ncbOWZ2hOP+SRtv0RitjmFMOP1pLn9iX60s80C3dGtoRCKB0PJwhjw/c2VeLW\n3nK1fXB9cCnUjywSbveK3zrMV52tu+gX43chBUo7rWKdVlbR6GDLRVDdQLtR\ns8X8H6SgOZ6bjO9QOfepeh7kT7BVi2i2unFp5EWnrXyJxExKiXI+aQfWYES5\naOWpNqi1NeJHGi8gTD5si8XrJxw+f6KQ94VSP1z19xddi/GF9HGB+hiKGvwi\nRZ8lBv7r0Aj7+3fkDpJWSFAo7YZP/jKCGcYHDxcFy2KKQtctIugULMKflj8B\nuSKzJN5dQNhWPDtY4jen+52B4dOA8OQlHg+cV0QnoBqcEfgg9SsAsWAd3dM2\nt+t3\r\n=TxCo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.774dcfc8e.0","@material/theme":"8.0.0-canary.774dcfc8e.0","@material/animation":"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-indicator_8.0.0-canary.774dcfc8e.0_1601546038094_0.9718675027909103","host":"s3://npm-registry-packages"}},"8.0.0-canary.0f60323a8.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.0f60323a8.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"7ecfba7015485cae985cb4d09bdd8bce87836b77","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.0f60323a8.0.tgz","fileCount":38,"integrity":"sha512-HZwbQPAS++ZQo6ZSG0bsjhq1qGBvGMWd3ZWr5eHiQMv92WfBwiXHBHwrjiKq6+VTFNxy80swHsL0iBQ91lWlpw==","signatures":[{"sig":"MEUCIBkQXCaJC5+iz3uxJUpujpWQFd/NH1AwH5MY4d/CzZE8AiEAq65f8y+cx0EPn+8h2EX8AhBn1N9PAecsOgoC6ILvnQ4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff4AjCRA9TVsSAnZWagAAiOoQAKSbGCQowfzL4M4+IM6V\n+WEwRfKQadHpwpsOTuoHvd2q8dLhVucDO1HgMbJVT0jKYkzZI6cz0miC3cGg\nFfBty4Q5SkCMwFbvv1+FkA4J5o3ccWsX3Gx9xPQQY9N8lMdvKo46y8Y6iyRg\nRk0Loz6jY3m+FgotEyw5U7m1sW3VCh0pGwpMaf+FekvCQBY9YvTBCw103Dzl\nIYX5JSX0c0ldGt5R/7T1zL7/5BjlpMYYBOpp/ceDVODCZlqBi4xAXOLVmkAb\nEDQijVb4xCwPmUsN7DsCFSGZ/B46NFEvgwv4DpykXrpK96/BikSPYEO8aFAi\nPoNXYpqXoqxqsx7LHrHh4hHq1jYQVcd8LXLif+ctJO2IMDUITwBvOEVtx2t/\nCAJAS3w52/+vCNC8b5KcuwCwKBjePQR31fcMQ5SdTnQNiZX8Kaxn8H25e+AJ\nAPwgrqxo5FYGPRilVjDB7cvT0Eu2i/lilKSthSByx1HVAraaBLC4vFZWXS7R\nVYcNoTPJbYuKFLT5q29MiXbmg091+8sS5rbDkaVUiO5vVC4hRTDcmdGqiF0U\njwWhPzdYXr2fOQ5TevE2Xdf9bdXQxyEnYhoRy2+TO1l6khIblmomhsdvueJX\nWcu2JGK9wOMGW/ZELHjFSqN/DJ5arWneoiJfhPoNmOaeNpZ5l/WK5M6mUuz7\n57d+\r\n=3zV6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.0f60323a8.0","@material/theme":"8.0.0-canary.0f60323a8.0","@material/animation":"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-indicator_8.0.0-canary.0f60323a8.0_1602191394633_0.28201833293680934","host":"s3://npm-registry-packages"}},"8.0.0-canary.d71622574.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.d71622574.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"12701f3d4855b7558699ceacc8316b13030ac1e3","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.d71622574.0.tgz","fileCount":38,"integrity":"sha512-I0f1mCWVhI4aZHOZF2aO5x5W/C43kIUoH8Zhepdg+iCjzfWhp5FDHRrq7tvHefaJGZcYQndNZo4Iw1LIweJOUA==","signatures":[{"sig":"MEUCIQDmf+bkf2wicIPVVPDwFoi9c5wretVo+IMEmv40bMndDgIgMCdVbZpHq/JLYgyk64dHs6GfOMSpWrqb8xz32O0qWIA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfgJBkCRA9TVsSAnZWagAALMwP/iOyFvVcrlBTu6DVu8jZ\nkoKgl4gCfZ98NpRcwWIOzAHPcLumY0ZIlQMxvtemnb2FEQhYtDOmOlfXVg17\nuq6lYg5BItkmB3VMR+Rc0MAtpdRS42+4mJ/JfGzgz53uW6Gy4qfN56P+pDzP\nW/EZ1GuopR4cCo++Nzz1hsIi8vC75g+xyfQ11v6gZawafAWG7Ysa3hloi8hM\n53rmnQJLqfVYxZHg9t3mdkzP4xpjq+pJRHchIRTMT2FxBI5kxzV4lH8CsGsx\nFjWn+U+NOQjouUGoBcz1H4FeSyCqC4ua912WUOxljkGNkA72lyqJHvX9BtQr\nPpQwdEm4OOIdklGSAeDS5qAj5oUC0sxC+FjYqpgAZKkHMHSTz1YzY1Qfjz4M\nJWFiJ5siCfVdPvW7N6DkvyCLvXP+wZp0RJW8hUAVSDky1qiSn6urECfLMkPK\nl8KVcpOHJxDVeFsTZOaNbrJ+d14sthW6vJuqWnwZOCpnOG2eKi2OAyOGplmN\nu+qYcPYqr9kgfPVB/oxq55fAL74Oeo3A/BE/OyGLGVUXZ31OhFVlCiy7Gthd\nMeCL7X1zy7ZVPA28Q0OUOu1/SvxuL3lNhDjHGP7/rPKlIsRdSsuagCEnigxi\nxw8BL3xYhVEUG935SI1YhTN68zFusxuzGjFcsXQIfkI5y1dZK7tT79dDQiaI\nwbl/\r\n=2cVA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.d71622574.0","@material/theme":"8.0.0-canary.d71622574.0","@material/animation":"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-indicator_8.0.0-canary.d71622574.0_1602261092001_0.8813106022220119","host":"s3://npm-registry-packages"}},"8.0.0-canary.7a9afaf4b.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.7a9afaf4b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"58044241149929cd522237d585fc7b85db30bf3f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.7a9afaf4b.0.tgz","fileCount":38,"integrity":"sha512-1w5sICdAgPAfWNv70sN598oFdiNpO8pnHrvQfEkhkat30PUw37RHdJ8UozgIThuVkPanYX0S2juOCMZwiGpu9A==","signatures":[{"sig":"MEUCIC+pyhA720qLpZshDyQowGfyoapbiYnBiv1+FP8K/R/LAiEAvE4YmkhTA1O3eoTtWQ7aimuJBIyZDhcgC1d0w+N5o9s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfgOn8CRA9TVsSAnZWagAAs2IP/0rjTfSkX77iUY0WBo0P\nDbNdP7LHkX37pBCwmw3rs8j9EyEAAh8+KG/92ihZugTD3OWWrb7G9A5F4qJT\nzZoWvJBAyxobgrfcXYmV+43NiW/yk86W6RXfa89Y8soFCVbJcULB7s9lWVbs\nwYUniM+J9w4Lw5u44wSPTpkhXItrg26ZM/dpUtlUUbwJpuO/IyJPQSg+LGgs\nBnT0pkVvGsCHqo1gOK5QAfT6LWkwOiEQQ3e+b5s/F2x6PNg328Aay4RbhcI2\nURPALM+rK6r2sjF2RtVmqG+tuOS6N0fQS0y9cHhF3Re2RGv+bec8t7Yton1k\nE+VvJalwf9LUCKQdBUFZJyQfeVqrlbHRQGbrjJwEWUoO48VbLJu5ruK20yZL\nK5DzJKcWINPgqoHitNZxV8UVTW+MgF4mqLC+o/E1ifbsms/wkLC6bdx0L7Px\nJWOI3pQzIlEwyrbSLuMBHYmUOBBmY2x5XejdpIGUdkQeeQrs32UTsv8/Bnoi\nhfUSYPD0b07SMcgHoDrmdOlntBzKBsoR1NhDwOsi766w05yn5ME3dwCzt2t0\nqAf5o3xs8MsY2jbwh/tgDGLKQ9ZMVRzPXZTEGxzZ7JSq1iVkFyjapzx3LRAC\nwJKahX7AdYMxkOliu0WWtqokKrm42mOuUnVBfNcVoTzbVqu+qzb+pAPmI7LX\n8N1m\r\n=u6gw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.7a9afaf4b.0","@material/theme":"8.0.0-canary.7a9afaf4b.0","@material/animation":"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-indicator_8.0.0-canary.7a9afaf4b.0_1602284027673_0.021853146475101504","host":"s3://npm-registry-packages"}},"8.0.0-canary.8a39352c8.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.8a39352c8.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"794433f9f9b70e7f91029227d075d8f8025e0bf6","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.8a39352c8.0.tgz","fileCount":38,"integrity":"sha512-fOfDm3NR4ktgnvwlSCC1EhVl6DAGsfN9tHqTsd73O831zbmFrNUPxskYURecti1Ovid8tygfJCgRh4RbzqNQJQ==","signatures":[{"sig":"MEUCIH3gHgA16n5YZ8Woqrh2XzUqvF3c76K6fF6O6FSZhm3eAiEA3ZuiZNqQNLZ/1t0ml1qBAnD4VYZzVipfzaE49XXK300=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhJZkCRA9TVsSAnZWagAAQQAP/1SGstg8slqNdTUu4WfH\nlhCMTX5BUbKCboymz7B35iyCt5JmsNstDBHQxVelNfiKzMuzaUPOFHEA6zpF\n3tF29sv5Hf6O92WNtyg8Lv2F3FJhNcmOVuilb9atNyCKermK1Sqbelt2SXaX\nwep3vo20f1mfRtIgv5WC5mnBcc0H6VDiGB9BnNmiXEarZScspyfGKQeDWibI\nxcp3jzf8QlV8RX+VSinLWOZB2DUZrysDSHv9hbMKt2jtl82S82CVrQGGgTp3\nrQGBuYeiDbkg+1QMUXW1IT9AkxtrxpC840VSWIfXTpervAaypzHuKFw/2Htc\nfrixkiI4Jxf9+GKJWgvIqUFaB/XiMjvnJ1vKBUEpG6erM89HUBRE1XrNTW84\nygzu/SUoxji34YSF7Lb2Zxrq9+FvBRHtnmytUCXHUTnLM2quVO9V22wfjJqb\nlhzsZly+HsmXeu08Jn2ZumOgLgS8VlonZzC1DTXW62SKC4xQOwOckzJgwWIz\nts9YQTKwsMJscqQDfgmhFfwVAgv33Lz04GutTug8MqdqC5dpzl5gToDIXU86\nBLgC5Ggz+cidtJtlBWvPtOvaiy89E8V87kBY/7CzdYRBBCntY+qolr5EbI+I\nVyPJOl4EttCwdznXNooRI0uKEmpMWcfbHcQi2N7fd/cFJBKktlaX/G1yQlEj\n2Y4r\r\n=OjSd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.8a39352c8.0","@material/theme":"8.0.0-canary.8a39352c8.0","@material/animation":"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-indicator_8.0.0-canary.8a39352c8.0_1602524772081_0.8866688179572362","host":"s3://npm-registry-packages"}},"8.0.0-canary.790ca85fd.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.790ca85fd.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"3a8b833d7e3a8e1eb8e251f7c28f123398950765","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.790ca85fd.0.tgz","fileCount":38,"integrity":"sha512-6NyB2eF4RzoF/BsDkRkUXVnabg4Inh9t6d9CIb+dfsdCw3wDZcEMqa3MRFx5fk5zVaNTtdZpTYLDk9NjcQ09jw==","signatures":[{"sig":"MEYCIQDBAzfGsbIohBLj41LiYyWnMbyanK5i8Z3BRxlGp6Uh6QIhAMsvR99gsAUG89SE+882ykF1AHssCgR+cSZsHwsuZTLB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhNEVCRA9TVsSAnZWagAAiMcP/20StG+PDj9S4t8o+6GA\nCxe55vz/cpDy9Tjf+GqfLeMFZQHiAhnA5m3Ux266WYEW0iace0JJYHXkz9yZ\n5TLmAYOG85YROxUibrvxJSPUmL8lz93dhK3XC0SYUvGjXW/JLzB5deNnAe7S\npAetrjbCJg37S+9BR2nv+QMVDdSxmfGmwtq4ltdE33RRUNYc/oLIz6JvH3QH\ne5IVIDZAuJpiJ+1s0DsBKQ31kD4u0NLLLkI1j3WIem1iBOjVxUYcbERzLS5V\nLFFclbbUd+uZ5l1ITGU2xPFlACCNZh8AsOvTeX8KmWKZgaVHYp6E94vkSpGx\nLpILgfmffQIu9111JrxMh3ICqCNoExod1Y2e4aYtlKsgyl+vY3GGLTkw6Fmq\nLL7+HZyXoqh+LPvvc/CAxZTRG6Y94lPLAbiPa2fS1WEO/SFv8EfpgaQeKwke\nRBHQ4nT9fbuMtarXsbL+c+sC5lHQiggKyBUGoQ5PFSHZJ+4r4pM+BGuTtw07\nkZw5rrjIE1Kcev1lDuAUBOCQXvTxV0TvWBcLNMfMBN2XSJTGSNChcFPGbJ0q\nOhx31aixkVdSzkd+ObLFuefhbJ6ZyNRfnFjxFzsajxh6KfYBaX6wxNCGh3gW\n5uh+Bfjp2VMJX6vCUMnYbBJa2rKmPcAjkzloU/hy2hGZOxObD1ZB9LUx7x97\nZNOw\r\n=4IAr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.790ca85fd.0","@material/theme":"8.0.0-canary.790ca85fd.0","@material/animation":"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-indicator_8.0.0-canary.790ca85fd.0_1602539797159_0.10459024923358773","host":"s3://npm-registry-packages"}},"8.0.0-canary.174c0becf.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.174c0becf.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"861b24b73e1e3b67d024a4d3f48392173a20f82b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.174c0becf.0.tgz","fileCount":38,"integrity":"sha512-ezy51uAVB7rb04OKdhMH+1Dj7rrP5JHipYZ+pzGHxr5DW9kSS9mtCghm3CpbL60V/Cp4BZSIMxU1abT+lHrX4g==","signatures":[{"sig":"MEUCIQDFoScCPMjW16FR+ObjngdfvnFOeSQXH45Lablo3tXJjAIgZ/0eEUnCyq09JI/GOH9GS20F/vOfBaT2B020Er47cMw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhl9JCRA9TVsSAnZWagAApCwP/Agpt1TNpBvkMlM0BJLI\nPWmMNylZGMzLkahXvMy6n6UnQqiEIjJIRjBdtYJSLGZLQ0KR5/HachwN8l9a\ncDnEInNTzmB+mokjh+mhlXFElbHhB5/G/WxLGfOsLW+qJQT4H0OBwPwtxmTN\nykEQBzaRK1d3hzocK7pWUJMF7BkU991GGUO0XMUxfl68jAUIW9Co2YeQkvQ0\nataa1/wcDOKtqdP1IYAhBqCaoihqT01Wq0DoLp2JBa5oIIaj+nO51UO/rP3A\nJOUVo3PoQacOD10zTJC9nDbSALWexCSGC/pFNRrYRGh42ZbzBbuzlJKjufdY\njTRUH1B7FHtF+Q3koup2oMbmuFJ+EybFlwaCG/v1a2pCHRw71jSke1fZ9Xlx\nAXOmGXe2vxX+EN1zqXes7DGpWhMvmaHtegJu1QGvSKRFJkjZCB48xu+9ojZ0\nWuVYJZGr6WQcaad1cZwdO2odKFE9BhFCwUU7RBNDL04H5izx/m490uEQaeR0\najEPApmTqPYUJvX463WB3woiWrbfVgo5CP3uzZxDSAHYN2vS8XRIbpTKm+eJ\nQV5YG4IhfL0tQmqdIwGh1Wf2KUKDhVA2wXjvHRxF13kNzGXvP7Js47QN+rEJ\najarVWX1Bu6ce8RnG3Bwlgvzvem39KETSZIKicGrfW433jpenLELU8ePJdvN\nJqLU\r\n=juC4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.174c0becf.0","@material/theme":"8.0.0-canary.174c0becf.0","@material/animation":"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-indicator_8.0.0-canary.174c0becf.0_1602641736394_0.13961519568056335","host":"s3://npm-registry-packages"}},"8.0.0-canary.c71ebfa02.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.c71ebfa02.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"fd9fce94d809c92880c93bf45aa58b64ea5c7a8f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.c71ebfa02.0.tgz","fileCount":38,"integrity":"sha512-ExoUq6XdNAOXa9jnbYZ3zkuhMijy8Mv0nTKDQpXUi2Axk9+YngKnsf9ol+8lWTGm12QlNF00OHDuggIAqgl8Hw==","signatures":[{"sig":"MEUCIQCYC/P2mXRqDvoaink0+3kaTXDSguSpElhCEa3bl2T09wIgZap2ILfkZtlJ/oouxmSD9sYPw/+pJgJ8hDshApJm7nU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhnvTCRA9TVsSAnZWagAAzrkQAIub/2RgPwWti1mRBs72\nNtx+FbajM11CSYZqqzR3lpIJHU7zXOWt1UL1JVfD/bawanfdrQwQAuqOZd7B\nhlrKDG9VqtuiqMr791GoMzkMpBwQxHqtKyv2B1HIVIj7iKODbNiHAdzTMb3Y\nzvJtuRMRl1m7c+oqiPMTw+SitbCCTmjV2RC6uTVqNm6NcBRymgc5lk4qOtuu\n5iVluPpzzrLrTlOqHaRJs8mT8rJFytK5KF5Gb5Cwna5aNVvg9ZwWWWI17Jlz\nsVu9HMCLcpLBQfZ+Pa5SRQAkKfMfiANR7tbZE3MbyU4+r4W5ni5SP9Etmzk+\nEi5h/Gr4TuKmwBDhaeAVKqN33EF9qCAM0W1Yi11t1xhNxr5qJW93jk4RaRRQ\nPmIKM3perdg6q7jnfv0zeu/onS3M7VQf3FDLlHZrssP5HtGfVwTkhMXeMLmv\n06FRS8+WOww8afzzz5OizhRSKQtsfzDE8I1PP2udv3ecGDtBONf0Oj1by1hu\nwyIQU0ttQOAu50fzzYGg9vtqK5N6HIvqnTH2ZXPYfcpKw/k/3pBGNnCP4KVO\njp07oIW+xQNw7Dr9shNExeGKKzzcbbm3pxW20v2WaEDRWFnszjWkhLccan9F\nsQQ7lqXtdfFi53FRaWjIEoYrQ3u6CgAY20994hprhHkgNOIstXT5e/tQ6xBz\nApQy\r\n=gu4b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.c71ebfa02.0","@material/theme":"8.0.0-canary.c71ebfa02.0","@material/animation":"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-indicator_8.0.0-canary.c71ebfa02.0_1602649043360_0.35628863873765915","host":"s3://npm-registry-packages"}},"8.0.0-canary.2ab716cbd.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.2ab716cbd.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"11344016bb335a4caf76f90494da4d5539531428","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.2ab716cbd.0.tgz","fileCount":38,"integrity":"sha512-dN1ENlf12DdZujnQMnv3/hoGWPcq69ws5aAthSjdOD+AB5cV0JrNqWpbj8OPovLPXGxkTi+woe23gmqTPmTEvQ==","signatures":[{"sig":"MEUCICe1RE3iNjL46xc79fx9BJX0zojLeRnsIvVo81OG+UhBAiEAwhu9R9ABewZF2hYxUmDKUy/Af8KLTqOSfqpenMgoYm4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiON4CRA9TVsSAnZWagAAh9AP/1mCcdXDYGbT9fQT/ZfG\nZ4LwpWvY8QLIn16oCyB7kf72IbAyjn57S72SUhYkQOUKLiJf9K7INE23Q+b6\no9WYRVRNH/dUZ+OZiSJkm4GDW5i7Sd5YxtqUtqHU70RjT+eBvx4Rps17tPhX\nEIis38M35plla1S0LiEBt/rp/0IsF3jFaJzVGMNIZITf9Yx6e8geiuQyw3n2\nG6EZdntFOPN0HkZHnKfFWCkuph67GSv7yThoEOUABXXm2/F6Oo7YcpEdgt7K\nHdr9GJ+JZanbVPnS++u8ki0/mTpaDA31FQvPN7BSN8FC9bvrQ6JTs9vWec8s\n8tu6Y3SXyav9GhkhMB9H091Myuq89r7vH8wPb779xjQmsyW7uJdwiSZjmy7M\nC9muDHxFzvpT0/TmW+v+yNUsxh0KS0+NAC29JMxnBCEJFoe+Z1H9/CgXqFhs\ni7mnmuu9CKwF4163ph/iPpWBQnxpcJjlA4r0496k3iGxKZNN0gCCbSy01TF2\nTPwWXpOESuz46pK0O5PzaGq7Jnl7upw7Jr71m2NIP9GXMPYgxSeM8y2dwaAw\n1RVeWXmPv5KD1PJYqMjBFpIm7eWs+FZq/+xqeuUFhVduiDaRnSCdo6gLNyB/\nqIfJan5xp3VYIyyot0oqmC6LADGttlCZdEktyA/NISKX5XRKKu1xWei1m0eG\n+e4H\r\n=Yr3I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.2ab716cbd.0","@material/theme":"8.0.0-canary.2ab716cbd.0","@material/animation":"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-indicator_8.0.0-canary.2ab716cbd.0_1602806648446_0.8307160995330345","host":"s3://npm-registry-packages"}},"8.0.0-canary.43c1c5e2f.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.43c1c5e2f.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"43254110a303f5703a1050cc0cf9f35f9ac5688e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.43c1c5e2f.0.tgz","fileCount":38,"integrity":"sha512-1qa5370mMlX75S3mXnyPC5bArKG0dZKbGGMmAzsi6MCU9+OOaASVS3CUGhXN4qFyGg/voUuQVbArLSQji5iLBg==","signatures":[{"sig":"MEUCIQCcjDXF1LrmbmT8APlHFBRSZIDaHVnayirnsA1sLmm/kAIgIn0RKdJNHepmztXE7tvA6gGqf1c/2MIQovkgDMDmLE4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjZ26CRA9TVsSAnZWagAAjLcQAJFMxzeCRe9s0dRLitGD\nPM61oRKooFFlK226FuBZRSG+tIqxiGnYVx3Te9o4tmz+A3lup3j5tXZ1fyib\ndxYZdBuYDTQq1STdccUIBoRkxmwWT37RxgZt1qmz1zchgbRUHzyDJ+C04c6p\nggohDj/bY3+xFTp4zp8kqY0peP0+trX1SDUup526DikRmEU4XAsWCqE2aIEi\ns4wadIf4Wl0pExXLke6EVkuIx4wxtAU12KSCgd/q0pgSQJgEeghS40CT2+kp\npmx/URxJ3bys5x8E/BW5/L60/D6Md3EaYEqnt1Ix8DA/Ltu8mRFcdYwEKwtN\n8xEPOg3WJb24XrYH8s5vI+Y4djHHCBq7ZLGJ/mHqbA/dNLMiheYU9ZYCmZZA\n+cYZAhS0S+LUnwr2fGZc/Ac1odZIdbE9ZF1LOfLrDp3X0iSWfoBLJ2vUerEh\nTQUU620ybBRD14wDT7wq0l3anrVUHi/EusujNqrk6cC02bDK48zJR7oFIIls\nwfUnOz+MEAdvTvv4sY0Cc4yAHEM9Egla2QB81azbBAbOPxYWZqPAWpGqZboh\nvlgE7c1U4k3r3DDXj7tIuIdkqO4gd84aet0qKaZt7wE6CbYgCVJsYAlUlUAk\nvw2P0HTbx9KJyGTUM8sMTpJYQ0fHXQ+sQ01M3YMUXkVs35cnzZWS1bLGKDI0\ntZNB\r\n=RpFb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.43c1c5e2f.0","@material/theme":"8.0.0-canary.43c1c5e2f.0","@material/animation":"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-indicator_8.0.0-canary.43c1c5e2f.0_1603116473766_0.12056883349593894","host":"s3://npm-registry-packages"}},"8.0.0-canary.ccc64eea3.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.ccc64eea3.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"450165eb7138c701741585212fb724b8d7789a55","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.ccc64eea3.0.tgz","fileCount":38,"integrity":"sha512-wPYStH6E8g62Ue3WD+ROMGuDLDSzqUttwPJK/D2bx285/n5hHT0DFrwtDH89S4/Waw0m3Mo5UFLEvHznw2trvw==","signatures":[{"sig":"MEQCICy17/qXupEkqLtmD1q3fV1kEhE9pcqWeLfsgx/OteDUAiAPZf2arVkp5TIuhM6ntOS0v9ZQpkBxDn7nvD3p82Klew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfl1LuCRA9TVsSAnZWagAAhAQP/2cbcIWHMM6sttU0wQzB\nt+Vfc+93ktaw76qERziM0HGb4S21PTV+t9fIJGIs1zAhKlWYGQWTIJGJjBVI\n4Z8gewQDRvSNylAt+ojvj6tUfWJFgKpwvNrLfmhyEuOJ3JMAt6ayojrE8NA/\nU0lwK5XQysUYhd1wkDttz/o/xC1aNhoxYocWIojyVRNvfQzbwEPhpQsFMbBt\ngQSkY01zC5ikES4kDpg6ze2Jgf+qXR0wjRUJgokopJk7ly4/MyoTxM6mZs7O\nr1YZJRqH3OE/ajacvRczDVS5MUESWKgKVnIN9+FtjKhGyUL+dyT6a3c9D7w/\neU5j4Ef0ev3lGlNqc+WlvX2iZrpnzCqL+2WoRPszCRtpuWrLOzo+pQ6/jFuf\nxfVgkmEG87X+OzzIR2vfQBVdDi0CyESpjURV1Yf8IdByEuhRtMBk+ITmWVHu\nDef5FHelt5eVvX3vilDaVLGe2NnwoI5tvj/CX0Erj6/rvavLq/T/VKumEa5a\n2sD5PP4rhA5kCK5Ooisw0R+V6cBFZn3CoKYOD3r/tki/bEvammmTnRjTFDWT\n5u5IM3YD3rdHRz8rlXXGMDz3XksOgB3fg+m4dkSSeCRLKfpBdIH8vDOR7k1O\n0huG2Ns4+w6+c2lus/Gbs5zRMubDWiZjrnOTbwmxamRxJACS56rQlzZySeJ2\nZckd\r\n=Z5d6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.ccc64eea3.0","@material/theme":"8.0.0-canary.ccc64eea3.0","@material/animation":"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-indicator_8.0.0-canary.ccc64eea3.0_1603752686478_0.8987130571678237","host":"s3://npm-registry-packages"}},"8.0.0-canary.a79cdd019.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.a79cdd019.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"4fbba561e3e11bd011939f3722471ecdedf83f49","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.a79cdd019.0.tgz","fileCount":38,"integrity":"sha512-0iTZuogmg33uojjNo7BH+9zkaHnD6JKzU4skwAuPnz00MACrxXSHV3bxFySWRcrvax00Xz5wLAppm6vaFZGiSg==","signatures":[{"sig":"MEYCIQD6YwHP8C91J2L/K+KdDFeCEcb3beJmLBggmikRO+DYbgIhAI1cIqlfunIZ21czMSRxEaWhk1C6SJs8Juyom42QhJws","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmEtHCRA9TVsSAnZWagAAOgMQAIC5elLRVSei7OmIfSmv\nAlZ7iTAd6NwgJlXSebcPVh7mngEokOoy2z6uAtxc9j13YXpNNtttsmu7jRTc\nBznYfjCsEgbltMURLRcQMm2m3tCpl0eWUamJhTsJEqYGYOb7BP8wjEX9/08m\n/KFuxPqWGsseFcjZWGUwkOka6K8fOWEDH4EUWKrxAQLd19/2KmXUTbnVIezm\n3LzRbL7oxbfUGcYp0F07kcs06RrEklQXprz4XBo+SqOR1B4BTmAG9qhSFddc\nlVi74i4LNvo8AZHo5HF01IqqzbE+/tGk7yk1YV9HjmN+bFCaPkPB2CcBYDW1\n84MRVXFN9Y0IWsjDX7LaDWwRw8q8D54VGAU29cNoGe24hYnJhj8eEjzCbLT8\neKX+5Y2Ry6XleK0sU0WopNc1n3SVqxBzQC801occ9D3vBzOS7WLEHKY/1YYs\n1XcSh4kBCAV05izrm39ctRG7m5XrW3KxM9bOKszWz0iIfQk3PoKkgoWCyhwW\nptMRKLMwQ5yNc/X5ONQkriegx0+GV8cWDfPD0a1dAFcmZ8QJ/Ci44p5b4KM3\nyp+xNK2jXZrTRHyUkHxmdA08HLuiSMRh8HbKnYNXsB+hvszZphZlj9Wd/cZe\nwG0/DvAUWfu9ikAvmViQNF/olFawcTAHmB1zoub4VNpLh64Wt8+N5TinVdba\nYY1a\r\n=5nuR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.a79cdd019.0","@material/theme":"8.0.0-canary.a79cdd019.0","@material/animation":"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-indicator_8.0.0-canary.a79cdd019.0_1603816263089_0.412787854539548","host":"s3://npm-registry-packages"}},"8.0.0-canary.596e98424.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.596e98424.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"6fc562350761477c444e6d819141f12e1d81a16f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.596e98424.0.tgz","fileCount":38,"integrity":"sha512-Cbw/WfW1tBADd5e7UmbGwtTz3NQcjswJ/sZFov+T/eGkVKZ7s8iwiXifF+R/05lTLb4/C0IDEqVDzU4sQ8Hgcg==","signatures":[{"sig":"MEUCIHpGfYMQAU4SFANsEHDgEmlEpv9h4iIKmyX4Ua6M1YpwAiEA924P6ATa946dXcwwS2OE8ZMrRHguzmgWemYYbYJIlTA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmZZOCRA9TVsSAnZWagAAVI4QAJQqRz7vGsQWCpFYARLd\nhjBSh8nTiYZ1luMurSNGcRrNrcshRDoB5xnL/21kyP1LW7BBfQPq30atJIus\nntsSaTRKtwUu/XKF0z/Zfzqcg4PL6RFBssYCklLhj4Ja2hjfvnbq+GnLCcN7\nw/IHYv88ayl7VOjU+IAWSt++SV1N9SQQEVy2DkgRovLysDRMfCPNN0qKU7YF\nK/h5byh8d0WvVozB5k6yLyvw05bMgx3A29IbGhPGn0BE2VOZMHOz77P5ZXtK\nUwABRRdJxy+EImNhI0y5qj2OJv9aTULHNmOODb34QH6ZTNM1clQvycQsf7Pm\nzmtNTcG5/XRnQyeG92UN/F31H/+pfl2eoQ1UNYQimwEZ9pXxy+Qa0I/FyFpo\nRg5jzaUXR5t4H3RmUwrNHMEdgi+cbtmJNyzn+afYaeilCYNQbuF33xIfaY43\nyUo8iI8ZUNutZ71ImVWWTIaJrCQ4zYUfqFyL1Bl5PEZyTi89CCCZy+E72wsl\n2p1z0JXn6zQErmDiXbEHcyyA1IFMQiW4THUUgxlSTX0W0FXY3S5iTA6z4FbJ\neBrRep+kg72iq2XIBiyvpB0waqId0cSycoHSBTVYHtUPuQ6k2nnw5J/JK0iC\nzf40jh8HD/vyK7mjn7xZ5/mavkF9TNnRTeQ/2hFFoHawPsXV5GNhkKVKcX4v\nzzcq\r\n=7AJb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.596e98424.0","@material/theme":"8.0.0-canary.596e98424.0","@material/animation":"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-indicator_8.0.0-canary.596e98424.0_1603901005846_0.7529863287709688","host":"s3://npm-registry-packages"}},"8.0.0-canary.05d5facc2.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.05d5facc2.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"4746fee323d116dd8dfd6cf8b28117b85703803c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.05d5facc2.0.tgz","fileCount":38,"integrity":"sha512-vfqSE3h8y85/K1Zdy5wd4zm9YjdpvTA5+OTf0Rl2Gi4r7LR733tA1I+AwvwIgRywbe0JMnoCtt/+eHgH7qITYA==","signatures":[{"sig":"MEUCIHYxzCHLl0iFl6nNQm1jHvEbn5HkQss8csXKPeQVOnWeAiEAwJvF+XbtqfvYXBZz9Uv3XjXaTqyNoSGq1NPU+d/GwWo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmZhLCRA9TVsSAnZWagAAwSkP/0EshDH3SUB5/RM9CcOn\nyCUMb8eDqU51ZOKDkQuPmLchcDjhkki2MD4s6P8L8QmMNNmHq16vGpsNxyRq\nHRdsm92tvf1cQ2zsOBAxQHBpEDagh3IyK49S7FMi6gMFiMvirFqAbbYhKBGD\n6aKxnGGSlA3b8peMSeSCOZTpsKiS99I7CxEVk9ShhLc6lc9rleBo3/BY+HT9\nZACUN9+kQ9N+oLIuekyNkGlbIDw4bRMEvdSD5RpGCS5P3NbsEpNsf7UvaX7b\nWzyVndPus2P/5PY7AF9P0atoA48Jj1Tn7BRHWOM+t06/gvYwvmYewn+tg5xA\nuAkHmDoWDBeAlVgOwbNQauCyVULPFg9sV3PWVmS2BNzOuuhb/f6obXe9YnPT\nrFrD/ufRDl3GB0zZM3315M/BR/MvDMfiNUlvl1PLB7FIf9dIWT8zNJpReN0m\n713BYrbX8+iALCPEU39IReAWV0AbukNVgfDSX5dt1lkDxDMwGUnQBrFqRtkP\nRac1Ot4jozoEODqgHFu/BcnU2+HOD/bLPg1U++tuPWoisru7pS77TUyGtGnv\nfgW7t+xB4wN0s1cTtecHD/84ZzHZbeAUUs9SbRp11/Ja2o1izUqRzU7dzavT\n/AHKViIUdr5d1Qo7CydPrEHuW9IfBlAPRN3cXZLW0AfXOKv6ZMeGZGSLq5UE\nSkO0\r\n=fTfe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.05d5facc2.0","@material/theme":"8.0.0-canary.05d5facc2.0","@material/animation":"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-indicator_8.0.0-canary.05d5facc2.0_1603901514869_0.4831259812523836","host":"s3://npm-registry-packages"}},"8.0.0-canary.291b3553d.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.291b3553d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"fcd5bbe1f7df21a4c4624d6ffbdaf3cbdd41caec","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.291b3553d.0.tgz","fileCount":38,"integrity":"sha512-x4+Oe3TxRfnuVz1otqTTR5DsLbMIuhDwxsulZWHoRKvIUE5481PdRQ5Iu6sodthyXs/21vG+byRkgPKODS1oRA==","signatures":[{"sig":"MEYCIQC8w4aoz+Vq0YTh2q71syI8t41fY7wyS0Gv73itruFMaQIhALLG5TEfnFA4xUsX/iQk1QUWzEYF+xCI+WKAUsOZE5qC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfma4RCRA9TVsSAnZWagAARngQAI1tXjayTZWEQacs5sA3\n9siPy2P/dGMDgUbqxzL37MB4U52UP5JWycMOpvYXJ0rq0Fz4tYR4p//hPxIQ\nBQfVTqV7JvykmCR00k4f+ONieYWekGbVXewGXQxNr+TY7nJYNRDzwJ9r8VrM\nC5HulHAzYqIeDPViP0V1tM+hHlFMuaBw10CINtWh1X5I5o6I+KFiz5hYQPdq\n6gsEJweT6vmVrQQ3ADs3yuiGw8+U0vsppj/j371y8KwGbHd8xbOQlIYiatVv\nQY/gK7JYaA+IOsEWkefDUS8wZdanIy8W47l+ZGYNYmQlrM9nVU+5oeZzOr5P\nIgu5qJCsYwrlGR4bCdbVZoB1qPQ73xfwSafmj+HmDQjXTc7/09Jj93h8kki+\n3b/+SZcTQP3QJo4hu+QBOU00xtTF/AZ33I8chr8zkG8wfkOwjsbSrRI2bZW9\ngU+6jtyKTad5JP7McBEuiHI8NaALCKREgXgjK6ddvWDlmDaD38BSX29ylRji\nnHdtTezIAeP+kotYfn3oZkjdMe4WC1s4MqVLovj+udL2ZdwIzrDl1wNYc3mj\nU451dhOKbm6l9WCE5VaarT5ctgApZbmkDLf+w/V8d9tFB5fF298HSK8Qy0aN\n9fKgfoKxO5rA2b1VHv3FslEGGVyyWHw8KJetA6T1QUkCxnd/2IkCFYuINa7M\n3y54\r\n=wE5S\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.291b3553d.0","@material/theme":"8.0.0-canary.291b3553d.0","@material/animation":"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-indicator_8.0.0-canary.291b3553d.0_1603907089293_0.47292904290614146","host":"s3://npm-registry-packages"}},"8.0.0-canary.dbc449b09.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.dbc449b09.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"aead66ada064225af781ae14c937fdacd15c61df","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.dbc449b09.0.tgz","fileCount":38,"integrity":"sha512-f+8Xu65k8Cbu/x+lY9Q7hrV3SVEORE3n6WZThBZpABIJCyVB2a9Mlb/ogtCO1AiTF9RN/I11FS+ZsDzkL+QfIw==","signatures":[{"sig":"MEUCIEjdemV/3pVcUmJiA8Wce+NXdXnwQiUwckakoTVUTVmHAiEAhsrLdjVYf0x+uOB0sv+s5Sdod9Q9atbKn1ZY5w6VM5A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmbSTCRA9TVsSAnZWagAAN54P/3fl2LzO38PBoB1pzMwZ\nOabiDUO4z9RzdQJzRVtzNKjv+RDS6deXIykpTemnZ3x5pAZCg4PYhVhNVifq\nVyzU5XLDU+gVyI4KjZgnZXcfSs61iVtxvECNYpbPDc90zeEXmdNYq+YQxXw5\nOz47cYEA+mVv0g5b4E9CeG6PNjyWiWy6QyeQcf1QdEjqZ0zMjGf0myM206ck\n24/vteQpiNjAEmMGayf4ULmYmG4Se3kVcK9JleUqtgT+Vh+g9dmsNWdU9Eay\neuK8w3jWS6kErwMyisrHFI6WOk1GRZknyL2tTxalGn4fKIeV4q7CQD22Id3o\nGYW+dgIwQ0fz8ESLt9Yw7qqxJPPPXdOZuvqV9j/FGVKJCtvGNfuYuu5ufTEa\ny8UNhbVff526UlYTR72TqtkQNQ76tc2V4nfUgkoEdHa3f3hmnU5ubVSh0G9V\nZh00fO6UiaF4/W/e+JegYeUj8VlBz1LTGJZZ2LngW37uBGUcGw0tAeEojZFc\nS4AwFQi0rigUp7/DlzA2+jimjfGhc/TA0d0k3KtIvyBZENKHiH9mp0O1EnmQ\n6HDG/VhsLCT22+u3RppZnbA0jO5kANUUaTFJoqUYdD81pzgO7fYmRpBJK2mF\np3juD3bLKqqAWFvu/PckjmdB4kyCdQOCtY3RyzSBBXapB3kS9AhUuNhJbl8r\nyFsz\r\n=0TEI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.dbc449b09.0","@material/theme":"8.0.0-canary.dbc449b09.0","@material/animation":"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-indicator_8.0.0-canary.dbc449b09.0_1603908754988_0.07137505951946865","host":"s3://npm-registry-packages"}},"8.0.0-canary.4794b25da.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.4794b25da.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"5a5c50a5a417f790698b7429a37b3f8708cb0cc6","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.4794b25da.0.tgz","fileCount":38,"integrity":"sha512-niRoFhvQNSl93FYW/NlTa8kDIsmfllXNXi3/ftCXyMuP/uDo8zxWvB7QxxJsCILB0AxfZMBTX4dkRJT7ajuLeQ==","signatures":[{"sig":"MEYCIQCc/7qockjA3rvilkWUxk0+llEdRqx2hnKcifvAIyQ4IAIhAIT43T2VvdWN/znqm7/GchtiBSAq1RZ7TQtb00s8vVuK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmbtBCRA9TVsSAnZWagAARcMP+QGFYYPOqfxOe51WQf90\nVyqErxzKOEof5ATK+9OP04o6ULQlXb82Q+7my7dopIS71sRNVkChlQBI1x1p\nMw62A81MWkdm2o9WFdHy5bjj7u/cY9Ry0v0h2WFXg6ZcAR6A5wSTOgTUVrK/\njvEJsupluaj9eDVVK1kaAzDEG82YI4WaxubFRRTMINc2UGaVvQwMcC8sHQZT\n0yoNVy2148W4tk9lcUEPuhVbfOttZoJkjdOA7UwyOsQfeUfX+T1Gc1JzFQtg\n069SvJUmCiKGghPuT7UIfxuMa1P4cJzIPwUJdvjSmN4y5So4TWLr/wL2/3Gg\nkG0oVeNmVgNcC7b3zkXaeV9BGFN++h0KPq+qp8jFFMkmpcxJGCd3Tdwnr6G5\nPDRHrc3N0M89a1VPzaXYU6+0ybOXcFjpdJ+65aynXlpUZP0S5p8kl3crNfr9\nDXoFrzHx9M+i0+vv33knz1033HlWWDKR0GxXT2RYrBSxefKYID13MIoJ71wV\nKi2cvGrXdOqGPGmXSVbs+kQl6b3oDbKllnPNN4VHj+74QQD6w0vO0nsLhwOT\nQgUFTRHTNsMcWmpvGGpf0174kSZsmN8Zgcjz5dzK1ehtYKosux70T3hTkabZ\nFhjJ9lWP4PdLv0QaAIlk8xVsTSpMMWSSpxx8e6ctzWZ3gx+Bs8JstfzugYYS\nHKWD\r\n=jEld\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.4794b25da.0","@material/theme":"8.0.0-canary.4794b25da.0","@material/animation":"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-indicator_8.0.0-canary.4794b25da.0_1603910464830_0.7556910135671109","host":"s3://npm-registry-packages"}},"8.0.0-canary.c61db90a5.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.c61db90a5.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"bb9c23bb312e0aa06b2b00b8fd684bd89b832e6c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.c61db90a5.0.tgz","fileCount":38,"integrity":"sha512-FBdSLnGf/HO47qejBlxHV9JffbseY3yTGONpZqE/M123IHFC3Wr67IiYBMq5xju9ItC7Ks4bqwF1xOhPBZxOVQ==","signatures":[{"sig":"MEUCIDDBvG9EKQBuf1QHkTelpDqWGd4uanatM5bC0hDfLIX8AiEA4dME7BMwuR2TvDQVDkzXpSMl6IlDK+S9k9Sb841k07o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmb+UCRA9TVsSAnZWagAAcIoP/Rmq3L8Ee3xeuOJFAnCC\nY7MpIJA7MBTiSlP/BL/7/8d05Bwd9QLrl57AlmtRMWLR6srg538d8NTVHpid\nWgKElJXbDx43josNYyhVWHfPOeVpvABnl8Eat5V4xHBu4HpsvgEdV7TXg8I7\n6sXLBQHYbCWkZnrl2Toy+i2TO8NZUI3Y7fNqZQImNzyJ4KZbuNvYoc68WGPK\nkffZz8MCEUifLMwqXQBnLgZ8nsOJA9+fIB4jO9Xa3ulW3Sa6t4izraNwpO5v\nsk/QqjLgyGIZ+NZcYYRwHaAUQU9+d+gX88KFq0P3wFkH0ukqWA1bjtVNbjr0\nzFncd777yevQ0Jg0PJRC3Kv6ZZ/xJUGf2ahPwnvkKSE8qGFQ8ts0oyTOfFVI\nqVDdrCIDVABQPmBc+fwG17/XgoY+a4RaW3Cfos2N0u4qaXjKv5FlH3Ouzpm2\nxZFel5XMR4UEztlZgt32bd8AYg6B6/J4mMi5y4dFe0RLluuW5DUC3lAgnkSS\nYER68ordy0i8viivSGsqBdcWClv5xK9V6cH89fK9hLqIB8B1+2YyNC2AzxWK\neq4X5CwNUJ6EKkX6lB7QZlM8INHOqWokjO/GV+O8kUyI2yBPbtHxxiJIvfiq\nvJ2BUtnTbX4vmrwCDWnzl39fCtK1KA3jeIzo5dxnBHnCJZJ3XzWFtQttLnUz\n7SyK\r\n=8B29\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.c61db90a5.0","@material/theme":"8.0.0-canary.c61db90a5.0","@material/animation":"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-indicator_8.0.0-canary.c61db90a5.0_1603911571676_0.4090523420534993","host":"s3://npm-registry-packages"}},"8.0.0-canary.6d9648ab2.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.6d9648ab2.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"4f842351a270a00faf2a9f537eedea343b3ecc2e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.6d9648ab2.0.tgz","fileCount":38,"integrity":"sha512-PmwhWnWlFa7HCY8ds0jvnyBcyoU9VYC8mQ/ueSDNSiLTEy4eSOVKC2tGjIZS6hxxqoSZxGhSdu/CHMYQD2/cKg==","signatures":[{"sig":"MEUCICDihpLlZcLX1b5BtwcmzjhteCdbyKbcMfB/8H+ZcsW4AiEAqTCP+/k2Cpz4kGXfDckAm57pE5UyeH+ox/G7LptIdoU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmybSCRA9TVsSAnZWagAAL5QQAKHq2LZkb3cuzFYjwz+X\nltbnuEvlYWAgjM6LSGaq3Kyly7znAVqHoP4UQ1uFi1NkiVCSAHXVD/sjeVtO\nkUpttzgj61OxjPtgQfdv8pjldo4I/bPg4+7DRefH1drTpgTTP2+c2Gp7U/Gx\n0U1dRocZTRZ7yEvOFMAdV1NAxDl7BK/54ZqF+LBdViI8C/AHGRF927h9EMmh\nGaf0wnn4DcYG/q5Ub0P8bLrXk+QM/nhtwQe+o4kiGdt+WBLcSPzRIAY+3cEg\nlqVvnkF+yd59y7xT4oxr2xCyzkxapVnGtY7o2orbE9fbMAV6HilAzg4FUBQH\n1GS26P/D2aVQxk5SAQdIYD5LIHnfalc41lWqq29+G8XKYzrpzsDOPgMlRXwP\nkz2xh8+KRnYjpa+wXJBqoZUUxwWuPbzE3yuIPO59xU+ePCk173Sycn2YhFZ/\nYhp0XBbZSUYTiaxMAMnHJ9B6UcF8IgkIVlSTyjHqZ6jdJDicITKT4nXGMY82\nivIPvEIKcDxb0sIqfv1kH6uLWiYV1i5DetuHAoiiWaU9gfDKu5gkr5qQ+snQ\nPT0wHwD0Ng5b42JnxAmRwQyP1E8eouAUJ6wcDJuxcBRH52lOvVP6Y03z5tEk\namMT1aBQR4WCw7AtpfYgaIujpaNJRsaXx8HWAu/PYpCW6fSlXJL72vK+qB/I\nCR+C\r\n=BGe2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.6d9648ab2.0","@material/theme":"8.0.0-canary.6d9648ab2.0","@material/animation":"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-indicator_8.0.0-canary.6d9648ab2.0_1604003538409_0.3962596260372393","host":"s3://npm-registry-packages"}},"8.0.0-canary.5511c5254.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.5511c5254.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"fff517a96cdfb511147275b83e6d8e139b0b7e7b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.5511c5254.0.tgz","fileCount":38,"integrity":"sha512-sZRdwyBLIVqoBkZWBgnD1V5+KLFo5BT7Dir9YVpcXshxNPMuapHCnssKMJ8TK79TgVLLsBrB66t8ok9g0BPDPg==","signatures":[{"sig":"MEUCIQDbJEIbjASs4W68bH8sa1SC5Edb8+CdMS76PeqYQYs+0gIgVneosPXKj1YOW+G4GhZ3f/lcJb3LGAu5layWtQ1OVd4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfnFSmCRA9TVsSAnZWagAAcusP/ixJ1qaAYKz4fSAN9b1i\nw/NP0lv2SWO0LRKo1va9qqZKVoYqLgD43mpMcwlo+QKZ4c6P/++BVpjNQ+ar\nInB0K4DOSuhjds2QNnF4BJoInXScL0aKZvj0sYQ9J4dXWii3L1KqK259vJ6P\nK049eoDO6rW0HUd4YE0grPjQySNwsSti/FklM7f44jJ/4ecRHuJk25JOraKF\ncsUy3G6P8VPavfVSTi8CcQ659ZG51MtmQQXbsgd1QGgMBA65koiIVPmwzhl+\nXKcot773Q8upRp++ulfCSPmhTT7Z8YX7UrnDB/ywOnD40O37GzcXHDGsEVJb\nkq7h+A2EUBcpv1dgZsUgJrlhGjg26nGVrmFpfjaWqQlr45BxlaF/F5a8znl1\ng8l4CNSh3QsPngBhyAmwKTF/rIbefav5215brTvsoCK69Jemh3OQH4t8uMHG\nu2BKgqYlK9AuGXpvFXT/ZgAbv/y6Uns6mUWZWlq6CyyGHTNfD3mK59CuBmVW\nN5uYe5UuVbtXFi3pe3lbHRXVE6epLLu0LW/zC6bP4ChjDkHKRm/D0YL6+TcT\nBLq9OlF3+P0JWsuTgyCDgZtNsmGiUIOtgefVcOVLGuR/ZwdV3olbwj9OF497\nrgx6OZPVFQxj6xdQND8/+h+5cNuWZsCs06Gzy4lBDPNvaEGyQgZS2JugNUwz\nt0uB\r\n=m8hp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.5511c5254.0","@material/theme":"8.0.0-canary.5511c5254.0","@material/animation":"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-indicator_8.0.0-canary.5511c5254.0_1604080805751_0.04477727408225607","host":"s3://npm-registry-packages"}},"8.0.0-canary.bd6e302a4.0":{"name":"@material/tab-indicator","version":"8.0.0-canary.bd6e302a4.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e3033eeb4286c0bc4b739b8e9cf27be5022222f8","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0-canary.bd6e302a4.0.tgz","fileCount":38,"integrity":"sha512-CGuB3fP/0SaFu6WMqFyDZ+cR/ErO71shJQQmKW+1tFbKAooUp98AIfy9DMO1sIqGOdh7V3CbvVkIx1nGUNMbCg==","signatures":[{"sig":"MEUCIQDCMhL6VuTxLAuGTnK/jaW4p8Ob2vmiWRcX2DNQFR9OTQIgKE3bMFNu2ZTUCKf+zktn3ZKgrXTL4CTtKYS3fL+Sk/M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoDwrCRA9TVsSAnZWagAAFTMP/3dcA/pYXumtY+R7zloM\nf3fje6DlYpQAn+Sd0nkEykyIKNNbHbKgPqKFI+ap4e+6gOvku2ZH1ffEOKPw\nlkzRnhPMyzrywvkJMN0ufyNM/ylxxhVUU95v9jkZjCYL+VdEAHEh9tCJDO1S\nIvR1ePdAMR2cnNfzos1yeEmzx3D8NA94s3mLN/Crqvg2Nv9RdNMKpahIDxAR\n3mBEl7FnLkUbj5spq4aL3r+m19pL160Tj/FhcFaku+suBTfp4IQ3Qsy7/XFi\nBsjFQJJ8iKH/09/IzfC66/u1uqsjver7KXNb6Zdr9NqrwUeo8D6TtUpD9BpW\naH7T9fTuGZDBe81J/jVXtIMukeBYI/sOQQVAd2E4N+7R9ceDT7lpcGbwoO62\nrxcHqdYcbOiYk9soLNF8O9JfC3wizx7hTAqFc7fYPbdqPgSGk41mu928/8rV\n/uvLs2DNrPJM29L+OzAPSw5zL7A/XsBAsXVGxA3dhyx2ooblEFbk+x2F0Q4U\nSP//P3PyQepBKUK31+GrfYrZdpL/mAPE5rt988GwZ8wQnDu7znDYrsImtIie\n1pJnhWYtzkr4wrNE9L7jjFCAg6jiDf0VEf/Nq6O6NYCZydxeOoGXgnFvlOML\nKE9vNH9u4YLrTBy8uojZt8YqHzVbDiO3zdeocEh0obFh9z/7roNqYrovznr9\nKeJp\r\n=RGMh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.bd6e302a4.0","@material/theme":"8.0.0-canary.bd6e302a4.0","@material/animation":"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-indicator_8.0.0-canary.bd6e302a4.0_1604336683037_0.9314534272411354","host":"s3://npm-registry-packages"}},"9.0.0-canary.d6b5cd418.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.d6b5cd418.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"af73fb0a3e463955f4b6fb871c05eccce1855a3e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.d6b5cd418.0.tgz","fileCount":38,"integrity":"sha512-R66xk5s14EUJGbh/l2XniB8iEEQvbhK+1j5fqTHcZqnkaMwKl36NQOW/b/dwy78cTvwSBlN1cSix2/wNTcspqg==","signatures":[{"sig":"MEQCIQDVyYuDc8KqzWOty7gh8sVYHxxaVhLKc3NzEKztfZrUkgIfEo8uFwvgaxdvHb/yPPiaesmsDRESzfDLeJo32QUeCg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoI8sCRA9TVsSAnZWagAAQtMQAJ1sxVAMyHlsuuW1sQCS\nv0oB7kABHQDNoZdU3sstW/nag3soZ5MuNHub2zJqy7FJmmTcpDTdxBZP1YFc\nwEQblx4m0qYxO32UpA/s8scR1GlHOOsJSnG7kWsAwB50UwO7F6nBc4IxiAeW\noqEVEoR/vv81/NE6ZFeBv9O5HhHNL/W+2DRmDFyv5k971sgH/tp55EPqfw0H\n0TXZsbsu45TNDDIlGsK3EjkJDGyqRiny+hRDpJ3vFgC6tFN5lhWq1BmWviS5\n9vPuF2R6mMUKkd9hxUQpTIb+aV/JjitiPW7YStQGrjT0SbUw4hxCzq/p6yRE\nU8ZNS7QmCUyPzB6HdtaE4k9RtOVr2xYRM6SjribioXhFm2TajXY3+gTl+Dr7\neFc47J4krq5hpv1Hbr49OtqdPfnvy8puc5Dhe/RFciQOJTQnueqgm9xBMQEa\nEFIkV6cLEX55V0HgcMq7rVN7nTw3J22Zsoa6UWP9yDExFtTP95yPmQ/8sHVr\nHhz4SRG3hdWofv0eAYtQegT52ZBN9fAPOuB2ABL2tQXa69GLq3ZIJxIcArM3\nVa5lCuel85VfKiE5G6H9/VMovR5RU+enEAa8prTFl65o3NrlrhaFWyJQadQP\nsUzDzzAxwCGA0T9r7YF8eaR1ADyyDVaKJH0fBy6VeLBNgCw1P3bC+Silh+zY\nRNxu\r\n=rWHL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.d6b5cd418.0","@material/theme":"9.0.0-canary.d6b5cd418.0","@material/animation":"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-indicator_9.0.0-canary.d6b5cd418.0_1604357931616_0.10184185337288243","host":"s3://npm-registry-packages"}},"8.0.0":{"name":"@material/tab-indicator","version":"8.0.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"5b2c55dab0c792bb7fdc7b0e30aa3391ee62a436","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-8.0.0.tgz","fileCount":37,"integrity":"sha512-2s3zjUtVvJ9pLP514mf83ZZFsy/CqNdwLE7ZU4sw27+ki1zqsgUmLPiWDAfmFyrN1Rvw2Tit3ZGuNJ7xFbAs3A==","signatures":[{"sig":"MEUCIQDi1k/necr1sel0TpcDCFaCSdN6JM6P0C7scEwTawgB6AIgAVxqUbQ35U0U4mINT2tOxVwqrPwf46gSBoyLibpFRIo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoI9DCRA9TVsSAnZWagAAnMAP/3owzcsIfpAZWZxUcfcT\nxtq0mFJBEg4pVj5/v3/pN/9b4lTunxrmpF7gCbbVY6GMNxzCpq5je6XsU4W9\nhB0nMdMkMS2u96SEi1wYoOgijiuOh4WuqqnM1hz6ouy34oA3XBpO4XYb1VB2\n1P/FLtfuBvIMS5K7f5o0EZx94J79aBj3e9iTqJLjRWBX6/iqQwLb69H1ewCF\nyNeOSESKbLoisiWLOxyun/nuz/P/K4opeGpnlZ2mgAKV1rNFDK1n51GNXSMK\nsARuWKHSgOJDTeThicMI4RFJ+5ExUVySbgCpHl+HCkl7SUmj8Ffa/h49kG8V\n4vd0rntZAfX6P0IMABiUF1iFbYUX6y8sAjJbPJKt4Q0EH5Y1XoKlW5VALt0O\naKD+3QatpLklMTZK+HcXOQAq+9QNhsv+ptwLSlmB2pDv9XrpqwubZHpC1rD+\n6fHaXMv9yZHx40vIOreNET6Vgxh3w9aIiIR+PJmtp9+yVfkAuh8mvbCL/J4+\naio3mua4y3VNZ2g1O+BJGfIdbAlb/NihdqvpWN5wqUo1z+vXrF+sNGOGJWw7\nWVlQgLJvfflw6TP/r4aNpTGhaqtH0Xbzrt3AecSox10FAisvVzH9K2HXUB1/\n5DXob5xUxljtwTHz7hIKMbRiA3YVyddZBGOSbjDMeUbgTbiHSNfX4FcB/MAd\nux7i\r\n=JV58\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"^8.0.0","@material/theme":"^8.0.0","@material/animation":"^8.0.0","@material/feature-targeting":"^8.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-indicator_8.0.0_1604357955435_0.5727942445306038","host":"s3://npm-registry-packages"}},"9.0.0-canary.fdf9a2634.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.fdf9a2634.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"5a428ef44662031c3ba4a9e5bdbd7098cf7da2a0","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.fdf9a2634.0.tgz","fileCount":38,"integrity":"sha512-DA6pQgQm+0qKr+s1W1m7RNsvAKlz1bt9082Qcx5TUfaHpQiMSAFV9svWR8sQqTTnnlIB5Ri+cJM3Z0D6qgVUJA==","signatures":[{"sig":"MEQCIA6DjYiUOUTY3i3rsk2eUBXe3H47mMsSLqrJAbvygdKLAiAe3mIOk3SQfzycnV2U/dLlDAlODJzZpXqwtnn0e3m7Tg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoeXxCRA9TVsSAnZWagAARb8QAJUXVMRai+8wfMqzmXWm\nrVzfYcmktJEUqj3o0g7Lf0J30VEvAJeZJ8a0NsjzUFA/e/ycD/oHckcTXgmm\nEfC1PEkXRtxzMgX/hDUY+I8Q8t5kCIzqO5ajCKtPgdG62umzY688jw2LLalV\ne45AlYRObNn5N3Z7R3BTKFfwAz0D29yxM4PuqvdNXSo8SBk9LBnUS6r6l8ef\ncH36tf/NKdNHQPkSX8S68a0kMCyWmhDSdOX131OIgZySKc9a/ghI+uA/FXnE\nYBD2g2iAXESdvZ3xcrvfSNO/5MIzlUWPlt3gIuo+Uug8QRO1LHF60TRTFxUJ\nbhDnOaNKdIALzYeD1jBn6NbCC5h0j1UwXTqXEG9Hbp4CSNEGF78osiQowrpy\nROgW5sudb+8KrEtSeuw7hdghTYVZ+PxUedxvWewlkv1HsrYfiBAdXk15DYjo\nn65d6N79jiWxUHJkY75vyHlvsHH0GJcFoDJGeQ2clppprNwZNSU9t3EYXlcD\nBV1pbyHqG1Sf8LSdXfYDhWCDor4nvW2H90EqQJznZyGu79svNLVgpajdpkkc\nNQBArp4nc1NUsbEqxNCci0+nBjs/V5dM8y3/tUIDeB3EwG4vRX75udN6ZDi4\n1onLj4EbB90/Ba4rn7qGOH/qpGqQ/RBOEZRhRhdaKap0PgH+MXFM2mmKcCkd\nuRWP\r\n=oNuR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.fdf9a2634.0","@material/theme":"9.0.0-canary.fdf9a2634.0","@material/animation":"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-indicator_9.0.0-canary.fdf9a2634.0_1604445681448_0.5598916897611705","host":"s3://npm-registry-packages"}},"9.0.0-canary.4a86f30a0.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.4a86f30a0.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"cd974d4b7625de398828468da75f1a0035304769","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.4a86f30a0.0.tgz","fileCount":38,"integrity":"sha512-cuW1KxKOjUOtVprHeqEe0LYlNIgHh/Xx8rBs7gX1LnFSugNM1J///WHBpW3y4FPGYvN2aXWaqxhiGLgRUtoUdQ==","signatures":[{"sig":"MEQCIGPIylBA3F/ISnqnNtCp83+EMvlLrHE6C29b18IniE9sAiAOjUH27hzHNjUwZtaTEC8duOkl9B+Lts9rnknNsZHiZw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoedtCRA9TVsSAnZWagAAVSUP/364wFnQcOVGHx3RnzbM\n1zQul0K1QzlvKeJflr5HYuqxFZJ/F/tTPAJACy2Ji6pXteybPlXmuZIduXPX\ntt0jey89j0Yp301E5Wst1Dn+WuIYPUO/vJOpRmOJ20vg2uBKxMp9Yq/qHm+L\nmdGJ7+qO5/7Xrd552TScq8eBReBuVUW+hVaCisgngz/bLVk7d4vvLiCfVTAR\nQYVRlO88XJcglrZJYqMVtGLQXswNWgItbnWPEOXYNxbH5oI2tpwkqS3epUTE\n4cYssNzOCxWI7QXY4o0aQ1EpEbXKsgsyrcKkgQ72bnj+NA82CbeEkZgSGPr/\n2W3nd+hW0jYFSuV44Zv7ergXJ2eRRzay49q40cu7tJg5HrJ2MeLG9/L+AoEI\nM85zE7p+a8atqhhl6T/+7zWsJ866uNV47qZdsI0nZnNWdcLZEgeWYXyCGyyA\noB9s9xJHMtjEntgNBr0Ng684RGoMAfvF6B1GlWCJqY0DaHRVk9V3J1H4K+yt\nV0jcqC/KI7gkMLgt1AEenTnNLp1QN7D5t5J4FcOX60bpDf9cErZzX5mo3SE+\noTKHos0wkhqnwakLl05QV1jBLmv6GsXoRcLYqylfWEiDcZ91OUlx8i1JScYA\nIKN1z9XOye2pcZ1MOkqV0d8y15ttNp0hx4StcfRq23VCKAx0vBiRLLXA1Cyt\nJXzb\r\n=yR20\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.4a86f30a0.0","@material/theme":"9.0.0-canary.4a86f30a0.0","@material/animation":"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-indicator_9.0.0-canary.4a86f30a0.0_1604446061560_0.8942539800324227","host":"s3://npm-registry-packages"}},"9.0.0-canary.fc8b045f1.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.fc8b045f1.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"92797090146b3acd9bcfff09b376ae0b28cb9254","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.fc8b045f1.0.tgz","fileCount":38,"integrity":"sha512-wt//tnMDvXQqO+hGdynw5ss+mlup310BXnXAt9f+3NTEQ/4Px8rnNZ6nP9qa58QhRDQhlfwc6ynqWMVPVcoctA==","signatures":[{"sig":"MEQCIHqj/N6++7sR9cYQtl7Oi3r6RFY/rYoDtd7wbYBFAMfyAiBa8NHRAH8uE1jSttTBz/mh7Omb82nIIcCAALv5sR9Xsw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoembCRA9TVsSAnZWagAAiXUP/3ZNC+5cqTWF8WHxlchr\nb3hPw0lP+4bFN9N+qqP/JC8vQW2++dh81UzDN465CJZ4uSetTqqEZ/cfIlcR\nTcfKCtR9cqg6GzXIuwXs0f92MR29anG9Cw4oTmdkmKalcuo7XYDJqrCiQ/BO\nquqsQeLOVMFfbkGxbHlHgrBCCCBE+4i6ADRPw1pGIMJ6RwQtZSHh9yQwl5WA\n/UX/G19WQF10J47fDhgilxXgY8P52o3cKQyg9mAAL8A2gyuC+LsK/7x4Z8+T\n2PvQRl1rNevqHWHDNxsiPbMJCLMJoVDFVXCIoideoxuaRymJgFcTZw7qEMO2\naiCKXqjSdZ93EvfmsstEAwJjLG5FBwuWL92czLJv3AUi6/8A2KURG1iwwNuA\nQIENeWp5OzEEKi18ZpM7H2DzaDQYAz+uKMtAD9CtFkFmliarSWavf7foy7Y/\n1MxjVavm5GZtUg5aN/zmPrzGVXLM1421/Mypi+hpNWSut1bM8L4qw8W03sVS\nEAaAFXG2IdnIUTlJ8K3XHti/vKzPxnqd+qAQppzIQEizu4qp1QjXweyI2xzT\nHkEZQ7SLH4raztk13EoQ54e9eSnsJTCeLgHgRuBZRKxqdvFMcgx1dDRQA3I6\n06GU3arf7dKa5E5lkuEdoANzH4+LKTqxRacPqngiMyalvgDOFKGl1OJxuReM\n6CJz\r\n=Fei+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.fc8b045f1.0","@material/theme":"9.0.0-canary.fc8b045f1.0","@material/animation":"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-indicator_9.0.0-canary.fc8b045f1.0_1604446618522_0.1634227860212374","host":"s3://npm-registry-packages"}},"9.0.0-canary.a0b2db26b.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.a0b2db26b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"2175bbc5ff6ec9b6b98198213e6831b376a5a67e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.a0b2db26b.0.tgz","fileCount":38,"integrity":"sha512-R/16vQyWgzc7r0hz9RJf+uilgR7INR4r3IU7n8Y2j9IaMZiL/H68WTCYATMLJyCTZ0TL4DJo8SIqHb7izX81ZA==","signatures":[{"sig":"MEUCIQCFuJEk68z4H0kFKkarbwWTPDNX4pfNnjOz0O57jUzquwIgUVoN7kvQSqqZmItJYmEtbt3vFVcaVMY46svvhprneDw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfofENCRA9TVsSAnZWagAABHQP/0V1Obe4IIk5qYTslk1n\nprtwzdMUw5bwOukWY3AdPZDll73j+8uQacmI7Hdr3uxfUFq4MrPFnxQiyXjm\n6rIz9kagZl0MtXwqT0eTzDTq0COpDuJne5E9zCQExC7QnsH9vMJV7MkuyU7s\nGEZazKCV/TfwaWdBbZC0dJFAMYu0koIBQMp0f+FJ+z8WzdvE54WoBO3cwNLv\n0Z05tHV+AHNvER6VjWbNfM9DQpZV4IXlckN5506UFGgQU1hhIHio5FqMfttT\ntmdS1q+Vm4AfIE550kEZc/Hmovq9iqll5+WEloW8hhJaeOpPppF+gE/tCWQ8\n03DyTnV7Df0OfRHe6DPou6aV4GDZS6ZOW0Ai+yf+s5I4RFWX44GaYB32P7PB\nULHk3/RrwsMtNWOZihYTFHo59GSrAD8fhzCzqIc353fkpMHCUHRIYRGcda6D\nOwwedhWAS7e6u+K7I3pc7Zz0OqSbC1uBdbF4xK2D5DSpT5buNK9lvM3+wXyq\nyoCP7RvZSbhonLxyn1RKMqfGhikj5dLBidwr/07nHJuLuExn8tahhpoy8qdW\n9b/m7C5f9DqeUsHGL/Cxe6Gb51/zLbR/Sbstdf98XjxMf6okX+kKzm9NYIc5\nZpgDreEseqs1hBwU38RttaNmdh4LN5PAMvOKJuPB8IYcVXgRgS36AA8GnJyj\nAXhd\r\n=hjU2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.a0b2db26b.0","@material/theme":"9.0.0-canary.a0b2db26b.0","@material/animation":"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-indicator_9.0.0-canary.a0b2db26b.0_1604448524552_0.1206173387273477","host":"s3://npm-registry-packages"}},"9.0.0-canary.419e03572.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.419e03572.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"d96104bbc1d3a0e25cc56cf02fa636ebd920c0c7","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.419e03572.0.tgz","fileCount":38,"integrity":"sha512-a3PcO9Uy8UedDofDDWXxN9+hm1e/Yht8pr/h6tIyZhbgZOcJlhuPvkGJFQCUWY5BSBgOov2iusKAMIxzD3mkMg==","signatures":[{"sig":"MEUCIBVVIPRxHv2MHXN8gOmWa/cb+g6lyluM+GwIYmdrOZiCAiEA2JS1EKbbKvtql0gbM3aphchLckWrXzZE16M2/UTOMaw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfogTGCRA9TVsSAnZWagAAircQAJxBZmlXayQfqM0TpwY1\nss/XMSVpSIBXVadvIOM7cKIVZSrSg5cgfztAjotKBdpmLSYCq7hw6Hg1Zc8z\nVaZRw4dhmHzIboN0W5V5jkGDkHSR7CS5NEBl3xGhoQa31hKDLXqniximugyh\nmVlkv8g6Uhbknu2Ats7uH+SwLRtMafbVlNHMrNAJWhbAMybG1lFKz/bORg+0\n++NFC3qtJH8q6AL5OLjK40GmERG/mg/qcE7q5yLsMj4vW+FJaAvOzqzrwWI0\nwDoeLADVqj5JUHhOwDC1Wbvcp/Ws0zQD4P1terjQ9XI6TQd70i9AyHtmKbmR\nQoyvx8cIKZaXEMIRTvb7WuYQ6k6mHGOOZbGbiezT/2EhH+GyMOdZcKku6p79\nTmcn6Okz67rV9s5T8YEzKZf3lVvpj9/BnufRr68P83JPky18jj2Y5u9XMmK+\nOZ5c1Hyv9X9gRKxO1NCJP697jk+NiksUdCZisG+rfFV6X7E6zFMy0sTozjVs\nynmv7Oh7vCtr+6KKts4JSrnWAdAlrgfU+PdPNtASh6kvfjXTrYk/vJfINleb\nA6JYPHwvJRJkvUTWoESmkJLMnLpoAVE2R7tuQFT11dE3VD4WsIUn8qTDWW4w\nFFW/8u7CpFTb6HhsNrmaYBtF6x9V8shlm56iMMGKww3BxMEaApXqND87IN6N\nmV6A\r\n=xF41\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.419e03572.0","@material/theme":"9.0.0-canary.419e03572.0","@material/animation":"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-indicator_9.0.0-canary.419e03572.0_1604453574134_0.651087190409604","host":"s3://npm-registry-packages"}},"9.0.0-canary.a432ad542.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.a432ad542.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e7e7f01663648d96ac6426bd38b2d946bc9d5e01","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.a432ad542.0.tgz","fileCount":38,"integrity":"sha512-ThEWy+K2NCupVHSiXAshlUYcwqOesiwuDc3cHDn8wTiqiLN6hwh5tf+qkm6u0UMFnVu10VI46kIeQ3qXsjYn+g==","signatures":[{"sig":"MEYCIQCae5Hc0xnfk9/dx1dqTKgcIIlBPw/ljmM+nukN757ssQIhANFp1RYW4T6Blu64KOXJmJ8hijfz3BsVwwJips1+TeIW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpKrKCRA9TVsSAnZWagAAQRQP/3h1+OntpshA/EkZqBt/\nGgkEti8QXzKU2tPeubBbtC0b+JevJD5tn+FwM29wvrzBD89V3n+htMNSefeu\n9ZbpWq8ThUyNiAfVMRtYLqZTh4vsogJKfJpOj/74Q9J0LDwoOlrREZSvhh5S\ne5cmEnC4gelJVPer0J3ZLDYk2KNhmPA2SwSfUVuZMRojwo0+v2n3GN+6kKVN\nCat27zh2D/v6DJaRpRWWi3ljAZdScH1EEyM1JtzqFqthz2IyCh/1Vz1SfTFV\nC2l+D7TGoxUDNLOo01NRZ9wqYSkwZK7Z/YA3GdY5sLq3NAuOCoACnpL0HIKC\ntweHUbFurJoaW3zJFsi7J+ufUHgs8t5zWt4jgXL7nJC9+m5zkb+prXHF58+w\n5FXSqkd8Mz5ITUK35KLsvM7IhoDYy410p/voUJlmmQzyz4zfChR9Loo1HmO4\nlIKWeIo4dH2B+3SEJH0FxOHgx0zpRd2C/EO2ZLn69zxGLpAjt5Chn8+EXaA0\nyBM5EgNAT8I+q/dW0UpAlYwMwsXFC6sKUrgxKAYUpZjbmm2G2g3lFXMHMEoC\ndb3TCMhACVtkEt4ZBJQaLN6cRtPNTnikwZIT4UsYog5+IrEBbpRmbpT5owsD\n8Hrc5qpEGfwXOBTaVrXh7+31g0acIr2tNnI/ERWzfIHTfEFAQIQKNhifc07U\niiva\r\n=N/r7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.a432ad542.0","@material/theme":"9.0.0-canary.a432ad542.0","@material/animation":"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-indicator_9.0.0-canary.a432ad542.0_1604627145983_0.9181599626279451","host":"s3://npm-registry-packages"}},"9.0.0-canary.e2e8aef1e.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.e2e8aef1e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"d91ceaf08f3231efd9aa9bb056a05deccfee263c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.e2e8aef1e.0.tgz","fileCount":38,"integrity":"sha512-2sBpWZnrYyDXRJk7eAKVaRT6jgRQ7YPsHEBXYOvl2Dpfy1Agx1WpTma8ywUDlJBWUWBiNsOrdwcRM/Et6Ujp0g==","signatures":[{"sig":"MEUCIGBuOoAY9JU1nIFnEQyK6uY2pz/j7jgMOyaN+v03tCwCAiEAwpV6TjOK8qU11LfigaXdArMERf54BTUoKJAVbU5rIoo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpK9WCRA9TVsSAnZWagAAbpwP/AtlEotYvYr47cV9zzLD\nFwnVUKaFb8YEZpuLIzwmmidVf9biWBmv8WZxcce5sbpFjoHFKvHZ6pppmw/p\nHqnKKMAj7kT0yz3jk6E8Qf3AZwPW2xAebusy+YNQkRsx/+Fh4fU2atfLi3Sc\nHrRjKgtNVn9JW5Cv0NoW5jnODiQJUWECLjEoQ+rXSsmb53lqrwUoLjhfyKq3\nVQAEkOvZpU7FQB4CEDFOJUtN0RwoFnZhy2GqhDklLjtCeuit78owcol9xgOm\njMTWQJXepjvoVGI8goV3l9c9+X17+/e2IcOmKlXexMc5paBOOdesJgtGY4Re\nlW0FsJ9z2ciTBOy+lSBYNPy+X02eZzUjzQ0p3Kx9hza1dhvwJTwfIBeZ4QxW\nLr0gNxwvjdhIATxzStCpYv0C74nl+NdsBFhPW40E9f1HbA7m7aQtslOz7Zfs\n2IHx95NEKkG/FVT8SbQxEQq0ggtzik0dfFHNTie0s7dJ64vH//80BG2ZFQ6/\nz0AajIwveB0kJc17p3LzwC6WfXc+fpsgh+iiHn7z5ZOQzpDPSxDpr025g6D/\npDMZJyUUs0xFF3avekJJbeMU0BqGYo68OBnPvzEOVySfEzu87g1WKXAZT+t8\nWkO6b1He9LlA9jHpYTJ2Oroz7OuQwc+Qjkd4bV+QFuANAHZXprApPNM2UaOP\ntw7g\r\n=ForE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.e2e8aef1e.0","@material/theme":"9.0.0-canary.e2e8aef1e.0","@material/animation":"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-indicator_9.0.0-canary.e2e8aef1e.0_1604628309661_0.8669503234597655","host":"s3://npm-registry-packages"}},"9.0.0-canary.ec6b68b34.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.ec6b68b34.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"7f6148179edce759e5fc8664f8be8d00306d0278","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.ec6b68b34.0.tgz","fileCount":38,"integrity":"sha512-yaVLOwxETzqu3RN+m4TfBNWoAR8daoM/PSiwA3n4k8n+3krsApA9DHzVvkpQSr34Aebt9e9iuwa77DB53315Dg==","signatures":[{"sig":"MEUCIQCI/KF2/Qf6/9iqYg6/KwONgjAW4rSiI35/q+7uqdgyEQIgTPa6x3h9KUA3eEuTU7raiskijaR4516xDJXQun2aXFU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpZxVCRA9TVsSAnZWagAAgZcP/Ra0f0AscnBZTu/5NVje\nd4Djhgd58zpxNfaf/YeRRX8Cv8jnawuTThCI5yMAwsFegiv8CkmIrJrqvpbY\nFIXvBJpeca11ZSG3YpjkQV6ZHSt2zV55W8m7s0yl1q+57nfuJi15LHU3AKID\nMVSbnhLkoHear9I9uQAkY9DoOtc5w6xwMnxkbbhz56TnhRDlgpfLFNy5IrXV\nfWtWybAZZq5U8teTcwUsmsGobdyeeGvZg1mrz6VCbCtRgrGvJuTwBoSRRWLt\nRXJ2yi/eZardeHxEJiigGdulWRDB8i9MO7AhlOpjN7G/XxcqspU+CZjF/jjH\nJyX9leUkXt27rN8vtJj0TgnEVngho8gg6QYbcCakHJpvmn7/zfS6t17MQgeA\nalhNvkTfVF/cOQZ8QVgU27kjHL5MmWQFadDx2fZcwZAZvEbwWA58yHn24mSq\n/JnKZv166YfU2BPzIyaBXMhrVVXNEMwv91nPKofJb1nqpjQl1cbqm/t7dpkO\nZBzknePvtowRDo6SRXeXQb03eg3d4buUQGvqKRCANeU3QIYOnuA6BmpK02N9\nrw+ozhvcsxr7gnEwkzfd/glMRK0tofopp0QMX3tnIQSo0EiN2VVAvpOpc4bU\nINcEEFOrdh0ZEgR2hziu2eEC+2/vLEKZAfWrFz6BJ6+wlLbgkHaFVpnDtIZn\nzAic\r\n=pQ+r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.ec6b68b34.0","@material/theme":"9.0.0-canary.ec6b68b34.0","@material/animation":"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-indicator_9.0.0-canary.ec6b68b34.0_1604688981207_0.08371701438998169","host":"s3://npm-registry-packages"}},"9.0.0-canary.b39094d14.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.b39094d14.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"8a0477b35c97db46513139d441f76870f49fee09","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.b39094d14.0.tgz","fileCount":38,"integrity":"sha512-bnjpoB1Wg1XgxaTpgnKvUxJWqhGuEIAUovX4pEtwDMiQ65aWxvG+FYb+Aa+Xmh1bef786omWykPJU7GrZlou/Q==","signatures":[{"sig":"MEUCIBBXuduWupUTtERVT4kQ8LPxyZDRUiHA8/BVl8hkICWfAiEAx78JT9F1Vewp6kUM0A2UlYRJo59Xc9CzUMIrbKUeQ40=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpb0GCRA9TVsSAnZWagAAeAIP/2pjYobk9ialL395fL9Y\n9DVgPUr8nyWDR/hWIgZCj5UHbc0BEk0cvELs/ARJctowBW4ldqHzzWMyhQFH\nuxfTmVjkFGaXwRFGMB798PflP9yKGMRrHn25LgCfG2w+NPU9GX3pmLsA0VAl\n7NiGeGdyTEUTkmTlCDV+pOpYaaFBIYGjJdgPe1vlUz7e2l1kUYT3dPjWNDaf\nvx7Y5SImyJJOnfz/eT13eV65v1oMRFgLGmKF4zMVIwIyl0h0ZyLLCO63ZSdO\nEBxWYObfUZqNa0SJ2BGmWh68gnOVHk6qOpxCYpmasgVV0JqVdQUp7OhK3qhu\niZZ/2viokHmy2QBEQFSk54bEomyq1j7crWjXI0F6lDaHSRFCogTpfM9coz/O\n5GzqZJ3pQw5c1pLKse5JhQbQmq1aA9Mrul0lBfpXqmpPhpfaAVu2IQciq8vO\ncDp9LvXYMJA4jatlA/RGpLBXqvwe2mA5nbXB5wp5JESO+JOjbhzbhCGqn0A1\n5HcT86GErI1keXjCguiThEr0dlkZqflFiMz/uqzqwBTTo5grtEf/4KNxTnco\nheEGBsWzafo5+F4UfEb+ELcGyeguKcIQdBnGuRMKjzdcXTMUckb0Cc8+9ii5\nhSxp43fdRJov/6Gup38gtpnbyVfS9wSZmm9GbqybRs0d0EpzP54CrCDtkp3D\nvMCX\r\n=fMQ4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.b39094d14.0","@material/theme":"9.0.0-canary.b39094d14.0","@material/animation":"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-indicator_9.0.0-canary.b39094d14.0_1604697349614_0.6166819518038453","host":"s3://npm-registry-packages"}},"9.0.0-canary.8648b8258.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.8648b8258.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"9b422bc52bf3bad79dc98c41497cca596c0de1d5","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.8648b8258.0.tgz","fileCount":38,"integrity":"sha512-tVv+Il0r4+xIg5MiWCW+uXb5vb2Xlj6nlMJVft5qvZVbLrjunqDn/LxE3NphsGooV/3hYASqgFNDWxUrPgWjwQ==","signatures":[{"sig":"MEUCIF9CKiyon+yzFeYIgSHcxXJGw6Op/SIkJPYSF4qehSo4AiEAsdj3A6AttleII4HFwCDCsYpGFQx/PXORb+w49e2Gla4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrRINCRA9TVsSAnZWagAADQcP/28Xq0i82CMNTTxpx/UD\n1t0ERHeUIjIVS8btjY62puvLKRErQxzyacQjsRvjon43WCN8dWmfcLTrK0SO\n8TiO/YP4EkwasSSdwkC443gTbO+uudUhbVEU+HKDcuJ9d9K/O2I3jPkuwNWI\nxGAEtAmWr5AqNbgGQVb2eH4gtO5Fn/nirSBsRX+vlZ5ON9rE3W5ieQVg3h92\nEsLshLfX5yyfL9scrKimMV+3RhDykK9IHWPbPUbsog9xbwZHoOJwyQaLP2ow\nB+7/3A6qF/VrBqVnHW3pRbT/3Wj9bvUbHcCCEmcq4lLW6DYkDH7H19xFixzZ\n6aTzcN8pDTkWUXl8/DUA9rSaXJvw1O0Ea0W/MqQG9NfoYeB2xiYrMBDcmxHX\n6aLCcWqrRORrLPLS+FTAR/DLjNy0UQ3b7YAwZilAjIbXSJDsCnfNYybo4Z/C\nSTtnQZEqmqX9YyrIzKPv7X8qXWyYqxRVzveTS1IQbXT0V5SJDW0XSqfQICpi\nJyDrEz5iBdY0qyVmgKsT/HBpuseuLVAVkWXOX3cb6xK6VgP/LHezHc32B+Rs\nOQ/d971NaqTsEuaxDzsT/olfT8jU0jItKjzn2CLhnOUxu3O3cfOHuWjjgfRS\nraQaW8uBPeHnUGPS9exqlI7SIclwYG+YcIEiL+yHCZNjelKzmsCUAkC7rKUQ\nEj9s\r\n=HblS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.8648b8258.0","@material/theme":"9.0.0-canary.8648b8258.0","@material/animation":"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-indicator_9.0.0-canary.8648b8258.0_1605177869253_0.659249795283112","host":"s3://npm-registry-packages"}},"9.0.0-canary.240c5f74f.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.240c5f74f.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"cfead684085715c323e9c6e27a082bc0e6fb376b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.240c5f74f.0.tgz","fileCount":38,"integrity":"sha512-noJR2UjLl03uD6lTBars/7pVSLjA2iJNiGZB9yrBH2KZ4njppQx09qBXfqskbbsNDBNk9zeDc4qa91wIqZ4Ccw==","signatures":[{"sig":"MEUCIQD0c+xDdIdVoVn5gmawdSSRc2dVBdLeUbk2pXadG3kxeQIgRkWtpyo7bI6g/VG3YqwD/uUfpBtBsu49Y96Yaewwwrw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrZkMCRA9TVsSAnZWagAAm9IP/iVSLQhBIOY0tf+nX8IK\nHmFOvPicNttpBWih0Y0d0EJYQ0YByldnhdZQeW0+vPSCDJ335ZnFV8EFvrC2\nEMg1OqRP7b6lfEeXQiIYSlDAAvAa2pQxRM+GVKXvUkM3cS3YL216tLAQ9U3V\n826ugjzB5nOjSHH6H2rAOlQzC4aDnNmrFaVlfuL4gyWfMG7VvxDR44Iu5j+i\n0wGEYJ857emqx0sGB+g6z4JrCLnKwBnGrh8gOZesCF9UTgKyjz1RU1IvHU2C\nRelbYJ104EDnzOBnAfUvBR+aJuwzycAhBo0qG3L2Bt0tcludUYJMhTSt7UYr\nNgiT/V4wPSUgLN6JqgbgDQOw0Z+x5fUK0W8LK8/PHNYZyoI/RZbFUi65CXjs\n/XAOutYuatJ6x65ntdIWW936y3NoGwt7EP/zvvYJuz2CTsLDmd+oX+ScwCmL\nncKQJ+1bh4EZ0tS0mYHyijRCj++Oub2aYM3rSZSKgiIqZmE22KxByr5kHfb+\nYzYgBPo19qp4cn1yEMM5Wxj9IIb46SVanQ5nGbDNhAVFnsfyLz97jmiJ/kGA\nxhWyM1RDR3pJw8aw4gkcCaUTV5ORpJoY32OOp332sf40DcINrIMwwuQVXyvf\n0E31D7nchc7MK2S4jSaj9itR6qKGVg4S9kGOken1vIwzH8M/NqfDJdw8ocjQ\nR0/f\r\n=tLIx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.240c5f74f.0","@material/theme":"9.0.0-canary.240c5f74f.0","@material/animation":"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-indicator_9.0.0-canary.240c5f74f.0_1605212428238_0.6147094195147189","host":"s3://npm-registry-packages"}},"9.0.0-canary.6cf6ba4f4.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.6cf6ba4f4.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"845d638f20e5c67295f21e7512b0b55c0af83bde","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.6cf6ba4f4.0.tgz","fileCount":38,"integrity":"sha512-KjWVaHbwBm+NjXRTenkJUqeObVPSJj64X2JRGcx1MCEjlAAs7zTYxZyisJcMZyILTl7nQB7xS4YWxfAU520pYA==","signatures":[{"sig":"MEUCIQDL+LySbNpTEtIV1TTwVFNHco+frlV7oIJ2imVii+7FvgIgNf3ex5zjNvNjCdf32LVfK9FbhOm6UL/1LulSpoeCv/8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfssnKCRA9TVsSAnZWagAAjtoP/1gWbCZx5wBboQFbCvpV\nrE/tmhXoqd6vTHJQaUUjP0cJIt9aFNqUPq0RBkQ8oTzSlB2ibvnNnQ6BG5lS\niXs7EztzT99S+d0BQbyseQD5gGCoCfSDmD6xU60wjXIfEcaWVdoBoLhm8Z/m\nUkRnxNkq/1PnFWwRyV+7XdEjmmsdSmcURmLpkcIYZb4cYFk9ds3tUpBdbE6u\nEkM3vwlHH9Crfk0oZP2gWbZ+lsvb2pQfmbnr5TdGnYcBvlr5eaHCSGSOnKKd\nJY4lx1myPqTn0gx8a+2Fn37RPs8Cr52nsJ4BPPhCXA5GWrpCtzYSFVdHjeaz\nskrCssPSDbywENnwfDK8nQv428c36JIL0Yi2SwwZQAZm0VI5Yw25FNJNoDyA\nbr5eTr9ra4TOP8e7cRUgNtky1CXeITlQWvpoc6JLbPOc2XKGtrjkoFhxnxYg\nGMn5B/8yZx+0PkO/cjtdjcykph6bCqiV1eg1jU/uMXuBF7gHhC8iRkQMm1Xu\navQwrSq8/Ef+HLbUF9oACCsl0yRaOeKkN/tIQGRKlCwMUs79bCc+j2odVV5/\nndrlINNOpeQECIStAur3ZyK+k1OBNkNsFE8+vHVc04Szd5a62Nea4IqFimJt\nhucSTSrbbyQISSloK0j8aq1xOofSVTwXD0IxdQ/S5gNhJgEh9gDUawL3UaJ9\nmT7f\r\n=h4oo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.6cf6ba4f4.0","@material/theme":"9.0.0-canary.6cf6ba4f4.0","@material/animation":"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-indicator_9.0.0-canary.6cf6ba4f4.0_1605552585712_0.1203838636800032","host":"s3://npm-registry-packages"}},"9.0.0-canary.07f3e01b7.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.07f3e01b7.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0b3b31a21b191dcebcff6bdf4d07060b9d431b67","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.07f3e01b7.0.tgz","fileCount":38,"integrity":"sha512-YNWzNlDT+8N90Qz8Fu+Ivvi8MNPOhFhNfLnV0nsYaj2T/+Vz0/KbofpfWzaMvJapE4n3lwuTdoCtfK9iOT0l2g==","signatures":[{"sig":"MEUCIQDRB7hbXDibZkNN+NcF8zQqMv6EbHD8BAA4Y3Dt/O2FHAIgcAQXAafX16dDEkQLUy7Y9z4NMeLjCvj7FmDNaDnQkSc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsvL8CRA9TVsSAnZWagAA4YYP/A82LSL9xJF0z4AUmHWu\nbt/upMx6cKGRdBKckqAS4IGGMpUlU3MvBPnkVsaVkpQmLR04a1EvDIV7IoZr\nVRgK7eegj/Q5OMRCfLQ7y1rS7K2rAgOJFQtv1f9rBWufOj+u57BB11pmfX+y\n5xLqMC/7F0+J2kk3bkvl3U6pa3ams7eV8HeXjJCMfaXNBnsP4LMoOolXVTDc\nNK7+oEnGyyn27JRSGe8P8HtM7o4yXf+LzL4Ttq1B71FaDyu9BJKOC7j+PA0V\nUjh+hXl/balKwAyrivSBeZ9q/VJvBgqncpYqpGR8dYmN5tvKBIa2rwnnIc09\nPzZdZOid3Ndvy0Y3V5ZmzoEGydiWj+GIQgJPkHhBv5I5Fpihaa/yCkRc2pdp\nOxVHWvHr5Mx0S6WY4PMnVb3qRcitjguztzUWSi/E2xqxVJJHrl5/rCD5txq9\nuFkR1QZKkyjp5b9DgrkMxaieXlgUoXomWjOu9EQXJXe1v/CXWN7GYCYU8OG3\nfiswoNFKSgv7EYhWe4b663g6ssPIHQnAxOWOqJRfUDTuGkvmTySn0d1EZQ4m\n7lfaEc9Mh3eqWhabL8+59LE+SR6yxXCICax+SaRGxHDmY6D/nfvxyl4+K6Sq\n0at7WN5MBE4ZgrnagkEziPc1ZsDrJphP6Uuf46xiJ8+G2n+U2FTWsdp7T/R7\nwXvX\r\n=yfGH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.07f3e01b7.0","@material/theme":"9.0.0-canary.07f3e01b7.0","@material/animation":"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-indicator_9.0.0-canary.07f3e01b7.0_1605563132421_0.48522699243605394","host":"s3://npm-registry-packages"}},"9.0.0-canary.23491cf85.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.23491cf85.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"d0fbe63c17274f1425ae8b00a013929cff99c32c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.23491cf85.0.tgz","fileCount":38,"integrity":"sha512-9qfoxWP6j4Z1wOiEa2TvQ4RKsZYWIyJre+e7Dik/KcuLwswxj1UqXvNGEp0QIweyYXzDSfkt4W05j2p5wKPEMQ==","signatures":[{"sig":"MEUCICgn6Bm+qnC8k3ERuMf18PnVKWBJUhegcjJLUTaAZnZ2AiEAjpPSuFdWB8EIwnytY2aTABkSoRucP0dIW6POm+GfIfI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsxaBCRA9TVsSAnZWagAAZnkP/iRfw2Docvc+NV3QwEe9\nBS6Qo+2Sm+yXH633wgmFYfiINl+CZXxu9dbiqXob7kp83mjgAICKOBEVvG/q\nnF1Zf2Xy3mZ/05AGrsuhSGTGQ5/pTWvIHYYeZGUNbytUUk0D2wjLTO0XYJNr\nCrHlS8aULipA/foEHPxovWqEQB2JLVEiFfWaTHoRUQjNtCiXLpZqOHBih1uA\nExcDieZN8SS/eHxFir92j8inZuhrBtJG6/6xI03eGJ/U5h5HT4gSo+HTkVcd\nCg2f9q/FRRZsKW8wJIOLyANP1wNjW5BJV6ryejvh+n3UD6Dd+lwNT74HkW2W\nrA3jgVqautiRXA+jFRV7W4D1FOaFYOdYR8O1wf5tdPYU+9hgqB/GQFI9fSY1\nWLv09I3byiXTTkpl/Txgo+/74pLV9vnFlcGw6QplUWFL7tRrcvArgojDC4dN\nwJ+XEHWrtf1Fy1x/ag92k6lQu7JctaIboNRObI6QSALekP6jcg/2arlZpFRU\nSKg96MKle6acvY4aY24o8AVgn1dGKK76z5Jlrm5hn02Yhw0aMsMq86Ec5s4m\nviwKx3slYpXM+5ZnANJc0ks8YE0ZnmdLhpVAEK/FyhuaBFoI4bdLcEPeK8lv\n4IApMGDrjXNhKVRn8PS2tFOUseCBD3Z02W0pvsxIw08Km5Dlfge6kBVkeAim\nFcCF\r\n=a32v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.23491cf85.0","@material/theme":"9.0.0-canary.23491cf85.0","@material/animation":"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-indicator_9.0.0-canary.23491cf85.0_1605572224435_0.4098250272702013","host":"s3://npm-registry-packages"}},"9.0.0-canary.b659d4fc3.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.b659d4fc3.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"feda1e48e5be0ed2a55f716c05021a56d26fa3a6","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.b659d4fc3.0.tgz","fileCount":38,"integrity":"sha512-qCVzIxjTWi+FcEj6Fe8u5bviGdq5nJQli5VLpyALeFLEij1m9D48ZdLAOz0fZfuGclWTY488Q4cP6v+dvvdc+g==","signatures":[{"sig":"MEUCIQDNVQqZ+/q0a6OSQdapwsJIE33rlXgygbTXKSR6ge5lygIgLRRf2c0QEoybqvME6uqp8INocrfpZEUGs3vgdfkEStM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsxhWCRA9TVsSAnZWagAAfxQP/jdt7JxYm0Qgr84gfsKy\nPJQzC/JhJmdGAsNJGGnksipBKH2Cf4dXT/k6wFvp4Bkeiji5cFFuL7HwZ3gV\naBH7fmjWf39PFuIry/HaEsi0r564ocAaQsu4Dl6GHtx01j6Qzo85/Ej/MyRe\nzuA6A0Xr/ABeLYzFr8F0RVMcHycdSvd59NzbuUQnhNl+XnnkdhV3QdUdHt8w\nmSN/acxpxzgvR5R0uxHVNbe/QlhIn+NgFW9qFhEz5rwhKbHnIA5fPM0jxjUR\nyK1sJ8XW6wX90oXstNz6srIhS1TfJSpd/bPHtYQto1mDT3H0XbPvNtxXpaQS\n+sSH/UIJVS3fQm2pOC53fSHAL7jMhWZBg3lSX8M4gZXYrp9kYcytlwbNxXfN\ncvzfB1u/TMpvw11bbXEyDixjWFAHhXBY9E6hBUH6e9QI0yqaHp29HIwek7uV\np3PWVJArz1WebvQy4QXTZ0HAUqSgQ4JdVJkHHFRwO/cVBUR9bPJ/voFaFW2e\nDi37xQaA9yWOGYCPTUetcYuZrDvqvtiok1kUleVn4FkpJ79InW1tWt/nFLTE\nCPz1ES5m8ZVivJEUsjHpEpfGPtZs0agG1m3H1uC3NO7LykvIuNGnjpGF9lyJ\nWUpg0ppN0gJtkPhFJJQZQzb60FT6rqlKEHSFw8oJzNKS8IpGVRSjHzUc/Te2\nrcTy\r\n=Gb2L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.b659d4fc3.0","@material/theme":"9.0.0-canary.b659d4fc3.0","@material/animation":"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-indicator_9.0.0-canary.b659d4fc3.0_1605572694406_0.46193985660152914","host":"s3://npm-registry-packages"}},"9.0.0-canary.d8a3aed67.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.d8a3aed67.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"795889473752976692e1d761e2dcf4d49eab48b6","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.d8a3aed67.0.tgz","fileCount":38,"integrity":"sha512-GN9sUhRfQFLYKRHlySIWmweimyhjPUfJxLv1vQNSl72X2c/+r6G2ikurv60sH8KHJhSCZaFBTBNuMjqDE3MicQ==","signatures":[{"sig":"MEQCIGb6e8Gmff5vRS8MB2+z74YLft4DAMtVOCf10cgAz7rZAiA/3VPWMhylU9oh4bWxc03Ei0rANx5teuMtaAVxcaID8Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfs+vVCRA9TVsSAnZWagAAYMEP/jNf7g5reY2bBj+MZO39\nrtdROcfOPnCFrI2gc8feHg5X9Utjw0n59edbVXXCdW5eBtfcFfXI+kMEFmJB\n4eIZ1t2moMl0FAD+F06YuJOhMcuImXMye6xlr730MtupZAi2LiAnUhhkFJ+G\nLtn2bzUQKrN6Wr/rLz/0QsNAzFNrjc/BnoLCrSTED9KFS4ACVD0JlVhadLnx\n8CCcien2qPnQ1p2JxjtWr6zqw1Tn5R4v70xp78iW3fd7g8pFnqWhd25nWoGA\n1pXpnJn9vhPX3PoYSbe/n+Jnk1kz4+QIsIAVf5JIwmVQ+Q+8MlIKBj6l5nEH\nmt55O6mKEehKPfLOA3swNEpB38PlUU51TClNRtMvGmz/ftO92bNImwVJWCbk\nCkI40apTPeS+Y3vvgxuNuJgssrbA/notoZr4VNT8R3M9avzjNY3Lzo/lLVyL\nrvWp2rkdOimwFPVWbqLY8miwdiqFbN1wzVdIkA4ExmmEWCBnRfHT/eLwThkp\nzl7JNKIas77lE5B+b6lz2n52PyOk1rpiYlS13ob0XEbXhTOywmrDVf6z5lwm\npSDTzDSiwsdgJwW1OHKyiykQeHN2iDJ7RTBv7ETdHnJP+m9yWkBLnEVzRmtk\nOWUzjmsvzP0vQFHbObxNUlf+KGYH91OnPa6xtM2YF686AxhPJcZQX0h+msdz\n8EPa\r\n=idlx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.d8a3aed67.0","@material/theme":"9.0.0-canary.d8a3aed67.0","@material/animation":"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-indicator_9.0.0-canary.d8a3aed67.0_1605626837337_0.17316927313295905","host":"s3://npm-registry-packages"}},"9.0.0-canary.482ff9091.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.482ff9091.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"1fa12b7e498b9bd782e0112d876136936dce554f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.482ff9091.0.tgz","fileCount":38,"integrity":"sha512-cUEclIKjhmtFuJVcyXbHNFSek/BWzfD01VpRaS208dq2NArfpln846OgLzb0gXQ7yt3zQu5JByiEuW5QP/CxPA==","signatures":[{"sig":"MEUCIBma5kuhGFh5OgYAZhUdiChCJh6wdGaWC8MeFkbukkleAiEA90hNCFihibP7/Y0DaJa+Ihrvfyq/F2uaWu1iKeeJ14s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftA8hCRA9TVsSAnZWagAAkJwQAIIIobi/KeGTh8N8BPW1\nBNLknraMi0X4/ygRS0Jnq/MD2UJhXPgG1uz6hYNw0AshcKc6M3VsGl+QJZPa\nabv1WONEvvDf5HkWR/1HhMr5WiGwIA3vSruBxOiOWHjRxBHjHXmawHCkSKNe\n5Pcz2aebjHYGfvXYAcvvKAzi7Y2/BpcnMXjTNurx1KN4DaQwAtIQ9elu/P4u\nuIRXFCeKVS+QaeOIB8f/zlnfSGSIDYYmPDoIEhweOHTAKJoPjlDY2/kSYJE7\n7qMLWbJl63eyj5X39Q4ooPqZxTy5EhOavVfZlu0ppxVyhuc9+rWK9dPUapjW\nJAP/ztQNa0bLVwFWhTNGYPn/fiFZk+x2mrnuq31d+Yl7jGL6b78QUgiqfqgb\nUUWvvnW7XDaahui81Pw5CAJOM199bF6jEqk+vVV3mGigYfyZ8SbfDGTvyM8L\no9Nnlekxt3uTmYv+xP7TcQpa5TFNdzX/eWktbIWCnezSpzPFw1zDBX8iPj8j\nGRTar2caocLc5aQrBpOp/ziGmOpu+0dmJEIQXnAbQRbptWjqgwU7Svgd5ub4\nrTqWBJvz/I2/WNzqwFwz/px+ulMFz4oybQuRxWPSkPKKn8Yj4nIqVhjCxGg6\nVWeOKgvgvjfFjdvA153xnHOb2nVcVUFGQBefRKct/EDrUNJz5uxIc6pWLMag\nVB7A\r\n=SFo8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.482ff9091.0","@material/theme":"9.0.0-canary.482ff9091.0","@material/animation":"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-indicator_9.0.0-canary.482ff9091.0_1605635872516_0.3432096228451931","host":"s3://npm-registry-packages"}},"9.0.0-canary.99cfb6bd5.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.99cfb6bd5.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"7947718d759f2a94a6c437377b122b67a8223a7d","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.99cfb6bd5.0.tgz","fileCount":38,"integrity":"sha512-3COmNiy1MPajAulx9mQkeqzJeGqmHY8jp/ffL3hGTkb4nxYMaG2kjYTw1PK5WeYsyCWy3sh11fIRPd9yMFePsQ==","signatures":[{"sig":"MEUCIQCGS+bm/ksS7EF31cZDNY2nmbGxc/kw5B/wHdjb9Ct7aQIgALBqjAQVcuo6b7w/nrUGTgyLSihTmx50YSfL4nXu/Ck=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftWtUCRA9TVsSAnZWagAAXQ4P/2iM0UHG+TgUV2WSh7jh\nuSEBD9mUja0WYGyODJTWS1bS4EsZ0v92/Ru78hZwH4+lxI2xnuNjcGYYXHAP\nMPiklWfvNpWV3Wf9GlF11PbzU5LGsGZfX+M9l11gUZFZkEN1P2E5zNnjiyJ6\nCTrG+AwgOX+vuU02f69p531zX0T/poQaFv2NxbXTy/mFtBM+PHwGsLTgQZ1/\n3aHavo8Jh+BeWfqMzTLTUDqM0zNDLhPEAFLTmjNqKwys7eAnM0hXcmUvrhL+\nBT6QUCWndIT6TRPLFnl1/bn7SYcRvZQ4Qj5oAE1NPPrDf/fT2ZUCKT+2GjzQ\nO2lABWpuZuOZ0uQ9cRfkKrBxugwLuM9b0THNzR4yerPEnNo6gSVq7XgptkIS\n0ahRalZNlUE54hktFD9cPWd2G9O161oGAilbj35CdHDOlNpnCWiWnuHLMqrF\n4oiN+EscrlyhOCiivRI+3j6wfVC0NI+iK16kFAu/VZEVXr4JU/RF6MIkNNIk\nPklBpiF/kMEYwxOJW1bqYZjDkfTX880WI0Q4dc3TLyMcywF3mNJjyTXI6Idp\nxhypWVLJzywXQUslgS8ql3HDbGZjkZbME3IlUUF7DdJHrtNToFQxNe/3hkD4\n1OCv1X3soowlwqCRDVG96/gXzzT6b2wYChl8upyFFlEkezmi3omrRGxsAtff\nPD3l\r\n=lGmT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.99cfb6bd5.0","@material/theme":"9.0.0-canary.99cfb6bd5.0","@material/animation":"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-indicator_9.0.0-canary.99cfb6bd5.0_1605725011752_0.33817301765648233","host":"s3://npm-registry-packages"}},"9.0.0-canary.b98d15d90.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.b98d15d90.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"7a3e6f2f166d3a9418047b5e52fd624f2a914998","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.b98d15d90.0.tgz","fileCount":38,"integrity":"sha512-419PjywsjIdmoa2LQtyU0O6tikB80j1l/DavpRCeKlYAP/vBQQjtPLNbNpf+7rdMUQICBFIc+efe94MTKkZoqA==","signatures":[{"sig":"MEUCIQDHNx0nSj5o14oQ4rlJso8t6kIMu+sKQ9zlOyIZhdDmJQIgP3s/ga5PUwNCgN7zoi9JlvwdJjCglS/eVu8rFM2NUz4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftaGCCRA9TVsSAnZWagAAapkP/1592X3AU2cY3BT2J+pu\niJot8BUJ8fH3QrO2uEB/1Sq+nf4sjGbAKu0ox4dVptTwPUHPyHwi002bf7C4\nWkXG/osQ880RQVLqZk7zS0BYzsUP8Nhjoc2HT5evvlKSxwYHBs10m1g+FqNz\nvwYHBSm48MVP1g9bTpSmlzWZCtIVUcpjn/fJmfQY0wl4/u+Bir/ymL7vwNth\nXhFFyAHy9hKLIensCqwdm7zWH0KHT0ZXtCBtoAeVNTymixY19pMYCY8k+deh\nRA9EOd5nhaisYFiol8DIWaXsCWDCH7o9ovdYh/GN9q63QfAl7dezm/rd2MHq\nhWTIEP7xcfEIBOuGxH+sAQh02I4YXIaqQKmGn3ilQlPVFjTZ/uS6hEq6frZE\nLHJi6WcKTVsXwzgDljQvQcvcZN7TyPnQlzhBY4bV8W3ZbRD67qazMWWJDKoh\nqZ+U/u1zGltdyYS7MYOMRE17tZY5x5buW+M+Xe7Zl/EC9LgU/qCDsHr2Cb6N\ngjrU1R63mTcgEsEpI7kjkm/NAtirJJkc2h7S0kRwPD6x0NlENycz2I1ddHyH\nGDAVebPpIN4+mToH+5j909gqDlHAg6fPHF6PRYC9KGekNGS+UvHkrJ6Nou/G\nUiHXSGfewsngRHKR9+Gn8fwRbDSWTdXdXNAN8DjCqpEETWv1phE232PjQBUU\nOYr5\r\n=qT7Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.b98d15d90.0","@material/theme":"9.0.0-canary.b98d15d90.0","@material/animation":"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-indicator_9.0.0-canary.b98d15d90.0_1605738881765_0.6567882900399664","host":"s3://npm-registry-packages"}},"9.0.0-canary.30c11bfc2.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.30c11bfc2.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"4a68abb56fc7359c1fd65bcb23611a490fac53dc","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.30c11bfc2.0.tgz","fileCount":38,"integrity":"sha512-sYNLmZP7lS6mzCSScR5hBwSfOPQUYspxBCQKy0zxA1rF5kSDoqO8l5U1TdcRGlaHLuEp3Rq+DPvPGtY/EGDqBw==","signatures":[{"sig":"MEUCIQDZ/id1DFoCU7yVfTXkrkBINzmZyEwokE6UVzHlqyMS2gIgeOouyI/GKVJ0zQ9+Joxz/uKkWbrCiSaV1jO8LAKrvzE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftcmfCRA9TVsSAnZWagAARtEP/28aNNlJXyDMU3f3WUst\njUgoosvNdR0rZJza1ah0UXZ0xdElkjVrUcDZW1T62wHYQDFfQxLOVflFNBcd\n1rURMKs87HyVgKjCprrjVNctTGnwDi2EaFMHvQmUe8+ZKrUAsIr8f8jaj4ZP\ndwmY6LUrWLXgcC0E10m1/Pg1cxqXk07xuYCJRcvTYh7HD/di+WoiyHRldNTC\nFkWe72PUeafGesrAscE74GA4bVxFIWXCHbGkvEiPIrBuPyRA8G72DbBSlKYH\nRa49I8TNLNPgozY28xO3EHEpYF4FKPtlp30+Qya8FhPIoRrPYnMgrwwkrkLS\ncTgAKSDNNNHIk4fZn94B9mklqN6JPcwZkuI/xqYPBLAOu+z52UCohg/4UsJi\n/gKqqsTOq6pYuh9C5VYS4wXUAzG89A++s7XssS5kkdvFf0IMWtThdqjZfOZ/\nkdsJBQ4PL7J4c3Lus90hooS6LP+c3aEQS1qDX+kJpxHsKEWag3mphoN6qgVj\nIdWh2noGmOGaJFYW1tiD0r/UgQGh3r6SPOE/fE9G4UaJfYdOQoq1Tb0scApz\n/mxXawuSY5DuaNlYht+faEV3P46H6ytfaVe3S6wMAXEY+AKt0mwyvTRptHB7\nhtsDR+Hwh5gYnxPKYLcjXIV9zkeByaLSbk9ZXJwbUNYXVpfPOfgiTJ/oQLY1\n8Ayc\r\n=yg46\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.30c11bfc2.0","@material/theme":"9.0.0-canary.30c11bfc2.0","@material/animation":"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-indicator_9.0.0-canary.30c11bfc2.0_1605749151116_0.11575643642778743","host":"s3://npm-registry-packages"}},"9.0.0-canary.1b731d51b.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.1b731d51b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"6e7f482bcdb8f2b827b5c432559d32d40f12f032","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.1b731d51b.0.tgz","fileCount":38,"integrity":"sha512-APUb6SgEID+URTbgjAiyQ0FuA56q6wrpVwc1p5DGc/9putEMy167oNOmcf+RDbkGgyHZyePAniYs5pZfNnPTEg==","signatures":[{"sig":"MEQCIC3ewkMumCQqaG2aob1U1D10VWRVRaczXATCaD/psrSQAiBldgVR592xrDaDhEFovULGHBhcgEZxodMWpbUhORmJWA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftr7bCRA9TVsSAnZWagAAjBQQAKEv7y/U3VeofYKzGY1L\nCWuSedxVvsY+2IWY2Zdc07q34ftf5hS7c8M9mz0hZZNrBNldsMgYgc9F/tDF\nG/az8aTlnQC0plf3cSdjUWIpgp8sDJ0iwWPi9GRmAuPfDPQF50/beByH6vd/\njnpxaGVwQ26rKp+6cHQh09CpUu/lKpR3fqdoRusu5juVU8/7eNH1U7OIO8Ee\nz/f8sKNGtRS4fDDQFQkImbKMensI8GC5z4BHwQzKYOLuWON6zZ7mAeKFaCOP\nBMa9hRsoPozbaMC7od0CKd4jH9K30TIQ3t7w0UQAvZB2S0McKXA8+yDykC9F\nLTtcRAUa5dWPBgRRZEAy0zyArb1NniZi5l8Kp0Yfe5gegMbUoOyZAoS4pYIv\nOk1UipyQvVmD/asiDIOmzxU39U64r/i9tjnMA+iJ6eDORuoNS5Qvpw/H/o9T\n7nhZ0d+0A3M0jdEPR/9BrTCsz09MLGWWbEZRcu8AefIvQUI0VvqAMK7r+fJ1\n7FznYVIIZZNNUnQH2Zc1eTTqRAxjfdz6E/ZIR852QQ3zwpPjtrglM0od66nF\nFpbBaeryPb2qm9wzDyT2E/ZODPPZ2hQNyct/qnVxmt5kT5nlw8vE3WbRfA7x\njieYy3xyA4aJLMwz1/bwtGpSMbErj4x/E8lPsupqApwujEbMEqtMRWK1unO3\nWyxe\r\n=qreO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.1b731d51b.0","@material/theme":"9.0.0-canary.1b731d51b.0","@material/animation":"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-indicator_9.0.0-canary.1b731d51b.0_1605811930592_0.4272136181291122","host":"s3://npm-registry-packages"}},"9.0.0-canary.4ae94ff78.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.4ae94ff78.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e69e5a99ceb20322cabfcc0f7c0497e672f23414","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.4ae94ff78.0.tgz","fileCount":38,"integrity":"sha512-/o8+rWXKhKpAlCIkadFIHvS5JPROsswRcL4wmdFLoZSENNNWNjUMPr2s4PM4Jy+0tLx4OtWig46oJiL8/vO8AQ==","signatures":[{"sig":"MEYCIQD2ViGrIYDI9OtcGg1N8+3XSFjhC3VxxVp06wY7G9hvfgIhAKf3joAWJXTwttpYFbpbmpAhb/HJW2D4+cMCiC7j1Sa5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftr+LCRA9TVsSAnZWagAAIZAP/2DTeZGCiy/LnsLR8B/Q\nluqvtY3ztTwX3T7FBouqLf7LirnMMvq4myJiXLTvkrxQy0wUmF68X5YjIxOr\nopen3CYP2lOFQQhBqprzNLhc6QQVNxt1+LajVAQtKvvXpmw6pcSUC2Rdsc58\n0ZyaokJjoXUovuSdA3UOHmyZPTpRt7QZ0ACcY37NZnjboTGwGjMLuqIxFVp4\ntA1mD8xNCKbmRn60aXY/pPj7Jk1/8TnjXBC6cFxIofYYWejJlc4p0cfLQoL4\nmlwy/bjA5QCEtrUElaiBGJ+wy10TdeZ+D2F4o+EexLFZMnxMCNYvVo4yO52Y\ni4r4ylrjm85h+ymuYzLDNI76QzSXpuSeqBM2lo6TK2RlFbeMdB+Q3JlDa+Xu\nTF4wAqTZGgPZxj08VJHjZ4kYavT8xxIRt8M+bPSMrncrwL0Tpw/n3BDlb2TJ\nwfdmxMikaSwIubJfe5Ckxqe8U9GbvjDXD3Je8CiS2h61Ay4ankHcv0SSVxw8\nt+5aOqiQZbtDfPw34wh69Mh8rDyu5HgC9z9NtKxJLgvbWKbPhsRMR8fc6NvK\n1xcwisq5DcUzSl6Gkh92A8+dhEMbILropMqSAqdkLyMrpq1ur/U7m0tCwCck\n+IlUTJsBUJot0DSwZ00WH28t7UscgRCfc5XSMTkZMMJKpbw1WzvSXHvXMMmp\no6Tq\r\n=6Gw8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.4ae94ff78.0","@material/theme":"9.0.0-canary.4ae94ff78.0","@material/animation":"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-indicator_9.0.0-canary.4ae94ff78.0_1605812106907_0.9645029070160906","host":"s3://npm-registry-packages"}},"9.0.0-canary.7ad038e1d.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.7ad038e1d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"f0e22f5ff562efc74bb75f19979030c45a75c5fa","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.7ad038e1d.0.tgz","fileCount":38,"integrity":"sha512-49LAYDSHjjlKlE27qLwwg+c13YfLHcwrMvQ2WTf9S57i77EEkrck39JzLBKyNVxNe3oLuqqT6q7ptVIxKUxUNQ==","signatures":[{"sig":"MEUCIBQJAXKjYYUD2sgvxvn06tddkJayTsnzPrcBtPmddZo5AiEAvPau7A2InvXC2eEbPgwuRm4CivB4rZGeEWoPT+xDrns=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftsTzCRA9TVsSAnZWagAA8Z8P/3cIMakeUSWJfop1CTfV\ngM89PV51AAcy2jUtBiEJ4HlKzHxIkafe0e5EEjfSfFD2pU+D0r9BPHV5y7jV\nZCVmGZizQVv4483cn4/e3ljP828hq5n3/Cn+Qo0SmhrdXrwZU+ZCgDYScCT0\n98MobjHufPoDDOgFgNsi90VLdFyUAZwKwEp1rRvxB8/IKN9qtV3+E4Ql/Efp\nxAExwX+Yr9jhyNcTpm3X4ADgjw5FGjlQ2LsHlXHHtVX3rxZthe9fA4L7I7W+\nYVid1Havx3Mkgt6+dwSPNwwnSDvd8HOfBhO5ABd2X2f6lQylaMtJ8uMU/22Y\n0ibTcKse70AVusVTXlA17lelgDlIHr1sH0zvm0jthjiLqL9EbmgqqJyDoXGW\n+7VWlzjH1PF3gQTRx/6xxP3fPyNMke+YhJhYvSJci/Z6IKRYd+QR8/58TXo4\ngFYOwruO6hYF9KK9g/6V8o+SYMxGHPeXVyNFTj4MfL42UNq9cgvdPQsCboU4\nF40+lDrx1At7WFFxO0huXHGa34g1sYJ6AVULqslAGhXqcWJ/pb6M0/ZhPVZH\nuQeTJyprUlTmd9iq40DJ6mxgCruO7d7MoEpW5RF4OwohMR8g1qQxz6a7onYO\nzJeoDnUrmh728AAOxm8YY2Cqaf/QW53YHxecdCJpTw7kVCgUIBMzmFuVlCk4\nnk5W\r\n=F/tc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.7ad038e1d.0","@material/theme":"9.0.0-canary.7ad038e1d.0","@material/animation":"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-indicator_9.0.0-canary.7ad038e1d.0_1605813490744_0.08738896334031954","host":"s3://npm-registry-packages"}},"9.0.0-canary.a41527604.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.a41527604.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"6074fdf57829e1df5ed1b89a1be845a2a4a89bfe","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.a41527604.0.tgz","fileCount":38,"integrity":"sha512-rkMu+2XwaNXD3XZgBivlCf72owWkhZzJEvhmrbcB9qRz2hfZ9qcjjE8kSCC7uJAiIwPaf9u3OYpGrLFgud2vOA==","signatures":[{"sig":"MEUCIHtE76RSs9np03HUwUfMSfJRHsibb053Ek5N9QSGhyO5AiEAx1Yp/IYcFQSvool8NHyBoxXUY2Z7vSyDcUEr0r7KI5M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfts67CRA9TVsSAnZWagAATQYP/2au/EKYTglsIvWS8TIz\n7Nwx1J/sypyxcDkB0zNovJJiUDnkBAuoKkC3W+Ve+XXi571mqRKNKFcqmsHr\nstn20kF36VGoIMtWYIoHC1lh2W5TjB/xex0Uko47CZDmHpV+Bu9gluWHnmd4\nwApPVanwCu92lN7WAFddtLk3RAJbWLOqBpA1woFSOYkdvTh+/lNYR200eDYn\nOn5gColjkRGSuG0rOJD5oZMsmQvWskpXn+/qM4+B0jY9VU69AHhNgLGBBqso\nhY6UBt6Lnx3sCc4R4U8Yq9UgNSJWaT2Mwf+ZVxPmMayD6JDf3zqQm4laiZX/\n00vI/jrwOzgND2YD1ZnQIePpbr8azM0mDfAYwlhcpfjzrvGLHWYgGurTQShY\nrKWrjT1bMsGBuP1HrIkF9jSkKazLUfAFPucuYaZjZBNleEXTViBuAudCiab9\nfwfP0Iqt3gqHIPM/Ck5pi5U0cNr8EAAUcaBLJKSMYp6/gtRK/5Ya4QD/6dBC\nwl12tinnUj60V5BoLe6eEVIL+NLd5UAxAEArq3LBpTArWW4VJoanWgldNBHs\nIrTroRRFYl4+9wi41gv9E3xIBgrpaUgSoq6MIMIZnOWLmFvj087GIgmiZ58p\nBP/shvaiKcrg2jdgkFF1v20qZkA78jvV63g0Fj3sVivyGr+JjMh2PX0q+oXO\no1dZ\r\n=nDxR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.a41527604.0","@material/theme":"9.0.0-canary.a41527604.0","@material/animation":"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-indicator_9.0.0-canary.a41527604.0_1605815995229_0.19068466315107524","host":"s3://npm-registry-packages"}},"9.0.0-canary.7b0e2b377.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.7b0e2b377.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"76d2484201e8ac6c9a66bb9559dfa239d93e27f3","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.7b0e2b377.0.tgz","fileCount":38,"integrity":"sha512-IrqyP94hAQCqU8QaAC0ZzIt2ThJPxFcq3gpYueuPvqwUCl9F1lJav40ImvczVTG7PL+fJSI73wJSpTVKpsIX6g==","signatures":[{"sig":"MEYCIQDIQ6G9OSZ5QaCLaRFIv+ETbxuBlZTVkfkkcRobtyBewgIhAI5n3ohj27pNE6CDdhd0QQZ96tXPo7R0z2nIi5rjDrdC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfuElcCRA9TVsSAnZWagAAbTYQAJg3vYo2BoNfQIrW2gfz\netukmUy0NecVdZxe0iIqY694ncITAjnd9lk2UaAAiMthvaKg6z36BRP38trp\nMlqs7mgJJIdg9oo4V4m0WNE+I+oBSo7J1ZyOYQiKy+RGN8wCmru6/FRXBydu\nWWgoThh/U1Rarg+h7F1DLEpzRPTC3u3V6nvrE49xC5wlyeXaG1na01i8QGKG\nbfgKQYKR9+smxdznfxcl1x26yfuS2+q3bxKcNWnMTpNHO7msS0y3sHv7XD55\nUf51ZCGKc+2DSy5zaQ/9zet2IxyFGiYZbkOazbmqxvDwsAOFfYak6CHN16e8\nHiLAYAAxSAs7mHSzX+An7fsRwJaZa/77BN4IcZ4/l7ScEsHx4FQqFT0tq5+j\n78oGLp+Nj+4M8VKRh6QRm5b/ApqyZYNSIYKbFzF+tVN5dRhnLUNyILuWiEFi\nhk6kQr3cp2M/yXh/NdU+NBB76aIJ0ktknL7B03WpIgD7B2t1QMdl16O8ozZ+\nFl3Mn/axElAL6tB05p7Sc06t1MeiRjFUQX112NiSk5/89Ws055AjvgVaGf7I\nrsigr+vm74/OIiFbmSglKpFdkHqbKzZ6JKO+cEBHLtwqkQtxTfgZa3wcJZt0\nnpjm4fwffivZ0XnanKSMr9/D1aNNJfKgYorxyXXCUdv8N104a7KCiZnRGe/B\nhv7S\r\n=bBNH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.7b0e2b377.0","@material/theme":"9.0.0-canary.7b0e2b377.0","@material/animation":"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-indicator_9.0.0-canary.7b0e2b377.0_1605912923983_0.9902343446305479","host":"s3://npm-registry-packages"}},"9.0.0-canary.c927a5d05.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.c927a5d05.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"04e4e23870f4d6d47a5f9370b02ad5112fd239cc","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.c927a5d05.0.tgz","fileCount":38,"integrity":"sha512-WWIiw9Q/RX+CKt/Vp7vMR2oioUANLA5R28nhq8ITcASG4jRFuz7ygOUIDWfsQDVekCGtyMjv2eJrU9+c3qcc+w==","signatures":[{"sig":"MEUCIDxymcUjshOsCoZ2ZPJmaeiEDC62ZnTRT9qidWJ8D4stAiEA2qlD6c8iXJ50hh2cWm7Rp+n0p7qjRD0pfGAVvLidroM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvBHDCRA9TVsSAnZWagAAMRgP/0ReMXtwOexZX24mzd6R\n6WaOhTcbRdN02rgjGdRZmXqa1xVHlGl/dmBPxpT/KswV2KU7hZdVEUW2LvzA\nL6skUPTUdqkLuHr4bwWwLLalXj5kB08X0ThKsPZpmgbcW1w/Smpm0M9lyE50\nNUsIKMOdZ1MJmieJqnQ1E+gyxXEACzaidQotOq75lOvJrjWQ0CB3q8QNAX6u\nL5xNegcqc0s2EQU/KGeDAMCl4F0zbf/a9+djcRPOpMEAm4IOEBg1HA6QYHZy\nY9x+gjkmmGVTjoan0ByFy/Jj61Wd4NkaFf9XlX6qx7k2dAPeCvBK8seT2EN1\nhsq1/2wFGGv3GQbRs2nLzk9dyzNaDlHpkpJ+eL1Tqgzg9+c+Vs0bTBjxsKE6\n5V43DcXFPzZJANvRKv676ntubvbDuWqKR7FqxMcmDLid/o95748Q1Iakn8pl\nXedeDITD8ib8q6MnwnnQcPCSvlnwz0yGwJ/RN3KPGJ/jWWwHNPDR3Bv0jhAv\nERgUSI3LbKd10fKe9aYdliOfF4G1t4pxdwclnB0e5XW5cPzYiXYoT96rnc5I\npYqLAeGnBFcm1zVQ/pchapCOScbrtMzNMJzn1zTJ++nfT9HzRTLzZN72nw4a\nyNoaXdJdiD0EkUNdVT1BK+x4bT3CatDhOBUPOzGOX7thEUUieo4MbusWNC46\nI4Ho\r\n=5fgb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.c927a5d05.0","@material/theme":"9.0.0-canary.c927a5d05.0","@material/animation":"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-indicator_9.0.0-canary.c927a5d05.0_1606160835303_0.19420371136179648","host":"s3://npm-registry-packages"}},"9.0.0-canary.b349b5185.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.b349b5185.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"30e4ce962edeee3495dd8f7e05c28f7c9923c6cd","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.b349b5185.0.tgz","fileCount":38,"integrity":"sha512-GwVq3YGra+G+JHHaH462UJfge2VV4QXoG/H297eCbPxMSV5krzYUvW7RYt04qzWZnteQJCmTod1LUXNfvTgKvg==","signatures":[{"sig":"MEUCIAQD2orqS/EMTkRAYUMSx06GCww9ktOFp74F6viOAxOIAiEA2Z+lkcGWNCmi9ajS0PYs0YXK9j8DR/65egFtoJqa1lU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvT4VCRA9TVsSAnZWagAAV24QAJNBSkffK43loxLdmp9g\nJUyOPscH5jl4aH1tlKh4kV0kYy2nL9RNLHomUBCAua9rFBLysDjA3AX4u9j+\ngHb44BOSMZlw1evQVgUBS01lOUICpnZOG2xLnjct7p4Cbxso8Bk24BvIgoi1\nfbRlXEM+ogsnfvmns7/SnAz7mbtNGs+e5tMrLXdr597DOYVmB0dwa9WZoUJ/\n6KJjE3raVr2T1Fplm16qjiXWcXQmKe1QQRpaCrCFiC5LwHc+pNwHDlSQulp1\noe3gOC7RHViK/rlzo3ogm93DA6baztR4H7+ab7p5B+3xckForowVmQBq3Av+\nv3EoyJFpqV6/QcKSt/G8A9YVHCUhLP5jKmx3oCHZpD8PWv38ynmygl9mpiXk\nMNFobA948k9WollfqI6uj+zisWu2F+mMuiiYu+5qpG0HY3hLPer/4iLGc/fP\nPGv+uZa9JH0Pj6LEWWB8idHrd10+oFL9ZhS3cAsRLRAHO2oglacUd5+zMQPH\nQLHLFrN7MBJQhW4LmFZ+gK9o1wLkvSz8Sol4tTWqc/gilOqc8qwH239uF+M+\nmuS93yGK4bi2BH657vPNXKpH/C94vSW4hD7ZrMBQlHR7NAecztQadkTxj8br\ndHCKxw+E1F3uvfyKlh/hoKh9hBU2NJ6r8jJUQtR9VAIThT37ohnpK6pIg/wj\npzFC\r\n=8bX/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.b349b5185.0","@material/theme":"9.0.0-canary.b349b5185.0","@material/animation":"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-indicator_9.0.0-canary.b349b5185.0_1606237716676_0.2926451396438434","host":"s3://npm-registry-packages"}},"9.0.0-canary.9083b7d61.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.9083b7d61.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"da47a2e6a25de6a50771819f051da75946125e24","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.9083b7d61.0.tgz","fileCount":38,"integrity":"sha512-PaoH7jlzq647X3JJnXNAizg1ZENqtDtGo9UmCthLNFVsaUweuBVfpvPphbUuWjI/FOli5kYW3gbDi25sB0cOPg==","signatures":[{"sig":"MEUCIBADM5uT9gu9a40Ry1zpjlOqozW3MoY4NDkKVkWpNavUAiEA0hmkWi7Bp+6+8sLg5K1dtq20FQEChubem4nfkMgm4u4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvXftCRA9TVsSAnZWagAAh6MQAKFLYO4XSxnEeDAChycK\nPl2jpDwy0/camq23A4wHh8+qo7qhAyda7LNtq/Vcy/Ul9b3Y1RZsCZZqu0Tb\nbb4bWGhjrdM0YzwKsts0Nnpz/eVl4dbJoaOqcb2IO/dUQSr2CGzt2lmzLTRq\n94sW6WVSZj0qZ+uG+xR3jcFMECaVprCYlu0yD05CINNy9C60XZOr1FHiZE37\n35f0brGpCSXVMvprFDoeenMrTSBjuJJzK287aXKX0SgrHXb9tykWi4yqECzT\n/6A10e4pZFZnR0wY8lgn1rUgxohh0AqO+cz3gVM7Tb9+wmFjyXMRr8uO23v7\nlZWZZboN8ogSiaclAQMYCh77nA1IxQoVVG/NjNAhafeIJD/MRn+x4ADDWrB5\nk//ShU17oV1gB5ugKFq4PGqoMseexpQfkEff7hnyZfp6aCXVBhyrtqjpb6O+\n+MC0Dvx+KxxL506vhfsNoD/NldjymyvNBpSXWKMnwFjdLNubbr04dQknf67t\n7OtD09VZsCqm+DFEaF5mvXiKtrB/QcsoN+Q35dRoRVBR4Smv2QPtKIzltOCS\nbRZNoIluAiMVA05Wol0x/o85uEHvbiqX0AGh6h9nSS7pthp07SU94MD+PvOl\nW07bv/MYKnBQcvzdllvYdRUuWCdPzjp+pvdYxcsLYkb9qgS51+i8S6X4tDGo\nz8KA\r\n=su3n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.9083b7d61.0","@material/theme":"9.0.0-canary.9083b7d61.0","@material/animation":"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-indicator_9.0.0-canary.9083b7d61.0_1606252524655_0.0727095769263375","host":"s3://npm-registry-packages"}},"9.0.0-canary.eff7b46ac.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.eff7b46ac.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"1c960b4ee7c1bd5f88a420575a473b5a8d31cacf","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.eff7b46ac.0.tgz","fileCount":38,"integrity":"sha512-QLUrSleDMY+lTaQWOvzS7M7DRk/qwvW1TvGzuRFg7AiUsElyonmnT9yvLuqUeBhuRM/D+PF57mvk93NtB1vDsA==","signatures":[{"sig":"MEYCIQCSJwD5nu+FvY03u6f5Km23cUDhLHl7cWdYX48syIj9wwIhAN9I6ud1dyaO1e039sDVZt9LRQ+OAQFU+cbgZgH6NU51","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvZepCRA9TVsSAnZWagAAP3IP+QFmDZiHfaqaKKzQH4HE\nC2KGojBmxdPrfno1F25i4Tsfas/KRqn/gLZ7wspjGZfmTg9yz6XqL/sqKULf\n3nrDAwiU4MXte5cM7fclDAFbHaBnNbXZHNpp0ajuLWqjpuGAle1Y+eAZmGGm\nE92AS9JH2TtZVbKyZ83p/O52npkP5xf5JU+4bsncThFnujIpDOCrVAMf3e+W\nRlzZT10bC4/X/mhwdfp25bBKzSBRWLuAH0ztxx8KBqdmpFqoxbsSmrkRBG1n\n4jB7m9RD8tesC1m3Hre9J0t0EAR/cJcA4/QzTVI0cFY9q2s7j8vrFmGY0A7g\nDd/UHfq7921OVYX3yLNdXV1LLUPy/Z5iaH9ycBwN0Y4AehaUud+igAQ0GCSu\nyt4N6fePIHef18qT0285dGwgWMT4CTBfE6tmJI3Jqdduc+CrpBivWDPmqZ2e\nKQI5wo34/kKBPWsIowDGUezuKlTWqrjTG8EFX+aabXLl7lLeChRDoKnL4h+D\nCn9LfiO7bpKkp1KdwQWQxDgae60y2KCTahkqvmBmosO2ZzfQdTfz23bSSsju\nZ/P/2iYdimbBOYhmyr8HIuVlp/TMvrbMYc4vC1jMOeZ8E5gzbtJ1vba1JK0W\nGf2fHBq2xQfqHCOx0AXwTupP7KJkKQOk7p6xSzsC1hvdEKU7lRJCFlqTbnbR\nhYm6\r\n=Qu9u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.eff7b46ac.0","@material/theme":"9.0.0-canary.eff7b46ac.0","@material/animation":"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-indicator_9.0.0-canary.eff7b46ac.0_1606260648885_0.825272514194975","host":"s3://npm-registry-packages"}},"9.0.0-canary.ae27b44b0.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.ae27b44b0.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"04e44fe47d7766f01e28ccbe9fff21b6fa5cc9dc","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.ae27b44b0.0.tgz","fileCount":38,"integrity":"sha512-H53/sGeYFLl4NejujWGIhiEAGeT0gIjtyBu7fo+xaW55Dx7H2VMJxcQ1rc4ABIT8kfvj7WJk9zhKC0T9NGhXMQ==","signatures":[{"sig":"MEUCIQCSshossrJIXHbZAtglu9yKMAK4KHieSTSpmYGDL94JxwIgZ0JK/FyIQ0rkFp166Ny1+m5eHHT64wtC9V7bbBQQc2c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvnkSCRA9TVsSAnZWagAAE68P+wW69mW0PTtYM6qR0fCR\nUFHEVvqWI/4YYM1kkvLPQa541uKhOiwq+uw5ECxMFrgdSwqfAXnbbwvYjplu\nxahWRlXko6nc6cy9rQiOZ4N6wuJa+Ms2eGqJp/sUujsFsupg15uGb9o96vIc\n5syIghRIbOdVrEOhHQrfOz0E2303Dz7cw+T2wD0/44q6vJvkcbX0rh5LvJAb\neX8SNrJNj0ssnO6zdeaeYUUR1QvMB2Z7sHvgtanC/z91p0e2bmB2ME1gLc8F\nsx21SpaeshY0jQg+AuOQxZDGmM9xRQojoFxO77IkJ4lYXjGTIfhELOfaB0Xi\nqX6gvlLAqxKnkmBzmCi4kvZHKlJhShDw7F8k1fuyy4m7HawwNdIQ++afpBED\nn5EUASJWe3lqGXTuSbiYr1yN8dWgnlSWrsVJ1FXtR/JQvQLxf3wj9vVs0/oe\nuvnW0dIj483cs3A3sKF72XheW2aAhfyZiuAE3AWnVRAzW20xXlx6IwrsRlos\n+c2fU8lwGoMkUKOmI2/0PourI18TXcxrAHh7XvPU1v+3pp0T0qhfysd4fLPJ\n54+zWPQiQ7+GBNvhQKdv3Lzppdf6MFYi999HZWo+Qc6wMUAuGu35ZU6xKpha\n0vGjSRltAyazR4KTtUEXQkEpZErEKJRTlgPGZyvBR7DKeQ3olqY89szMAP3e\n3n26\r\n=ZAFG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.ae27b44b0.0","@material/theme":"9.0.0-canary.ae27b44b0.0","@material/animation":"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-indicator_9.0.0-canary.ae27b44b0.0_1606318354405_0.8483139019904615","host":"s3://npm-registry-packages"}},"9.0.0-canary.2fbba2554.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.2fbba2554.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"6ac0566f094c747260e44228c5e05745ea984ef8","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.2fbba2554.0.tgz","fileCount":38,"integrity":"sha512-alX1Y7CCGADBQfUbaAoTGypyOooPwb4Uc1TeFsy/tA21zP3cvQl6v6Td/OD3bkiq63SSrxLhPD6WuiA2boQ+yA==","signatures":[{"sig":"MEUCICmUhvLmtcCxAL0OYD81WB5o0iB9soW/LcLfasmr8YlwAiEA5g72kIa9t/CPAChbP4eks8AhzGb5SEUpVWv8KRJ/xRE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxS55CRA9TVsSAnZWagAACXgP/3fdBnaty8PsTZJKy3jE\nlIXSljXYeqP3KPSbmCC0Atezw9Keefjzpa/INOTbOQtbLo3QGY8oOFRXkqRe\n+nW/Gysc7wh7Z8ClNd71Vf9TTRbcNTHTzdZlhSXrgFVbicnb8YtF+jVcqcMm\nhC0vH7bG1hu05zVcc1qNaT40csY+47vdcMhwBI+1EPWyG0X2RyR/O8mSNFsl\nU8Wn0cIKBmOelthvY4LN08f7YNmTgue790clcJ9AT5Jk5wEcZIFVIgLi+kGI\nWz02T4b3Av98Z9AGoNNLrCTylxVESADnWbEJieiZOpoWuwb695xplPP27j6g\nNgiWyjQ3yk1keMWyVAE1tDS+Lj5GSySLtw0DfMS9a5Aha+4keqxNoj8iKmva\nFFFNqhNawh0dvXQW4L7S+trNK4q3BcXrJoJc+5tLcvhHAnzke7gDrMMiRY6z\nE+uz7ifqeE9WWmIchhVGjJj5xgjicotqRmWMHLcw4v6MI4C3zC/g58O4jh2e\n2fMQPks9y18D5QvPN3CjrT37qc4wYkTaI5AJKz1JSZsncw+gLN/YT/JIj/rT\nnO8repTnSYNLgeNcVq9YSItxx0A1OeDjNBI+EsiYpkoGNzacltV80e2a+PfU\nqOfY30DsON9IP/bwNaIKSJoE1UxQPNn0FliFOzwrO7bbei+mRdfhT1dT+Lxl\nASSt\r\n=x4P6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.2fbba2554.0","@material/theme":"9.0.0-canary.2fbba2554.0","@material/animation":"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-indicator_9.0.0-canary.2fbba2554.0_1606758008967_0.7272884271826123","host":"s3://npm-registry-packages"}},"9.0.0-canary.6d8574fe1.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.6d8574fe1.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"aebe8bb627b935d9b209e57126c25c4bbc1db30d","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.6d8574fe1.0.tgz","fileCount":38,"integrity":"sha512-lp6d1gJM2/hiBukvlQozxc7CCjxzVjxH8mdXGcJW+zr4uUk6DeQA3HDM88rZdhRFtXN1XkxSj6r3dllvcrWjuw==","signatures":[{"sig":"MEQCIApkXqPEVtfPAtUjd8U2fVuWfArwy1mOGsIgfv3UzrUOAiB76+IW/RMsr25369fDBzgyGuLscQooe2H8fkO38bKmdw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxTERCRA9TVsSAnZWagAAfhoP/12xnjxZT5kJjcwoH+pY\nVeYL+dDWBkmQmMIY742nlSH7LmsZnndsIouDHv0gKtNe8ZXic+BfWcE/HW4q\ndIwsTsuf24ARmP2IzQrOrW/xcB7Hpr4LTHlGdpg6mnvmlonAH2Lqc6DD6LJW\nnjv3/0/FQvZVxeNu3UUYwhwtEPASQyOwdMqAuuFGGy+8P8FBU+SAM/+Pngzu\nDsPvYMt3UCWZTbYNPFrViieuho+M5BcIL7fQ2MAEhrhwZcqN+esjD9QcjCTI\naEp2uunYL42OJiXz/mFOyhiVpoQlpiiAjyS+RpSPgnF5bMB+2tmoXVB1RbGZ\nVAbdsz+xi+3YhOdal5Qs2cfvFGlDc8toHdn2BH3JwL+PemXYTdGQKX3Od5ah\n2Fgx+BbXDOfpwmUEqJwE2KY3ee6ypgqMfh0FCb9VGJ9wIgE3yVciQzIZbPEG\nFTAdjuVb7H/LsZQ5aaHRMomm+chUev/wqacM2HpPHsFpM3CXV3NwhbimNgEd\nH1pkZyX+jYocnhrwmK7s6o5vj95MRuFc4Wdbba3eX9+yl26Rj+gtxUzjlrM0\nooLYFIChJw9u5QaYbC5YZ12S4vtRNq3zOcyu5s9rGanxfc/gzWZx0UQNOGJQ\nHbKda8y+imBLQPxhVHnxIFBViWP/Do83dzZ34hXgXW5CE2FxeZ+V2q4H4qdL\newSo\r\n=ApwV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.6d8574fe1.0","@material/theme":"9.0.0-canary.6d8574fe1.0","@material/animation":"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-indicator_9.0.0-canary.6d8574fe1.0_1606758672855_0.7096498558763391","host":"s3://npm-registry-packages"}},"9.0.0-canary.fd22355f7.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.fd22355f7.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"45fec13f8625ac39e9d8e7952bd9f94964460664","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.fd22355f7.0.tgz","fileCount":38,"integrity":"sha512-k4O1xBGdGFF6rJkT5Kw32EPs7Ye8NZik5hpoAgIfpPPy9C1TP+jfnJqhW4Wk5m3i7HebIiSYuwYStmw8LC3wWg==","signatures":[{"sig":"MEUCIQCdzGMiRecNu2tJU4fTxbZQZKHzXfyiNpaN6JxP3mpZcgIgCQr3OVCBmK3ywXMG2tjjK21pjn9spyQestPuc6NhiX4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxXlHCRA9TVsSAnZWagAAr5wP/iBsi9kscNTmcoXp1MPW\n0x6RIGyP2KEtlV4BrdWYPX8/CP56wXlhtRvDbwvdLsBVLxPWzGCrjUDx7aQy\nNPYIL45zHHW+RoYnsy+ayKR7nL82EK8tuuPtIJUJZU9sgOKcCJpc3oZyzdVf\nIInp48dvxIyXOCnhu9ocTwNgaCQtMGsqhchwEX/33EPm8HFln8P6z4R6WBAV\nwu01FQMMqTGNY/4h2n4Nd7eyAzspeHA8Q56FjVpvl/thpf9jTg/9lX0MIOFd\nyOzpCx+RXqn9rkmCogA5ovob28XTAu1kL5ZmEcodGKlHLmUasfkaCzJaAjky\nCmDeXmVerKRysOEKwjA7+izGETGvhS0bIvY77rcTm9q3yTT8RcD8RvAv1CqQ\nN7l4rK3eMO7XVBtZ+NcNTr+S2skzyW3XyG7ieAudWtj4Wz2hRK4yMhT0/hLa\nv9rC7Rqh186ZFYcUA3r6xfM2Q4FmdTtrTOcI0i3uJ9efhmfpb3k0NUhP641b\nk3G5wVlY1egMPvXYJRWwUTdiIhIrx48xDJb3rNPG2Alg+O+CZvHikfCLgIKv\nwl012inZRsw4GnTXqRz95wAnzQIXSVlBT43WzrgF2rLksRHdJO2RypYK+3NG\nVfXV9HltB7prVUWhmDdLilQjFqR0fapYJtufTWGo3HJH2mS6jdKKvCAVsQGF\njlnA\r\n=fMVj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.fd22355f7.0","@material/theme":"9.0.0-canary.fd22355f7.0","@material/animation":"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-indicator_9.0.0-canary.fd22355f7.0_1606777159246_0.8038730172598769","host":"s3://npm-registry-packages"}},"9.0.0-canary.c4ab98722.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.c4ab98722.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"2d94a41f9bed484900943da1609cffb800db6aaf","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.c4ab98722.0.tgz","fileCount":38,"integrity":"sha512-dHmmhO4gcj4Aien4wqBADXW+vz52lc1lVh0YhWQ3r4u7OUenM0eEETcFJ4y8d8Sj3/jOcxK6oPyHl5umjulblQ==","signatures":[{"sig":"MEYCIQCiG0EbnthlTVdh3xjyCiyTsz1xI8daB5+BV2Rsmb7bLwIhAJ/0ExpvivABZj+pay0ncm1TDrzT4Ri3+K0pSVSirCQN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxuY2CRA9TVsSAnZWagAAPaIP/3bVsk2ACOu7CTKKOdQY\n+iasO9DHMfCQHOdlYjb+WypNEB9pYpJ4KFJ0+uaog1skdRwgHNSVgYNEVxjF\npRv8VVkWbwT0I5NyNgSJn4SJQ78/eN9bK/y/mdMrxn7ODMSwy2BQ9pLuKJvn\nXf7jj/J4I+tsGirxcKI/QCquzvMNLIAOHnVYdhS+S0tExG+V9eKrWEybucse\nDAMAO6krFw8OH3h/xpfhI9XHa3Sm7oJlXp760kMR2UtQrx/9Fx3GVPdQjXsG\nXtnGZOv83VP88WilfXK8i0miiCo3ZqF78Zbw6PKacSY+fwRnySvzlYBM9Rny\n1y0rRy6aPLxOEewGkMMSlClV21MdtZKp0adJsKZqnfW1zq0Iz8mQ9oXlQ4pn\na3kT0gmihgpJiFYK5xTKjFTtSuX/ZPZxnoJC3PXPC2g//ULKx7dPeZ3HeeCx\nvZL3BhMX9abINIOXcSHIrR6Zfhhqk9WdThJLum5aSAc8Whgs37rMtViO1+qA\nv+/FVxns+dUwLbIIoU0mZSNYZhd+soM1zOIAEXk4w0JujvGc4/0/1wd2OLGw\nUg/8cibklTNIQpT4iMSoM7rOGbz+EORA2zfh0QBfA8wq4udMfCuwFE10EM0c\nF5uZiTTTjckeIiJ4VuQ/Te3ursLYl06QCOjpEkE7Z5D4w9Z4pbqweZ3H2YEP\n9bLQ\r\n=DtN+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.c4ab98722.0","@material/theme":"9.0.0-canary.c4ab98722.0","@material/animation":"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-indicator_9.0.0-canary.c4ab98722.0_1606870582263_0.1478264849542994","host":"s3://npm-registry-packages"}},"9.0.0-canary.977585650.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.977585650.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"47cd03356c2963b3f7d1e4f31e4c39222a0bddf6","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.977585650.0.tgz","fileCount":38,"integrity":"sha512-VPS8bJL41QJLQJq9LGY3KHr/PLJJxEoQD+CHR7OOj30FTIFpBzPlzSSFE25YuADbX76wat2DjMgoTvYrjQ8dmA==","signatures":[{"sig":"MEQCIGptPoMYimiLkHy7w2MWpRxow+k4YgUNLO2Q4ZX/hgZcAiBtadmxTUbIimhtvXvqXODeU0puyqoXZodA2zUe+oyQSg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx6eqCRA9TVsSAnZWagAAbk0QAJRTsM4Ftbq+49ss+mTL\nBk0M0w4jIvbMZmmBX/sc0QCYZlVuH/ss2VzuPAKl1h2So8tHer3/IhqGxZfi\n9PRyncjQuQm0Nu17/9WmwVvKt6T+pwWDxa31lRgnsMVAPQSFlOPqVg3FHbB6\nF+u/E4nDjohxGix298SmKkz2oChddoFppfNOEr/y2re9519bD2MF8o8X/pgv\ntzLHrC/JITiF5pwG+u2+iWhu8wkvqKiVU72WuOh5C4G0G+uOWJa/HS3SUdmc\nEF1lYoBx5w83R16lPeddmhup8GKIxjVe5bQvewwfXNxbKFl8+wqB9HRdhf+s\nfqYRU0fCXo40LjqNg8Rr8fnhCHMRppXmGO1e/7KC15jM5Hfq1fahQTmXAbpB\nrZ5CjlGxxmA0sc22r98JD5txCgozesSKPPMLAw1cCUy5Q4BadSCWU8fNDtmV\nfE8hPNHVNq+4feJ7SV9i3FpdLDHo0QR9oknHaqyHBOJIlhom7yrCDslOkPHp\ntxrBdCMi4nZ+rFXXbPcKCF5bVeQpfTot6VLIAvq7hoCZD26SNII5xzI3aMB+\nFzlFQBllzq8IS4P/+4eFbxIpevRHmVQ/qJ+ARUtRuyYKH8Gf+tCYrs5H8/Fx\n8ZkNnZNymeMN7cJHZBNAiKsb9tTihIUquvgu5+/jljrm+VKvV9+DPTybpWcS\nTf4B\r\n=T5ch\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.977585650.0","@material/theme":"9.0.0-canary.977585650.0","@material/animation":"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-indicator_9.0.0-canary.977585650.0_1606920106315_0.10723367895972147","host":"s3://npm-registry-packages"}},"9.0.0-canary.c7edfc7b6.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.c7edfc7b6.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"2c69fbfa9b59d44cba7281275654b72131658d7a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.c7edfc7b6.0.tgz","fileCount":38,"integrity":"sha512-10SyGMKSVaF3CUo+iT+EuNFxQ7TWUjM/OvroncZGe1hRlJl8QuP2KM2rgFoIn42k3MriCovWv33rZg5c+sTw8Q==","signatures":[{"sig":"MEUCIQCyqJQQpLB7hHMiM4d7EEft9GEEDBYGZ4JsQSiEe0gZOgIgLJhWB/evm0W3UYlDkivK5lgzk4X5ftiWSnuIcpDUlnk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx6l2CRA9TVsSAnZWagAAoS8P/28MSZWK0iLKX8JRmOK9\nPvyMixUYvV+au0wrIlv5NvdDx7U90A+AWUlHArtagzp0uTKZ5MFJY4tMDsay\nB36iF0PJsLb0l28jtE+tQtSqxau5LGWXZSlU1bsnTcuLd2auVFbo/fTdoD1W\n4qB9uXRm4I8hJyCFhboYbmQDOIi2B7hjl51M6hvSGoHJeDZoFarAEatLGLse\n0DRGyb4jPrGn+K4h/Y7snI/R1Mp/ylYyihIOUFJFuYbvTE5RW1n4AdiihH9h\nLzsISlXBhJIs0f08PEpG/3F8LRaRVmKSIqPWUMFUlvEAW/hahb55Wx1D2kcL\nntlipTIW5Bbm0gUpjBKUAMrliUx1aNUQAatxh6gVASPKNL44i4dBG+QONXPh\nq0lx4z1+dyJtmEXS88bo2HYDLwI2f9UoJ0njMazPMBGeJIohpG2Flet45FEK\nhd3zAgkVjYvgwY34JlVTP2rZnbbXL6CIx4jfdVfODEZP5v/dUyneQdBznwok\nsO5reSsUAtsHa0PCL0JJvENo76XShpWlnVgloMNso1/UDETZD8qRM6TiN63i\nJBxO/9Wi0QmhWugkvS5GOEHjc5o9K5K4snTM+9aucIfPfOrXvBVW5IXz8VMq\nudPuBrn6TcuDpIDFjJU6uSo3G0iY/3xlAkvCbX+/bmWh70TTorbvoS9kepPI\n/EJO\r\n=vhVT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.c7edfc7b6.0","@material/theme":"9.0.0-canary.c7edfc7b6.0","@material/animation":"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-indicator_9.0.0-canary.c7edfc7b6.0_1606920565692_0.25066127895809553","host":"s3://npm-registry-packages"}},"9.0.0-canary.4f3347306.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.4f3347306.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"18a221c50d1bf8c6402e1441c5bb1718a442fadf","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.4f3347306.0.tgz","fileCount":38,"integrity":"sha512-aFkwU8+BmUt8UgfgVTsHb3R6yIyjqAJLVzxQ9g5TCxBn4kCMiCBfpVl9t+CuRd6G8P0afnUCEpJgsfpR2IXrfQ==","signatures":[{"sig":"MEYCIQDR5Mb+WPCZu0vmK9E5xDvBVarN/pXPzXrtJ6xmIV71mwIhAPAeLI4N+csLilD6fD/8eISjKSem+iqu04zwb+XJG5UD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx62nCRA9TVsSAnZWagAAAIEP/00L2o0GFFEWfi88dBsp\nhNk+wGeZVNjaH0xF6vN4ToBstIjgaWHgV//5cKvpo1JJuffHNn4hUZhY3E1K\niWANk+u+jI/vGPKTIDTHlh5LMVH6vcIeWDxrwclY4rAZUFoZ1ZP7kcM1V5ln\npWcMBj9jGOyxmsFcK6TpLE/FWS2hbA1lrLdl/gJaoK7lbo6kWI3+4cG9NJec\nf68VmPQYqjZMj0oQ4LJaQD1lVsKBtScHY2emDGsuZ9pP4VXgm5+06zf/r0S6\n38hPczyy+EA/FCXzmuUcXDjboOq+HpgfS5kD2nFGBQirbVi1RQ5QPEs+D/HT\n2FvCbxtphknvALnBzPGXP8FfErnectqeIrWms3bIqLuvDro1QVK2bKLPx222\nsY8XobyH62FinMuPOQoXn5/9dLiu+cRYyPhvqdB/zYYfr17FwrrgumHfpuOB\nsm9I08ttt0GS0bpSelDF8udTXonlfsvdnwXHf889Zd3wWKfmPFNmW31ojP3U\nOL2ic9rrxb8BNGYBPLdYAhXewEDA+Ra1It2EmEQJk49AgE9eC1WCvnyppl3Q\nwww2Og7nLlOka+xgCHV+91sXPIhWlgFO6zU5igHO9lfBIVsZ9POwJGshRN3O\nn7I7EaYphOJDoSX645yZqa2lPJrkctq5c9qnbtH8L/mKhVJnwz2QHkwPaF3L\nt4tI\r\n=9/17\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.4f3347306.0","@material/theme":"9.0.0-canary.4f3347306.0","@material/animation":"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-indicator_9.0.0-canary.4f3347306.0_1606921639360_0.22932167674017068","host":"s3://npm-registry-packages"}},"9.0.0-canary.37fbae10d.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.37fbae10d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"51576e6901bcf47f258eef174923a95393d31b7b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.37fbae10d.0.tgz","fileCount":38,"integrity":"sha512-slifywWMUrZpQnjra71KbVonLmB4qPYBvYcsWSczYkmtk5PantVIsyJUKSdXPbK4b8QesvCGKozCoNew4FS6zA==","signatures":[{"sig":"MEYCIQCJ9urnuoLpWUct5pRVsWFLP5fzqYxdVuUrAoxdKrT4SgIhAJLUJJRICLK5UYZaxhZDET7sA54IRWsfAOSZlEq7sTYn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx9ntCRA9TVsSAnZWagAAUdcP/1RQXLvaTdRV9+/4+IjZ\nR0OgHrzRAfwDl+fscgS6CDaOBb2P16aNl+Ij/w9w+UTDbUSwOAHDyrqLNsUX\nDNsWx0gWgSmZh4TEE46+Bq0L2qAuvJ/0n1PXkaM7dhQ355Ku4NKmCtWmxPVP\nDjshzLTn2LJko/9dtjYPH+PTVqdmJAResTLC2MYDJxZYDvbSd0AB59LOup9J\nhRxNHEHmB21kJFXYhG1g5F1n4ON2eoK7R9w5+NeyJ8g9F8Mcynyjdzu6oIJo\n3CPgXnKbKdLuCXnqPpl6QL0UVBFpaW4TPNxBroDGf4VFsFro0IBylZvlEHv/\nweRuTsEx+2nChXsxxxF0DBOMb94FNNLbLPduZsMyKAtcKv+/2IBhWtdmnYRt\nwvP28U82nZmdhIqDBlorRqobgdxAOFwIiZBZ02DecnpWcrtmeK1FdEmd/qN5\nFRg6iWNFAA/B/XN9nBjD7cA2QDmq9drTK3yhIYs/yjAxSSAwZ7oiiS9rM9qu\nqkbo1yESQviTEWVUZNcrpJXnmSu3SV5/4VDicO+EUvCxuBdnMtIVuroyRqux\nAnU3yQuR9NZEESprc5ZIQwgbRBs0JugEyfkEnWO2bhHhu2zkXZ4Hjo7E5i58\nmH5vqbcHwXwCeKRCQK6wAK2tcz4r1Bq3+3TLAO8K1EIH9zOgSXAJvG2mSemo\n57DF\r\n=X3lq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.37fbae10d.0","@material/theme":"9.0.0-canary.37fbae10d.0","@material/animation":"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-indicator_9.0.0-canary.37fbae10d.0_1606932973308_0.23043196225183027","host":"s3://npm-registry-packages"}},"9.0.0-canary.11da3c0db.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.11da3c0db.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"72bea64cdf810af5b9303bbded6d282087918106","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.11da3c0db.0.tgz","fileCount":38,"integrity":"sha512-60YVHPZgDTsk5XYUCoTlRPTp/cpZnEQsiSX6hG5oioOFoW2xjzor4LS1pBbBkR4E2ENN3fS70bQOI8OxryD3XQ==","signatures":[{"sig":"MEUCIQDi6jRMMVEKHl1t7INAJfqNnIYGhdWLmUvmYaZ/yjBowAIgUDnqQv7WekJCG6FZd+ZuzssdDNq3u465UhFdSNbJ58c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx/d0CRA9TVsSAnZWagAAIDAQAJOT3x2UELG9EnAzGBC1\nJBUN/ji0nNEn2j0OUI4eauaQpaZQjWFj62Squj23zKly11jpRZtjZ4SGcniP\njVMxYpsldOkzh8l/YNuF5gGcMTHQ0L3NUpFfhwSDBijEBckjccIPG2fw911d\nTrQTlzshdHCBoR5j/jNFzg9+eD2oiTKTwzF0AtI6X/TLT+du7naHYnA5C+j/\naZjHqxH5P3RSGlpviJqa3GUS1SV90NPJULHtzeqZ24udZDqbbU9h6+WjCV78\nnDXVGKOzLgZDHdEUnA/zW5CjUAI/LYybgKJvI1rQmuR2FdiU0foZlglXBWge\nuW1Q9mDJ2jIu5FFY13Z0Q6AT7S6WTzQdmQQZYRFxoVyev7hsJhufeQCR3QWN\naEoV7Xr1DrIHaeR5F9hlDrO2ZGNb4gifF8Ltd8nTG1DCTM3tt5pqyHBhB+dN\n9aX0ReIr3cn0ERn4W/oZduf7XJFofGu3apnShDj7J7O/xNzHNlrmfE/7VTzT\n5vtpitCJJKqd3oLgxTcQ02zhPgPcOkj3XutVaiviMaZ+6W93RKCaIF7Wr3a9\nvnZMBnj/vUVcgxugcEGC3RIedJUZF27ELrAk2MRTPMMls3nkKwJaTmiljkjg\nVKeODL/g8IQ8C1VJkXyQ6DsJmwvB8Uk8baZ6fIF2aWIclOf3afWEw5YNM6wB\neQA4\r\n=guLc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.11da3c0db.0","@material/theme":"9.0.0-canary.11da3c0db.0","@material/animation":"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-indicator_9.0.0-canary.11da3c0db.0_1606940531635_0.515002119478521","host":"s3://npm-registry-packages"}},"9.0.0-canary.489d4c219.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.489d4c219.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"dc94f2d0c5ee9655d2b2dfbbc826aa80c5a77509","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.489d4c219.0.tgz","fileCount":38,"integrity":"sha512-/Nsaf+TBBKCsjVl/rV3w8kVQlNFcYmbPGvizvdOsIVy3Muos6DzcQBWGsfe6czoJ/ZAeHE7FqfHw8b5nmy1l3A==","signatures":[{"sig":"MEYCIQClz9tDD3xaMcET9tU2Zi2bhKMqbLtzMCQI313lJrpOcQIhAKmGpIjzoD0igPdOK0eanIh6r9KCLQABeTufrmAqmJVQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQRXCRA9TVsSAnZWagAAI8UP/jh3KFHUBMnrXLZqFeU/\n75I78UIcpnAKUWa5oEb7M+PYx71aD7quTqe65Axf0Zcw7q0jo/REq0EVwjMs\n77921GM4HdXI3J6nt1Co/Lsz4DvhfstC4uUaTeR3WZgiQAJ19+FmlRahTelQ\n+KIg2zbzD4kwHWk5BSBv9M2C+7745hHsQDox0dmP+DmglCAAu13OTW4stkj+\nNHufuQAHCJIiNfJZk8/ujRI3op/ghNuLhyMuuIkjuzyjIBXSpnnNxbtuErL+\n88hz/lEuif6el/SJdgqNFhBX7Jul7S0wYcmrGEBKyNYKxRNc7cywm5uefYiF\n63TtzHVpacGnr+3/N0ZPjfKw1RefHFLhUt+4lLFur42TJePKyEHorZpHMh2n\nDDk8Xy+OSjcXpg5N0Ge8B3vqiPQWdJyCRbj6TaVRz900lMZ4CZHZTA4jQwOU\nexJTtHU/8JDLEDFNkT2jbxViWp0EdM8/Ne0BD9PwOtJt41dklOjDKeDl2Vkx\nSeI1psN/PqDN9WFdhiAtF8Di3GtSPQf8KlejjqF1q7hp9cYWbRPqivKAQO3I\nHcCqg7QLhOH6j+5LiRO41nlKxeTruc+3XSP+kXMhF66zO3Z0ZKmd8Nh/enwQ\npW/BEpLUnCoXsnZXQOFzQdqxh90SmL1pJX+gCZwCX0i0fPgaOv7XkvEJmR7v\nu9u+\r\n=8IOC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.489d4c219.0","@material/theme":"9.0.0-canary.489d4c219.0","@material/animation":"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-indicator_9.0.0-canary.489d4c219.0_1607009367352_0.9938977337528623","host":"s3://npm-registry-packages"}},"9.0.0-canary.6557a69d9.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.6557a69d9.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"9ac95e10b2b6920cfd07f56ef4badea4e8b62c17","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.6557a69d9.0.tgz","fileCount":38,"integrity":"sha512-TsVPFYAflAKbzJebe5xyUJiOX9yt7r9oO2YG5VxQuUwMB0cIGcfjawRfKdM4Qr/SRfOfQvqhZN3TP+0zpUrlSg==","signatures":[{"sig":"MEUCIQDtKv9GFV86tzJETzJuhDjcLwtQZb6jropZve4TtpCN0QIgFkBQ17kyXBAPxYZpmNihHlFGa9Aalal1CJ5vzT8ALsM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQcgCRA9TVsSAnZWagAA19kP/Rxgj4hayQlJiMwziKQZ\nZ39wJLbcGt90YYdq80vgP2IwSN0BFMYd/AYiqcZYE5RNpLRXLUyOkGgvnSSZ\njb9t9ZpFTuWkRStHDZah+qXr8t8pUz6ALNgsPa/lG5zPCs+38yOOl+29gYgG\nZ+2TEGlbXu5Qwil5brOHbJxpcgq5JBr9vwVHqlW4ny5M0dYXkpAhMDrnOqjU\nuJmXjLfV1PfR1SOKvPA8IsihPgEjTL6SbfVgPTZ4ffJF1/YvZY2eiDRtZyjh\nscaKgW4GXlGpbzBeJtxVc44uAXIAfK4pDJ1ZYrpQmUT8+NR0RPg4+Sywlkiw\nbInbMlglEMM4stJfHqWMqpCbqPvSwrKVGZ5QXuX8Kog1hlil0WEyInEUqrDF\nv0PlOiQdcGKUjM1DZE2xFvHPx656BzELnbxKdURc9gGiUcc/L1UeTgF95RQK\n3x1PAHTjt0W9kVmVxdytI6ejsN+eVu+7YAt/6agYf/h8YpR08rOIpt0zrrRx\nieKXnPth5TC8c9XJitzO9HY3z4b23eRJgYHTuufmfaEdZ5ncmT2iCwLb2AN5\n/L8a6R9jpJprQGOSOIshAVOBqZME6ZXadZb5oBJYstbdTrWH2FpF0JRipJbD\n129fd3PO1HcSlca65p4Xh3cr0kl5etecu503QKjdTA5NFspQrDC/U07BOSIu\nNHQX\r\n=3nHj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.6557a69d9.0","@material/theme":"9.0.0-canary.6557a69d9.0","@material/animation":"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-indicator_9.0.0-canary.6557a69d9.0_1607010079935_0.3680310882001363","host":"s3://npm-registry-packages"}},"9.0.0-canary.4ea1b7c69.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.4ea1b7c69.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"18cae4caf713473af5f2fde15fd22d6b2c9d232f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.4ea1b7c69.0.tgz","fileCount":38,"integrity":"sha512-NJ/Vxtri8n8K8ILzvfexAxOjB0QctbpBB5lIeDNCPdyS7FZd8R/9M4YPLtuICkPAqmq+dJ4TAg9OsZXm3yAxdA==","signatures":[{"sig":"MEYCIQCv5WxQMw1XABj7pZqDj56K7+eucD7UggTGAg1E+cGiCQIhAMwtBuUqvfKNsEzeBJRTjoj7dimdM8ZY9YxR/7V1qMk/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQsFCRA9TVsSAnZWagAAxWwP/19GFAjEyjFmLx5XbTCI\n7zbItHk3ooRd5nyPj0JFuCqcX2JmUQcGLMUETTnatA3lujPIGgz0D6hVE7fc\nrzTmJ9wdO0ttBD4epFpIzrpBpUZXbqdUmhNbDjq9L2aJhSYhXQFB+TCVIGCh\n0Uy3IG1eP9rvftPaBAYrrQGSsJ4v0Oiukq1LMl0VyTdSme4CA6guFI1vdko8\nndzY7q6C+rkyCV2jPDGLK3npw6g5rgg84xNcK1cB7ForRyiwcbpfHBOkHs5S\n+UQr80Hayb4CLztDNkegLJKsZwpziQMo2G4/S8MwSkvVZrnB0jbjWpk3qxsS\n0iyq7QQP2ZRcfMv/AiXMWY3MBmwSj2UBMzRboNWiDP+se+S0WP0w8f9Fpwbr\nmlN4JHCniQ9GHpOomOlKlb3/RudrqZ+HXpGUVMSCdNbZOa0aCvxPLfwrEOAH\nvXhd2WPVYS0YFmXaDvxynchhHnKbuzNAsg2KxqeptQ1D/wsgN7G/yrwI0DmH\neQ6wQCjCMl+jr4QYXCFDGsobFImWbJeuu8srQl6cSP/HKRSAcKipZ2Q3SMgc\n16tiTliQabAgG0P4EZ6nDjBb1lzmIKuQBUbo3UeU9G8FZdZVXaSIzVvHEEWO\ngNAPA3lTyLZ3EP+RG9P4RWXxly3KBW0XkMKu0Zqt77XbwU0FQIZERSYwVyw6\nQY0s\r\n=zTeI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.4ea1b7c69.0","@material/theme":"9.0.0-canary.4ea1b7c69.0","@material/animation":"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-indicator_9.0.0-canary.4ea1b7c69.0_1607011076911_0.42346461067061614","host":"s3://npm-registry-packages"}},"9.0.0-canary.eaeb78ce3.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.eaeb78ce3.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"f96f071de79fcef414ceaeeb58d5bc5e01d6a709","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.eaeb78ce3.0.tgz","fileCount":38,"integrity":"sha512-C87vNO9Lhy617eCOnLsvv6g4nt2aWxcytlOrpSOQRcPUFolN+vK8kNSwd2av5C35XhY9dmnAAyBwYMZMfdlDuQ==","signatures":[{"sig":"MEUCIGjwI5s1cZx4aYiZ0bTgLqPmEb9KcHdHLTOTwEAORC5tAiEA8jTz03d919xEA+7odk7RB8TEhoocApdeMHM3AMPPvUY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyRnTCRA9TVsSAnZWagAAHacP/3DU/9YvjXx+IoWDcau+\nTSXv9FMh3gJhe3fhU0YOsudO0tgSbqVwkLo1zdV/gKi5u8e4cKeMPEtfBGgw\nDELmxDK3eKWYw2INFLuQ+ebaN82OhFPmBmp+6t5hW7XYVxwR0htFHIq1/zK3\n8pKMznD90fx5eFPkuJ0qEWtNXB7ZBQxyEtYJ1uE6yopLNoUWotZq5pekyRsF\n0SPXS8yU3xuC7YjDUIYRa5kk6fPe6wqFYNnNpf0QYQFiakPPX1j+F9q1C7Qy\niYwJRCO24qM9kkplcNdF4aZ/TwB6hgXMS0yH5N/z6YeSU0RSgv5mICjgBUVz\nPuKHU3EidTlGJxK8qF8evZ4X47hNS9dWu9iNJBDgWYA+F+ckJXyqjw8hT8C1\n9/W/EzX8bzU+fo/GHO3cTCrce/zu+3os2pjX07RT4uaUA1/4JrnD/SIY8UBh\nDuh1aI6hfERGb3jDR51nOF7I8RBktMV0mRcsi+/1rCw+5il3oNWP1VnR1tAn\nbhl6jx55CHtTphH1PNUd7HQk8TlB6z1I/IbnO40KDAWc0asM9VKPH3gU9ZFL\n2eoV9p0pWTfxyHtcia4WdRY+Ph23AjXkoUuPynvuUemdlzs8fmTBlEl46giK\nJDUxSpPl73xm9c31kih8InpAKvqFz6oy5mJsMOKYgrLZXV4nxtiDvu8qraf5\nFQzT\r\n=bx49\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.eaeb78ce3.0","@material/theme":"9.0.0-canary.eaeb78ce3.0","@material/animation":"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-indicator_9.0.0-canary.eaeb78ce3.0_1607014867015_0.3198798697581562","host":"s3://npm-registry-packages"}},"9.0.0-canary.1c156d69d.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.1c156d69d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"428b53a25cf09de65e1f602f3784b6202844ad48","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.1c156d69d.0.tgz","fileCount":38,"integrity":"sha512-PglSDSuQY6irrTNpEK/n/MDkZh6nH+iw0H31vt2A7QrG+BPwXrVJeRi6b8y2lvEnoQFp5WK8VavhFDNhcibEtw==","signatures":[{"sig":"MEUCIGAPWWMEUKNr7WglBLxJtoLREUofP6kZgy8yncbJL/QxAiEAwT6/x8gWtUiBMi4bdDYEoW7bnjegUzrsiUFWPwVt7eI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyU4wCRA9TVsSAnZWagAAehMP/0IUhakhYpHKqirTz3vl\nS2Rklw6IDgEpmX9uWOcye8N9o9eq8yDPP8EsZzythFzzvWAUdtBBdScKs+iw\nfqja1BI7daT6lgZ1gQ0JCNuncwrGFfurdVSez5ta4cefkt3AEmuwl2Bj8Kts\nGvFbodsvZGUB+qrpA+VlLRcleTNml5jjNreUJ/WoK7XCaO9h6W1k6/Oe7X3o\n7qMt0Ku39rw4UztUDAYcI7pdClOe10XUTJtutbUZBPVfKCziM0+TkfILMHB0\ny1nYK/mVjtHzxoIFE4WZ53Bp8lCvrTngMZMvM8WfaZAwP8BEPzXnZiTf7d9m\nSnQbLNSnA8Tn3hL11/tpgBUq4lKyToSj/yCUj3crr78tpU6lBnk7HWpfT3g4\nL2pdFYR7DBpafQIxcYX/GyEwPWFG7pZp/ZwvheHnk4hQGPKFdUA1NeJZvwl9\n70i9Ysf9gqKh0aV0L1w5P7AX0hthUlTz3keghHoGiqMIyuGxZAI65Ld5Cw92\nJzjkpJ8BGeD0mXlq8CjrQizoBfNcqEASVNETn5mheKTgo1AZPrmMhionH9GS\nPfiMdByk4UeuB+xEmShyD6DMdAPz91GhIDIy/P10aTdRHv8SNwqpqMLBE0nN\nUOVkGLEOIDhuJfw1T5LHgH9jbUOVxE8cEN5NQOSYGiFKZOxg5ZCVptCCH0Hx\nuntc\r\n=V29e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.1c156d69d.0","@material/theme":"9.0.0-canary.1c156d69d.0","@material/animation":"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-indicator_9.0.0-canary.1c156d69d.0_1607028272155_0.8430054148135142","host":"s3://npm-registry-packages"}},"9.0.0-canary.832668d33.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.832668d33.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"8eb8eadab5331c0dc253ebf3f61de837986a0f27","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.832668d33.0.tgz","fileCount":38,"integrity":"sha512-1Ga1suE2RmtF8lao86VjWS2KMPnwLDKqIu7PVe8XQYWfdN1q1Y5Ovonra9692JfO36gL3Odri9OLCF9nQSy8qw==","signatures":[{"sig":"MEYCIQCyxjRfSDrhjvavsm3RgiS8ME/HgmBSW7mciP1NODB0iwIhAO7MMwXIJLOvR1VZObbYoziNhFXiN+99WWAxyFccELvx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfynp4CRA9TVsSAnZWagAAk9sP/3Sq5iMTVWG4Imq+7s0S\nmCXojJKR9SVrJNkaUEDHbLqf8ga+xnDkvUqRrrdjdGCF7N9s03dz3dQQai9I\nf8alU+jYWISanTrZkQmHxsgURQ5w7HBPW6uOzz/r4OUVIm8tAQk5iuvq/NKp\nGQoOaFL8zv1hDu270znGn8FR4hTQZ2Au8W9J/Pt4Iv13zvGhtYYT1k0J5Ttn\n64IWFpVVpZvvO5EUk0ObVXx5nVH6nGYC9YPu0avhGNVSWeEF4u6SNz+N24fl\nmtW4UKxvrLUHDotaev6BgyoanZWfWkwxWKG/2OcMS1C7kPcDUQQTxv5OAiII\ns9iJXEvF/OSbmjL8urrQlrFsRagnO3mjWAdCrZPtPZ7HDYSsf0bmgioukHiR\nWZhJosR1/4mVsgEzqaPJwBPX3XUbo8UNOxqko+3BGtgaw0WT3F8Qfl9ODy5k\nVt4vKqZv0IoxmONRCBJTRNGSCtJ7/qrT4NrVCPJ7iTnMOBP0i3XA1JSCIpjf\n7xxRNGO8ft0Kh+EHLQaCJ3ne8H5zyqXp4jIChgxH/Nc5hsrHnmTvegEaHuBg\nt4ve7jFck6pC1U8dMfHQFi7wB2RXJV34pzUDu7DmcYD5w1TfDogwduz7BLoh\nhxRlvHPH21km4boW9gbDKpHKb2hM88ZCFCuvU5bFqHQNGEmTSLp2kvR5PPtk\nA52E\r\n=PdGO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.832668d33.0","@material/theme":"9.0.0-canary.832668d33.0","@material/animation":"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-indicator_9.0.0-canary.832668d33.0_1607105143887_0.7506569499692151","host":"s3://npm-registry-packages"}},"9.0.0-canary.4321323e4.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.4321323e4.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0f3ced9569c584e68d810e42cc434b21f1bb1b0c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.4321323e4.0.tgz","fileCount":38,"integrity":"sha512-R0aGJwO2ZuWSmf6kVxK1ypqchyoOSsvJ1E2z00qB/U2PNZyKjWC4rmVIQfeGGnam2Q3C5bnYzeoAg+u8T3kwfg==","signatures":[{"sig":"MEUCIQCoDO87CklJlT569A2nncTLNCyF5jS9hPFfucRLyZxBQQIgbzApj5X0aCJLhgiUL4HU0i9eUcDKvY+vLxoOSF9YhcU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzhHwCRA9TVsSAnZWagAAhX4P/2L6uqH00X3op4PI6chu\nkf/WV//6qfoOw7m8oHe/0xaeNdYhaKgdxVPshlLnmV4HZrGN9XdVPJ5/JfiN\nssjyDEZNTjOoWyX24+/wAP4Yf5MLLnC60jig/KxR/vwUOt92sSvPz2B/6gnH\nQzltmyCc5c2FtkNJj1Ds4gJls5ZYfrh56pB6pEnx4+EJA/6RyGG4sm850Ne0\n5Kv1gTnPIpHzfRfJlNW5YLDQIyACoWe3y3sOQNAKHqHrCUyJcOa4o1JEfN3I\nEH+cz1wDRmZ/UtMnpEypAJJeEc6Cny6vmTr/vv0bL7MAA5bUiJmj2jzTd1ee\nxAPxwgj0TtLHJf3cJRby1kv1Jt0tDF2NugTw2WbdjoakQaeoONLP8iyKKCwQ\nwJdW+NrwKqTW+hreN7SnLgqER7HYtvYfaWAftmMuvdnpR8OwOWZ4W2c73rYT\nseytB8MsjN224wBKf738VWm2/JRRLq7V2sNfNYoPp49yOHQ/AUPkSfANFye9\nJ/VZzKtvJLParIts/Y21N9wy1k0QrJGRII2jd8Lq4hSWujIE26pOWn4Mbxdo\ns+39TXQwQHw2iiM5zuIsMgQZvoX/7HXndqDMScJVllxFY3HA31CRM394A9pv\ntsW/40VxgDXrlQSzoiN4Q2ZO4gOlOCpHO3y5hjUUv+XL48IA+yULR0g6CbTa\no3u0\r\n=xXr2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.4321323e4.0","@material/theme":"9.0.0-canary.4321323e4.0","@material/animation":"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-indicator_9.0.0-canary.4321323e4.0_1607340528352_0.16711768483411182","host":"s3://npm-registry-packages"}},"9.0.0-canary.2d5f32d41.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.2d5f32d41.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c20e4d7d65466c3f3dc8b9f4a21f83af0b068cb8","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.2d5f32d41.0.tgz","fileCount":38,"integrity":"sha512-d+JMA9gmWtiPc2coqN+sspQhaXOobmFCgbyas5TaNBzx+BeLOfzVfeqBijU8QqQTxnotllVhY5O7Qq8nRhXILg==","signatures":[{"sig":"MEMCHxhZZQ7zbPehLUj410OK72qUG6MQYep9wGNWNy2whNsCIAGllhrZhh6aratz3Kg7wN7cRWNWqwqIe1Z6OajQkgQo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzltFCRA9TVsSAnZWagAAZowP/idAHzbfwKVWSP4Zqvql\nVoj5dbztecAwnyAm1xhj2NudSab4pbplzwf1UaspqXMJbcL3byJDOGZevwfC\nM4E/AtN7fR6OwWY0pgPopSZvxbc+c00e0HgNRJps4YiiJZpqQjjUhjtesJQt\n4WL1ER7vdWZGlphiWgVqZaGipGvqghADRbEve585ZhkY+gG+aMcDkwEgBAlO\nASKm+bHe7XkxrhSKicjNSBSlr2dOeLa2L+iAsoHZohIPZZdJxK71OAcAjRmI\n5PMAfM8m/DS7VY56e0oOdAh/JmXCUTrynGHTjScdsJnljT/UWe+jvWQpTq/P\nBkCPtPLOD5Yd7P26wWA4rQgOAzuvq1cGKi5rUmaoKIUskNyXqKP64ba1SPGy\nZ9yL431fTYrMvd35UIC0+yMB/q8JV1hXncTlDaiR4ISdkQxhLurdw1Vth1OT\ndhg5SI1RPQ9H+R2DPiMK0EhYocAik9mnKAgqzwlh4cH8AG5v9GqBvhFkGIWu\n4J4xI0o2k5g5CP+r/HSaaH1SbC3fNaqB1rhV+rN+esPK7PVfgev6BZfJmOBP\nYsdms7mIdurnuh+zlKmzxfirXJsU0ayA05guVisYpamLLpN7YRqyGOczn9/N\nQlniICNgzDqfh6XZnziLiUJCqxz/kfJHCBz7eInU+q8nk8mKSN1bHI2H9qYR\nrNd8\r\n=MLkD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.2d5f32d41.0","@material/theme":"9.0.0-canary.2d5f32d41.0","@material/animation":"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-indicator_9.0.0-canary.2d5f32d41.0_1607359300046_0.24614371236360966","host":"s3://npm-registry-packages"}},"9.0.0-canary.8239afc64.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.8239afc64.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0a0648993c1675c0a0e9f7516d9c7f0664d276f0","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.8239afc64.0.tgz","fileCount":38,"integrity":"sha512-rkt/gz2rw4y1rKmjqJ7vDbDM1j8gMinonTi6yLq5l+qToNsQkVka4imKGodU/0xJM4UPO8jsmbZy1+gYvTgtfw==","signatures":[{"sig":"MEYCIQDiJksm7JksEvulTcs1bneDhNsD5WvVpLmmFzcGLr8YUwIhAKENsIkwdQxKCoOq2yWlK7tjblP8t8yr1X4S309MjoGI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzoc9CRA9TVsSAnZWagAA+1sP/R0ONTKnzy4DpAZQck6z\n+LFNTMQAPEZxO2HR/bF8W/HmQBwBMLbz+XSJHMFtbgjlgcLJndhX4gyRBHsa\n8YfJjQkZ0EnvXgi34iI2jOkq4IcES+K9CIaNlmfHS02diUpybz+K8OcFZ1PK\n4R6eqSTeI818YKb0azfwqM2gqJbtR/XEC1MuCnFSDh8DQ14ST3dPzKyhWZKl\n4Ncbblq65IPvzjfn4dkf5qRwTAGFXkOMyUe4amaxiKQuyrWKp8lbCxclCozj\nbxEI08cXqryca/Mlj+L3g15WvugL/YeHiZbIa6BRbMAcKOF/ZZNXQBuWeeES\ngVdVMBdFkgmU3JCusE9iJaLGcFiR5So3SBK5bgLzW37Dx9A6DZaHbRErzaSI\nwO+MMo9isA9zT7D0LnGei+GX7lX4mErn/ZX2m7Tqzqj+PAP7BXkndpohorbJ\n2wuHtWdKe8oGE8Wor6wb/9paJbL/2XAQE8Lfqe/oNIXa3oAfEqIpOHrZXOYM\nEbyiNwdcMH2rBE+yD/r6JGlqoYNFohrkJIX0o7uKqbdXDddFD1Oy4uVtv8e5\nQUEG8eJ5rwBDyP/iY3Eu0hu3GwBvSyIJ0wn5FBZ87b+xrAVc4klEde7Ag0bg\nwPvqIvDjV1avFllVt8XQ17fG3/BRWz6NgFH9aJziGZ3I3dVIk4XqJeyDhmDs\nRNjT\r\n=AYSw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.8239afc64.0","@material/theme":"9.0.0-canary.8239afc64.0","@material/animation":"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-indicator_9.0.0-canary.8239afc64.0_1607370557458_0.7837931059524494","host":"s3://npm-registry-packages"}},"9.0.0-canary.6871336f1.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.6871336f1.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"9aae17695086d5a5f3273167e558e3f893e24ac8","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.6871336f1.0.tgz","fileCount":38,"integrity":"sha512-sFm1kDXhFjzn/iB+FmzFibE3uefN5DXcG6URGuYhEC76N/KPw5+pRs1IiEG+w/pbhaVDmKLFy6rKOmbv10qekQ==","signatures":[{"sig":"MEQCIBBxlzDBbRU682LVrmoxkoDeS92x6sm3EDelJsWk2jXaAiArD335MFQZRKmTvnKJF3FOCGSDgYvZEIziYNV0kd9K4g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6NMCRA9TVsSAnZWagAAm0EP/0shqBGi3ASYBr58CSRC\nL5fmqdgU8W+uoX1FYZwtkXAQ5B7IR9g8+KYrUdmmDUBJus4/MGoICMvOyA+H\njVqT16RJKwbZZSh1q6tzoQaZxp9zrT3w/KXoe+h/sBh/QkOoUmTqs3EfMwDz\nkhpqDatRbukYw4c3mITxJdLLulQfgPI1vQukwXHrWey0YR98Ivpy9pL5Guv7\nkjcOjmbZb7nKCYcBwxsvoNDcbufLK1UrJAMWMImg1uFSvG6TB2x5JxsU6hGq\ncihX/LuQj5W8V0hzeZV/mLwSCu45W3p2jhboTjC2B2mcZEe5AodTHZoS2NXK\nS4wo9evLfpj4CysxhmZ1slhNdSfroZstghSq7/dTHxUQHxZFhSchiAOenPN8\nMjKAw+oVs+5uLW82ai8Rgf6ZZGonLWu3jiO3ZxteHhcySjLD3hsRpZ1uamih\nyipQ7k8e5w4iwSOypyX2EpUV7S9k/zyDGITxxW5eCqE/YHCqErzwWJPvwNBx\nGAKPWjNNCjhut79n4kuG7637cv/7GW43f+0kV7DsfjSalH5MR+aqqK1YufP0\ncai1zVMO/GuDDVOdMpjEQSRfuGK+koW11ANl4Q1Ef1DyFy+bzlUf2d5IqalJ\nShfwL+S29dl33lklowLmYlS5/kLVoNTYuigyRgKqBM+u5cBfU7BDlrk8i1GH\nwy32\r\n=//V8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.6871336f1.0","@material/theme":"9.0.0-canary.6871336f1.0","@material/animation":"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-indicator_9.0.0-canary.6871336f1.0_1607443275969_0.0055518275795982674","host":"s3://npm-registry-packages"}},"9.0.0-canary.9f718da94.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.9f718da94.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0b44f2540799d0cd3dcc31182c7fea2a948b8435","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.9f718da94.0.tgz","fileCount":38,"integrity":"sha512-SPVqplxfEmZIHPAhr8o3YnFamzxBzkGy4Q/K0FMKqhr3hh6T2or1L3WsuPN21/sp9gnthyOPWe+xFk5O7fUrmw==","signatures":[{"sig":"MEUCIBIDaBNj1ATqaLUN8Lb+C3s5uPlg4PLGJYFmCyT2ySYiAiEAt1ZcrkZj60bnOKk1sIdCPk7h+J7eMU8vWnJc3qPi8S0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6YOCRA9TVsSAnZWagAAoyoP/0CfWZkIVllQMJNRUluS\n/qtw8fKkcEYnj1Z4NtJQzV0rAjmXI0tk0V6QKjeKUaEQofezpO6urIEcypaj\ngyk6prKNPd7n/QZoMyB6wDSf8jk7jt/Lq0jk14IL7QNH9QCjbFakehcSjaMh\nBhq07PKgKXlJvImUea+3cfOin9JwYdLWkLGvWb2sPQHZrYCz/Zsx1vucQGXD\nw4p9sYiqQaIK0l8lJZ5BsiVnL4KodNKpK2i+IKNDhzZp1gl6Od+BOI6QlKE2\n2Uin35qckR1w+ej6BEoHhDcfdWUxM97Hqxx6WmecnRZ9ucJyBAhGZvgJYzcD\neD6o1dEiABzERlCOjF2Gamd2tPl4PuLXznGepDnedO8D7p0ZwRoOdEZV06rW\nwHFDnOFvouiKoH5tE/+x2sOd3Jhi4S7ZkAyviLCMacIrqD1ZmdR37IM7QaWM\nubePoKD3iTXcsRBM7BZ8M7rNDU69gkFoJWRvhF15ZyDMb3ukobs75ADODpY9\nd+ZduGo4/tOAaCA1jgZx9rxtFsMJb7Q0o9K+nkONy/rx86aICe0s/thEn1q1\nDO5fR3VTDTupIrwPjHsWg3uvbB5VNMvSUFeliBx34tVg8LMSU0k8QcyArajw\nnKcxDx5RL39qH29m85dONkhxXEgipOpp1PEJwbMm+0f74Z+bIZc99urZ+tse\n0Eni\r\n=y1Fu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.9f718da94.0","@material/theme":"9.0.0-canary.9f718da94.0","@material/animation":"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-indicator_9.0.0-canary.9f718da94.0_1607443982412_0.9198165296515204","host":"s3://npm-registry-packages"}},"9.0.0-canary.1fccb1418.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.1fccb1418.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"1cd407b1e89091115fc709ed0eefa98a42f5d778","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.1fccb1418.0.tgz","fileCount":38,"integrity":"sha512-h83YNs4Rkjf0K3WNqgcqt7tIyRf9zPX8X/jorz++KZbw0vJclrqYthH9ydVgOC2P/q6tu0FihuEqeXVKkdeMXQ==","signatures":[{"sig":"MEUCIQC+82W4GBjnU2i0PLmYZmKDm8EzjgjE1DelTOhXCwo25QIgU0+KBq1CtR0h36ar/mzQbaerL3z7ChntAIfkUNhziBM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6mVCRA9TVsSAnZWagAAiG8QAIplHDp+Lazv4sU2MzRT\naEBSqk8RF9YQcHXttL5/7tHzSSlhkLJtOdlvUjk3K69T0M0eBLRVA8yTge4j\na47Sp0CV7Kc46hubQ559r+jXbSDVmEbtl/lxzSaF/6Nh0nDEGPxVdX/qifSk\nofEGyElDtMISKZngs0nlwJ7duWpvJGMNVs3k58JDAoEHUNlBYwFKbPM2Qi4l\n6MEe+vUmt6AtaEeAREdyblc/3XfQss1042TS9KS6Y5FBM8IeWXq8fvWnFZJB\nu5quSqsmrja6wsdCvPy5wJEKfKWp5DZ6rgaSOfMoZI71diO/QWTB6FS0XPXJ\nH+IgfW6UYgDCaQdUKW4aNyVpYt+pRutkUUgXHLke7fLr+QuApZVSoE+dUaiD\n/1ixvvZle0eu22Q5tjYaXMvUv5bKJavLsLxLLiFdG4vw/lwJCdT/as58zn/B\nkx2siPN2YESTbcZXPWArDRtN4jaZNZ5Zqq/9sVoEBmwEcLAAoQ6OuvO4eekP\n5UvjTGXWqsbRSdhghPQYfUJnJn2vq3hW1CZvj7XcS3/yqrsMZoaY2EFexEyv\niJYKNkqX66NebgCHuX8Jx3VhZHeRnxRa2S/XU4aVoXd3ePuvhLN8Ynr7z7yt\nvWE/gRhKIC8qVzGcvJQHVbQJYErG06zbwyKTneHHotuczPKLSu+PtwGBUnaT\nhAtf\r\n=A1DI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.1fccb1418.0","@material/theme":"9.0.0-canary.1fccb1418.0","@material/animation":"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-indicator_9.0.0-canary.1fccb1418.0_1607444885368_0.6499714314552241","host":"s3://npm-registry-packages"}},"9.0.0-canary.afb68894e.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.afb68894e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"f23cb7c0f8d650b9b100ec0e16096eeeadf13449","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.afb68894e.0.tgz","fileCount":38,"integrity":"sha512-SaSBiajD+LY7q/XOxBTi0fqf/MFXFd6XOoUnO6J5Krm8xzi6Adwi+x5Uc8yjzXKXXTPjRLJrABy9KVljpjs/DQ==","signatures":[{"sig":"MEYCIQD+6jCuBQT9lwFcEjat/4g6S0rEk/E6ATtYIFk7Ob3JYgIhAJtU8P0DmaAsWixi7BnIMgc6HT6V5ACulFln9zHH7I2m","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6qBCRA9TVsSAnZWagAAJkwP/27ECXFhL6Zm1NDN3P2q\n8T/8jRPCBvfmAjLqQQftGpkDGcB6xOsK2H9upbDF9NAkvcr+mjo3+tiZRpsT\n5KvB/RFjMVxCl03foRsczJULzQEFqF3CIFJvoKjqQXrIdbDj5KhlTnpEwirl\nK6gIjsNMaBbNltaYRlt982WVjWJGP3OxxAV2uMfgQi3hrkgost6lmdnYHFzM\nHlvOtLQ9whvXzl+2IjBl8XBzFziCxq5gxBH603OXnDnYYMghXipfwSkUyKFk\n5yUR8xhdqLl1VD/v83q9FhwHIk8dalQS3g1SaZgGkPqCKkXNnGLglz36PgSO\n5MsNyx7T3m8+KssB+hx0zP3iVdP+eqQ5xmb/jwHyEkFhO0EIGbAcxdMVae00\nd32wR0zlcZ1L9fQ93rnhyf8UW+u9/TvxWPeYqAGkA6gkvsyXEea96m0BwFjs\nyC0RafogvnPxzrmmcQaVHpqB/PeGEukxaSRgodKg0BJEmt1RUnq0qF9Fd+rK\nq4LkFbHuArH+2llwREaiZNmBclRb1RJaapN9FJhPnn9YYI0FLU1d4uXj1MKU\nZWErn6eVNURlX1+2bXzW+le3JZKDDBKSCS69O50RSOR4qr1tPwUgxzN2/bNa\ndlcYS8ZPx5htFBtHN3D7wcOH/98A2dfqFz6d0n17n5KJuDUH3bOubT7SUthc\nI3Hy\r\n=OYcU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.afb68894e.0","@material/theme":"9.0.0-canary.afb68894e.0","@material/animation":"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-indicator_9.0.0-canary.afb68894e.0_1607445121204_0.7665926613904543","host":"s3://npm-registry-packages"}},"9.0.0-canary.fd88d40c2.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.fd88d40c2.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"3a01063ab14887105682b6ebf67d5f881e6d6ae5","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.fd88d40c2.0.tgz","fileCount":38,"integrity":"sha512-8908qYvqVYbgHRgETSA+Rl2sxIJzA2E8zk20BRCv3mNaEgiPf7VIgwnbOKEoRmB5/smW/NLG4Qr3LICGxoVpbw==","signatures":[{"sig":"MEUCIFOUPJdIXNNs1d942Kz1ekMy5QtW4m7Yr7YZs6i0KNu2AiEA5vHZyvigYqo3+Vetzk5QJJOXR/tk7VmiSu5C8dCrdhI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz62iCRA9TVsSAnZWagAAa78QAI/NhAlfBrpUOZQeENBx\nPP2KMyX6/jVHn64dTvUhjx4BryePWcfVU6uZD6VVd1uGFBhIjb0WskXhTfDY\ns7TAYjSE4AI4snkP+cCtSKmyZVs8w/0zvQARu4GLEx6t5gT1zG6CV8moeNXR\nj2KVA9oqUhgN6WROzQAxcO335IqFx2CFS5Y6uZOAeZ8NpsJcHBumXDW7hVRo\njt5wCT+Cnc08NZ01Up2RvxDI4ZJrCGoWutFiSLQDx9lel3xjsOQoTSZ2zUBR\nazq6e80FDo9JNWnOQ12zWD/fcGiJeah+pIRMH+wnWT1M8WpSp3iIg/YlvIXU\nD8y0kdnpT8UcSq5BZFsKgTkPXsc3Qz1YBF23NGzbU2jRV48C8pno8nBP65l6\nehnbJoThkMRJ9e4fpEP1LJDzneU9lcx22818ziraTyLft5PPZRG1SziFwPhc\nz8zVXXqbbLyfjl/wXySQoo1yNWbfj3iq+EnWtMNlOVx3ijgHhZpz5p0XmDe8\nJhY4Bk+vf0o9Xu75GkAcjbffj8/n8Xd5fBzi6+4FCfGsk3qRIjGofbGijNcm\nAG0vLV0tMdjyqFqeIYqlMfbAO20zgl3CClvJ42DRNS9IKkQSW5/5an7aUBaG\nkMKBNw7m+luc/vWiF5fn8v2XFL0YoWODA+k5eu+bvJjgbUMrbWWGx/Sk106S\nWxBf\r\n=iqlU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.fd88d40c2.0","@material/theme":"9.0.0-canary.fd88d40c2.0","@material/animation":"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-indicator_9.0.0-canary.fd88d40c2.0_1607445922389_0.7905254662978081","host":"s3://npm-registry-packages"}},"9.0.0-canary.ba9e3109c.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.ba9e3109c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"3e91064cd57f0be0250d04749c5477b53bdd2271","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.ba9e3109c.0.tgz","fileCount":38,"integrity":"sha512-fWaPaLrHXkhO5F5djitUrgz161ZQLawpaP7riHUmtPb6PBBBiYfJolA7hVO2/H+1BAVlUIMZkJIqRApqB8OY1g==","signatures":[{"sig":"MEYCIQCX3eeaCmnxeWdM1msHv8ywiv18PH0gccing2qknE7EDwIhAO+XTVil8KAamJUyq0pAZIV5fcUU6vRTRS4FTERV+byT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz85jCRA9TVsSAnZWagAAxQkP/Aw5pQRtDrUgs52GVEls\n43hkOEFYS8W59sQ/vfNhn0znp9kZslIrQKDxLIobxmOdKVt8acCCbWppF7+c\n2imveCFH4eSNn2NkUA1z/vYgd/S46nW9TEwZlNlJ6Np7yNR0GxvQ322knsBP\nwJDq5R6xe7Gp3djvmTiRDC7XCyhIJSaHOvQOv1B32by66Oo+OlWZQSRvhUr0\nNeHY0BkbGN2HFsrwBP3+aKzzSH4g+P7YI6c6MAzWCDKEBNyACKc+WzvBsiEc\nx+Mv05YM8eWRWh1K+1EvkoCy7JQ2/d8t09Dn2OWzlDvnMjFA+AVvnvy7dLYl\nbY1YsA974IUZt4sSXwp3fc+JPiQUkCZX6KSlh7X2u/0qQVmnmcRKDhncncyK\nayj9OQUcy4lKSQiblAR3kYJi2dPeVraMyoqr1VMDlFfjigDFMByriEVthXIa\n2CMmq0Ls74Np4PL1PFL+4JTi+jv5FhGnSMWaHHzgGFBzYx74J6S57CAN3vIP\ndBufcGdSquhCaSfhnUmAsFU6obj9ae7Ob1wXwV5N362HYT9EiJaO9aD8uWqy\nj0/UDYIv09+YPpaDe5WuoQSpMiJHqnE59PZnexKVd5QDc2v/xWxO+iuAB7wH\nSoUKoDx8God8pAidrp12hqTg3IovHH1Y9STIm9AMTxDLaeJW6L8UAVElsTYq\ng9L/\r\n=Jsp+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.ba9e3109c.0","@material/theme":"9.0.0-canary.ba9e3109c.0","@material/animation":"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-indicator_9.0.0-canary.ba9e3109c.0_1607454306780_0.044942926075028256","host":"s3://npm-registry-packages"}},"9.0.0-canary.1085c3b2d.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.1085c3b2d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"8c3b4d682b0294dd111b385a7437ab7f2c204430","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.1085c3b2d.0.tgz","fileCount":38,"integrity":"sha512-jTvNwmIbqrioZGacieUgMQwHPfFlCayHgJPflAi7oqhTxKDSA+24kIrDP2WJmCd0z6/Qydu6k4cfv2PYVKAwrw==","signatures":[{"sig":"MEQCIFesdv52wvU6ZgiT4IjpdJf6DcMpPVIQteFYwwcKzDm4AiACqRgl5qtCNGVYkeoUiC3p7xXpGP9qRWqOdjfeO3PFlQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0SE2CRA9TVsSAnZWagAAOuEP/1spUwDyrfao4IGXlU02\n3vE+xy++jpVAAGCF7nipTDt8QyEjQxC7oBCWpAcZdd2UUJl7nwmYoB1suCBw\nDGsRZEJVHbp2EzbOCrDGacXO4Ixq3D0rPgF0u0Nc4roW5KQrIn5IAxth2EqJ\n+lVYoSeHYqU9UtUDyh8tdKl/mpEvBs8h25QF/OzSsKwJAvloHiJyF+U7C9x4\n9QVLbwMe6b1nLLj6zf5L3LvkSvMpFA5T1WzslGQuh6UjmOneO6EVRIV4Spuu\nZ9fjy0I7U6eAhUSbztrNrb3p1qhmXt2wmA3yMWJEifely6/2lUHyrt/Kn7J0\ntCdHTH46ezmxL8q4CQa7HWriV9zr8xf2E2d6BBZ8NXpXArnvQQG1554Lu/+f\nnIyG7+vCKTfo5epyLssHVRYXI+WmmEjBYyQh7sTvslA3eFBocpv17bSezAdb\npK4uEWLATfGpwOQ5zpCFntv+fjIypPaulwxaeiIZE+GvuK7rLyF1P+G/UaCr\n2hvwI5sH92JreNzXbByh+UA0nBlTQ7z117AljtNtUgNKpuXzRQ3bEvk3mRJG\nVU8T2EGmRl2YFCCmn2jGvbscpRQ6Oll/XrLRBsZ97sn74/z85+Rz3pp3xRMC\neytUUh7kK6G+ZQDT91BKZDMi18L/Us8cBrtyDVMjVcVK4atKyj5lIqmcXGL0\nDzvZ\r\n=/hqB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.1085c3b2d.0","@material/theme":"9.0.0-canary.1085c3b2d.0","@material/animation":"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-indicator_9.0.0-canary.1085c3b2d.0_1607541046171_0.968281287171959","host":"s3://npm-registry-packages"}},"9.0.0-canary.c5dda809d.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.c5dda809d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"9776dc5607ebdef4ec7536492a0b514caa9dffc2","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.c5dda809d.0.tgz","fileCount":38,"integrity":"sha512-NMwdjJ2zuf9SlOiinCpmMGQJJXLT5goQcfB4KpljwCTFB+OwUCb0SLJvXyCK0liD+8NI9peDbbJiZmFA03i4lw==","signatures":[{"sig":"MEUCIQCEwXYZI6wqS+YF+JMrjfVLN03/oJFrWgHBN3EDPINV5gIgVIEhfOSbFSj/egAEKZ5YC3UNUkl0v6kLJ3maF9TOeas=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0ThdCRA9TVsSAnZWagAApmoQAJEzpTXLG249MeZZXcFO\nrMr5JQ8SKBCcf19voi1/BcTabFP4x2NIGCdSxzY0McheOFs6KECIyiqLYqbx\nyqaXQYI9yLdcszvJgO16L9oPWPEvmRcdEgziLj6w7ZoVfd/GbcWnqUwMwOFC\n8Wcug6KB4GDy7wNZtqMfui/shSORXlWv0hQoxF8Uu2wVaZ7/jb6Mq/rUQK/t\nMfAJ0HXLfgnZIyGzaz9cXpTqb4eaqb45fvGqQWRXKRHR1g9NcFtHPN9On+1c\no0N0xau92VwHlExm5C8hhBp3QLl4QjOOQ50kgSod7F0U/CUD4X6psKCNMDIM\nZXW2vkTMIFY5AxcBgPYk+mLgmrJrymXlG76HsIP5vr9B4JkYL3Udn0Gbs3gi\nUyCl71UaQCYjcKD2cqpTUXEarDtHZJT+cY6lF6ePcdcNIm4XCrRLzjPMf36Y\nRqb/B3H7OrVixy4bqIG/yteHeER7k9Xij3Zs7V9qJhm2ISTsKlBBk4oA6KdI\neeL0vRHo5mDtQJMtCR8BInc5xM1M7yx3Kh4KwVZv1MXCLdPKrWt/o/rHs24K\nIpngoR6GE/wIRfns2Xj2+1+BHERWmqVAjBQEsGkr7za/DB3hVUzzKmPLEmz0\n6k+SCOW/VUHCF0CG+c+Z8QC+pIQyANKtbaLcnrS2I+UhoDSE45NAu0NiJ23Q\nCgBD\r\n=VvSQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.c5dda809d.0","@material/theme":"9.0.0-canary.c5dda809d.0","@material/animation":"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-indicator_9.0.0-canary.c5dda809d.0_1607546972547_0.7140199491817656","host":"s3://npm-registry-packages"}},"9.0.0-canary.f5f1bd86a.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.f5f1bd86a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"863fcb0f8cce7cf03608f77c7b247190d5cea564","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.f5f1bd86a.0.tgz","fileCount":38,"integrity":"sha512-npnPh7BVXtl1OyZu1Ilz36KY5vQG4geqwXW734vla2BfnPtfzeQOTCRPegLhwqFXKMT60QvFXAGAg/xMznDc+g==","signatures":[{"sig":"MEUCIH3kUfSNKfqpNp722cHpV9CqJ6YumWiMrSj89btLylOWAiEAnvQVoPd7sSGpgu1dV7e/drux0g2dpAj+QuZWzSjp6Dw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0TyZCRA9TVsSAnZWagAA200P/3AnE4TsKrI9lLL6J9yW\nz2cQdMTzsSiyWWJDFsp+NIgAvL4jdFNWhDenUXP4UYdFaiOYKqqIXBmKXR7Y\ndpjctqFVSIW9T1wnZjeNzP9/jMXWF+b20CNPXQkPJZhiDycBhNDN9b10lYz5\nhh6js3mIRiauUcupVnyhMMbtzs5oDP3xK+oRj3GdyHJxfJVMHuGG8nZNxhCt\nKgfeEp54Bg80NqVFoM+v3AhXQHdESjg7Y/TUrR/XP/BZ9wwyFg1/KB7o9b79\nu0KSBMzvWQMgxErMXsYapJGNSpfKFqrmxx5tjEiFhpu9ldrV92BM5AmtGnjW\nUHaQCP38aoxNwcW4v5UmrHQtiFqawzb8EqX9GTmxHHaeRKwB7L/8I3z1oRTw\nEJwgF+F8jOa5A6sJzjL0myoHd2e5CEEH12fkUy+f3vsHOe/plPkabfwxIK/0\nW9YfBAoPp7kLWTVC2JuxOvUNp26w3mkHcH4LvYMEcwtvnBTY7xeAudZX6RjK\nPUUafxZZ5z2RCqYNguhdkJH8kLtjr0nf+irwGS+3u7f/p8vcEBq9ctBmTotN\nldDfVvd7+9ecRxtFyReVgH8WtQmZzz8H4Zr9dMIQWupbEj48lm3SBuuXxZs5\n79019vsJ4jM2LoUacuJz7oVQjPS7h7EWDyXXBzHu5QINmxJ70DTrfRpJRbSv\n1VOq\r\n=g5nD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.f5f1bd86a.0","@material/theme":"9.0.0-canary.f5f1bd86a.0","@material/animation":"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-indicator_9.0.0-canary.f5f1bd86a.0_1607548057093_0.32974879997906914","host":"s3://npm-registry-packages"}},"9.0.0-canary.00f38200f.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.00f38200f.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"865dc0ea454c8f62206ec08de77c177cdbdc5e0b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.00f38200f.0.tgz","fileCount":38,"integrity":"sha512-sDn5EnAV+Ue3mGe+xtFDjgMAM8tKGTzPDiHBDBqRqBZNe9GRN1eqNtCH2l8se8s4amwXvjdPfsT5j0F10I5htw==","signatures":[{"sig":"MEYCIQD7U9NdcGtj3khydrBt4JBMLThxiUrZAc+q/UBwFv6M7QIhAPR+wE86Q0Rt4c+N6REREToU8SJ1ZcROJZtIhlxJpCcr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf05PNCRA9TVsSAnZWagAAMRwP+gOvIlbaXs86DvO6TNpB\nixd8WYroByzNXI4/SogOidnmJfjnzY/5g1tMZwnqM34tChxX99JpgQoPT7yq\n2us+oh3NgGlAFviLe5ve6KvUkujdTYyHff9YoT6Jx3ZvTCNm7LOFEBrVr8uT\nZQJigoh0f6p9z3sEDTKp85U1lLPFkhiKhzEgN+d3e+WcCj1aDMTfENYzVVEu\nIVDJrqyzffpi9YlixDO8WJI47wXtFLaPTGyb81HVLiul+idomu8iON+1upka\neJiCMqnNjAzLcERhO62CfK+faHUcDSgjUkHhPDy4sFikcDE4t7ZDewzkvQdn\nuzGt0oNTjb/9ZXwWsSpIWy0DUcXRIjAmymJvt0eQm0vIg9szIwFO+ePPvOvt\nFrcgmHSH0A3Xb4A97cHboxKTb6TXPH3DPG6Q04ZizbgvZPZWrhftFSSI6eIw\nXLJ9GC2T07QvJG5u/uuXEh7TMturitOKHqIrH7OYlb2m5c3IOahv5rkJ2wbu\nEbN5ueI8GXPINmwS3ibZaN1Uwl4z733zl/I1+Xc/T03E1YcRgaEJleG6qEsW\nM4UvDA6S6P95gLeVYLO8hALh06lbebX9ZvRtEIb+JjYAXNpYTu/uv1Tt751b\nqmwSCIjIQgOyXUUezW/jUyR+2jVanG/gCiiGEuaJ+JWvGWjo5bLweSYkZxow\nX501\r\n=DhBE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.00f38200f.0","@material/theme":"9.0.0-canary.00f38200f.0","@material/animation":"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-indicator_9.0.0-canary.00f38200f.0_1607701446486_0.48435859812406634","host":"s3://npm-registry-packages"}},"9.0.0-canary.ac41a5729.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.ac41a5729.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"9d0c7f3de988f172a41b8627395a1ac27cd4d841","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.ac41a5729.0.tgz","fileCount":38,"integrity":"sha512-0IMJm8gYLXqvFiAQm5tyBH5n6meTG6jJj8k5BJH6SLNCVvsvW55E8RVtoR6wS0nMh5A4+XUJKHnwI7WFXYHxCg==","signatures":[{"sig":"MEYCIQCxRAolUQxzNoEa845swPXXHfl7F2SH3JaWj8WJTCKUVQIhAIvLcvAPJ5eoEML18HpCUvZz8qpt5FZmN2+WhuRtOMfu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf054LCRA9TVsSAnZWagAAwRkP/iBviUAGd6ZQQ2ESowZz\nVdbPNErVuZS16mUwAscVWV5+oJJB3smhwLp87LYdvcS5fMMA1wFW19HaFQrx\n8sWp02F6svIl+seCpmyh29H5ENfrJkrmYBK+ngcOvl8MPURWkSywa9XdW+aP\niYKdX00oBoofCqi7DM8V1ZouTPtPgywJ9izuf03tOpwOibBSf1Ve9bbCqRq5\nfrHtpAv6YPC/7soQwdvQDYaPhHDReeEN32KkvaiOoJObkdjcBV3orwpS39os\n2zxbJfoEgFTqOWkC/cHCEFdbiNFiphwd8v+bTUpud5l138/Jof5hqzxke7DP\n33F4IsxBzxn1jva6oKJ4fwNcoPFOjao/1MBGMjngo/N4tN5/jl1lMvB40Atc\nJl9hzWbeJzrAIRK4jCSX9ljW/3lO4xU6F9vakTsBpYSgsxRMJSPtop3UFR3m\nRcHWr1M3fqo+Mjfi3nD0f7TaQpXGXr5vKqayM7XzOnSaM/Z5U7eaH0CSPrDi\n9xS0u9H83r9qtqjcwH7mhMyG0iemh33acNwdzyz8jbYmtyhaKAcYkM6RTfbF\nmwEwFCHtItWgxra3O0ZDXCHh/mTU+5u+UBD9ghVUmWVGmmKTh56LN2kIrpJ6\nic9wHzYc6vfW6g17j/H2KsJARXto40gbrOak01E5EwGW1nks7mtY3HXdmXZu\nA7G3\r\n=aS69\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.ac41a5729.0","@material/theme":"9.0.0-canary.ac41a5729.0","@material/animation":"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-indicator_9.0.0-canary.ac41a5729.0_1607704075011_0.09977393694504633","host":"s3://npm-registry-packages"}},"9.0.0-canary.7fe0e4f05.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.7fe0e4f05.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"6403276a1358ca721a47e122e16678ac5b8c502a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.7fe0e4f05.0.tgz","fileCount":38,"integrity":"sha512-N8jSX9Gb9E/0bVK3d+tlwjZxWWwQwr2yHo7OZqpWd/aPIZAShSyfZIVYYN+ZZ//xiVlcmZCCHfwoI3qj9/dV5Q==","signatures":[{"sig":"MEUCIHEMoIOYn9RVERgDP0jX3/IwKKYl6iFpRBWVABw/yojOAiEA9noFRi7qik6AtSq7CyuxPWu5SfHF672ogjfVYDneeJQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf06bICRA9TVsSAnZWagAAvAoP/20sWt6iObDHVJOLcVTO\nP2ejDHgcWHV9yZHNzSguashroKOkYhIDVwdm7uSfC0fAqdKL3nQyI38Xhfep\nqonxxDzrTMWPF/Uu81ABi8GnoatMOM/K9QFXGWGk4yY6NsARrcQmtNQO55x6\nFozDpAH/WLMPPKTYfT19RZ3kL1MYsagnRRtJIRYsz12rWo3tA5jgW08mSpxQ\n8nRRvaEd758WcnCd6b9HUCN1VlCDYosBU1U2eW0YlNjoo57Q5yLqGjVkHvfX\n5ru80qbQr7pKCYqGZjQqZ4VjtT2hh3kkpuWXXCu5MvipbCPHW1uIBqIk7+kb\nmhVs67aKky6lCp4qESvUXLDx0EKz4MMsboQr1ZByKwtQb482XTqd1/MA7Z7t\nuEtpyK3OGINK0KtMai+46X5w19fNnq2WJRoKe58uIOm1DQ9dVMcLq4mqsS88\n6kXjk706fGn7HUV5ru6e+zENHT2BJgXd7GvMBPpEM9HzR43BqtOa5X/eqr6a\nZaQSMkZn4BwZTVyqyhHmj/DQtHn+Gx0p/LDKhYkws5OoebAmnUcyEAuEhSXU\n505soKcatasYObDT5svGGzpxCK3ViBBpW5CDw3NO3xNaYYmEzXKjdujJ+qXu\n87o/wSR5NkjTnoDtO9+63KwDW4izje1zmJgpFCzFq3etWsPGNx0zlKbeGImp\n+7Jf\r\n=u0KV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.7fe0e4f05.0","@material/theme":"9.0.0-canary.7fe0e4f05.0","@material/animation":"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-indicator_9.0.0-canary.7fe0e4f05.0_1607706311990_0.6759211280486188","host":"s3://npm-registry-packages"}},"9.0.0-canary.9244508bd.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.9244508bd.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"06ceb5b3465b717ea346cf155c0b0290a6e10b78","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.9244508bd.0.tgz","fileCount":38,"integrity":"sha512-uBr+s6AJSWh5VvRAEY2nO7vRcM0x388eW/kBNBkOa/WPOsR0NC/jAkS8E2fxNI/5grg+qeHYs4CnfbPoRaIbkA==","signatures":[{"sig":"MEUCIQDyYh7ucmK8yvvgbX26xo8WySkrzMKnCIJakSNtuT1VmgIgakRnB3hwKoJeocVUN1N20kA99YaGlnMTPpzPQYyOCOs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf08NXCRA9TVsSAnZWagAArMgP/3JUMLYIYmVhe/2Ceac4\n8vfoKSbMPnIny2JAUPaW/s58dX8lf3eRYdUQJNxQoemUsdhVcDPMIAwODj33\nyLBbtaC2Hfamdn9Lxbu9J6bFCvH9nhZ2pxzm6uys1y1O08FS2Wt6eA98kv8s\n81k7jUZ3RmXtFFlT4aWC1tpDn1QK/r4enYIoOEDL/6Hj38b2xkCo9wN4wHEQ\nWJOPIY/Waa2lnwMOBFB34DdayS39tL/6cBkaLYn0FARolHmq06OUy3w3NZnz\nHkFlco1RDOObVaviZuMGjbaftwqBJlxGFJAaXSQqeVn0uaQlgloZ4/ISCBhq\n4SEbK4naSrcz5xCoS2FH++upVGPaVCgxTDeZFwzwwG4b8Ht9NP8Ca09uBeGj\nayFi3GjTBVPJ+QBLD69YIpU+wQLiC4D1BicSIHEW0wy6yhn+JC9WgmTPhl+p\nRYcxsaD8Ir3TyVOfQwBlyReQ9s/oU3jrrVZ5nTkQ4lqeXuM22uuyW3alrTlj\nLrvpnsDMBGXRXUQ7NYcREC5XNPF1BgxaSbJX+uFX2EpWLBAMeHp/FojUYwvI\n58/snW47DxtAHB+I6dLjYQXO9my4ON3JNq/i76kjxBUg0BDlXdpWqRRnY6Ij\nP53OiDV6/syAmeAtag+VrPBkEmQslEApMlrqoKwp+2K1C9Vu9K9zLliXBpoY\nR5+Z\r\n=CNwv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.9244508bd.0","@material/theme":"9.0.0-canary.9244508bd.0","@material/animation":"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-indicator_9.0.0-canary.9244508bd.0_1607713623014_0.7470411743466052","host":"s3://npm-registry-packages"}},"9.0.0-canary.384a8eeb1.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.384a8eeb1.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"09e1aa0cbba9dc212089a2c146bd4f73f3fa2dba","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.384a8eeb1.0.tgz","fileCount":38,"integrity":"sha512-dcJY10PXTQWAXHcueZBbu8OAuAmA0W+bWhjLtL6Ksj2YQpDK6XWKmP8eTWnZlM++DcdSUZpJp8oqRCTa77GrGA==","signatures":[{"sig":"MEQCIAq0Y4zCi81s7jQrpRX6dnPppygjpW+yoMjG6fT+S34oAiA7tNXn0QSu2RZlS8yyzUbGTMfCKrjd7c/xsa4fYqIvUA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2j1wCRA9TVsSAnZWagAAVZUP/i4kr5VEKKT60EvYIEZs\nijD7I6mRkQxeKv2SbwLeharP/qObSNeDkDLOOfB+qDHsYbIogolTmxqkvI2y\ntQEma4WQmzHdW64G/4akXmKRmnuv8cUEGfEZO+QTLUdeV5L4Vmn6YMjpxM4E\nKtzMlMqSojcnUbQlpUR5a2l4AKDSQME58eWoH72tgoY23iNeU+3z/Ycunimd\nJt+iHiOvnYug+ZiVKbdstIeXIBkhuiidyHuNuMXpS1MAkR56SWyPKaD0Eiyu\nmf6T8D9DgmwRruqrKHND8tuNC8abcuBrj1gleH803RNlyztef4U9CK5zxIgB\nvIC1c9lXEsnN7WaQ6Wzqbf1Q6/Xj8zdj21vJGWMPNp9e/hXOnGgqtbE+UwPF\nhoLfOO+R4/91OR78piXK4oHpQhOljx5Gq1PD2dZzgx36hqAlDR+KVu89szgh\nK4XixmKYQ0I6aNsL7cz3WcGihH82+Rh61rpEgXU/K1xS0s4g9vhE6QZ+2lU/\nUmakxc2JyT2O5j4O0pUxnFpO1Ys/lhrqbSArN2ydSSAWtRk5ZXDR7gjIYrgb\nH7rT60EZ8rhPtosSRkJCE2dMeFZt4idsunhhsBMDqnWxOFainwFNh3QVbnil\nRkmwtalIBruCg4vASJssvyEwnqSScMYpcVm0GsSv5/7tDqFwj5DJqHhADThV\novXb\r\n=t2w6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.384a8eeb1.0","@material/theme":"9.0.0-canary.384a8eeb1.0","@material/animation":"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-indicator_9.0.0-canary.384a8eeb1.0_1608138095872_0.2869086170904507","host":"s3://npm-registry-packages"}},"9.0.0-canary.eabf9d5c2.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.eabf9d5c2.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"808147be32960fea3dd40bb9b670c022b0435cd3","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.eabf9d5c2.0.tgz","fileCount":38,"integrity":"sha512-B1bx5VeQbFi13ij+9uTlIMFqm7kDhgUX0zkpkfsdZvWLEqoU4OkJK0b85qjtFzXE8QhQsqzed49xYbHmI2jExg==","signatures":[{"sig":"MEQCIBlQ5G4G7TWscQVBxzLHKmjp+pWvVWIlhvN01zTDVtJ0AiAFUiZAThNh8p/sPLBg5F1HPhTx2CJMWjz+8vpUwRyGlg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2lGJCRA9TVsSAnZWagAAxz4P/A2vduIBGwLstpWqw2Yr\nss6Fi96wvKA07HaIAjvtfQU/vI2lbKNR7L8My7wXne+O4NjokkBAaHD7EX3z\n9hQTK9JcAaS+SOEuK3Sw/r5QvY9FKbqpqgd+WbIge2xFdfKXE3PMWMN6OXcH\nFqKyaITJxvLeg1hH9xzkYrvhprLyJ8YIIzWK+9ssgiVJCbs1HFnRL6q5V/kL\nDgbyomTAqJ2vANd/O4TKvhUT+QQfOkeu4duqMcDSc40DapdYkGvYMBcsC50Q\no3TqJdiue3CKGJYfDunxjRofQmgCPWPXwVnbYoMFg6jP2vgUiM4rjS9XSoac\n92gszqVRX7QNel4TEyE86QGpsdUkHdDgCZibE8TfPpDbWIIxTzpApWgcdnn0\nRI2K6JUSTlpK0TTZHEih36H3C1u1jYWNGkqpg97iPTL17JvcanR4hElq4cBW\nJls2DDv3AHy7n8wqOmx1JzHr1U6fUoQMNHT6MVYs+Bl350u9MPDwnCRUlIvC\nRGT7/rtafxYM5ppV5x4NpaxHxBLvmyPW0B1NCsGj0WGiD4DvPGYWuCLYsBxa\nXXyDKopglU+7oI5EtTzqSyJuC6ny15nK6bP89sOnypVtyu8rNDJO5lGAtgYU\nwtB+KWGe+QgoGom2reHCmN6MvpxSsf2KXXmUN7hTQcVizDyiKD2xAlTs9oB/\nV1Z+\r\n=1bPP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.eabf9d5c2.0","@material/theme":"9.0.0-canary.eabf9d5c2.0","@material/animation":"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-indicator_9.0.0-canary.eabf9d5c2.0_1608143241069_0.6514182001680577","host":"s3://npm-registry-packages"}},"9.0.0-canary.30fdfd06e.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.30fdfd06e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"9b5c5e19ee2b89c0fd6c8f89874f70d43e06b05b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.30fdfd06e.0.tgz","fileCount":38,"integrity":"sha512-2KqFjWNTXicQEEzB6SdyOCg/7n+cYsjz4nWWRIVRtdY0DRywteH+UEd3Vx6qNiHNOuzSZyIWuP1dMBBd0CO8Yw==","signatures":[{"sig":"MEYCIQCCZTmvR9rD8v5epi00F84f9FuR2nsxadeZV3Ubf06j+wIhAK2VTbwTG8zCWTaW7Uhr5N6jrp5iJJfNKyqDMLlTKQSH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2lrlCRA9TVsSAnZWagAAh/YQAJWuVOYH2rU3dAXXIJQG\nlM+rSXITeyJR1cactA9Yp1sI3xaabASD/U5/6Y2UavffMd7tO246bMPCyHuV\n/UErE/U6OAYiN5Yb1pqevUeanGg0u8NqM745kkfzZt1VZlKdb4T7s0Bi+VD8\n7U/ZqGpVTXBWdXym8H/G3eZO3m+gLdttjb/HfgbyPDCpMNjsTvBQm6OLUFtd\nRbCQsDrnkdIevbPmVbE0ifCLzx7WT5zdMbmLnCHIUNCl8bz4Uv3czyCKLgo+\n2p/ndEFOd6u+aJp7epc/COJ7OCxoxRA2fsVi2OqVzzdf8ewGzOhKT+7pK0ux\nHQwz/OzD63Mp201jlmgUd6W3EnrYcS2SHDwI/Qa7+8u7SAShqrl7fEW2l8hw\n0vK7Erf7KFoOymelwPBR2IMd64QE2W16dJJmYndBYBdO+epzY6G5C6QlSZBD\nsEOd+NjekOZWOupo5SRYw76M3CRKGsVa/lvfPtQNusJMxy+WqdX8Q45kmc+c\nFsiDgSwzM0u5SFpJ7K0ki+clni0ZwANUBf3IwkhJlkoRln5E9e7VR1XMdnGP\niPvnPrIUPU+TpXI9jDPWsYZirrhiZIbQnPXeaimH/GzCDUYIRde/UP1k9Myt\n9cis7m2GTwKxC742yzCMuYZOCGxM8T8dxO8wRudW5XXNW/sjex4xTQl8aIYS\nKtaX\r\n=6eVY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.30fdfd06e.0","@material/theme":"9.0.0-canary.30fdfd06e.0","@material/animation":"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-indicator_9.0.0-canary.30fdfd06e.0_1608145636918_0.7721748407245712","host":"s3://npm-registry-packages"}},"9.0.0-canary.9590a8f90.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.9590a8f90.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0fe272d022e4b70bf188c5b51de732f58e4d4520","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.9590a8f90.0.tgz","fileCount":38,"integrity":"sha512-qeoGRC1fbAYTXR26OSUdDz4rh5GaHsEC2TDYOd+NLJ4m4YcLA6Cp754xGVg8Cw2iGcwaBGGEkPUFWER83IV7sg==","signatures":[{"sig":"MEYCIQDfMZUmJtFNYbRx6t/epRUIX3lDEGL68W59SnT4rprprgIhAMepTq+FGEzCZPg6mFoBLj2AbxlASqlaHfTtNwP09cnx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4i/YCRA9TVsSAnZWagAAuegP/0LEBYoN0uEqTosfvMsL\nwvzV87MPMF4Lk/uYAk5bsfKH4vMZCvskXQmn5GQgKQSGQDJUQ8mlb05bww8S\nI5183zs89c+Ljg2DplJMcPWInNbJ0IW4Sd71SW4ekEn+PUnjiXb6reA3JaM2\nbRjNKNlU40vW2vqiWvQd3uZomNSUv6Jd3+s3WJTZerI9YY4UYxkm86jZ8n0k\nctLBMNJnSJi96Q8tUIA7CcL+gWRFEtv21MToj+jQhv1qv52E5XSzELKSnt6b\npiOPs1CLQiIXfTRwtnrH4nC5yswOcAyFssDMAD2ajsrhIZnGMZVLCLgUf001\nvSwgBIq3eAKTaeemyXW890d5AC84Cu79PGYX88owV6PPB/39WObTMabEC4Sm\nUbhByP6tD7wGo720Rj8S49d/w7cTVral34tvmNSV/TRgK2A/dcqcn+cn+zpW\nEU7HY6GgtqzYsALmRaOV8sz3BCARWA9CTxs+rtsCnRDSlMA3yQsG0LZx70xk\nfqlvoE9evR+ORqNzABiOv5YEsX1r29jyPFCqZjj0Lq6kfEyWd7qloSJxxnrP\nqkZbeUvPn91/aWwTvn1ufJbjlGB5zjepOmbCeJ2DsANorKFWuK6fgfkgNMox\n2qccWq+/DBSucirF9Kv8rmgJraXfcK+6BTBA1TjMYjTiwYUQd/RPIemV+qLE\nTXiq\r\n=KRhX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.9590a8f90.0","@material/theme":"9.0.0-canary.9590a8f90.0","@material/animation":"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-indicator_9.0.0-canary.9590a8f90.0_1608658904456_0.9654260838880604","host":"s3://npm-registry-packages"}},"9.0.0-canary.f89d8b8f2.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.f89d8b8f2.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"6cd8da4b1f98461e970e002ef65f8a7e71437671","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.f89d8b8f2.0.tgz","fileCount":38,"integrity":"sha512-Hnf5ZMp1YITxNcVI7oNOysmi2aKQAIAYW6Bzh3ONh5BYLULDIXKdh96HcRO5Yhr9CUt5rCEa9ovHAt2JNZcSWQ==","signatures":[{"sig":"MEYCIQDnlZPxswJZir17gcIe/tWOeXgCaCoAwaCoIqg3Rd0LggIhAKXTwN/G369BGyoBAnODulhReDVKCrlTeNFeFSzbG7i3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4nuPCRA9TVsSAnZWagAArFcP/igH842YGuSbHPa9GeO9\no0zk/JW+focgYmiezuIHS2dh01agZ8AECLW42aDVEunH407GKRy6SmzRoAB8\n4pUCf7pTroRpRniSm6T0CRzi8aMGCBp4fwC1R8lZqbfJWD1W1r2As6el53NQ\n/JyTsITEz0tD/5of/X0avmWl7iMRJXKjotqmq3edKeLdTRoR4y7vtHJhnXtN\n0+zYKQnqiiouFuptdHgk/exb8l1DPlsh8DRwGPRhDBX6B2TMqZawD60PDV/X\naWrNw4A88OEqHTPmIW7My9h0QF1BWkM63jSasJ/6SwK5xGF42oBC76MQBrfz\ndDoyJZvilVuWgLXi/solxb+8u2eK99BUdWkOyWXyaqoOzlxwKljDIA68uUqu\n7HyB9949A9kU2m6tyszpkwUG1WkcZOiGXpWHixjW/ifZkdbl9wsS6aNdR/mS\nxxmtU+vNayG3lHY8TMJ2xgq2Mdwn8tdJVHPBZb3W0v68Bzwn+sLCYEqLUOEX\nvblWa8jwNuymfJ/fsvZhOl+Zp6innlWMeqdN89nsvXx6cNde71xuPL93qDWm\nSZsHVyt1TUmfPeIWsuW9Dprwmgr7aNEqMU0s/vk1wGr8tNgWhKnuJ1VCGR3f\nV4TB5JvqnER9Tde9V3sa/P4z4yNMRfYBLIIzXA4Py3wsa0Jah4sTF5U8KtuZ\nor/3\r\n=xewE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.f89d8b8f2.0","@material/theme":"9.0.0-canary.f89d8b8f2.0","@material/animation":"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-indicator_9.0.0-canary.f89d8b8f2.0_1608678287232_0.6314958365211938","host":"s3://npm-registry-packages"}},"9.0.0-canary.fb194dd35.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.fb194dd35.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0a85b15c87b57fc052ff71bd92bcc819b4fae571","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.fb194dd35.0.tgz","fileCount":38,"integrity":"sha512-KptEoB6gbKUMxH4iSSVggfGhxO6qNGsRgE4iH6rCg1DMFv7xT1oQz3roiodAL5+5C0X4bo5DDPAPAVih7e5FpQ==","signatures":[{"sig":"MEYCIQCzE4SUFU4YNMgM3pwHBKkN7VGV/Refi4XiJEKXz4TW3AIhAIhYu/Hn4KuL2PPsvZuzLTpTHP7M+XH7uM3Fwanghn1L","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf6kPmCRA9TVsSAnZWagAAE34P/ixVuxpysf93KTT5dzfN\nxfMAqGxCEzTb5XRht0//lFfuEQ/EP7QhOKFFds8g9fXdvfIgF6Mo+z2xNoC/\n2eRiLSBqbvhlBodvlY456vF3B62Iyd/miOflvVx4hQuEE1zIXjdXP9XEZwrV\nbdnGjwAsTZ85yzhUtcAexvptNKP5aGhLkfuOtoxP8JpM8pVN/ntl0BfLOniF\n/nHebEpka44j58wT9ytZbPqTje0NEtNZKVLwKabAPrmHasmUTbv5KgPxfVcX\nYJMwqUAbEoVnbUHvd4u5iII2NR06OnBcmBNVoPhUj4GWeyEAWN5/RdH10cy0\nUeDA2bik4C/nItIKQbw6rRCCK372WHMCy4Bm+oO0DD8ZXDJZV2U6sJfIe04m\n8L5kVUgffafhRr2ks+m2+H+OgfyT9QVMMwkB3Cay2A140vXB0rsGKcvpmFd6\ngzyiQWOnaVktxSPWrcRf7CJtjBJVmFStVJAgjInN6YepZ8ZwkHFwZzSLiBUg\nCp9o/Il5iTS7YBoY4UHCSMoKmLvyExYR+3w1zML+SgIx/aMft750MDbr33Ce\nKtkezXuGyPhnnnTr96nBnLM5bb3r049RJL72h2XkBDXJL3sW8Djz2QgCAVzZ\nf/yO3eRClLS9fymeCWZWdYIY8UDaV9ZwEwQ+G+RDD0oX4s+J9hciM8Okkcme\n3CDk\r\n=F/hQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.fb194dd35.0","@material/theme":"9.0.0-canary.fb194dd35.0","@material/animation":"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-indicator_9.0.0-canary.fb194dd35.0_1609188325875_0.9345390503815421","host":"s3://npm-registry-packages"}},"9.0.0-canary.64f36e287.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.64f36e287.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"445971ef91f88b027b805a28eeea8c8243d849e4","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.64f36e287.0.tgz","fileCount":38,"integrity":"sha512-u7mEsK9rFJRJ2rstJ35dX5/mGhXSF+MBxEvEJmxwNljNlINFugMjuge8WMG5lAfH+BkdK+TYLoR3q0uHjTlT4g==","signatures":[{"sig":"MEQCIFH1FFjLbeGCa+MjRia24dC4Izf7O4zPmFJrUOGOa4tUAiBdWowKH/vQcaT4p4PgUgm4YT2sQfP0lwHuIMoJEb5B6Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf6klACRA9TVsSAnZWagAAd0wP/RdbScXJ2AvfyCAPlStR\nPG+fV0fT3cVmgbZYIlmGegzgOnyftNFRzUVNzOogEqKgR5dAfL0y7ZLx6K+h\nwXwX3xSaiRx3mMYzvJK83WtH0J9VlYX5evLdkK1eJAjhc28qthcCe7+Q+VX5\nx0PK2501TerwlNk1n48DDVwI+0FY5HRuS1iL5ok53rQj6jethnbAWgXF5U8x\nwEoRknB0qYsGJXhhpEYbZoqc45SnfGdLAIZvLxBmQztts4VRIearEMiI/kep\n0oQtGeMl5QjEPNZIpfrbInJO3vNb2+xI5pkGpky7ll8SAF7qAh14JdVzbzFH\ngNjiQsOXpLF74vyuMJYvXu/ErYSaAg9Sh74yKmVvrKfkDabOzwR7VyJfPArJ\nwqidJOkqnbRESF7qbuguXlGRNSx9UtG9dT71yvWJhM+Idy/JAAY/DGky6KB2\ntmHNE9FuBcU48nGMrTXgIsPEkVEza1t3IIyVrmlzprzavPp8d3kW34t2j89k\nSPQmpVkSbsBUaWhhZf7RsG4uRBie+ADv6N3t9qUS0AaJ1L8795J3AuhUhSaP\nJ6+uNREhLHTZ6mWe5yjh7zM9DRwt6lRm/lLcOb69mfvb9V6je0eipyCK6cIt\nsyVH6v0bDYv9gAhpz9Zyl78+leW6xQlvowTUikhzMB8T493RICnEPM2pKYKL\nj23p\r\n=z9L3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.64f36e287.0","@material/theme":"9.0.0-canary.64f36e287.0","@material/animation":"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-indicator_9.0.0-canary.64f36e287.0_1609189696310_0.7896042250331015","host":"s3://npm-registry-packages"}},"9.0.0-canary.b7bbe7022.0":{"name":"@material/tab-indicator","version":"9.0.0-canary.b7bbe7022.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"462ecc4217d9da2e838efcb2e18faf53ae9aa8c0","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0-canary.b7bbe7022.0.tgz","fileCount":38,"integrity":"sha512-jWnBDR/FVawU7Jq+70EBeUJ3NCrmOV14gaS34eWPYRRC6iNgGt/pl+ZyhJ7qgCtvY6HqZbNVm+nwlbuh8X9z7w==","signatures":[{"sig":"MEYCIQCPx5AVgv77I0/uYzyEL5lyqfcTEIcctD8Wr8fxd4ka8gIhAPbtWfxiq8fzE9X9Rncy7n/AlBJf1BOkX+9M1vAxQGCD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf63nTCRA9TVsSAnZWagAABZkP/i0MZx25vMBLOSwWAI2O\ndl+CVllWKF+5uPuO+E8TdKM8mxvYGpImy/sRs8yKn+y7khc09XJEwg6zVNgb\npUFp/ftfFEGoFHwQQdua4gMBqsXOzHOl4UdBP+UcXAhrB/nyfFEaD/8r3ICz\nwIAQqG0BV8IQKM4td4TiwyAo+KYYLnkEb7/UwgKjWKWm7Ey7TEAQzvqWmvQT\ngaDlXra4lSw79WlU1y/uzadRjjAfsnj8zbf/RovaujNxid8mvXFSbzvDo6O+\nL0gEvCL2Ia2LLkOBNy3nly5j66djumpqRSco1FDZ3Ge1q0PlZ7HpA8pX+RzT\nYaUUj2cROVvuR0hHzSTyOBttEeDsNkVCis4hl8gkAPxALEsKKnQmoGyZ4T5S\n/qZxGsqDX17Enfo+YYVaqGICYP7C5MSlAFU8n37WRMs5YovbhM6SVdgt4XLO\nBcPR1jwyokHSaGZL33yJrEZZAbZtNdytF9OQx+RSICx6LFMRQSSqNkP8dzGy\n59OGyyHcDKf9UuJFVf0O+jmwCSrJq9va562R8GawLgCQxTpWD6w2xsCcbld2\n+dKS96QXd8n2KrmkbPnxxFoi07Nt9+NeH/t6FPHXpr37J0aZ9XQCuM+pQpNK\nlPVD1uDKfGAM1RgQRH6Z7DKYD7kpNKX5DQTJ2ERcAKCuPV2y61qK3/ivWJsq\nBw86\r\n=FyU3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.b7bbe7022.0","@material/theme":"9.0.0-canary.b7bbe7022.0","@material/animation":"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-indicator_9.0.0-canary.b7bbe7022.0_1609267666832_0.9464444884887546","host":"s3://npm-registry-packages"}},"9.0.0":{"name":"@material/tab-indicator","version":"9.0.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"adcad3621d5c35bad7a7983dad8b6fb6aed3ef61","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-9.0.0.tgz","fileCount":37,"integrity":"sha512-4gjbdMq+bgRsegle8pckT0NBHYYoPCfOPJwrwWn3zPVsy/0Nm+XCbseXUDyLXRyCxaytqA7zEsIgBOufkdnB1g==","signatures":[{"sig":"MEYCIQC0cc+fMOEZFd/kdBf9cCjg/tKK7mZe91cSttHe70iDoQIhAJN7qaCLU8MS2v1ZWwuWlWVMHVwCI9G7Im0kIclBEk0h","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf64dtCRA9TVsSAnZWagAAskMP/jkvcBjlUjcan+2b3GBM\nibPSMQdkoHdxCgPUnlk6w4RIXobCa+NwsoenIS1xNOtvVOf3bOBGLre917/T\nnV5a17IaU81MvmG/suEe5GNS5sh/tSeTBX7lqtUJ+uGLZFiNDkQvjmOmuOT9\nkZy+GJfWVJI8baWbHGLhDOwHaD20bmWCZpaYOyI9aEHehJHF7pldrYPuQC8O\nUMstRKCy+1p3O5Alj2k6B2h8EQC/fP5HDVbsM0VQ40OKEN81Akop4DZ28QFL\nVki/SyFm1msegPSJ6q2QHYlqFYe1PyBGzGzBdz3oL22bCHdZitCt/QLU5rSc\n8ySq7lSAxhdmJ+ESQ5uGpb86cul+NfpS8XBuuyHvE6yU0es6jgdE67YaKPwi\n72lIlI0sITNcXc+A6HWOlcatYJm2TIe7G7qaVrgg6YQojQ/RRSzsOvsVYoHb\nLxV05/5QRTRijSAM3U/5g7calanDAfIU62tC4PQCduXMWW3tOvScAKKXajFu\np1c2dkfF0pqO+KnKc8iJq4SjQeFM2PN0Ny1HSpZ38LyVd0xHXcyzGf2UbO8c\n7yDKELcZqeudjCsrWKJQNCfU6bS51SVECNdI01DnSTQ+qB/9jIp1rucktMHY\ntTEbpKl4DRv6UbKDGk7RJuQaVRNLKJdWJU71KCMclq6sP3agDCAI5EyaPDIA\nQdAT\r\n=koHM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"^9.0.0","@material/theme":"^9.0.0","@material/animation":"^9.0.0","@material/feature-targeting":"^9.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-indicator_9.0.0_1609271148609_0.4251013834938111","host":"s3://npm-registry-packages"}},"10.0.0-canary.776c18681.0":{"name":"@material/tab-indicator","version":"10.0.0-canary.776c18681.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"d8651463d3fc09be4dfa0a5ebfd6d398c39ec25d","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-10.0.0-canary.776c18681.0.tgz","fileCount":38,"integrity":"sha512-aLFHbE3Yb9WFurrL/XJ0vjkKMSuYwLty3SMMtZ+AHHFOW+PuRh+mGXSf8cBuEN6VQejnCDcqIalhLlCHsLnWwQ==","signatures":[{"sig":"MEUCIGJrbGkpXrW0o5y/1YVljG3brTndOVjQk+4y/yasFYRNAiEA3pxz/AZUXGnyUzBAd/JtRx7rvq9hlc0D3LoTL1196ds=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf68xaCRA9TVsSAnZWagAApcwP/iaJEuFkA08+sDTpuLzM\nnNKm2RPIIXrBc54DB6iprVh7ypzvvX+OK69WAmknHP/s2P6HiOH6BP0qLZuR\nXSc2rzQ/KvEAFcRoZgkr7I/X/BAmnkLgJhaiBbaSAdtEaJaHqmNP3u2PK/Zj\nDikpnkI2RRtb3wBNn2b0R6txaeHc9Y05/b+GRlzQdsidUr/WzrBuokTQ63X+\nXi6HtSvwc1p7U3echai8UghzxXdgOEZNxEwdQsk8OaeRTuIIVkEa4lllF/ju\nqdnqErFa47wRZSVqibZSZv1QVKoHYw4wHA7XcqEkzaxJrKdTpm5l4Y8wGQRR\nR1H2jjzny4u9RmsspX/CCxYmYDe8WC3WkzIxHDDAUuvfXxqlGTuhM4KFH6Jb\nJ+gkpDThaeKiRKvlH2kc2k6iGxXO9WcADMeTcrvaqJgBBybrqRwF7dipM5oZ\nKPXawO+QLoMxWCy4WXT0PaCCY/yRAhpgfhTim9uNfYDV0JOAZy9vnHhTulfB\nEQ1jUKjXGltnEmyQkOBbJ3Z4AU+Ddb1gObC6B5pHKJj+uVii2MYKnQ0jSCPI\ns9XeWa6ARhuHPWZpYTJoUcJfrXr9Y9XCqQNQ9ssVi3zzdpcAeJq5OfaG+VQf\nn8umCQBWLWRZGBHp/r0MuFnUiqXoDsVJJfJhPZmNNknROyRpeHwkoFj/pW++\nC7Pv\r\n=tpNs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.776c18681.0","@material/theme":"10.0.0-canary.776c18681.0","@material/animation":"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-indicator_10.0.0-canary.776c18681.0_1609288794511_0.45186206401247264","host":"s3://npm-registry-packages"}},"10.0.0-canary.671d72d95.0":{"name":"@material/tab-indicator","version":"10.0.0-canary.671d72d95.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"008663e684a9663531a858acb5adc3722ad1e2f4","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-10.0.0-canary.671d72d95.0.tgz","fileCount":38,"integrity":"sha512-sQ0bUJvEkzPy9j9wdVu1BsEAuup19BkCLd2tkGq6350Zlal1+c9g03BcAkGtwA/WN4bBWKUIIR2DHt8dW68aDg==","signatures":[{"sig":"MEYCIQCb67/oG7nTd3j+K2AcweuGAKol8p0TZZzxCuSruSOS7wIhAM6+FJ1DFmU3Mi3SlOThInfO05zfqjZvdJ76d0DDZLhX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7N74CRA9TVsSAnZWagAA5NAQAIQ6gNCG/1x3jQOYFE8J\nEQx1Xrq43elLShU1gZ4bTyYIEpT/K/vxpL2Fl9OKZnPKvSAwqTGibfESrVhq\n3W7NaAJ9hF8LHKWfR+ZyXebCXCjjjcLjcRo1t5jzUvX2WiFDzlCkcqrZ1+bE\n2wgNvi4OFDlKcrIGakrH2Pwf9wUwIbYqxFPKZXGH3D6u1GFJqDyzMVevaOYv\ngIkGUuCXzAYM++GqvNo+i7y204eoe4/TmHWRKUFeJKHSdfWsQp4JAb5Fiaf7\nh4xWZLfeGcrMOnIt1vUyg4RT951l5CVU22vTMq7qEFdZ+eLOtmH89d3qX8qC\n527A9mxEcWUD8KeAyFO2RTpYvTYmTsd0zYzgdWu2bhuIUIfxdpAvXt6OWEBq\n5H2IvEzTII71ps55ulA5PXmEwOd2bwWKOucTjlYb9q1HzKrfbNwOdG7W9Pm3\ncgBrK8Iubm+UyCgZ/QgPYGBj21fzAkbe2UHRSiRAkkWCsRcza4mf5VdjQ3pk\niPTKgwiGyvCmFOA0A6bL+WtEAbymJFBJlQ5fPXwfuym8hYQJ+eBLwnN2FEB/\ndR52GEtZapVf2ll6R2KSUgkbeWoXORQxdjZcn0qnWG5n+RYB4Kn/sOye8sDC\ncsezzU6utU3QLzZvcnW58KXC/DPK30eKp9kENHRjtuyLwllqDNQSYVnYnRxu\n8WYE\r\n=LBHa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.671d72d95.0","@material/theme":"10.0.0-canary.671d72d95.0","@material/animation":"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-indicator_10.0.0-canary.671d72d95.0_1609359095950_0.7002794586445646","host":"s3://npm-registry-packages"}},"10.0.0-canary.b4f5a1c9e.0":{"name":"@material/tab-indicator","version":"10.0.0-canary.b4f5a1c9e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"4e24a565183c8404056709564f8a16a6e5ec3abb","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-10.0.0-canary.b4f5a1c9e.0.tgz","fileCount":38,"integrity":"sha512-cdzTTrWPkZsJ2UcJ1NOWPYsobQ2SvrzaK/r490L2VwzEf3btCWP6orHMuVAsBKAIi9sCioIxMyusH6y2r+Dkkg==","signatures":[{"sig":"MEYCIQCrJBlnrdmAlXVq/dhwgqY25V++1JnckZVoUhnA8iAPfQIhAKbo6NJwvEGAVk51TEarqO0bbz8ktJ/x30tAP8vh8mOx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PUlCRA9TVsSAnZWagAA9RYP/ReI/DTBG0RvgPpPqldN\nbSgUkAOzjKuT+3kLiCiXVr9Xo9e6oQNeVW1bijwwbBy0EBANgGq6wCWqORED\nWkBZ9W/b47A8z2N5apxrxT78blFVv9Ay8TR44B1ql/I/L3LinuiaTIjOw7AI\nKGiqyoEL19ywfrttrQC8SN8YRzasuzc1N9B1aIz/KBp+7P+FPtVbxHPz3uAr\nODKn58Kev04fu9vVgEgZYUYNgx0qs1bH1drfnFSghWaUFcMBmjob9CwMloff\n44K8TgEMgUsKN7XVQwdQH/1zUHm6TioR5yCdcm4lUhcCTGFaAcHV2gi8/odd\nsgvno5yy6xhX2QroKmhDrndQmzn1HQIZPpt6QbHOdFhHuFk7gp2UGCRKEuly\nFs0dts+hzEAqrti/g5GxiCwifRUhjac1fdregrRt0uHR1CRs/J2PwqSORWCR\nU247wSx9aEbob/WJW0G3xn3ZH/soVwKndudd00B+eIdf5QPAioFzF/JiFV0B\n+LJVzvlDuTeMSbbjUTuKlxh/q6OxLpvP6AOsQG6iTh/wo3RMBDDwAFc1dPxC\nU1ZnLnb14DPIAKyBQgawdd1Dk1QrIG3og8EXuVonAmZYIg0gFz0PZsy3GCca\nmAE/d3hdJ8+o/Ojc+lk/x5mtM8B6w4xDH9CpgBQg85YhGiJ6PPg2nVJk6YU3\nqM0Q\r\n=onTM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.b4f5a1c9e.0","@material/theme":"10.0.0-canary.b4f5a1c9e.0","@material/animation":"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-indicator_10.0.0-canary.b4f5a1c9e.0_1609364773212_0.46183542918901876","host":"s3://npm-registry-packages"}},"10.0.0-canary.a94bd8deb.0":{"name":"@material/tab-indicator","version":"10.0.0-canary.a94bd8deb.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"55a0413576145c364397e0af84de4903287987e5","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-10.0.0-canary.a94bd8deb.0.tgz","fileCount":38,"integrity":"sha512-AFmmb4vOlZ47exL0nbl7VKEau33Lnd6FEQlCbd+7fZXAW9CksoxxVQTjMOn0lNNvrl6rTKboL3TljwGzFqNE1g==","signatures":[{"sig":"MEUCIDzhKvr4uqX8RA9Pm/bjYO2Fg8GUIRCI5N5iw2rhfqkCAiEArla4Zz4whCjBs93u7uIhq1ysuKkAVFmMdXca4ry3/ns=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PlUCRA9TVsSAnZWagAAsjgP/3U+eoMtFoQs3FdYZz6P\nXxHmXGnGDk/OYcqIEaVD9zO6Y6yH+tpd2vIzcRLvBfrRVI0CtwGV+feGuYxa\nSxGiB30zAy1iqg00DFN9iQOE+Beay8fuZUp4OO7OxFXWjDb4sRuwFCMu61u+\np0GwWb3K0NUshX3fepb6L0HR8odNXmCD6lMmyiVBrlkoZFgGMxtjdwrc9VaS\n0kxCr4W2aom4YWMjruIkF9l5byG4AkBfuFN5wIJIPv6ISYTGOX10SPArNo5X\n29Usol5Hmp9014kZD5F3H/YNpTYVMN8e8HzbVxKS5qe87fOG+Vkzq8RVIZFN\n4PnO37d8nbDMJn11sWuhOAt8hqyOD/aQEmVvS3i3RjsWRKij6Hl84PkX2jZd\nQQ+fGc+ypKlXhAJjIQ9CKUhMbKHxAZ0jlXSw/j0Y/Xbeg7NUTAJA7frkxTy2\n3nG2cjx7Eo7a//XkbPfycUqwZMfTWpBQ4iFYkp/6JUghx+HkUSIDipzM1ZHT\n8DaFtypSGtmKMvIiJXnTO1gsO2b7J8kKh/S3jfFMFGlInY5LrGHh5IKH3LLm\nRN1hKAFwAXCMEKsyElgqn0O9EZwTUs8kVIPAmUKr9APxgy2e8vTx5GwCzH3w\nZsq66rYcBePYOoyOWLYF7KDvlIFtrS0cvBoewTWHj2apOmV44bfPlbhPCwk1\nc172\r\n=gr+h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.a94bd8deb.0","@material/theme":"10.0.0-canary.a94bd8deb.0","@material/animation":"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-indicator_10.0.0-canary.a94bd8deb.0_1609365843693_0.6658707039610536","host":"s3://npm-registry-packages"}},"10.0.0-canary.5d128511b.0":{"name":"@material/tab-indicator","version":"10.0.0-canary.5d128511b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"06c40b8c2669628f60273685e97e34692cc98d53","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-10.0.0-canary.5d128511b.0.tgz","fileCount":38,"integrity":"sha512-4pcKc5PSOkox+LzFHml/ByzH8HhQWW/es1/18Tgzr2WDyNh/CTSvwUkzIz4R99LeKo5uS3XtMqfEnQP7pbzOBg==","signatures":[{"sig":"MEUCIBffdNjvwqQOG8d1c9Fhteb86lub/eeeM3hOY9iCxhiaAiEAwfLXMsnc3HKd3IatmQYBnxqoMmrqUMj703T9StvmE24=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PqaCRA9TVsSAnZWagAADmsP/3pwl9fytyATDV0Q/h+d\nQYc/M7zwr5pSUyvb1SIPib6sP6DUAPfkABYVPl9iYFoh/NFFUOf30Io4tj1z\nDWyvjf8qua0rPtqIkXxGLs5lE82AFuhybzoxP/5glcSnpE/PlhxJ/w6h61mq\nOczDmOYI+raiGCsRuAlIBSsnVuT7jWG08gxmsbmGEUJ8GhZV60DVOezMwAry\n11lAqky7KCgppuSWNUONOfF7w+TMvHaWXZCNG1j+OYfJRpuYsYD6ByyZjAl5\niZOuzvw1EVm6vCtyJXUBvgpX9j8q8WDjhmZtRu3eIQqDjS9KjaCm83GTg0sN\nqAPiuTmxiqQayo85DLup1VK5MXBQWwYiLH3CDfQSZHh7MEG9nDgdBJIPZC2A\nwtSJnszPo4CA7PrBFvs+CvqE/0d/+J9CuzOy5rckxoD2OZr+sgeFnS0fRcex\nq35zj0Uv6NXeRVRXKOaHgcIQMuxNTfl082VV+tam98zhEdVe8Ge99jwZsn+K\nmAx/bIo+Y+1urjn1IEB2i39yufu3NHbBhT/mfLguPPKyXXjw/WTQ15MhUB/w\nI4Bfo3kdh6wxhadJZaS95LrRuOSUIGQW3+b/EIg8vtt0DFDckbwn5QLzfB4y\nmKcHAWiHfU+cUZx1THUhCDkf91M0D4tnZPi9yRCqxp7MgMCzf2PwOD6Xc4kW\nK0iB\r\n=ZlPG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.5d128511b.0","@material/theme":"10.0.0-canary.5d128511b.0","@material/animation":"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-indicator_10.0.0-canary.5d128511b.0_1609366170219_0.15927295782148243","host":"s3://npm-registry-packages"}},"10.0.0-canary.365c69360.0":{"name":"@material/tab-indicator","version":"10.0.0-canary.365c69360.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"7f1a53ee6ccaa4ebc00bc5334e43f14af923d070","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-10.0.0-canary.365c69360.0.tgz","fileCount":38,"integrity":"sha512-9erEgOxF3WvhRWnMWgnLa5kusthqb9Xd/5vi+L3k+Bgi4sTSpAmJBJrUmMCZ0OdSLbsMQuMUOIIKbtDI7kWy3Q==","signatures":[{"sig":"MEUCIQClNHxmTFGGz+HRDqi6OQVFggJYGi5WRCtyN43OPa3HcQIgYHmuEZUL7tXjdOUr984Yks6iH/a/xjFWyB3Lio+y9y4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9KZQCRA9TVsSAnZWagAAruwP/AwTVhybzXEj1Js/Cqhd\nvHFlLsfOOjgDeLQUAMHxVktrDDyLmyRde47GXtlkHGRCUbgBmon/xPeR0+0e\nUzmqSh5F9GWABX9rjujBszrWsR9u3ayM5BHHvSks/p3sSQezNOMG+LKmyi1Z\nWVQsF0ObtYd4gDZuvEXWOFkIEyHJlVpnMhKIp0M/rfRYLk2fUUtLlzOOs39N\nL/cfIwg6JP1Po1eIJQn6cTLFYraeMQcekM7m6zJRL0QAiQ23zROPfeKl3kmE\nkcJsqDGlJ6SETsigPKrv209PmQgF9vYd0su9raaCsjNPEutPoQR3pCInasWD\nL8VyQMjD7DYmk+Lob4UepQRrODjrEgT8X4pkT87lXjtqtECunmGOuRX1XdSH\nrx3SCzvxRZ/60d0yEhPDdQXSRpAahhmJgejowBWt+v4sHqpCMN5+g6AYQStP\nqSNs72136Q//nSrnOv1L20zINpOSe3hY0UOz30hk0bX6EE7ebGDBmZh8+5rz\nObMUsGO5SC2KlpRoFvdIgYAnzTXhxqjl40AkhVDtuy5Qd6BuyySsQIuHVTQ/\n0ATgXAJlDub8PqEZqHIRONEEl7wqr6p+JumOB3XvIMV3Z0uWbhkkuaBaUQvC\nx2+iDUwCQ/7EmcXCylUoyEiDTrQ8sPZ9Bs07MurT7Dm+Ro2GFw4FibH2KcL8\ndS+k\r\n=4cHJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.365c69360.0","@material/theme":"10.0.0-canary.365c69360.0","@material/animation":"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-indicator_10.0.0-canary.365c69360.0_1609868879988_0.2720062993559589","host":"s3://npm-registry-packages"}},"10.0.0-canary.700a8261a.0":{"name":"@material/tab-indicator","version":"10.0.0-canary.700a8261a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"89272f94ae62dd11e59eb0c609a57be5e6b7b3aa","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-10.0.0-canary.700a8261a.0.tgz","fileCount":38,"integrity":"sha512-K/qYyi7kuiM25fEkS0AkMpqJp2ItZK0uLz+fW7KNx7hqn1IMpNy96znlHHciOLldzNllVj1DTUb5WCdRf/yUCw==","signatures":[{"sig":"MEQCIGLFPV8Abz/M8h6jmTxJUKVo2esYQ7AHgSCPublXEjDBAiBEYzrwlr39hpxlcvcZnsOKt4BcLs3mpJZz4Pgas662Zg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9NNgCRA9TVsSAnZWagAAI9gP/3JTvVrB/D91Lalhh4+v\nw8dK9cgscvFSxM8wxSAi1MQajxl8cPJlX6MtPNpX6yGKvL1/xi4tSe1Jc6mc\nKt+mrkULPsHUhVcP+y1VanEm850T5BdemFP+LhISyY/eGx5iZeLardgZdJ7X\nwDYC6BiGJ97agVnrqkhQ/vB5462VRWUzqsb6osT0dXehScaIj23uEEm1Yz+N\nz/Zid+EdBsZntrT+uC6jQoihruKwM2dYdMaNqFQpDWxyWAxVR1DM3DdNvu02\ndxGcMJB81Vrt3+mG5BwrkWN0WqprvawVR/ME/p+EZPkRUuN/OFR+Hx7kaxDv\nkqm7TwvqDdkg36kPijP3pC/yvMBjzuXJb+US2CiNBIrxUPHjF3VhRIJaxVtN\nwbCaVe5CiqmJh0WqIlmLSbeeLsKlon0CrAI3XPdfhDio+WtRwyv+8mRKzfoh\nCoYuilG/ObnZ0Gs8hidEhdXgXkA5o8zbtkiAde6bvj2BCI7ztxHuCJSTPY31\ndryQmUJDB3wg62+h+gsM/iRZgUlEHCkE4Az2ZwsyKE4LD7iKbpBTvkKuPwN/\nEdRJEmBph7EOJA3i/VmMjlsODYaj1x1Mi3FePm2weFcr9vC3c7Wi0KmJRXxa\nnHtmzyLI9AGs87ZFtI5pTjdYZtv4jduLkHnlwtCEl9ktIza+wV7Mo4KgBmZ8\nmbpt\r\n=bSAQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.700a8261a.0","@material/theme":"10.0.0-canary.700a8261a.0","@material/animation":"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-indicator_10.0.0-canary.700a8261a.0_1609880415873_0.6786788927690277","host":"s3://npm-registry-packages"}},"10.0.0-canary.766981c15.0":{"name":"@material/tab-indicator","version":"10.0.0-canary.766981c15.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"9d250e3fd0e5abcb173b600c4b81de440351a21e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-10.0.0-canary.766981c15.0.tgz","fileCount":38,"integrity":"sha512-0auT9bmEezMQJRhyUiK075yFQuib9zZ2iV5oAW/3YkMgiJgbp2o0X4Kon/5pdRT01abYzkZctNLzCpjHW3iCNg==","signatures":[{"sig":"MEUCIAob5xouPJhmTkJbX0hr7OHCg+T9l8VWouv0KSqHwhEOAiEA0XquV7SVJ4dyvAvh8mQls59ufw39iKbMhIsOHoZJeIk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9OrACRA9TVsSAnZWagAA0NEP/iVgT/VXFFFtTWSYQz1h\nQllNrMUKJWDKNnHH2DvI2W2bZvuVq7XbQbhegD5Ab/abYK6Po1SRrhPR03PP\nCeFlLJYG+wg5Xsq4n5aRsboaKISaJeC87zvSlhw5fbCzQNl+rQBvqKPpJypp\nzIWDZzhXTpNZjOXFsPhkxayGd5JryDXl+CwWIQgTd+W89isTIVTEIbBM0tR8\nFKI1x+SNMfitSvuToiUkYb6KAqNBMrxW8KtEiyakfk0yiRUYAKJKmasAvGIa\nIEPpAf5ad/1VTy9PnMsK9CriQ5UD8Fi8LVb1300x9FghZGjXQXk/w166oano\nVH4kN4ZoY0Tg3e12Bu2V9B56xKDG9Iq3Rolebzc49l3CGahjw7sIqiC/R3yZ\nrN8I39mIGhlyt3SL96NXursDd/TdHwQz6to/n9nZbI1RhBPqf55ncaOxhUsp\n7dGBDNz0HThby3+yUaINncalei+VwzZJ+6cFQ7MyuLA9uxXm9DmCNlIdj2Rq\nqGfo3Xb1AJHlxorqTL1ICr88M0ISgO6pxAZKSMz/jlnU2RjnRwB/wMCOTRyX\nz5tBW6zE6r/XMjGUSfusQdhsp5oIhiD+OiBzaTw3YTl+bEeFjARm10K+Dm65\nu03l6u8dtvCr+JDYhwWFKuylcG273glhYsG99YMijbvos+XLcuE1GEFzEDe/\n63e3\r\n=Xs5J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.766981c15.0","@material/theme":"10.0.0-canary.766981c15.0","@material/animation":"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-indicator_10.0.0-canary.766981c15.0_1609886399931_0.9433521224331469","host":"s3://npm-registry-packages"}},"10.0.0-canary.b28c576d9.0":{"name":"@material/tab-indicator","version":"10.0.0-canary.b28c576d9.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"18c1009364faf8f3c57340536fa364fc1174318d","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-10.0.0-canary.b28c576d9.0.tgz","fileCount":38,"integrity":"sha512-X+Czn2hTbiFIA0yzd1zJnw/De5qtq7HhhgBkJlrtFkXkSTYYnL41dqj6/h1CK2SXKdrxbdWPD+93Wvg4X01+qw==","signatures":[{"sig":"MEUCIFQTMUXrsYl+Q3EwcIBLdwQePR3DAySsvuBDdsj/9wtUAiEA/CWf4hVeMvxdaimmqFkc2ml0OB2IiOwj+akfb0/E7tM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9O0LCRA9TVsSAnZWagAAoA0QAJQAz+2GJpWxLCAJxT7N\nMqBVBpS2kEYMTPd0ukHMhLPyOwLsoQRtGr3lv/QwbRe2dEiPBGc72WeSP2U1\n4L/geUB04kcaZSvSXvj1TeFXZyzILJ0Yv987NgTnhsGkZdxDd2DHTuQVc31n\nY9/ysvPRxxCMbq8FpNOmZWyvVT+ZI4EgfjTEsppUxP9Rj3w/HRY8P/5VoQVr\nhKMAycPhWFS/Z688Lb+pkXxcfxTBbo2RtwJiTom1Oc6Dsx0XDyixzREImndx\neILKEZ2INoHBc8cwEkZNsG3otY24ac2wZJj+CoiIk2B1KM5ZZ2KI3CUi9PBj\nrqj0nxTJ4FwECxztccNI8Zc9UYYF3hgxd0LE8z3NRjepiZ6RsJqMnN0+Opp7\n8dqZ5OLUHlGLWvV9ans1KhtTc0xxpRlQG8Lsa2w6c/ey2MFl4IyfIdNRdRHH\nL147qtQlQIMMaTNc3yDkDLzzELiujOJWxsXc5IPpov3sVoPG6IQS00cdRJrV\nfYE2OGRTSMnzNXU8FdfutCt0BR8L+UWl+PcrTK2RDNhgc9oLq53Fj43jBu9e\nf/oCbwV0YUiTEtfr4vaMk726U4Q1S/OC+eC1tDSLOVx4Tpru3oFVJKVtG5DY\nvBVFHjVc97zNGQH2iURQg7NyjeDR223C6PHqN5HZ3Rc4kJrYGyhwnztbpdpe\nMnL3\r\n=0ZW2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.b28c576d9.0","@material/theme":"10.0.0-canary.b28c576d9.0","@material/animation":"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-indicator_10.0.0-canary.b28c576d9.0_1609886986673_0.6577494561101722","host":"s3://npm-registry-packages"}},"10.0.0-canary.968735356.0":{"name":"@material/tab-indicator","version":"10.0.0-canary.968735356.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"b28f122c1f3ea517b0fc38a692b64c343f65ef7a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-10.0.0-canary.968735356.0.tgz","fileCount":38,"integrity":"sha512-ibitQENA80lnhNjh3fdL/3x3FIAhacSbBNtVC24+jAwyBrABmUSHC95TmdBHuARc5XJ+kHLG/iLMJ5fZfbqlHw==","signatures":[{"sig":"MEUCIQDbGCH2+eEwzoya7mb46pqHPnb8jy7D3k02IrCVdZxGWAIgRRa8Yqbyc1VucdFZgzKE6MK63Nn7uO3Df7IbNBwp52I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9dxCCRA9TVsSAnZWagAAceEP/A5B/R68xFRbO8s4PK9b\ndXcMurdrCuAmkhKOWBZcpTTInXlfoaLnYP/EYlocQdELjMddHLVKlIe2PVOd\nAinPk8WH7HqP0r9vnqQ+kZbTxm+3A/NH3O5p4Ot47fidvXt2AXf5THl7T1jn\nwXj8SkB4xKqz4AdKdHfP19I+2ykVLqr5khj7iI/YzuEsP2XzV+yzmkz4386Q\nGRQK8xe8+HZQXTOaRCZz4N3TrQNRYwiT0AKQShRBNvTwooIYOyqjL6NdFutX\nrMymoq7kOgOYISjtyaW0FOhcslj74LX28uqAx/HA7JDBmmlsdC8gNsajTEMg\nSb7yLBqblUtVHEn9fO19Q1A85Rnltw0Yrc69zCWSMUWjcE2jZPEeCHsVU7VJ\ndpznvuQft2WdOBbX4PkbRn/ZllFquLG+378jWrwvInFxoSFDwnB1A3baN6K7\ndxD8Og/4v+E8pEb23EVNhu7f+GXM29tZ+IsrzoLodJVb8pQ8Ig1dVerAje4s\nUBHj4pr+xIUjM9PvC+fxHDiDCd4mprOS5jUrMKuPEVde3P4GhRZFgX3FnFCd\nrfES0XhVoXwOyKpMbyzXKoo0m6+NMHNydHwDHG0RQZde1kkboUcU7UlUHrjP\nat1eWD2fRZzPFfyvriND+czwsOf1HrG8CwNcgXnPI4VVs72j8XxQJjPaTZG5\nS0+N\r\n=2iIo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.968735356.0","@material/theme":"10.0.0-canary.968735356.0","@material/animation":"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-indicator_10.0.0-canary.968735356.0_1609948225726_0.7169969489072814","host":"s3://npm-registry-packages"}},"10.0.0-canary.c5e18b020.0":{"name":"@material/tab-indicator","version":"10.0.0-canary.c5e18b020.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"32383fc29d6eb699e9308cc8bc59c2adf41cfdf1","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-10.0.0-canary.c5e18b020.0.tgz","fileCount":38,"integrity":"sha512-wI98YNUVecOkRl2bbKNllcoWfxPtgntyyXXVlvcR99kjdQuv7Nv0TPDowZ8K3y+g2oD9JzxD5bjzxn3Glm9xyw==","signatures":[{"sig":"MEQCIDX/X6tvJmOMgHau8nK+dJwox4osNAF6YSZYkyqteirFAiA/l9gf2bHd+BcmrhNBA5gVDk8bZgal5CZny7iwTSiKDQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9hL8CRA9TVsSAnZWagAAn1EP/2sEgF0TpjEImn2IC+VO\nOxIs0mI7n5N405zzQU/rODZ8oRj7Ys3XbrMs16Uf3ASP5vG0337/cYoCJ0gb\nQDquaC2Cvl6kmJ0e/xXeJ7tMS6tnuPQ2j+WQ+TbBmxUDRsvSs5Vy4DNdaWtB\nqduDiltY53O0wp3zSIdZ6NrbymkOxWCSa0bqz/qNClKl0uEHzXeX9B5dmlP7\nQxzsHzAiPSbX3igfcF/Z6v2SzWm+uhnoHJ7Cvl24sHzPLFAYtji8nyMLjFN1\n/SV7txjcflpVek6gqnLVK/XCSZbJtLw4rnfeU4jPZS8xpmN+48n3uSNzV9UM\nLP+cVFKBeKBSkJwxbGuwLWDbhypBJyPsRzbMpAaNMg14/d2rSWAW2WDHJv5H\nXaOSzCRjbxG8IN/BXdywPSVK3qA9era4wuj1Peb4ulHnyKNBU2s/F4/SAX0n\nto0a8zGXnPJKB75JKptn5K7+XZU8wA8WQrlCI9DQq2Ob7Njy7us/U5lADByR\nNOX7DOGw7Jf7LxegOV/AKNQXmEYVQD/ridGrP2opMoJeOI7fWDIf6J/ai5bk\n/P2Oq/6dovs/B3CxUMMcbaZkcmfsZkOrut0IuCbrYm2Ba2zaaIZmCwPs7TaN\n72NGbfWWwd5aW+WYadUwQWyfXlBkYuuSvB9fokBYIPQqsPUAaYWJDaEveeMW\nzpuJ\r\n=LPtJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.c5e18b020.0","@material/theme":"10.0.0-canary.c5e18b020.0","@material/animation":"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-indicator_10.0.0-canary.c5e18b020.0_1609962235848_0.12738827184652557","host":"s3://npm-registry-packages"}},"10.0.0-canary.bcff8a66a.0":{"name":"@material/tab-indicator","version":"10.0.0-canary.bcff8a66a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"68ad0031c3b151bc3573f1a399027f76c62dfe5c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-10.0.0-canary.bcff8a66a.0.tgz","fileCount":38,"integrity":"sha512-sT3sM9s+29E256OcCxdqFLeE/qpztiz0C5aczgeg4eJ2PudN9o8G3FhIW634HQQKGO8GPujvEwbar3tv/9LzRw==","signatures":[{"sig":"MEQCIFRxTqC4bFMrKdJQqBRc/ZHfmnkxX4NdoKNNMshPdXPVAiAXnRUq0VwCHXzh3zQ14ClgHLUcEVLbBYDowLUN4AJvFQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9hzWCRA9TVsSAnZWagAAaWMQAIlp/ia//mm6chK7YstW\nfLMD5rAOiYXTYj7DXkkQWnYpHfh7q3CjqWwVwaCgHdPDwVMO1P9PxRJ2N6gg\nymeY12lDvIhHhFkHhaPKlBby3DkypHRChRvRY7sJIWrzWfdnacQUSSjCpcFp\nffPuyoX+wkZdaIFjmd9/mXK/Y0wo5UFP1HEc6aesGdvYpmpu7g0YpfI37jfg\nkUg2L+vdpLNrP1yj6tWwUSBqvcEcFp2+/djDJ61nW1HlIE7nmo9bPc4njtvP\n+UKaGdKr5mn1fZQH7R1nx9H1S4DHBGkPb3uPtVOptyZgSGKj/fc8bwM7uj4D\nZWfttHaPymM0zJvgUclKcAzMD9CRh+eVZPXGn5chshAWnSgOfElV0CsJQ3Rw\nr5MbIB68hAnj2AfcdwGcn3MFqX6dkZl0auSNO+1ddkCSQ9hivEPMshqH1nl/\nAR9hgC7GyMdTsNKmI5Xso7gF1O8fY38Giav0VU3B1h0x9E8xZnxxwGF0cOsm\nqo5TMC+8cM4t8ZQrEEQimnfySg/k+P6DAPaaiQqI1A1Jtj3uf0CYzbZOKODZ\nbcIW4VvNDM7XYp8esECKU4LAkdi+1W44FVpStVBoafyMFVGj1YDELNKhSeiN\nDMvQLTUo3Hd4yK8F3QpwGcK64mBUP51mrTa/7unDLtAgvCYbmnpB74/5PJPv\njPld\r\n=JarC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.bcff8a66a.0","@material/theme":"10.0.0-canary.bcff8a66a.0","@material/animation":"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-indicator_10.0.0-canary.bcff8a66a.0_1609964758416_0.3065880109983785","host":"s3://npm-registry-packages"}},"10.0.0-canary.79328c9ff.0":{"name":"@material/tab-indicator","version":"10.0.0-canary.79328c9ff.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"5398e2f9a2690ec0ce3d86c314a66d0e8f9a4328","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-10.0.0-canary.79328c9ff.0.tgz","fileCount":38,"integrity":"sha512-Kw6C0N2ThDdyt1/cKJWhBa3AXsJBMLGjXE9o/7lXAwHXWQoYL+8kPh/7ui37c7LnJa6HOn/jdNt9gtEIFPH1aQ==","signatures":[{"sig":"MEQCIDJVCKThc8el7DtLOgVOOF1RLVJXdYPAUCPNPtv4OBuMAiAcbIqNx9YiAxD33X3NMUqnxtwvBFi+/Sr7TaL+BhHI9Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9nMWCRA9TVsSAnZWagAA57QQAITgCyZznpa3Sg8g5Mvm\nuykWnmMYUOLkY9zqXRP/lSA2jeHZbqfjw0VxAdYwYjsZtdIjO0G+GVoNfMfO\nKya1whMOK2RTpeCCbcx3l7QLSCryTOQm5m7U8Gnm+j+KpMrAIgaziAERU5nW\nmHskI88dSILnbWjXaM9ygjwsTYO6yyHR6eHjRiD7j2f0SoKaR6TD/FBitPv+\nqg0sHtIi1+Rd4eaESAO2r+MnFEG1GK+lqKekD0pHjdybj5cKNCHXYyvO/tOk\nQnHfMmKNeKgQZc+zqdDTG8TDLCqQ9OmCl10oZN2m46XqHCi13w09AwF9zuQW\nTKWNSVmMtJALB4a+9j/oto7hNm9Y1dw8nfLNFV9elFVyneOa7TNexakcbv5L\n1fkU65RKWRXSPeREo0CI4oUt+02P5CAcqCNtztmAX5KfFWX4B/nFaJNUPc4o\n664W4rp+aEjV2UL3lZf1xmTUR9m8kBbjePgDvnKWCJ5Qna/7RDS01ldN5JyS\nnRly6aW1btYx50fKg6Nv9kyP4yhSQ456mE7v7M4yBBVz0S40lfUNofGeMuOn\nCs4bJMefSL3qiFN4aNjwE22aNQ8fw+Xac4LY5Oo4cmGl8euABf2h3HalTjOA\nmUr8Wz74bTICcXr6QtcAsm/4ONHytYklLCFnql9O/jnnVrSH849h0fovZWjf\nHxtQ\r\n=1zR3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.79328c9ff.0","@material/theme":"10.0.0-canary.79328c9ff.0","@material/animation":"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-indicator_10.0.0-canary.79328c9ff.0_1609986838263_0.388484601187423","host":"s3://npm-registry-packages"}},"10.0.0-canary.121e1f303.0":{"name":"@material/tab-indicator","version":"10.0.0-canary.121e1f303.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"7008a59eb4836ab8e9b436cc97da2598ec62992c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-10.0.0-canary.121e1f303.0.tgz","fileCount":38,"integrity":"sha512-mkQxGhLKM0zhKkGbb/7S9kA0tUkDEQSP/0coAMfWKcB0/I5w0jqYymw6kyq5WCAOzHsV+0ZeR95jo8i62ogF6w==","signatures":[{"sig":"MEUCIQCW79B/N4gUlgax0aH0p6RMaCYKdltUvE+TnQ8+Tof+ZwIgOm8sWZSveCU3FLBhQlAGjekwAl12goWy+UcQjNXhcCY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf95cGCRA9TVsSAnZWagAANt4QAJNUmaR46AY9cXFZVdUf\nENNLO1evxcNltgnPLMsQD7YGIKRuhIggHg9g3t7R0yUaB1+wZXO26EhNDOT0\ni0Gb9Qoe2k3CyYzkvXQF9d7QhfJjfHb2C7eV2sUEWsJ2uYJi+05vCCAoYMBq\nPteGJn45ttMdyTugXlE60aICAH2Zy1gLevLnQqiUzQ0cnCIkMggagHhjLD4l\nlueSHR3KvpJcPq55xNFOFq/YonZDBNtlMjee9yBU6psCWha9DGxaiud9pfwU\njS7eGaL8gni+AmV7Ilg7CAxp20aDB2TIb+wu3Xkfa7HILrr9+DnCpiK3bv0Y\nqaKwQv6A4/hxsseMnTru8moYKPe6xupI0eyO74RNmx85CmETZOZzsjBHagz9\nkB09uwdEiTc5zC2pBR4RZN9/UmTBtwbEi3+FoBbp7WJM1WJCYF+nHlbDHkyJ\np/C1YRCdP8JyVAMydOFonr5FJ+vsItcNkoiG5vCxNWSzDycmuG8OdVugaHDd\nRwquTF9k9kEuM93uE955a+w1b13dT9gHflw2l7UImumlBDJGUH0q3omZA589\nXc3Y/vzlTCGdpMhxLhVUHrYRrdMZFNLpx5JbBrf31LojrDQM8tNzkIdmHKyl\ntqzMFVcmqqV4QkaQPY6r1czTe7tjc2JXDWfej7P7fRuiHf7COj7knSGF676I\nUbdi\r\n=vxjW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.121e1f303.0","@material/theme":"10.0.0-canary.121e1f303.0","@material/animation":"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-indicator_10.0.0-canary.121e1f303.0_1610061574516_0.1497957030398258","host":"s3://npm-registry-packages"}},"10.0.0-canary.abdd10065.0":{"name":"@material/tab-indicator","version":"10.0.0-canary.abdd10065.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"2b5958a4de3c83ca954e2776fab7e06bead27a02","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-10.0.0-canary.abdd10065.0.tgz","fileCount":38,"integrity":"sha512-m4cs72jy2u679ivOT/gvUw1LzuddVhGQHekbBIJujmnJDmRZnT6eHZpIycRwogQwyHQt4BYuSSaIxSKWZDNZMg==","signatures":[{"sig":"MEQCIF2JoqPBoAlj01HRsEj2LMHQk3ss9y0g3xD9gdInWxwUAiBMNF5CpYFFsFLEoQjl4gYr6j8npCyMBXzkVeeg1PFizg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+JuRCRA9TVsSAnZWagAAUpYP/1avnug3ctCi223JbF0O\nwV6iFfBIWh0OtAKkVd2dw+uWnpDHPHUNF6ZW+NTuuDCAtBlb6BjGNvA6ELzC\n4H/rh3YP1e3fFU2vRDovYRi2OR03WUoSyhp1D8spmvdJJln818hrWQblPW+R\nG8zoRZpj0nMQcIIpecrAKUmNCRY4NlZcUHES5F+IrxSHY9hpczwb6iiVFzfB\nGW2ikkxn/wLHdzb+yVvJbyY/XOylAbJV28yu+LUF/t2tY0+YjTP2Oh6KY3Ob\nutMyBZ/zKzPaZYzQ4amqwpTdRcU6fQarePO/H46DjeZR4TYn3+q1hewA8iHt\nVPwKxUyiww7hwHf/LUN+/tFAAMmSgDg17JyZlFNI/C6+1CcSNVMTHOvi0mFb\nadQOhJLyL8xA80MXBSvjRhpXNIEYOT01S9+ffzuFJTU2fkMZMCXMz356PBKF\nMowAiojmNKxZyMS2AKYVMi/W6axcUYz1INEl6nosHKv7y5Fe/L9+IwFO5eUG\nksG5vBx6SO3MGsWi8R8snYPhmru3+lCfpY6leZMgn+cH/Ttzqtdv3x3qpQoW\nWvBFi8P3rfYxxqrg19vlp5tRDpK5LQMFQyeD6pEQbPApFvMAPB/sTL81ma6Z\ngrT/cPtimC6/KO3GT6RPdWHuXcHiJruUdLG2bbn94d1h7YX/0vkATrjCqGyq\nLTC9\r\n=GgD/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.abdd10065.0","@material/theme":"10.0.0-canary.abdd10065.0","@material/animation":"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-indicator_10.0.0-canary.abdd10065.0_1610128273300_0.49841449511773295","host":"s3://npm-registry-packages"}},"10.0.0-canary.089de519c.0":{"name":"@material/tab-indicator","version":"10.0.0-canary.089de519c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ff015bb669ad8b61ce42ef17d51053b1f5384622","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-10.0.0-canary.089de519c.0.tgz","fileCount":38,"integrity":"sha512-96WVNkRLE3AfP+GeXOHwvvRZu+Rqqjq1qQ6Nh0DjfScAAdfN7eo/Pm6crtypDvxl+VpNSNt71WkXfv1EGUA2Ew==","signatures":[{"sig":"MEYCIQCfZs3e6RLGauDIz4UD8l7kvThcCkGvNzaWmruFYh3eVQIhAIEwGLEECKADzPXqKeTZP8pJfvL14r1kz98CWXKPy/BO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+NqqCRA9TVsSAnZWagAAs/YP/jtifFxm0sLLVDAS3L/N\nCpSW7mr49EKmNh1WzDJeqL/pewxyGQ1Dy8LjQhZOqE12Vz6niR3bRHqvjaLl\nKojgAzxGxJ6jqRsW20VbkgaljNf4YAG6c62lg2m6iGlGMrz2DsN7GHA4ICIL\nN2N3r+DGIljNYg1i7nwDLnCA4B3kUI2V7k7ywYSu2MII46eZjTbTZ1gZxJQE\n6uZkOJWiMg6srYi430nZoT0tMEtP/KBrPfx8zIDZA8BP/MU7ZE7Yhyb/QJ8Q\ndz9hXw7+QZ4X48VzIA/BecgrGWsQZ1xVGeDuxqzWebVOnnaye00gZL9aO6fx\n5FEqinN0+ZwrbIVACbiS1X0vF+jimy7fWJB0efo5V6MZv/ODmYjW/Kxy6lhw\nmC1HuxL9GG8B9NRhvQQmRWXBE2xH4o74tZJg9r2QQId57Eh6eA9/DFhuo7as\nXNV5XqGT9N/GNhsDCMw/oVrA09m/dEMULJUve9XThgiP+1288suXdE4IJ3F2\nUbFvg8sqdcCdyQo2ifubMqX90qqYYeOqWXj+VKyEszEB2AqOXXjvFtiPb43q\nyMrSGjDMlVn5bWtjcalvsB0NzITFkIApBpiwdMeflLl90earIgun767Bu3Zi\nLDOLk5lcXB7FFbtNT0mo2MDSox+ovIz6ZDv+RDmC9qlcrkwLp4oV4C9BEjxo\n5I+8\r\n=oVr0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.089de519c.0","@material/theme":"10.0.0-canary.089de519c.0","@material/animation":"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-indicator_10.0.0-canary.089de519c.0_1610144425686_0.529907007898825","host":"s3://npm-registry-packages"}},"10.0.0-canary.163119837.0":{"name":"@material/tab-indicator","version":"10.0.0-canary.163119837.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"1cc0f5b46c07dc78a6a66c330eb338a970e14e7d","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-10.0.0-canary.163119837.0.tgz","fileCount":38,"integrity":"sha512-oFmpHwJRXgBH6huQ6pSRSPgDqEHUceFD6uhBYsFZRz8yB0MyzOLVaazgkuCVJiHryyaqF96HzhX/G0FOyigsxg==","signatures":[{"sig":"MEQCIHBseCarWD/YZK+s83K0i9yLeFGWKCCUm3Mtgc7W8Q4uAiAVLwHtvLL8dvM2uL7cGtpFSRkw5yNB5N06T+ToU3n2ow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+O5+CRA9TVsSAnZWagAAYeYP/0YPaUuWP1HbKHJu73Wf\nuA/wXpZ4+dG1OfrDQGMS7rB0R3013qejLcO2vSZ6nSlHX1dWFwlBNM5ZnpfY\nyPPGtG1vonf+i4IqH9cfpjf1So89Wa4yfLv1Ra0YsXc2KUW3CWAKF92YxFuS\npVSWhUtvDytiNqJSuPsaUIa4iE6NIv5UBuVGviHRJNMxiIIvx9D5gZehi5Fz\nwQWGElb4oGeTc9vhi+YT429uOoOIC7ZwEx3VT5O9uppWx2IhKDwNJOUAovBQ\nEHE1DxYWlY9pfwzTJ80wDx63ycDNlJ5MTfGgl4lTSJ52JwjjWYOiIq5d/jM+\n/L490XPYF39Wemnhbn4Q0ryiqNVDMpSBvrS60T0eKopdDXzQ2v89tfN5h5wq\nQRO5vZXATyJI11ZUjvYJZ0PSzf78bJdygpit06JvvvA/dQpo2hIsSOd4szqh\nLIt2raXRlltJy5t6icF+vnQi0tnV5/Ckic70iUMsQJ+dcXMBfNqCu2mWPDtO\nqIizubJtSdonbZ9qIA2f2aSWz6gcOSEsq5lZjbf99EAOXB+TcfsGpOcAW0y8\n0W6T+rT6KjYD/pZcYUu2Sll7FBTXt8QLBUbiklijovw+vwv2ovOBy5UgGFtg\n4ZAfmUGb8bJKCOFJs6TyzI9SpKrVWqa+qAtjVmSiIkXWAqXMimxLIzTek0PG\nnlXF\r\n=WRcf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.163119837.0","@material/theme":"10.0.0-canary.163119837.0","@material/animation":"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-indicator_10.0.0-canary.163119837.0_1610149502261_0.2066614459730256","host":"s3://npm-registry-packages"}},"10.0.0-canary.b8a1a58e4.0":{"name":"@material/tab-indicator","version":"10.0.0-canary.b8a1a58e4.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"00182added21c5bda2c9525d4f396b2d62acca43","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-10.0.0-canary.b8a1a58e4.0.tgz","fileCount":38,"integrity":"sha512-U8nJbdq8QYgKu5JPTjp0e6KNTqAAU4+4skE+Kh91iIyj05AdZAKoyoSYuqW+73izuYyU9DaDr643a8fsl2ZW6A==","signatures":[{"sig":"MEUCIQDF+pXWsp8naLIdbiIvySimlDJ4SilgDyo82FZ4EbcwQQIgMmWlW5qSTePPMbDR+i8Mf0Usq5BjWeykKAmApLWAdGg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/HugCRA9TVsSAnZWagAAGJgQAKQoMVYXQA9L8KFCk3BI\nVk7F2dgtfEJnMZo8Cg856RAhoV6qRJ/dyrpNdJDy42ff5SvLxfj6f5FFdLm+\ngxC5sAfeQKfx4b5/VZaTHdtC6cDp1m2v0TiFvvqYwKirTnCJJ5rL71U7iD5r\nUCvBv21VTKqfPMYXamuy5dyW0dPyzxrfmZx9afwbHJBZobJqnTJpQOuTGoY5\nQ/bKgwXnjs6f0aaWrYgi//ryWLgA/QfCj+uvf56VY4orJS3FylTefhSjLc6D\nssXG9cH+PxJknFCph7zerh4+rg4BOYl8Q84RVB5N/MDMS1IxO9KqZ7DSFPdi\nM+OpgzSHMRZuTFGwYQkhlrfmMnvur1UDTKAmHtGeE3udyZJLQE2kLkZKRtNA\n/Vc8YDj+hws4qtRf21olIlN6eT2RYLUMEVQCwAIw2twm1FOEhFlLtUB3YCJP\n/IDIqqtyxyyoxGYFGe83zd6/GjUZ8yxjsxqhYHZZmdiy+7ILu5z9zMUZoVAM\npKRbL8II+HTIk1xr92NtydUhb1TRC8TbSIOicwB+C/ROplB5AzGnFzpedIYk\n15qEtT/7W0DIpe9zAHnjPRASP+HVq2QT2y72IN7hF5UhGFYWVvKcAhsc09Cv\n6O9A6HLiXb9cisOj52yGvF5bO+p/yjA8EU5DrHE6QUZZMJOzKdL0nmoiL85G\nlQ5n\r\n=VfAf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.b8a1a58e4.0","@material/theme":"10.0.0-canary.b8a1a58e4.0","@material/animation":"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-indicator_10.0.0-canary.b8a1a58e4.0_1610382240477_0.5837027837879973","host":"s3://npm-registry-packages"}},"10.0.0-canary.7584267ff.0":{"name":"@material/tab-indicator","version":"10.0.0-canary.7584267ff.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"bade59b27054fa8ef35bc0a0c0be0fb7c2364e00","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-10.0.0-canary.7584267ff.0.tgz","fileCount":38,"integrity":"sha512-UK+6KIYp5306icidxkWYn1bOHdE1j9PYiPZXff2th+Wwg2iEyHOqn0RHDeT8LAqXjjCzuZpZWuLxpzeIDD6Bmw==","signatures":[{"sig":"MEUCIQDg7S3NQLKrReloQq5OibmH3ettkCctIorj9Wb3uvj8RQIgchuuBQnb4V8ww9BbNa2iCb0nNypUJ09X+F03ZnUydbk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/PdgCRA9TVsSAnZWagAAePUQAIblBeCd5Azuc9cIwqgq\njEtya3yl99YOsfYwsLq0XOtOiY3NU3GovTqB1JgIRA+KYkLFHV7fhXCMI+Zx\nloqbqkUFkxX4WuG7MzGFLOlAXk5F93U5Hsqik9IbHmuk0/8y/yUbb/eBipz9\nP0EEXXcTfW+PyDUZUHM5ichFU54LHWWDyflai0ECUJsvtxWZtpdnsNi6ljDu\nnMYKDb1MYFXi5N52XCULKwg7vlq9sui1ZMOVdx3+EINaxoj3bfz1lnX/docr\ncWctTIWq7a4T33FLr4/oHMGknLMNuUr/QdXeYcW2ikSCW5j4UdeZHhwEH7zD\nderb2Lv12zx/tBy+vW81r+nVsb66K1fVwUF7h78WliqrRJRIDcoy0shldRf+\nAf0y96W6eUu39cmD8i26Co9cwU2mFR/+4th+aS0k1iutvr74xkwEctaBuWN4\nGWK/kREn8OIY/3piqhMcPH05q3a8SMEFd0ts9XqD5D/b24u61lHjSN/aynpz\nZrvaz/i2XMxphy57jFGAe0OeMyCeW1RAGNNCVdXhen8qf8lHHZaIJG4OOnTH\nxRwGKSbfhk+6atS1gslFL4Ma/QVc++OKEHjR73qShjEm8fcXX5yQiZSLu9zb\nUtrpmZ2qVo9nb39yssGuDBEByVTUcrHv9uGh4+zHgQMKAgZ6SzqGNQfSyPre\nMPMZ\r\n=zrtw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.7584267ff.0","@material/theme":"10.0.0-canary.7584267ff.0","@material/animation":"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-indicator_10.0.0-canary.7584267ff.0_1610413919625_0.35316698662926815","host":"s3://npm-registry-packages"}},"10.0.0-canary.251ac04c0.0":{"name":"@material/tab-indicator","version":"10.0.0-canary.251ac04c0.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"9256f9cf7101fbdd449ac19f7e35ed38bb76060e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-10.0.0-canary.251ac04c0.0.tgz","fileCount":38,"integrity":"sha512-ctWHDoKTkw80snw//Mhqf1Ihs91JKWPctAFrtaMwnP5izn82u5tbxg0VsDpGpuEkdTujstDjkePQ8c2clm8laQ==","signatures":[{"sig":"MEQCIGY+2TCWTXBMFS1wW6RgyL7GO0kXCsD7Jed91CDHDSGRAiBrAClxGnOX9hZIyLmB57Fo4hOZ7fFfzrubZ+JiI+i20g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/f6KCRA9TVsSAnZWagAAGJ4P/iirt5PS8buYrLVktZWT\na+Z76LZLJINKgVhr9B/5hc3R2SFXGRpGHv3/h5chk0BAdzAjR2a+56rfAYSH\nB+xisBMFnmH6kcxpk96DvW2N5xgJTNCZBY3/NrWrjRnVMKtMXuiUDfnGrL6S\nGZAmWnzHiZxwo3ms/ZEB0PoHjxQvey2KIf0/nxudMrLJCouApgP3quA6XXRE\nBQJ5kPbrm5bV0AixXMg7GU9YOaaiNPGkeOeIw5kMHtjqRMrala8DSKDqaAal\nl0ySlsEctaUSel5HTy0YOeHUdIU16Ix163RBl2PrcdJyg/PJp7v1IIb1fGjw\nD4+u0LKZxnoLQsSRtblD8Ry+MpWErm8AejLxvEzwoQHShP0NWt0DTlSc7Hmn\nRZsybVduEBwflgVT9/gG2KrMwYMZYXd5ZOPSgyokgkmq9G55edO5QSh9GIHd\nn+kXysGTg4Zxqd9291/OQxDS5830DE0wjH4V7bqgD7rbCsffjF4RVxAxpLx0\nDy1eHgVF7mCIwGmYWHnd+jYDnj6fdHRIq7P+XfKnjit6vvggE+KbwbSHvsX4\nU8NG/EOUh1B0KtPRWTjnl9rG20kwea+MHOciKYZ8yMPBghT6vnRorQPVPxoj\n8bjsw83uhMos7MUW5TgOdsQgDkxlloTEw7P9gmys5Sijq+GXYJrCRPFcqriZ\nH3R/\r\n=EHGU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.251ac04c0.0","@material/theme":"10.0.0-canary.251ac04c0.0","@material/animation":"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-indicator_10.0.0-canary.251ac04c0.0_1610481290420_0.8380165773286403","host":"s3://npm-registry-packages"}},"10.0.0-canary.772cc1068.0":{"name":"@material/tab-indicator","version":"10.0.0-canary.772cc1068.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"89ed47eb90ecde67262b11b89cc3573e4f99dbcb","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-10.0.0-canary.772cc1068.0.tgz","fileCount":38,"integrity":"sha512-qob+2ri3wx4wSrXyz056vmIIzU0Ttecj9joq+iojVOPYXODCJFIoL7u8w1iAERQJfP0zzZNLMwdB97TuNd9fPA==","signatures":[{"sig":"MEUCIHol2qWdz2LNeBzVt0B7kfsoPg4qJCLi+RifZxiJHNQwAiEA+xpFUZRvcHikWwOIBKhU6P9qKQM3fHs+mN7MxVAA7bg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/4sRCRA9TVsSAnZWagAAUcoP/0GgWQT4THREOuyhrgS4\nnh2DpcYy1fY/05q8nmFt8+Fa5YggYmLUseGX6iJA+rmi9CvoovCcfSJd/G+k\njHHRrvI2/aBiFsjIMyO7YU5k2nVUCLod58M/e6OLfAxte5CEWBLtLqwM8u69\ndPMrGz+TyNzuHev619vRxu6Pw6Gu2nqcBWTGGzrrA6Q6fOxyyxZ+Xg3D236A\nRlgV7PHCAofVNz1qy9PtaH4SEWybOTJjy711mbN7gzEOPmrLVBdmixOFzPz6\nlcNeUx0WEQge0OR1p6JwhMq03SwgI2+2MSHZ/BoL2LFON35I+K0H3MmOcSwJ\nK53luI33VxRPFF3L2DXOu9pYYxOZZ3VsXYf2XP5NEpoCo5lwwJhZWXn3DnHA\nf9gNylO20KZFtu09ai5tbxz5VoTOkYibnfZZEmGSQ0eY3CicUrXtTrsUtT7C\nGdVehDQ1Jbl+7bQoUzZ1UTsgZJnenGlhgIIURv7lZTZdzb6WRKrJcqn9YSrV\nYoFOwaZJnnDePOH6IIvS4Dfgjh0OzxBucg412P9g3gS552sYfszGCK+E0ypi\nNDiwPcfeQHCoci0hoGA02Y8exTZ7T9cwqTzIaHgwtF2vmniqRryHnrWHNaoG\n257QjxW50e5QC1x/pdzvp/aYNdnbLwcrM39cAiCruFKJ2j/AsC5rb9/ezmU1\nitNv\r\n=dBcB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.772cc1068.0","@material/theme":"10.0.0-canary.772cc1068.0","@material/animation":"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-indicator_10.0.0-canary.772cc1068.0_1610582801264_0.1928519888368101","host":"s3://npm-registry-packages"}},"10.0.0-canary.fe13dd130.0":{"name":"@material/tab-indicator","version":"10.0.0-canary.fe13dd130.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"7c9a1d945f85621a9ba398bf984f8a2703b37ad7","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-10.0.0-canary.fe13dd130.0.tgz","fileCount":38,"integrity":"sha512-VQPckEFscznlC1VitQfvcL0jIiENHuCiTslJPktwNqzjJ+37eQoheDzWGDrIzPWJ2fv9wu5tjuyEskKOsFbEvw==","signatures":[{"sig":"MEUCICj32gOw1YBzEQzvAQJZh/KBU/IaDp1Wl7nComXe/xDpAiEAwtwcW4ZfLiAV7Lmgy+3l7VfYp95q0xIXqzDDwUVWIFI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5nsCRA9TVsSAnZWagAA53sP/1A8jedrgVD9l6Ie9HZC\n3NJf60xMw/OO3d5TzmoLFo6cZs6nI8viclTuCkuprh7U/njm3AG/f/JM9weR\nIumkLvGBWXXoLqQqjsGBbGsQZQvFBQyEgx18vkeYXq/pGU4/X3iZKhqK81lA\nsOmnD2k9UAcDUk38SpiGfy86EDkDzodBl5XpZDz/xQLJHG1b7y3nkJ7YMXOk\nvX/77k1lcUoGcKxZXVWS5WK52Ur8dfUOPwGm7iEYYJESEpYHJFkUXbtJZC3v\nb5m/x5WgKLTZkHotRGk8awBnpGbY1yi0TgkAqFEjHjyoSLXTZc1jbzD7sqnI\nwNIvTF2SfgC+fl16yGpxtYTb5YrH5Z5zeVC13iVrxPnuuPk7ZXa5dJ28WBHR\n9nIpCQSSdz2Q+4pd76ilx8bzvm7CpuLShzpJYYwfrr59GwK1wDMyeJyCZJM5\nWZ3WIVDpbv29Mi2E/DLF8QbEMdJnZ2FzzzjIrpxN5CqJgnshf0MM9tCYk80y\nSL633f1cNc2ZccorO6U3VQDNhDd9U5xTl56G1zQXKFK5BJsx1aiKKYnqyA1M\nUGJcJGW4V7uAQbOdA0uJXW8edR+vkzsg/mRo5IYqFOFMSobnG3eeuZqgSRlk\nSee0a0gGFlNMOBdJNq+m+ef0Ff1Eg1/RCvzaioMFvPN/mR7AYQd/4YdQPk+u\nMsJ7\r\n=xvAJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.fe13dd130.0","@material/theme":"10.0.0-canary.fe13dd130.0","@material/animation":"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-indicator_10.0.0-canary.fe13dd130.0_1610586604268_0.33031483380890614","host":"s3://npm-registry-packages"}},"10.0.0-canary.c7c5da28f.0":{"name":"@material/tab-indicator","version":"10.0.0-canary.c7c5da28f.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"040b389550448f48ee43f739be3e7eb5f1e2d3dd","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-10.0.0-canary.c7c5da28f.0.tgz","fileCount":38,"integrity":"sha512-HWc/C0EYsAqAyQQEZjCu98+zzZRpPYjihJVrDh3Ay6KdR0bGqMtY6infC89dzGgEcuvzs5ouJ/ue2dXLZuFSKg==","signatures":[{"sig":"MEUCIDd3ZwIh4QDjxutaDlHiA/+Acjelv5WOZQL+/GuC0yOBAiEA12cL+x3ZNWpichUdRC1DttkTkwaMe03lRJaMBj2of1o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/594CRA9TVsSAnZWagAAJOoP/2+QZ9DMOQ2ZWeQvfCkh\nkNbXYyXaP0n9JqxRk45iWKldgSomP41a6oFHSirTMiRAwf8+JI44Pr44I6IB\nX3/brPQgRrx+uympifB+XnKF46kFWOuRGbtASh9COaACYZEjsN7dd0alHCuS\neKGTqLPFDT4yYpXagLsE3e1d35PXQD8hj+Qgx0ULhO8ufDVhhU3trrqHOJaV\nuKNJqw4zPKYZK0U3jUahBqFZV6lMSmDZpRZmGvGyMRSFbd2YOLjqTfGSLaMT\neUMM6cfDU/PUbaT7EPJBV5XB5fdeh0RlYJ9HYO3wFh0d39aU6KcZlxICgxbJ\ncrSehTcBwhFbpdvyiDZO0DP6V6wM5SIdv+MDo2r/9NopWxnSv+dXpRPT3G1F\nxZYnixEczkPlH/rGQ/lSE/5dwhXKkth3fYZ1a4d2MOPpbNXNUsN8ccuDE6EQ\ntQVJPahF/zzNH7uvbwBeliHOuqrLZ+wn/hpR2HYhx0Y2vPq2O0bzfvdKwqpw\nk+ix1mgvG/3u8kMVqtkUDtmStfM/G+xdkuTV2HIFKkSdJW1qof8tAPSV+CRa\n4LgE+DkqtlAz6/WTIy4bQooqhUXmgagWozM+FAqLgnaKnAHMyaKPiYN+9tRm\nCD3Iag+/j5xqIaFn2EM0+4QDevv3ckIz7C8y5gV19AFZl7AtXzx6JOTR4lBl\nsBIc\r\n=ka3F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.c7c5da28f.0","@material/theme":"10.0.0-canary.c7c5da28f.0","@material/animation":"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-indicator_10.0.0-canary.c7c5da28f.0_1610588023929_0.9964091886150201","host":"s3://npm-registry-packages"}},"10.0.0-canary.b2faa116a.0":{"name":"@material/tab-indicator","version":"10.0.0-canary.b2faa116a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"9f3d58e3ba464ef0af551bd6b0555299d192036c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-10.0.0-canary.b2faa116a.0.tgz","fileCount":38,"integrity":"sha512-8lgXEdMNFgCu2cRfxdmM+kqtl0UV6vTZoKddZgaCuuKJZciUr+PbMc0+r8yuk8d3vN4mE8xV2GY5Q4EBNlhA0A==","signatures":[{"sig":"MEQCICtrRMYZFe8dbQBoKuFUvK1KjvqA7LcwGtTHb2UV2XqmAiBygT6SFWt9Ios+mGcfnF2h87oFVn9/7oz/IW3nJSTzHA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBzJbCRA9TVsSAnZWagAANwcP/1XQWFvCl4B3ljJUpnlS\nHbm5A13GlKXwyh8aNsVy9prtoIdN3OJ6qDwlhKefqw2R3LwC0Z3GLIZml58e\niycLHKmiPZ+holxOO+1k9cMV5X4o0j7lRdtaQh2O8lV3s26hRf5+avdG6Ufo\n1v1XzvjK6Wa2q62iQCDnIMSW3fVAxUR75YPgCWtaf1HRjTwFl2P28ALHke0o\nFSX45jUxU3Bb4TPs7tAq1yUqjV7pZ2gALjJBsgPpGOicaLpMMp5O0e/6BmCU\nHXeOT2XwP1lvoB1ERSRd5ye8YmkZDlYD7E/2LpaajOWOpRfBPun2iFlH5ued\nbf+Szqwxr7nSj2CtaTbFetlYqvxqqZqVoKLqSZluyIm2GnbWboVmw7AND/oL\nPr988HgQ1FhDAfX3FNjqEPvnUMAdnhDwRSQI6mt1mJAkosEjd61WRRVX6Zul\nPnSMt93CXd2jYAWJouF3g20tittpBY+zKRPwS/7JoyGL8QSEpC8QH9nQcsd1\ntvMlpWZJLqWWqwv7QZDLbh9pokfEOlvSKayJyoBFSnHhyZgXy0/FAieN2FqY\npWzvz0sYRCjcMSYi2y4jRRFFV2J34OOG0sieh1YSYtdFWpaJ/cC8ZsHDt0UP\nLkyDM0BeuqYVaggO5gn/iLoET7xnkJurVinT6+a5O/RhzJZ7Tm9GiJ2wEilo\nGpfM\r\n=9ppk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.b2faa116a.0","@material/theme":"10.0.0-canary.b2faa116a.0","@material/animation":"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-indicator_10.0.0-canary.b2faa116a.0_1611084378674_0.6154556070457315","host":"s3://npm-registry-packages"}},"10.0.0-canary.0c95c9f7b.0":{"name":"@material/tab-indicator","version":"10.0.0-canary.0c95c9f7b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"6697da9fce32a31c85de3d2ce4da27f5d45b5b4f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-10.0.0-canary.0c95c9f7b.0.tgz","fileCount":38,"integrity":"sha512-Q0xEmm6U07o9EBnJzkecQOxbIUcCsdkamK3EicVM41pePzDZUmyq7Cywh+lAWf7t/0dnI+W8Pjd6l9Vsc4EiLQ==","signatures":[{"sig":"MEYCIQDhDFGcqYPJO3+q3XMc1LSMXqeZGQ1uWTzUgRB1XIHIYAIhALEYpXCnPRuEK329llf2an/zlrrBvjTUQF3IV83axQqq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB2LtCRA9TVsSAnZWagAAXyEP/038lfpx70DcTzd0U298\nCDxULmb8p7XOEL+ibZAxADbjqXrAsXYZXNTmKCrbU34DP7XvEeHl7PnNCbEi\n80lpmz822NOWwghtPAbiuAhl8cEB69656f2aiwX639z1brfhks1xWYWJ5qJH\n3yQib5FkH97GcDlt1x5Wl8k4MC2l9tr01r6pIHUquGGn0EpeEe8dsnltHsDT\nI20HqGWT+fpLaThfNL4rv4YxnKPmtzuX2lTRkUr+uku2lqyDPZlZGQgx/lAA\nCakGR07RPDRaUGtNR/hmoqRaHrzPcVxEIZz2FMQy/SLI+5YwTQLssBppA9O0\nPpEEsX4QL2LwJ9+VSp22FXhpocag51Qne0liqZ30Tac9z5X/zzXTkHSulcrc\nsqppjdpNi3l94oaR8ihUt9J/lDdwRfW0T3605OH7A1pWM6syMx0QwA0rGRVa\nVFYNyYxpgGum5W2JQaRI/Gzv3MU6v1Cg/F716DWsCk95DxeWGbv0s1KoKNyL\nlLsiFL758Ws7Z4LHdTv8JnvuQToLUmOAOgGv91bFrcqyhU3KPN3YzF8l40w3\neWGLD7VG/Bsk0dhoRoUZsVgB0Mw5tRBk9cN43KTEE5t8d7ocyYOqTU+gLY/W\nzl5BLvL/7X7ZDEI6FKG8CA+2SDjMedEyQe2e5ufcUqywMV8+Oly4nshMi9F7\ne18W\r\n=qgyj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.0c95c9f7b.0","@material/theme":"10.0.0-canary.0c95c9f7b.0","@material/animation":"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-indicator_10.0.0-canary.0c95c9f7b.0_1611096813100_0.6227734829987577","host":"s3://npm-registry-packages"}},"10.0.0-canary.5268222c4.0":{"name":"@material/tab-indicator","version":"10.0.0-canary.5268222c4.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"912cc2722c1e90fd16d875b5a44071ff658655b3","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-10.0.0-canary.5268222c4.0.tgz","fileCount":38,"integrity":"sha512-o4QJY2ExMGrq0xaa0h5GmYQ2KDj2ihnTs76yslAg6bT832W87qSuxGdvai8CJA7Lhe0hw7L/gOI0MFRufuKMAQ==","signatures":[{"sig":"MEYCIQDHlAcTHbfvy7QfUVQveRBHhqSPu2TwF50axyE11tAgdQIhAMKF+PXsXVst3kqpiSLy9F0rUiU0PXMgipwDf6J8gOi9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCIIYCRA9TVsSAnZWagAAF+UP/31bH5QVMC099me6pmAP\n3uVSOyOt2gLSdYAWsptZ25EcZy1JMMw+4MneY6KabGOwgv8DgcjMjWhC7p7F\nqcgMe9/piJShVF2HiPOIjPXq16A7z33h7PJJpZDVt2QUpBzvTve4+u3gpAjS\n3IwrNkTxR/kDPoqFlhEhAA0mN8cGlg2wKimOQYMKbUGDzZkEUXhIKrqkzGtJ\nQTMI+TXDMJbUXDm5JMhHJeWcsWMlC8vEVBLKVRG7RdAHHKyncfbn5PhuDrIt\nuWHm9NMg9HsbHLdlH/EaNr9D+QZ657fOmpxaqa2NVfXZ4ugTwapneOOu8feh\ne0Qw7tzJ6C2J/OUY3mZK+HZE9OYMgt951sjg2ZRRFdhxE46L4zpLBBtm9hCP\nuywAejTp4BOY2cT0qVhMVGFkv/V+KSGmCkNZmatCVTmAIME8YxT4EzbtLjmV\nvD+Ce0HKLEFLwp4FT7/wDQjHTYJIwllkKStWu291oMgi8kiu1pXyHSp2UIh6\n1CsLKk5Hd0yFJLHJCDvrMGVFEwZibSmEPQm45RHYhredpwhuhrrHYwPn0bLf\njpC+DWJE5pI0LhVtirh9OnCH+gm35YS2RN3QIwHkh8dq63u+RWkRWlfGlqY1\n0478x06BzQPsXL3SWOZNSz/AazMFmjENO7fDQsRHd7NhwKG8ydlvzKhkvsdg\nOdzQ\r\n=z8jz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.5268222c4.0","@material/theme":"10.0.0-canary.5268222c4.0","@material/animation":"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-indicator_10.0.0-canary.5268222c4.0_1611170328181_0.010049034886408403","host":"s3://npm-registry-packages"}},"10.0.0-canary.2ed2d829b.0":{"name":"@material/tab-indicator","version":"10.0.0-canary.2ed2d829b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e01227dc41794c64ee9e5f6540ad9c6b7c3d224b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-10.0.0-canary.2ed2d829b.0.tgz","fileCount":38,"integrity":"sha512-8Y13IBH9zwerdQJuIJibSedblh5X8WNwtuS0apJzrY5sW4x9thKtVhxSxemIinuU/UCBcPCvyd9FJlmMXiblCg==","signatures":[{"sig":"MEQCIGO8lyUu5gbPqhWHmyUMCq4tVOdGYEpUEgPE5UYARgceAiBIEoZrNAk1ReUkN4Ajyh1kFgn3/Qvua+AHc89vqWknLA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCLe/CRA9TVsSAnZWagAAL2wP/0Ygl5kFHAj6W1FMNcth\nbhmeWve+GHVvkKMtqdR+mPNXH1kaTgBZkPYSeAic3Pl0Qm0BsLMxWrvYbIHt\n1gXMfwTqepEuV00/XqTBI0nFmjkKZNfRXIMkO52sDDDPBh9u3ns7RSp+dUKh\nIsn9I5w2t9pF7lTOmrvL+Bvxtm4bIUEnlwIz/1wxxCaACPF+ZzE9i+2xV0X4\nYQ6/X7h7FWthvt+YO4RIgj1TvEXH58Z7vMWb7/PO7py/7UftdVX8m5Ui9taP\nb7SouqXaTs9C6SiZIUmsCg15h6knxmVil82X6O6hCFl+8j+ZPBcrICZgbD19\n/6jp9aKK4czUV8+m3CxaphXNMh2JVyNo6l6847SXPzN4OnpjNeNoPG0Q3syH\ne43sa+L6EGsHQrL9HUptQ3gGuVA+quoxM/Qa6Mq179gSjRP0Idg8I1In1PY/\nKCawjXkXiVc7V2flETGi4btvb1Htz/YUJ73xujjTpU91JGhSH2iIuypmBZMj\n7AZTYi7MJNdIq44u3DfMETrmNdCGa9YzrGNL588AXFLfGFxxiPF9sO5cVWSC\nn1ExxuXKwbUPOcZXql++3Wd3/XaJzjmghBNrpqw9JlgoA5Y4BJ6Tx4+p0XqX\n5N1FoffgehB7PAmeu1xeR5QGvhPBK+A6lpGSUp8eyGSrGgExDi0tAvG+p6dF\nYTkW\r\n=Ml40\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.2ed2d829b.0","@material/theme":"10.0.0-canary.2ed2d829b.0","@material/animation":"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-indicator_10.0.0-canary.2ed2d829b.0_1611184063523_0.9710899207739534","host":"s3://npm-registry-packages"}},"10.0.0-canary.df00c2b30.0":{"name":"@material/tab-indicator","version":"10.0.0-canary.df00c2b30.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"02768c09b0fa91a01c6aec19bc71349558aeade7","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-10.0.0-canary.df00c2b30.0.tgz","fileCount":38,"integrity":"sha512-NlzdY/Mg1eTZAvvU0IOUark3Nr6gR0uiUGsqdHHSEH/kuWJ6X/4tlb6RUo4Alfk/wKs2m8W4m+uVokzlNMfz/g==","signatures":[{"sig":"MEQCIDAhKq4PY12IbrAot2ahc3DIcdXQrm6LIfEDMazEyms3AiBKcXhKShSsT/BAaz0FI3ScMqP4J84aaIJrF4MdQMjNnw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCdv6CRA9TVsSAnZWagAAFhEP/A1uE9mLUi4V2aWoia8A\nf1xbGFvysym/ntVOHe163h9BfZq/J6olFTkWLHPTCN59R/NFIq3PKeib+eCC\npOazy+psd68W+TW1Ro+QjmwdmuYLZDUO5+uZl9FUBeRB9HmK2kUYZskbovpA\nAgUG3SOvvDgp1AuCrhpDCRcpKE8Cca5ujBKfUJUq+qWcrK6ZpOFPO3wV1nHM\n7Cc1OWe6PTWN0EUFSBXb0E73zOLNvGqZDN75z/dpGrMzKCTlJpaO27bNhs9d\nKSJD/856ID6TKnXb4EFnsc5llyf1HXMm7Lkoaj7+2YKrNTsaIyfHyvFVWKY9\nwjIFkse8UcumxRTOH8GgeTXbmQz6vlPhfo6UCmwKMGujbjsQDfNcoIAXE+DB\nfAZVHkcy6vDt+wKqY4XPkr3bE2O7ZekOWKZfFMETFGBneeZxEJ1PbRSPXvVL\nxVE45ubvbOyGVfNvTsYyi+WbUKE9qCUiXM56ukQRpRM7TY/HCezSc18Pobzl\n8bxF/641Q6BhZn/JbHORfj7SxtxBuQA3m4ytdNLfqF5nBN2WzawOwQ4itxl+\noy/avEiYkfTrgXQ+2twHWZytvnQ+sZttZqZQFSQVRO6HOe9b/Zdqa2v7COOn\nG3ySm8xdCO5RbXWPs3B6cIrdNMJX47BF/0cx9BEHMhOMm8Yxu/qM4X15V44n\nsEyn\r\n=2+5C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.df00c2b30.0","@material/theme":"10.0.0-canary.df00c2b30.0","@material/animation":"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-indicator_10.0.0-canary.df00c2b30.0_1611258874110_0.7466564473729649","host":"s3://npm-registry-packages"}},"10.0.0-canary.fd61b0476.0":{"name":"@material/tab-indicator","version":"10.0.0-canary.fd61b0476.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"032ade412856529ff1ee05c209367f52f4b9107e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-10.0.0-canary.fd61b0476.0.tgz","fileCount":38,"integrity":"sha512-Ft9dE6v8TS/Smkq3iCkJr/6anK/6qWOXjxb93IxlzkSmdC+pKfcyijsaHAD9iWE5foSWnTzH/vXBmEx9RiNyUw==","signatures":[{"sig":"MEUCIQCFzZg4sCfhoTCHSuLForWoKJjSoL3G7wmU9ro8Om08wwIgFHVnYMZEabp3mhN7rCqO9Yydr00R8imsBM8VLJXUlio=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCd9qCRA9TVsSAnZWagAA+DAP/3veXlvScANEAlYxbhAT\nQ0l6YppC0v38MnoPs6mTchmVYU5gR+H2z5xCcjh6xojYqmQZIv4yqZdU7IVr\nRzksHbvDeU+aQMM4mZ7ttEXD+k69PJcRX3ME/ekViO8OsmgqTwL/T3DN+uAj\n3b9wiRyzWcrA1HyrNkMgvGS7rFyQYaDXDJQzDR7aPc5UctG4/u96EpyHO3KT\nFIKKvy1tH7LF3xM2+NF7fQ3685HIKbFYPKo5KeUACepbexQfWKGicPrNr+se\n8BhRzsEoNJAJJhYlALGMcJBe6q2OkFRsIoEpIsruBTbf+acWUB86xXvQNzml\nP1kG6xWRueR2TYh2Q2AEBetOJuz+FEdVC8tOsn7bqE8m0v1tG6jMlVTIXc6u\nVn5Fxt1UBAPXvRiKNCioSH4FMcrJ6SyvnHBhBdDSLRlYi1/USkr4ZS7nUSyL\nSzGp8dDkA3nSAG13E1w5xxOsyfFQ4eWC2u3zpK6fxgS0V2bEEKJu3PFF1PZJ\nlSY+kJ8pscV/yUnNhpp5hwz/PUwXUBnxBVfhHyiidGR5tHfiRRAH87ByUcmh\n0BpksrlVBq1AtW1Xvbt3av4dOG3FGumi0LoGXHOyV9dRtMf0bc8cR0xcWNl1\nmRov7RfX1RHSis51J58yzvu1FUS+kMhQ8swIAV1kn3+49bcStm+0zNNXcoWY\nfzrK\r\n=sSF3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.fd61b0476.0","@material/theme":"10.0.0-canary.fd61b0476.0","@material/animation":"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-indicator_10.0.0-canary.fd61b0476.0_1611259753916_0.7176118517285914","host":"s3://npm-registry-packages"}},"10.0.0-canary.3fb3a0265.0":{"name":"@material/tab-indicator","version":"10.0.0-canary.3fb3a0265.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"3dad98d70e9babf451fe714220185705c5126d41","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-10.0.0-canary.3fb3a0265.0.tgz","fileCount":38,"integrity":"sha512-H4e04DSsaJXj27OIm+pmY2oDbYyDj/almVolj0uz+E5QiyQytguMji2OdyR1fzoMatTAmCONysg8ED3F0wEsfQ==","signatures":[{"sig":"MEQCICRzwJp+iSTElt+9dCk9pGkp8M6UFOGFb4SIr11CVZ9mAiBdINiBhs/EZWXwcvisrHnhijiVau43ERaCh0g5iSYMAg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgChaKCRA9TVsSAnZWagAAIDsP+waUEZslV7lfDMY3GgwV\not4hFugReMGvCGpMUawmYh0eH/SK4rIvas4mxAFjg3LGwNXN4xC7FSCY9LJT\nEKA4WuBJ1bljZyY4JuV6Ge3cWfQtSHEjVBrAmJfDnfvrre5nGf/T5UtpBOh0\n1FhNDXynAw/+4EE7PgaFqx0tnGn6F77dDHBYzaDz5q7AsG/8ewhKsUda43Ja\n0Jy1wpeSfZSmo7gAwzHGhujSGf2j6GM0HnTYzuwjwSmCUaCoauJVywH7Lx7R\nrskCY805ITBMPHFPCqyM2IAPyo/N3sCk+JfAn4ewHT7BKfJpv4HARcl93J9i\nbiApBFadZefUBTf8qp+ZB3v/ckDNS6vQrZEV/ARu2O6LhQO88WVYsZsifrcT\nvyo+HaO3O7zCBGS3MrQFILrAMIKdizX/RhN7kyXHw8SdWM+JedfehOYnydED\nK/zO8X8g1HL+aTcUOxvCdq152r/kAXcE4Y5WD+hiDY/v0K/+wNJFwW4kBRDx\nEfQ+h4sWkWvASY87z72zVekKGRNqsQJq08DoRolENamHfd/FCuercdSzU5xd\n9xxUm5W8EQkI/me2N1f0L9xx2JHTWxgZV55sfcQ4NWk9gMaq0DO16eZhT3Ht\nt2aWhXHS1sBvuv+kx4gUjWqeRcT7yIQH7a3y7nBUrLRFx1+uQK3R614ahffS\n4pV5\r\n=RJcq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.3fb3a0265.0","@material/theme":"10.0.0-canary.3fb3a0265.0","@material/animation":"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-indicator_10.0.0-canary.3fb3a0265.0_1611273865583_0.5035676197448455","host":"s3://npm-registry-packages"}},"10.0.0-canary.07deaec27.0":{"name":"@material/tab-indicator","version":"10.0.0-canary.07deaec27.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"55ed25a28b92eb36881a802e11fe453fbd84feb2","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-10.0.0-canary.07deaec27.0.tgz","fileCount":38,"integrity":"sha512-+hmHZmFRwb8opuJMdvcEGvniB8YNzE1/c+8Q81UyXL/x4d2K4IalXT8Djya9Rp3xC51rY2iJ6KcYSv8jDqh4UA==","signatures":[{"sig":"MEUCIGtsMPIyOYdRfKShOcZyvL9Ne269MwoOySLu7QokUExqAiEAgkffMAUvqV21TYGQPC4gIV7hcsiaUp3p38+L60Ib680=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCwOhCRA9TVsSAnZWagAA7SQP/2rxaB9LoETOBAiUAy8D\nVaiq2cjEBuJzNiq3U++N9lWLaq1nL7esxgBTXl7D/AEReHZ2axILuR3yVm6c\nxSXMNAcmEzbhxHdNGoglBaflB0JDT20u7Uo0/qCTiz64BeVf5mLnX62vDkFX\nxjaG1kHSv6diP4lfVF6hX8+MPeIaaLVZ/gOc5RWs2JkaNl2CB/SYFXajhgOn\nZkWvlzyIFHhBneEjr0KaBC3XiPhUQWgq8wV/Gq0q9D8AJ7hEadElCs2ySP2C\nvFJAWlysoK1UbP82GLzS+AC3z5SHZbBNxSSOp/SS0xgFpRHZuzlXTAWvOMIn\nOiUqkcLh6xqgs9xiTU+gsJb44yhnWCnjUKjNgIwmkfEoSwB3eYrLmagpxLXE\nWY2CJKyafsNwbCpyGSxZfZSuY3vZLifqqK0d3VcolrYW9vAdzDL+c7w7cenx\nZdXchXVA5xGY/A3L25SIgsdDRAkrfWUCXKnJc+xrttjPauQsOGLJ4bULFFFZ\nS1ZKcT/wk5riZxiEiWKpy0aPyuI6NblCdYqOoidqMRyfZY9O993FwMLCK3xz\n+T6ki9jORzVcc5jtAWi1HrMY8lpxwGGK37XNcFF2xyqBdCo2uqSZFcyEzLzS\nD2cH2qpzB22Ni7B+DPIepwI6yId8pbKdQk2ObWESHrxe6b8Q4aG3yXdAEVCp\nhkP8\r\n=3tcx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.07deaec27.0","@material/theme":"10.0.0-canary.07deaec27.0","@material/animation":"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-indicator_10.0.0-canary.07deaec27.0_1611334560767_0.6785952536557662","host":"s3://npm-registry-packages"}},"10.0.0-canary.d2959b16c.0":{"name":"@material/tab-indicator","version":"10.0.0-canary.d2959b16c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"dbdcefb86c79d9735c46c8f59e442dbb64a3149a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-10.0.0-canary.d2959b16c.0.tgz","fileCount":38,"integrity":"sha512-TV52a8fU2K7ZmpE664S+hK1pzDDFRGtSjf6B0oCqu0e5uIL3l0eL5U9eBosbXLR4pZMKOoae7ia6miO+dzkNyg==","signatures":[{"sig":"MEQCIFfrlVqLZLboN+GXq7bBtKVb5yi2dIVSpoFSAiMW1fmzAiATxHTNILf4uOH+BFPGxMBmrkhQOlgIjk+dW/W4eRvFjg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCx7JCRA9TVsSAnZWagAACE8P/RZInf8Fxp6GPWhr81SI\n90IXYfk4nz8K4OyWKqKwMb6U1DXHiqLU1nlXXDiPAk2Qbbovn/LRxsIVZPwd\n4LLLbPfahVnlGaeWkUiO2z/3mToCKpcPUy1CbHm/To7bfl6+N4PyrqspTaco\nNjOZgctEpvHMFPwgJeAGyW2B4QSpXO2MIBwkHBeWuuLEAQKEpM7hoQlBo80f\nhwoytbjQH81/PwzOFastU2XyYc+0IYxr3yQ3zGRklwuM7Vgk2rMmFq2wYBwt\nZcOtHXqDpU1kz+qSmPrDW66f/k46roXG9dUgHNAqZUEE0LpF3wa+PPhtr3dx\nHnzyXAzJvINU7wlpnmoS/RKl608DagrNDtfhQQ2ALqVUojcWo8T1eWmDOfHX\njiJKXZg0Sflsk0EeeVBJ6HFpelC4VT1QaR3ffFccXNEVX989NydK7K4X41U9\n3jPSaJvBs1a8qxcAbxsIWNzideMEYsTsbJGWH4eF+CmGX1AR4QqyLrnW6WUC\nw0yuStW4qw8sMRa9e9JmZeN2QtOQMnVhjAXyFKEt6/jFU63XvGbwx7PLZdE7\n3n4kzmlKlDZRvdsz+4t5VSkxpxxnDwmFfO3LoLt8zN7Qecokh9/F6iU0Kbft\ntD9/S9SuN5d1DJ88cDYVGYL9sIp/m7pk44YRJNRpuM4lw6EDojayKNFe1GFc\nGefC\r\n=qcq/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.d2959b16c.0","@material/theme":"10.0.0-canary.d2959b16c.0","@material/animation":"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-indicator_10.0.0-canary.d2959b16c.0_1611341512439_0.31648032919881497","host":"s3://npm-registry-packages"}},"10.0.0-canary.75f3bfe7c.0":{"name":"@material/tab-indicator","version":"10.0.0-canary.75f3bfe7c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"bdb0c46a4e9c7223236ac2d1dfaea0652f791496","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-10.0.0-canary.75f3bfe7c.0.tgz","fileCount":38,"integrity":"sha512-JLoG2pDV8W8GSFs21d0OfoFEv1nbBHYi5JgOd3JAJV2zoIX/CzdGhOZHSvEMlywWOzyMjnA894THzJC1qzHEPA==","signatures":[{"sig":"MEUCIQCwNFg0mh1Ul0J5bNR+RsRA/OhpU66tIm2mbAOd1KzzUAIgFw7FyFmz7yGgg3pwBwHOvJBYriGaOcIvb+J6aCUwu0I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC1bgCRA9TVsSAnZWagAAQLIP/Ag9jdJO/4xMOR0sAvKl\nqShY/VK0yYYUQG1dE+n9FMs2WMJwK/P11jE/4uov+yuyiSWrI1wIGdBreK0H\nbeZ3B1Bpo5wAdEjgmViYV6LHXZ7PExrZHdIXZsmW0abaFYKu2gM+nA1Bi2vZ\nPGWLZFddpD0Uu0HLgwR5a9Eai3HjlBTNluJKub/NwJZSsuJ/9QukKH9J04wO\nat4g08c/gnmdWCcI9xaukpo9VHHAlbivP3CQrZXgYjH5g0kkiRSa+WxXRr0I\nKZJK+wsP9wxyginqR0TM/nhsRjFcYf2pX5zsmOk5WC/Q5KOQuqb8/cZ0r8SN\ntTJLL+gWUISwwIQ59+fu3Siwff6Fmo7zUHiO8AhVkxnBw6x3/TzbZjQKGkZU\n5F7sxIJbjueyiaJkjda61R7NWhXJpo+glHHpzlAwBn0xJIgZTkokMNjai01A\nqGarJ7y9xeIvLRFJfuvjZj8qALX8THCEP4FRop9fDxMrvpR73N3foBIi+Jpo\nuqcm54LP6Rt7xqFiBwlJ+LoRwBpZyxhafQx+JrpKIWEZOWM2CfA9OwgK5sh6\nL+uvR61SzLsQGXHpyB4uZEeC6gAngjwrOKUlWunc+T72HffRYPyE21ARsswB\nDkx1wOP1ktvtaCtXZ5tyPy2jqUofYs491nntLbbUGalhaX6n4DNSsOpqdN/H\nrf8H\r\n=255r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.75f3bfe7c.0","@material/theme":"10.0.0-canary.75f3bfe7c.0","@material/animation":"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-indicator_10.0.0-canary.75f3bfe7c.0_1611355871813_0.9570165052566282","host":"s3://npm-registry-packages"}},"10.0.0-canary.b9adb7a0f.0":{"name":"@material/tab-indicator","version":"10.0.0-canary.b9adb7a0f.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"15f656c74349561f75b0c73fb019ca05a44eb022","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-10.0.0-canary.b9adb7a0f.0.tgz","fileCount":38,"integrity":"sha512-gWqAw7Csu8UvLIPdYRw/pU+ZmKAnBmo+rpYurP/QwH0EihpOGfZHg+TirRvedcQ2URYXISmayLaPnUXeOiRzcQ==","signatures":[{"sig":"MEYCIQD/ujD8FmTk+9F1A0ve6vMzaBiMOivHSQjG31HmJWp+dwIhAPLEAA9B3g35t9Y1sLrypjRlGsZE5XV8088NaJF4aepE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2EuCRA9TVsSAnZWagAAdKAP/joZfiSBblGUovo6xl7i\nQAAmI9AbHLiJTLcGzJdFj7v7bXp0tQ+QhR52NwE0EewPPOtsQFR9wxyo+aK2\n0YP1iHpzQ6ZDx+9nbs7gjp3CJxRWgbIcEaFU6sE0zctHm47GqYAT7tSLnun4\nuq53CyJYbwgRW2Edl11P1+bMKJj4gDfgGp7YRsW1zFCLwUdX84j+QiBs042N\nz2ooNyKsu/HZ4iCVKv3q2V+Apyz+FRD/kPrMOwwoE8jQ9eheicT8DoYMch3q\no2iXc6DZHQoiNXvHKR5/MEZyd01zVW6VArUI6/pkIdV0+M4GErzqwRqZsNc6\npjMK9K1h26ACcz2LfvGxyLPW7y0SFuf4piYzHP7H2tfOWsDLNWisis4IT+im\n1isk8irBpRBw/Q22Bsa9qRSBx71/tGVU5j7GF6btFMa/4RlXJqEeuZ1J+91X\n0BK/plTuZ6pHDCvtSCnFtd5WsfSMepuBugxxganRRMjm8+HSjSHnFtLp/jSD\nNrMJy1LZsNupYjaYtoQ9mvZ7uxAPVTr61yk45eStfUG4eixYwVjCsy6M1j4w\nfNKz+mfmJRFMA7AH5gKUJmjKAY4Ag1ggvqgIsyEyoYKodI53BdDqsITlNomT\n2wsEbT1D15L65Dl0dF1mIkW2qxOWn6IkT2hAHFMEiZd6tUat0E0Gi2znx/bw\nrJBb\r\n=OE7i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.b9adb7a0f.0","@material/theme":"10.0.0-canary.b9adb7a0f.0","@material/animation":"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-indicator_10.0.0-canary.b9adb7a0f.0_1611358510275_0.5711765101183355","host":"s3://npm-registry-packages"}},"10.0.0-canary.d29ec2862.0":{"name":"@material/tab-indicator","version":"10.0.0-canary.d29ec2862.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"365f2c96d67a5d8ff5f8d7f68569190841a19e1e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-10.0.0-canary.d29ec2862.0.tgz","fileCount":38,"integrity":"sha512-RHW0aLGx3MpUXkeefbAmsDnVRjVnPuy/eHcw2OB2BZYGIjQENO+qtPF8tpOXzhrN+W0+KA2Pabj6QRCyWJD9Ew==","signatures":[{"sig":"MEQCIAje39+KhJwMreSxS9Cf4a5iJyJtGlVa30rps79kKwLRAiA3H2MAJfTZPOizdFVOW/vT1pBuaYls4RLHCSywkwJ+cQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgDvB+CRA9TVsSAnZWagAADWwQAIlSMZU+Ezn0e6L7Cgtw\nUkkvrkjf5dyc2/nuvsBGGpcEHS8T/7jxmB+xpSUwNsVSJLapzyZjcFSKw9eQ\n9HQgBZOjq/bHd7FSOrJf6xSHYpz4ds3VmlXVdbLMOprt5896NQKoYsTf7beA\nR1FhGkIXKvTrz6ckG+JTH+FKsisZlvDjqnqb/I9guRHJ9g5hnMtfOR5p2G2+\nakPRBmp9ZhuxeZWDMPruHxF7GRSeLzThpwijJ72LtEgdTNBmuXTUHOlGm7E0\nSdCX3d34qtjgMmdvBeSR9qpHPhspfgDt1IPshYWn0h2hwS32BskOLA8mj/+U\nHN5TtKFjtOXMqWpgcfZkDTqfSPIw7Fds/p/8IkTXuT/jA3jkjBrOof152K8G\nWH57PpnAuvuEUPAC8cr3kuGfZUhIcwGuh/90nlycdDoOySf2vrhiQGgRxJPL\naMrYmQCg9KwiZxT8TKkPFjK83XKIQ+oLUKLNps8lanhE3imCg/yGh5i8yj2a\nXxFhWSC0P4xnyBWVcvbeXEtqnj5onZI42JHG58AStDDQZtqcRNl+bmrgCIEZ\nLk+9Tf9b7flnQb3tgFA5Vain/rXLadBpkfZep5LFPVWa1rQDSwVE/Fpo70A1\nLNvBwQ1ofzjKLxM9fr5wKL3l+r5uwebLQIFYAMq5fUUAgw9Cu6LO0Fe3Hy2S\ntwlp\r\n=nWhO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.d29ec2862.0","@material/theme":"10.0.0-canary.d29ec2862.0","@material/animation":"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-indicator_10.0.0-canary.d29ec2862.0_1611591805727_0.3241224153286375","host":"s3://npm-registry-packages"}},"10.0.0-canary.96be07c68.0":{"name":"@material/tab-indicator","version":"10.0.0-canary.96be07c68.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e977dea9b7a7904d69a297fa7f2eeabd284b3164","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-10.0.0-canary.96be07c68.0.tgz","fileCount":38,"integrity":"sha512-vT/IoorbJMuYLDmsnt61cCJhNVC3ai8fKs31j5Shj4evbwLfV0Bf82PXhcLWpO3VDMn2JKsL4GQxrkrD+1eCOw==","signatures":[{"sig":"MEQCIH/NZOoxaU8/V37B3M+W6RFxM8TVYOMKq8qKjbkGg+fCAiA5+KnSsQLi1gVwKRdsZB8hxoaM34rBEdNXfPY3V61e7A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171832,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD13FCRA9TVsSAnZWagAAr8EP/3yWQa1t0mxTmAwOVfm0\nTDzwo2VLJVC0u1oQpRLY79p5C1cAQ/agS5tbLKowF57/uHDSGUUM8NTy4Y8i\npWS0vaQn//WkxqbsV39kBtSzV6Yme0qr0wtzp8MvXQyQBOGcHjE31rF44b+N\ngJ3IZz34qH1b8ZnC3mG3RbovUb/0XEjllm1UU4L9BWNcBxO1KhST2yKG/nhw\nTIyiER0vt6BqjaUdxGKiM4/w/dpi6BbKMgJpcSWrR5LY4M1BDk6b9C+YuZ82\nZXIdRQXYkqMBFb7U1CnxmnWmVKvoOd6Cekb0XMQF59gcT9WW9hSOphvzVMbg\ni9OwMP5gQVKiWKZxgxLXV0JQh2cFNlgZESBpCvStRn5OmQGYkfOPPAhTie+2\nKEkMlI91N9DIKOoBvYKGNoAS3Z1kNyqnzKcHJJ0lkn4M8I6ixlx++JervrHh\nnx8uZ0vPYqUhdxCP4krub6hlUsmgxUmmbM4GA4ubOeId9ZPLO8IQfzBZG5rH\n+wuPZvpWrOzorrJhtz+z0l4x5aRpxxY18gcNjhGf74GIl3hbpQJhQdGzu1oO\nJgKZT0Zl01P/SURqwByvXI7Aw8QG2T5n7egFO6m+JOxCpf7uV63WlCzLAArX\nFzdelpYhaGhDhhLQ1+lr2B5OLO2bJlS4NA4tKGhrCxXlWRHivFX+yboXI3vW\nj0gO\r\n=+CkC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.96be07c68.0","@material/theme":"10.0.0-canary.96be07c68.0","@material/animation":"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-indicator_10.0.0-canary.96be07c68.0_1611619781195_0.2720501979344605","host":"s3://npm-registry-packages"}},"10.0.0-canary.e383944e9.0":{"name":"@material/tab-indicator","version":"10.0.0-canary.e383944e9.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"a46c4e1460cb40c4e0c130dd46e085143b6aa435","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-10.0.0-canary.e383944e9.0.tgz","fileCount":38,"integrity":"sha512-2GaOQxRZctQslhePcZmOipe3vHgw9AngmPgKwRhziTLqxd1inXhfEXwBKtgAhjJ96ZsgmTqrWkm3OJJQgOMkow==","signatures":[{"sig":"MEYCIQC/KQx7fFmOwPHU9qSYVWZmv3lCRYtTebckZ77yX1DDlQIhAMx913BhX/cxc3EPZid30UvCLZT/CObUdT8FJKsxDMud","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171832,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD3QHCRA9TVsSAnZWagAA9cQP/37PMqeUcKfay5ru7XN1\nUfP9B5YNimNYTHReEs3uzmuZHTIRsr33TEhI/fDPVyCIvlV2YwDOYUuYs6N9\nDOfHai7emvo1/G1zdazeS4gVCMXg8jctEa+HDdBPBYopIWq7tOIrewEFx0YN\nRXV+s8gKR1HSZgswtFvf0SFfGzbLdfmK63y3e4whtlYkM1Zs230nGmPM0fC3\nB4zv/Zc9MegMMmeKQzUcpPkM8D7YGfokGqUKTbmQ0mBrfhPfkb1F8XTnVJQm\n7IDMaiyTMtO2QnQydYP4UR+H9EUUNI4EDhQQcmWavYS6idfm0a+GC+eivDSO\n+innQ0cG/WRJ0O60salfD/RslTSKb6+ykdtrBo1P9wL7UrsLkrDfZXskxSRj\n08Vh+ZaHo9BAMBetLImdp1dBJqGjUcYrLoGzTWpVIg1RNWnjtqi/Igq06paa\n28ceQq3PgVlWonT1yd4nHrTZ0GxbSGmMb96WE7/Bo3uKUzaFKc3CdDi2i6bc\no6wtSikDwMjEz2sta+CqxzdeUPPB/2zPcC3UbBqLO5lJTbzGFv5w80gc4KYW\n6scvqXMAtb+gRq+YkgdifCGTmuQes8HoWZH4e36rfx7zw2U6pYmZWFvSISkm\nl8Dmwj0xMPWJimxaAHXSJ7x6qCxD6yTWA9o4J/4PP90LVfptUplPWdXZjyLn\nlzB7\r\n=Z8HR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.e383944e9.0","@material/theme":"10.0.0-canary.e383944e9.0","@material/animation":"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-indicator_10.0.0-canary.e383944e9.0_1611625478892_0.2475834944061277","host":"s3://npm-registry-packages"}},"10.0.0-canary.623af861e.0":{"name":"@material/tab-indicator","version":"10.0.0-canary.623af861e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"5b4b9c6aed942bc66244c87e95279db26f3cdf8e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-10.0.0-canary.623af861e.0.tgz","fileCount":38,"integrity":"sha512-j0PYxhMzuK7qiwakk8leOLr/G761WmWBgkfW7nWHiVo9H+/f9mXz6EfiCOOr27TNONQHZ0BUuSWH5V3X+ZNOdQ==","signatures":[{"sig":"MEUCIGK+6mxYDYT9uX1ZGpHMPSJhuN8uKzBgbxDwvM0XTmGSAiEArxF1KC6mksYQwSpJX73luZgs3Pj6Ov54H4+IG0nb1+o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171832,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD5A5CRA9TVsSAnZWagAAiOoQAJ/KzhOqsawcXxhzJ0S8\nPFoFpFTqP1hSv994Kf8zchrbT5XxAWNa/oUbKJQpWWVa0TvOEp1s0ZAl5F7A\nnSe08KjAwM5XQvUHAnFpZTi0sD6Xnpxzuh8Ewf1uLNP4igCmWBzpifPqXjuj\nxVLmhgV59+HI0RaZQprVYJbGkU8tZiGzrpx5njSFaCUK+gkl5bxZTcNPChiW\nrSb4z1foQnis5O6l4soYi/eXmSXXX3GW5DpMrfX8omA+zmuKEMA7x681MO8N\nDAJKVicxijtOmy+MnMn/X082/FCgZCY7Rm/z/i39b/y1YoFiJvF26LbtKvxc\nov1Ydi1ErfJu7pzPghLj4w+K7SAgn+3DxefSSn/tXMBCHbqXVMiSl615eNQf\nUXVcFkABxevMwYMhGl/7/d8ZT3u0RqcBhE8JDSi7djZrWBc+aN0fdSHTRoqZ\n9D4+FKkgHPpu8vobDUf/LaSktr0Vn2uM3ZLufUOFiUL7OqooaT7Y5A6rS0lP\nb2vDkN/jNKK9V9zek6LXlCN+Qyt5T0msprGBY+OWhk0Nh3RgFDQWLoIbiaPj\nqNFCHsOgixSOwQo9PnLmjCSQTNi0ZTV5EADFwrdfJi8Tu68iXlj9yCu2U/0y\nVVBbowEZZAu221vbRJKlE48saBwUK9w03b1hImgAe9FCybMkP2ehatHlWUDl\nOIkK\r\n=NaCJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.623af861e.0","@material/theme":"10.0.0-canary.623af861e.0","@material/animation":"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-indicator_10.0.0-canary.623af861e.0_1611632696744_0.11701794709191726","host":"s3://npm-registry-packages"}},"10.0.0-canary.6863fd43a.0":{"name":"@material/tab-indicator","version":"10.0.0-canary.6863fd43a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"b3dbbed803da49589dac71b0951fd778848175db","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-10.0.0-canary.6863fd43a.0.tgz","fileCount":38,"integrity":"sha512-pYqoQl1/xQ/inZYnzu1b42lsYjLCdUQO5Za0F129P4vOy0r36HMdjQa0eUvBLg8agHONXPj/k1WxjHF1V/RDAA==","signatures":[{"sig":"MEYCIQDu+BdgSexz1Acf76hEPPr07Krv6QS86YJL7L71erOBOAIhAMblk+iAsbX5y5IldPpJTalu6HppFdTg+kK/bVJ7yERL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171832,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEIpnCRA9TVsSAnZWagAAo/wP/jatMSUvvhfwqq2s5rao\nggNEcAbDVk8eyvYWFaVgTlBrXiJvbI8x57SY4tbMt/et7gsL6/uBl7Jg1tZW\nIQACjCB/wXoahrOPH1n1xY3yB6aEOB0bi7FISayjB9A6BZnmULfFMjyM9oUv\nHWbJHaCur5uU7wUK8z3fVvtp7bgRg/618RftFk6nxaDexCmPfQt/vXwjeVoj\ndegRIUPo8gozyaiqgF4ZSUPyeTdOEaFTGk85rCvSjgfX6ECyaM40lZgMdBgM\n9fedb72dAAGxP3MDNXoZI59udnH+THAbh8cCclw/LNaYkGDA9wO+l3NU2C0x\nB750c4IgaYEj3llU2bbk3+QTifW1cntiXSD3wqn+FZRZlAT6c4UkxHB9lDLl\nBsJYTEPDLXJty6PDYDaR5KhjY0i6Kv63nvh+wRaALVughGHiJ7IVYdwdrJy+\nXa4yHREXxUXaSGWynRL1jQnjfoSxA7d8t+SQ8GrSBpjpBV+0pWaXq2Gz0L8f\nk5IGR9SSfmUCSGGdPUtFvA5MC+bZ+hipD3kQ3V1PAO6QJitIiXzr8WXkXL3U\n/mAOTjHNC2z3ZbfEulVTuDfuHZZMF35XU0oiVCebY64tmUHHnYGE3QcX9qGZ\njwe7H/R8uPsjFptdxvgcDY2ABaYJ+irW5Yx8sWdrR4VlJqBtypQZ0IPb9pPO\n5m/S\r\n=EFv7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.6863fd43a.0","@material/theme":"10.0.0-canary.6863fd43a.0","@material/animation":"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-indicator_10.0.0-canary.6863fd43a.0_1611696742792_0.04931757109211388","host":"s3://npm-registry-packages"}},"10.0.0-canary.ea55b87ca.0":{"name":"@material/tab-indicator","version":"10.0.0-canary.ea55b87ca.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"8b693643a07b27f3d9954fa5ae8fe86d9787ca4c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-10.0.0-canary.ea55b87ca.0.tgz","fileCount":38,"integrity":"sha512-gaQPDD8IEliLms5ARBVGEpcgqlfJxeJGInW5TMj9aPPQa4nJSO4Oo3tZeYnZM4jMpPD4tmAFtiy9OBXKzyfEcw==","signatures":[{"sig":"MEYCIQD8zA/C1B5pmg8XiuOOVcnVLL6juYY84fpMAqyu2jMmNAIhAPrcqu6eo8InAugulDyka7q+IPo2sfhxnXY3g8Ki56rS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171832,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEKmdCRA9TVsSAnZWagAATOEP/38vE5cGU+atjukTjE01\noXuk9z8PjoDfpnxI5jG5kaR02Plj6Rj+2qRV6gAg1e+4ytvyPh2malgTJsjb\nu2+EGh/FN0f7DL/5wfFWMrzbgPitR4x8bJ5oJOy5wHpptwAkSPeI9FBUUT3m\noCRKh/92+NlwT/tFa6IkBCYJRwyccswc2X7hwp/C2mnJqjooeMm1h7BYKFfs\nG7vvgSYlEc616kAA9lGpRxUFkNmedBBD+zCfjwWekiylS0uP1OhZKcpgiDF9\nekbav2ljnY+6fQdUVwy+zELVXkPDxmelypdY4m6nr/Tk0V6aRdQxz9dxnrxG\nMSlWYSUTAzofgqQoaoDCVUb6TrZpbbfw5fQKJAjbh4G9h7nfmZ9WL/43A45Z\nAkGBl34w4q+dskyZau3zO5WUdYVCL9PqY50L6Cs4xUdDkQgBzm7xJCgT/6Kb\nbPTPu9rhpw97QNTXJVE8YE0dk51JfBKwNZUO/0qT2WPWrd6R7HXQPpf3HeL3\ntLvR2QYQmKN1CqaffggdgEpoJEc0SOcY3OM9M22DFDiO63c7Nu77ltEA8u0f\nqayR8DkvgWNSSXJJvBHBYX+wc5T7Fx+IQJDaqWnr+SAS8BjPpxYq0Q+LJ0GQ\nnHPpvEz9bSCB/fc/844fJX3ZruWkXa7ZSc8eyLOsZ4mNyl5yx6Um7QSMNjby\nqcWE\r\n=KVBK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.ea55b87ca.0","@material/theme":"10.0.0-canary.ea55b87ca.0","@material/animation":"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-indicator_10.0.0-canary.ea55b87ca.0_1611704733362_0.272670334252485","host":"s3://npm-registry-packages"}},"10.0.0-canary.e902ff05f.0":{"name":"@material/tab-indicator","version":"10.0.0-canary.e902ff05f.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"38006b0809d11234849544ec0d9a9f674a9ab3ac","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-10.0.0-canary.e902ff05f.0.tgz","fileCount":38,"integrity":"sha512-eQDaB+fBnMWw28dsdxxlyV2aCp4KY+p7StARJw1vrbKaX91Djbq98TZFbWO8FoHYE11a4o7yOOVfHQi+kqZXwA==","signatures":[{"sig":"MEUCIQDsw/uRlM3i3mrZZnsegH1tve67PnJeEaiTs9dBwxtNBAIgeGiyxbloQQ9iFiZlX6qnTUZLJ0nCOlL7EvufVOr6Y8E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171832,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEK3eCRA9TVsSAnZWagAAWn4QAIH0Rmrfz8Png1z1BoyT\n46yFMtyLBYv1GRc7XxHWaYMhrG2BCXqrahONeR8+T0Nq2KkSNy17Ihu56w62\n1ur7YEPIS2mE+LdT58iB8Kco+JFBwLslQElh8KIY321b4xKBe/0oZd53Up2K\n9SD/qTb5uKG2aIQ8S89+OGOYRQNrlbqJmuIqJ3TVlFia3tCWBDa40CDCXX3d\nda2PfTIHzmf24fQcrvWisqmuFmYUns+JxMf1uhN+sgtM48I3owbwYGMIf1h6\nKw1hTpjUEbfHT/JcDCvuRTa1l/UKuEgRWAN6DSj6Y9VVtr3vtGZCgH/O66ON\nENjtvidw8mcXN8A3Hc68BOEjwbir4cOcHpB20t7FabmoJ/YxRsqtNAOoBes+\nJ9XsTcdArBbYM2ipn20sZefojlzMraAt0OPAL6ISK9RzxNxlbzuZrOiN92Nn\nkvCcdyKpsCjLFy+Fp0WvsXSHUCLKbtcDg2XH0B6wEfOpQsJ4bCGTrwEcsTU3\nh8tfg5JmXX4xkrzZTN6hkmk2n6vR6BhtRrKHF0K/RDhttyIsFXv+G3e7WSnR\nyYaop3G4dmkGszbxrnG2Ou4CHRRW3VKg3R1JPENMLXT6DrQft2sUlNvTdVhq\n638gGU+Aoo4hOEs5mF6q96oCHrUJKpoX36avdR40RBdNiYRlpX3PkE/3OBgs\nWo5o\r\n=QFEd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.e902ff05f.0","@material/theme":"10.0.0-canary.e902ff05f.0","@material/animation":"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-indicator_10.0.0-canary.e902ff05f.0_1611705822064_0.10030439323050744","host":"s3://npm-registry-packages"}},"10.0.0-canary.2c9fc538a.0":{"name":"@material/tab-indicator","version":"10.0.0-canary.2c9fc538a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ab07101018ad594d94c839676d495b501875353c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-10.0.0-canary.2c9fc538a.0.tgz","fileCount":38,"integrity":"sha512-EZDORK522Z2MsME9yCuygjLgtVsyH7pxXBLQYWX7MWwpsg4MXvh0SJqDPMboFbyri7eMPyJSz50I3M1LgQvyHg==","signatures":[{"sig":"MEYCIQDvUT9vlX30d1nWVakx1jI1SNdAbMJPJFSZjfYt5ahD1gIhAMJeMp/HfWjuiI/F3WQT9St9oQua+kt85d/oBpbYFta6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171832,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgELNLCRA9TVsSAnZWagAASSoP/i3OQ7kMdhZnxY3wlA+n\nsvsbrMazq+pTXL5k/6H6dh3C6oFVtWnySUP82U6DJi/3CVjzJq4LlIIfYg/N\nLLpNzF6hOiK35I5LatozN47tCqc+AwiNQPSkyeXtUaImaf0sxKkfWmWH3fai\nrfsVc5/WKSvIstYs5sC0Jk6iZNqbDUN8yr/wusfeHpH8vWymH6/9OBTrXaao\nUEpDM2WC2wPJmMb+my9DZb0Zr9/kfk63bDkUlWrqmgqN4uk+MMTMeQIzjsqm\ndIB+BfnnS0v2MSSpjAXm7dcwXb8gMM1Z/LS85MtdBCdM4yIv6QHl+U7W7ATh\nfeqpJ2lWNYao0LSkHtZ7FWYvUFksGpnIqiT4azCosABgQ3/cDcCLkF69eIEe\nLPi5PqYXZrZLBwLjHyCPM19THknaKHWYRhI639umCyAkwOF8k+37FfrOB1aO\nlsOwDtZoxIzTzUplGU7XbMJloQUcCRLrashbwQIiWgIwJW2K56b4Cqx1T4lk\na+EF5fTqzaElvEhBPSimUqvI1tDaQbhoVHtezCxG0wCCx9lFOdVC6Q+lUFpG\nkZOd0aSvGMfAi/5DW/pS1THuxkiRX/dKLBF7nPwt2sgpKLG7jamXH66viHQX\nZqmWuL7WwCBN9BEwhevYvoyyptHJGtQeHB6J+PSdrn1Vy24zEGGnHslvStjj\nrtNm\r\n=+0fl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.2c9fc538a.0","@material/theme":"10.0.0-canary.2c9fc538a.0","@material/animation":"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-indicator_10.0.0-canary.2c9fc538a.0_1611707211294_0.13745420718056045","host":"s3://npm-registry-packages"}},"10.0.0-canary.6bf56aaa4.0":{"name":"@material/tab-indicator","version":"10.0.0-canary.6bf56aaa4.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"8f79def2593f0d81ddeea9fcaeef8e4da59b590e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-10.0.0-canary.6bf56aaa4.0.tgz","fileCount":38,"integrity":"sha512-hQeVl73uv18iZywQn6Sie+gcu3M0pQ3U2H2i4v3a1G0Laaw/CFFfcCPpcXFReNT3V+CDWBS3ezdwLhYx5ZQ8NQ==","signatures":[{"sig":"MEYCIQD0HgIVquo3cu2/yHB+Ve7s10jdtZYnAJK6A/rNDdT+JAIhAPS+m3E8KleZkiKkQig6h+mLtqUwFY+pbYn88WaeoJBy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171832,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEL+tCRA9TVsSAnZWagAAVHkP/1HOaDxo9ioHM3cGA7x1\nmrix7Fcw1LqBY5gQoAhY1QbDmrlG819WAzY8ZvzGb2cjFnm76+hNaTJWr/nt\n55smIBHAfpPwM3DToAX7agR8VrNoOLN4c6tMc4o7TSBeCODPwn4Sl1qHT7lf\nkzqgK9uaN6vewe11lgUZ5HYRDYYSfS4cVVherTnPUmFjyaudfU+U/MLMF/Ct\n0TaXnZ0mMdkY/w2/+6QIPTitaYdLr0vGouSUi0EtdoVDj5AQqpmoHmSokhrS\nOVJoA/S1SxSBHAWTCSLQ8buDNcA+Cqlzp02+i2OW8cxKLITZyM9x7lQB4l13\nlvYzV+IYI8OE9BriWWCJWPpU9INAJN3h/cQwA8fCmCb5PZLL9GT5PGcuqTEe\n8G00YyjUoxAMerlNtEQTsUg5eahw9flTBDjnDoMs3db4hTErvEb2Jq0OjNYP\n9wThzYgcw1+wVq05VSfgfA8DWY6mwOK2C6ZpXzDd1JhJDMAgQw1rOe2FojDo\nLyoA98xQOIKwI1jcyeLGhVrY17rKcR+2kvTmPd8o85kcAarHY1p+h6ge+Hvc\nkJzQ8GX93PU6DZuTzRvl+xxq1BmTc5ioulVQKtAFNpsybi52xgBo/+oHM4p7\ncMyz9s7kAqvu6DyVH3nbPpQV82LEdPupDcVu3pG8mYUhGijQhbacoES9mkpD\n8CW3\r\n=L6vA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.6bf56aaa4.0","@material/theme":"10.0.0-canary.6bf56aaa4.0","@material/animation":"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-indicator_10.0.0-canary.6bf56aaa4.0_1611710380875_0.7620027161381144","host":"s3://npm-registry-packages"}},"10.0.0-canary.994873795.0":{"name":"@material/tab-indicator","version":"10.0.0-canary.994873795.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"9856f6f4b8d60b432847920ef11dad5bca40d0e2","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-10.0.0-canary.994873795.0.tgz","fileCount":38,"integrity":"sha512-ZH+6qfe92hDaBS6z9BlNKX5MV66TYX7Z09drTxpnat5VYw3dr+M6iLTRZnZntJ9Zp8YO3NejX4p8PC65+7jZtg==","signatures":[{"sig":"MEYCIQCmp6HTtyUILlQxjoieVxZ/sHIPtJY5FbeDUIQfdDmS5AIhALbttHMb2nn5qhb3mYHdemM4ab2fdqRbcKB/BaSdMSvY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171832,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEX3ACRA9TVsSAnZWagAAUEQP/2mSCya54a55W+x754SH\nEBN/6xe4gOJ8dbD9nTuoEQCcOx/Du+rHxutSJcU7EWFjNF0tMV7N1wXHf0yN\njISM9V8v1TKbQC1l6ZsC8EPPX949APkjqV51PPRPBjRoA0yO6E/no7XKj4hv\n5GqyFfGQsm6wdWiC/Rv/HYtCYfqXoD+OUkShdYuLmcPw7wdbNE4+2N2uEQdN\nPrD9JxmzOYnn4xxd5Yk2x8sAHhyt5Z5CpaJSiBHyKd1+IvyXczAUlmUOlYxh\n+xE4xza7uubhvBY4H+BgE5kvgK5ZkdwNQrBJ6U33OcKH+ABQh5Gh1ZQa9lcQ\nxNQa1uC5rAtFNpB08KxVfL1S8p6r7O0kyPG2IzeY9UB0MV0NohmlPxY07ksE\nmaEJCKU2+x3rqSfvW4frol7rZPFdPtjT1Q4y9yQ/voyrHXLROiZco5HwfErA\n31OGEL/oCuH+DaWvekxhRVxdQyocPWmjMOdlFvyEvCh9CpnhHKTOLe1YrXqq\nibTjAyHrmimh4HJBGSath3/hS4nuVuwsTW3rsW8cQrvfYphqzZY/5tItj5TC\nB/gDwPIfNIdBw0ODZYlsMac+iejW2qxLFjdJK7GbHJSVt1e7ncj7JAwt/uoi\nTZtIX7pu7kKDLQgmLMJccePd4GrcmWQVLLWVevIjwTXVArV4AYZPxXUKmmA1\nOxil\r\n=bK/e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.994873795.0","@material/theme":"10.0.0-canary.994873795.0","@material/animation":"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-indicator_10.0.0-canary.994873795.0_1611759039884_0.5832879074077295","host":"s3://npm-registry-packages"}},"10.0.0-canary.96878e1d0.0":{"name":"@material/tab-indicator","version":"10.0.0-canary.96878e1d0.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"9a12be45c9f74b28ea262e7c9c383ce505602ede","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-10.0.0-canary.96878e1d0.0.tgz","fileCount":38,"integrity":"sha512-jziMkKYyCwRKoS+9RyCWtsykXW10Gpc9w+RpONsF2NwLM2y5XxLp6ZPt/bo3IBmrIX2eHVFOYxplxFDbhOmcxA==","signatures":[{"sig":"MEYCIQCiPxpZKuRJPzFcGtn8NmA5fv4HpAdtjigM3+Y1YUXi/AIhAIVERwblXgf1Crm7TB6+EMej0gahlj1qkmo/I/zg5dyu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171832,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEaqMCRA9TVsSAnZWagAA0hUQAKByo9oaT3I/yqWme5o7\n0At4jzfUKW3dZlVFf/8HPFmd9aG9for9ISrIoF3AU2JvjSHKBTk/mURliUcw\nkPpPmGYi187xqtWUGT/cwOCSP9d/fTMkOqmE268ssqgcs64JfDky2q0r6GU3\njVYX4RhOr6t2MbvEbEiC3bRllgFz6luS2CDFFguLlYZ2SONw38RVKXbgWR0U\nLwTYElmDtNlJiX9jJ/HEtdSY/1nJAAeKPYcj8wZdzifMdg4bIgG5TEwl4CN5\nqO6pY5AsrXh+jUF+bKZq2nttsgEMZTXUhE1gFb6zUV5pQuZB1wKXswsBPwhs\n9j/3M7ibZyTuVifqlaoJSPUMwbqwQ6J6j9S0JjLOHiK7LFCoATItrGcBLtmf\nrhM/5Nt13aQWqWyhEPKRyn1bZPthmTIn8sI2MjLsI+sSsVLdONQol2g7sLYx\nALC+yV0lGSkcKc3utBmlm9QHh7oZk9JHKn3uxYAQ1og7pmmfFvRUuYhD7Qj1\n2I2BFNvgPUDPBPHdSqGJB2kr2/LWSFi06F4mmaHhNBVC4BkzB04nBI0oDQDM\nn/09kssF9hUdzMUYxzwovozQ+tmeoH5YITNhLM8cSCam93fiyTvT9HjLE4w0\noTXydzdtNLXo8Xz6cIJ4yTm1g8EtTP3dV5cHUQVNz5MZGx3i8Qbmi5yJO+Ug\n986T\r\n=CKfv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.96878e1d0.0","@material/theme":"10.0.0-canary.96878e1d0.0","@material/animation":"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-indicator_10.0.0-canary.96878e1d0.0_1611770507874_0.6881658700240321","host":"s3://npm-registry-packages"}},"10.0.0-canary.3c117cdcc.0":{"name":"@material/tab-indicator","version":"10.0.0-canary.3c117cdcc.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"d56c632ce83379b70e277a741a38cf7a51f12e8e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-10.0.0-canary.3c117cdcc.0.tgz","fileCount":38,"integrity":"sha512-0wJX1ckuIXpVD/zEfq5xpbiWH8YLRjIbc3enSeyMuew5XQi19h5F0iS0rcXEGF2DZkxWqYh3BqOyBp2T5/12IQ==","signatures":[{"sig":"MEUCIE1VX++bgUM0Qe9v92sxC8CYPO3kVqdBgX7HrzxutTCzAiEAwHaZlLwIpY8YkS/Px+GBDfQ/oA2owYHdSxqxIGIHBVk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171832,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEbGeCRA9TVsSAnZWagAAhEYP/jadtIn5A83kla7/emRb\naYwiX6sXT2KBh7tNnNT5r13FcSFRzHTIpqIjjx+qOgZlOIyVeZJeeVMrf5Ro\naxs+il+TLbm+soH0Vsk7K0FiJcvRW3pQlqCyePKaImKFbq1+qV8Mw7s5kKOP\nu97AiyI5BQ4EkhfkzHCKk2+USCZe4vlrXy49SiPQJBVDAHa8bepbcGLvPyaO\nSc1wcUObCXHRdzFNsnobcEXzF2rhPtNAl7Tgt8cPDLH2WXJtAJY1GWp52y6f\nFfk7+AIq+HkvTGKBG8KzyjoUuDeR70QJ9fi3gvCi1zuJIutskFs8/93Fgiv/\nuHaJabsUjrFcz42Uawcqfn+Q/KXw2x3YqCKblp7W2gOUdw4Kr+eOeyl1fjUJ\nzeTH2exTDnlTY2pA3Bh7Rh4Pzap8vGw5JcFvInBQ6xfCtHrT726YKmirUtsu\ng/5iTi7SLU3I6y8eF5lQoaOVtxKK6vIxhwsDbAcNCuCIaH/N9AOCTOKHnICX\nqVAq2f2qov0SPiC9qOZB8k9h/RzLpVguX++e6fEyf/NpcJVdrG7TNuONP9W5\nHcAkDUXorAh/yLRc3oZj/3m/asVSB7/WV0jRkaT6hxVlo2hnae7Q+6iKlerZ\nu0atcs+j+D5pt5jxXJb30J9rRpKAhKT7ptPD8OGOjswnKTAx8pdTzAWZDopF\na9AH\r\n=VmVm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.3c117cdcc.0","@material/theme":"10.0.0-canary.3c117cdcc.0","@material/animation":"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-indicator_10.0.0-canary.3c117cdcc.0_1611772317598_0.9164957429580991","host":"s3://npm-registry-packages"}},"10.0.0-canary.b411e7033.0":{"name":"@material/tab-indicator","version":"10.0.0-canary.b411e7033.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"03dec33ea99a80498d5b51ded107fde6e04fcd80","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-10.0.0-canary.b411e7033.0.tgz","fileCount":38,"integrity":"sha512-L7HbpQPYMi4TT9XxkkcOdPkrnqLjB/SMNExfOIWrA38e/W4VvnGmSsd5m91b72aZ74FpwS9vE68x53geDF+X8g==","signatures":[{"sig":"MEUCIQDdrzIzSHpsIH0uCJZZ+hSGE6zHhnEcysm4qwf+TK4frgIgadK5mQhUEBYOlIVxIVsODuk32TVKNliR1cHjRxAxfOQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171832,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEeMhCRA9TVsSAnZWagAAk2MP/RWJ6NMRUzW2xqKcl1xO\n9GlooKz3zJCbnV0YN3k2EXIBFJAEVDEtum7PPsvjH4V1XKcm8hBn1DlDWuc9\ngnufU60khYvz1J7t9B3M7OVWFZ5Wq8GJ5ynbUw8o93+e041tjb6Ifi39pmGJ\nCj84oHcJYyokkQHrhsnMcACMaj/1LKkHugT/oB7jG8kywLcaIpXFfygDh5iX\nwSFzPoMZO2i7p2cTTweJhpJm0R5icDqXruxSOniwTm1YQAS3r5npxutuOdp3\n/hr1yYRDWkqURsNW84KDka43EUMToLUlouz17mpjj5ksGArGHKqeSJZtb5Fp\noOCuv7lwnFAvyCcV8i3vtWV+ydT0KBPOqyYv1iS5VJUm2gaPgRG/h1PfXbwU\nd5KUKisUArHQvT4K5Yl3fgbgVLNxSs7d0zi0TfjmdAqAA31tzPY7bDUMKD6x\ncwZ1/ti/YaFzPLoP5V9OUkkstWKxYJeIHVkyEoFg0VRxl6EGnRqpYyq22vJj\ndUB4rQFaOaRJhXeo5mQ2NtFIvMRY3lWpWtuWpr90Pp9z0k0Niv6iQJCe8SGv\nLsrQ2/4WGktp3rX95z3iIqXIH2iDTCj9NAVVx5R2hVKahHX76//b/oTCWC9P\nnwt5vwlezwwGO6+dri9PiB+NS/tkQ5Naop5VqlrWueHbk4yRY8NI664a6hg9\npqb8\r\n=Y+b2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.b411e7033.0","@material/theme":"10.0.0-canary.b411e7033.0","@material/animation":"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-indicator_10.0.0-canary.b411e7033.0_1611784992819_0.630059658466164","host":"s3://npm-registry-packages"}},"10.0.0-canary.a9ac16b4a.0":{"name":"@material/tab-indicator","version":"10.0.0-canary.a9ac16b4a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"208d1cfa5e3a601ae3f8b93e45760865070b668b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-10.0.0-canary.a9ac16b4a.0.tgz","fileCount":38,"integrity":"sha512-7ytG+B3TQhaFB8DatCK/DhG4zJogGm/1iqZW0As+YVWZB2FOGT2MCcEhoPkm4lPqOwcBGP4bugqOqAmU4l0UcA==","signatures":[{"sig":"MEQCIHuVEKFV1lW8w/w/Wh4M2s7F5RvAKsc/VjtNNzg533k2AiAxNoY2Xpkk7H9sjZRd0swJwyfJ6VH/VkI+QNAV1uEUkw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171832,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEfEsCRA9TVsSAnZWagAAWy0QAJXIfR784W+cR79Wj+AF\nICMEgfL1wMF0WGNlOj63f/snrEiIx6csxUvnno3bU+qOs6ZyRnf27Zsm/rDW\n2M22e5Y4nXctQg/w6zmb+KGjXmQC9Y4eY5XLYFGuAxT2w4ucWc3uE9XCjx/n\nStIoaxUF5g65nQWh1UKQG7ZWTtIGZijeI7NvjBL8BPJXIpNLq44H5U59XvdS\n1SiS0gAgOfVnPsKifsScEbNdSV/p+ihLRqdCgsh6dahUzY/VHSHAAmWWVrN2\nfS5Iz1ACyCZsw06JXlDbhSPe2jS/n7bAkKIAv+w3bz1rcn9nLp69aAUdExbh\nLg5PlRPVFq7xR+Jg0ZmJs9/m33cepGJlsOmvULjnNbIZiVXjh4rHSjwZUTyV\nS7atfAlQP5TAUqF/nVWAVNXO4bwLzyjfrKeuGP9SlZM6u06TyBpfEfeB1g4E\n4SZf7+AHYOjKj3279QW/j/7miHbOweNNTTpYnGvL4ZsGDQ44Wh0s11GBEdGt\nX4wFz021kGIRRbMdLApdZNkw8/nge//ks5Zk6g0+8GsEc5UprBB2yOAFfMdu\nhfZSjC6Su39Xc4YZiRawwWlrTdqvnmJr7qrfgXlD7jqaInezhep9cBccCa4B\nCaax8cg1LmglT/TrbLKRf6k3aQgoMjE9v5CFRlqPpfS2imluybRzp0iaXGIx\nZN6b\r\n=70tl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.a9ac16b4a.0","@material/theme":"10.0.0-canary.a9ac16b4a.0","@material/animation":"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-indicator_10.0.0-canary.a9ac16b4a.0_1611788587722_0.06191600436277089","host":"s3://npm-registry-packages"}},"10.0.0-canary.fec7b42ca.0":{"name":"@material/tab-indicator","version":"10.0.0-canary.fec7b42ca.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"51fe7b22041368341fc9beb76d83cbdd241ebd16","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-10.0.0-canary.fec7b42ca.0.tgz","fileCount":38,"integrity":"sha512-As+eFMOHbR+GKNf2w8ROdYThHZIpcgWwAdxjOQARKGYZYxZmofr/dBCt71Pxvrcw/A3kLY79ZQofq/EHRn6j5A==","signatures":[{"sig":"MEUCIF2+SoYcglkw0fW9PjfySIEg/R//En6VYfQQOTB2DjXmAiEAmLjRjzJxv4PS7ucdsBMl58z2wfRmuxMVzmmfJ1+IX+4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171832,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEw0JCRA9TVsSAnZWagAAbEQP/RavYVkeSPxvhy9+y4zc\nFBwdC3LSCYbbJm/bW8tdWl9bRuqP2GMKbHEtWTFVb55F8k8a1WzOHGbVtbR9\npSktDiMUqtVjN931SiMOWmTet7k+Pc3ctnM3jRR8qCHrQrtUQRtFK1aGCfgc\nsYDO7FQnFC8v6NtWN49Kt/zX4FED/dM1GmiBIjR+Paq7aC1mpeqJ592TyiXm\nOEYZDfCvBSaWlKA/pEbyFxn3h2zsCjNjgRjsWZpeSqNVG5ieOLnBRyEXZLRB\nFvXd+JaokLJ30nzlAOSgbzkP2lDaEoV+oKyRt1YKGb0SgBT3BSMwOT/QtJgE\n21kzauEKjuA/t8DJRuLrdTkzC9RCPBim3iEN1Zf05mST1csyT0uADEckAqS+\nPGDPuBmpqi1343AVrf1M65AXEAMVqN0E1zAIg+DhN4/f+7Dwu3B4YAST8LKd\nxyihP+AmunpqzLsKtmpq/ODEGJscUnCOTIfgMlqczGwz4H/LvyS8vq83Pcp3\nQwDjSMGDZBnBSy3l6tXnXGLdczV3Hqe93WZg+2K3Po1vra5GzNwo4oLUt3pR\nEFK2vAe2xZ3mLm3B1o3Scfrcp9GsmAep4TpCL1jZ1H5oSl7UtNb5w4XhWgmv\nmQErv+kzlFTZ2LSg80/60hurVmZmgwIhQuUhQxTqFuCxKLegMVBqNpzbsPxY\nCrxL\r\n=GOvj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.fec7b42ca.0","@material/theme":"10.0.0-canary.fec7b42ca.0","@material/animation":"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-indicator_10.0.0-canary.fec7b42ca.0_1611861256870_0.2621218530091767","host":"s3://npm-registry-packages"}},"10.0.0-canary.8e66dbfee.0":{"name":"@material/tab-indicator","version":"10.0.0-canary.8e66dbfee.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"565287a601087cce94d179ec86d228218f552020","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-10.0.0-canary.8e66dbfee.0.tgz","fileCount":38,"integrity":"sha512-qeWqZiVF2AyA/xkFZhvl192q2lZrk4+Wa3votfyCiIuZOVC2VoLblFb0+SA9Lh3yfOr0yV+Bvc0ji/yFAlDRJw==","signatures":[{"sig":"MEUCIQDBK5MxhQb2wFMq+zBKo1IMw4AMTdrQf2aNcWiXEtqUNQIgAiuEaVp1D2BA5ArMVV/7Ya2wd0iiiipscE6Ex9j8jIU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171832,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGIymCRA9TVsSAnZWagAAdN8P/2YJ7ivGNxNbK5I/ilDP\nf7FataROKTXu+MNFt4Dutc8ZA+5qnqxafpgDCeQcXkYlxzTOsvWY7VyyFV+P\nxsRUTyudCPkyCnH4r/pr9cZTEeCEIRwZxr9H8oif/SA5aniNotWOdnRTJXSf\nhz/dyVQL65WrLmzS2oFLeU+3GezWiIeNW1JXvP4ZQWeqVxNsb0Jsz5vKKC0N\nt7MNPNlBWcETN5KaM8oVrUNBPqut5wH3F3GNKXQhjK1lkq6S4t8Z1MCqXXve\nDyF7RLchLYL7eiAB0yzad4q76/sQytdMTAXSKgZCZOjThLs6SkBJHeRNIwZo\niWFnlLzXCfN9JK13frbF0vLqfagW2nVjoGIIpEGvfbTnWbyXd/o5/XncZr6/\nzv0KYFHMcD1pSmcfjov/ORvB3LHcNsorODLvy+n1Ri3pGtvDjfHTku0GFJdS\nvYJOFW8zEm9o+haBKCjg1diSEil8Yr7zP6LzfN5UWxQG3C/XcH5Nw6z5ycjW\n05Xh6VpijEF8uF6HWbfBBSbeXMYi8JPrdOWJ+jJZvULqyQDzkpZ4rwr/51mA\n0n/xN4R73SHOVgZ9ulYppbKNX2QZIdJfHplS4+OZ81+nGeavBXgTNf1yyE0F\nyQChQk9UPlzEciWwWk9ige4TneKkV8fnPQEfZfylWH0Otbc20ggoYA1JzyM2\nJzhT\r\n=ImMP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.8e66dbfee.0","@material/theme":"10.0.0-canary.8e66dbfee.0","@material/animation":"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-indicator_10.0.0-canary.8e66dbfee.0_1612221605799_0.17474388728176815","host":"s3://npm-registry-packages"}},"10.0.0-canary.637d15da6.0":{"name":"@material/tab-indicator","version":"10.0.0-canary.637d15da6.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0373d375023a17943c0ddf6ae925e7f758f92d3a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-10.0.0-canary.637d15da6.0.tgz","fileCount":38,"integrity":"sha512-1OuWZvdut2qKfVFNU8NqMyrVuV9YcMTauIE5qlYdNAaNN5zaY2YKfPaHhqHAWlkYvNtB+74e5+hXcx+LyMNEew==","signatures":[{"sig":"MEUCIQC9hdixgwiu1dgcM2WAndcdHYHby0h1lazyoOwMBy41OgIgV96aGSPZhmpkejh4q9bby56Kg8BY/ai47hZiBnu9+po=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171832,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGZ6VCRA9TVsSAnZWagAAZcsQAJ45QWhqedvOeS7UpcBp\nsuHqG+xHHBquHDHe0AjqaqXyCaKpPtpAcY3aMAfn2zrwOB4PazRQhgkj6Vlp\nVcwhk9+O40iW174hCYCt8tcew5cpf6TjyRZCL4MWT820Vsm2AEfFGnKJ20Il\nbiahdMdaU2/h+kbgXdJWcmkT3d8e6S7plKH+CvlARX9AFS+UPALCTsJiB8VH\n37yLmVMkURjMc9Gc+BFz9B9pj3Sm2RnfxhnM+M1kjvgsOwqepVw4b3vJHby0\nsvy5zzaDXLkgd//eZfiXMjTCGFDZQN+J+KrSY/L9ZbDhWotHORjEho+i9+GA\nqvPMrz9F6CFRVH0BE6qdUCkX+RZbD5ckagWLWdXSDH2lITOQ84963jGCBuBK\np1ougCKV9MjBC1E2yhANc7kGTpmrHePznMmp25CroBg9TdP1Se0Vr8+g45/C\nG00gIGiYNCzg8C96pPTtv2wktudBV07z+2YBqefHxOMZPcCKT5CAMG2oi80V\nZ/rv3dOZMMgfZ4tT6G7YA0AkaQJR8Te8lEKFBtrRvpsLezgcjeNyYEMTojVU\n1rjFpg/TLF4eGK73sca0/P6PiZKr6MJLHm7a2EXD3MDmPgQ22wXLj3dmvdMC\nB+0BL5NnF0cIK7ZfSPIsS4YUBwdrlykJ3EtIQXMXHguk7rNiRcNZvu7Im7DV\n1j9y\r\n=B1L1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.637d15da6.0","@material/theme":"10.0.0-canary.637d15da6.0","@material/animation":"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-indicator_10.0.0-canary.637d15da6.0_1612291733459_0.6287840495633832","host":"s3://npm-registry-packages"}},"10.0.0-canary.fb793939e.0":{"name":"@material/tab-indicator","version":"10.0.0-canary.fb793939e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"d0252d58d5a26605e5c46c985261d34f0db0d317","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-10.0.0-canary.fb793939e.0.tgz","fileCount":38,"integrity":"sha512-jSDh1LcwpTDqzO0Bu4UaIn7m3dyQWvr7w0+YZtUb3cKKC6u7yyU4/MkYNMQvbvjHlvsMBdNccLoFQ/nRiRG7AQ==","signatures":[{"sig":"MEYCIQDeaV7Qux7KuqK/qDwLSuXbV5U4LOTYuLLoorETgwaIkwIhAO2oGKhBbE49OQYAkE4wVA4V72YGGCM3fEOZYA0jKkWl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171832,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGeNpCRA9TVsSAnZWagAAQfoQAJPqTGHToyZ7R+ooprch\nrN0rhXirHiTulIM1XUsQdKiHa4yNUgWVDJQThwaI4muG7q6e0J42DQIs15ha\nhRuIoVy7jUfzLQ8hbRabcldBRS+W8rflfMY2sHuDEjuGAJqzwEgxa5Xj7NxT\nys5YeqjSWPHBVM8UQTAkedUq7QQMrArsstS9L8TIuik0ZVYi888TeSCOaVR8\nO6Nq8UQc1Cs2e1f/c9Nw1U/ElKCIg5L2F1peUt7Nc2WYPzQAmw2DBDZrXn1a\nLdgxvbJjp12WCWj/+Maxe2Mv2URy5K1YOwQj9Dfi7WNeWqluo4sOfuLezoWF\nRgZ9pdmqUHY+E2S7bqHqwQMjq6eKNuWtEHuQxJh7+ET0Lrr8IEeeYw3dgL89\nnhwgwpGGHI9h0dQjAcxLBnhkCsRGXGK7ERpL2yWbRpFLzBnkVQVQxxukzTuZ\nMOttuTAgUYErqHes4+LTQ3b7U6vQkRvd5wZnvCA/kbYPY/23ULrlAFqypUN7\nZg+/tyAlU1CFu71tmFCEaj7wmGb1O5VT/8eQBi2Uiq1V8WvRzieswzrnsfZT\nPcShc2qv4Rq0NE5+rJrWHRqIJDS+3VVV5lekQMaE8gKjoK1vPMskPMCEejEB\n8KbkBw1wJNcEfr6/2uU+iLGjj+3pCKOpuFQCNrZUz4ocRJEXp5RCjmt+gGtp\nhfce\r\n=gHLc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.fb793939e.0","@material/theme":"10.0.0-canary.fb793939e.0","@material/animation":"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-indicator_10.0.0-canary.fb793939e.0_1612309353239_0.6929742793640727","host":"s3://npm-registry-packages"}},"10.0.0-canary.15a4d40dd.0":{"name":"@material/tab-indicator","version":"10.0.0-canary.15a4d40dd.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"2ee23a734d32de1c7df152de300837043fa3b768","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-10.0.0-canary.15a4d40dd.0.tgz","fileCount":38,"integrity":"sha512-a9STelMLeqeugZMZBsQNTyHV2MjE8EJzxNxmO0b97THDWlbmvxxmnAGrNp1hnF/VI/BWQG7EXCHHJB+hV0T08g==","signatures":[{"sig":"MEYCIQCZGaKPTq/q+Gfl3PyZGiJQV6KqSg88xGLQrubWuu5bWwIhALiLPjadtUEBEFuH7UKUZUcTQQIlmVxcrVcMPjJr1UMQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171832,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGgflCRA9TVsSAnZWagAArhAP+wRV+pAsDG8W41BmiHLA\nSLB1hwIMpd9PqpjhyYmzbvPc88ZKpqwG1aVaLJsIlOhFOdnDXE94rZklV7bD\nNCIbJ/T8TBho5+8eZ5R4tVDEPGUzH1jJ0oPffrQmvLPcU+3SBp1j0pqo1Zze\nXsP0aiVmhyUmKk5OVAiwTEI7OHgJAB/0NQPI05YcemBTTAbjDUXoIGeob1qg\nXNw2h9C9P0SsJvmoY7w27wR0ig9cVOXJIP8VnZvtngaHBv7t0r8zT5KlFtZp\ni0km/ydUUHiWQ2Yu93R6XYg6f+qfKVJz4kME99q3RdHOq1uPG3HmH2Daxu1R\nV2Om3bcsLoD5t5PBROoIbDvTdadxPmkODr0+Ku1xQYC88q878WwqAId3RXFo\nrcwyhYUhf1kQjfuwMeRPe6P3Vx3Eii92OMhsRfb92bkUibHhtrkwzmKTxBe6\ntg375YqZG7iS0n0c+dESOb8ickhDrS89qAg2kkz5wpUVM5WwZc6Z6+1kQUj/\n0Cl3YcvYPQAM2Tetjv2pujwzl0G6ceebhzbrk8TjwWGvamJHikUmt2B9lYRk\nkXT0kTQPKA+R8j2PqsMkwTMHZaNdPmidFnlc57gVTsOxpy2U2ScbLSrcjfVU\nTxRvQtYoomLvdgs33eR25axrvfJZUZ3whnu1N4KOzQHebPZqu4bMY69qMYiq\neHKl\r\n=L9fl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.15a4d40dd.0","@material/theme":"10.0.0-canary.15a4d40dd.0","@material/animation":"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-indicator_10.0.0-canary.15a4d40dd.0_1612318692781_0.7767984346300225","host":"s3://npm-registry-packages"}},"10.0.0-canary.7a003acf0.0":{"name":"@material/tab-indicator","version":"10.0.0-canary.7a003acf0.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"d9ce642e465c17463b1839839bb7462744b30086","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-10.0.0-canary.7a003acf0.0.tgz","fileCount":38,"integrity":"sha512-gziGKfzzYXdpuCprCbYD+B+NII+m9dkVeGHFdxOfIpNZw99ux+r95nTjd2XTV3P0d0EG+mbre8kZ480Ii90Z6A==","signatures":[{"sig":"MEYCIQCg8mmPq5X5BHxS9N2Nt5CUHIQeA7BD00wGViXwhZvZ2QIhAJH1UHnsl7peRTUWRTro0IPamCH57kgXfM61oJ8//Rlv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171832,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgG10CCRA9TVsSAnZWagAAyC0P/jh3HXSW3FmrjasDQUPP\n89mO1cvxiOnssBA+eEqEmXnmgYquFwIwesctUqpOWFFHnc/kORkYhtIyNisb\n2vcB/5MXucwBY0xLEUnD7W+6c12nl0nb79s06KrFLlLmXhoiT751z6S0wDJJ\n+oU6VqmyFRCanfl5ePTcHq8HNSgJAuRSW9hoqm562++LB9LJbhQRrB/DIt72\nLN8EUdJ/lZXmneKVZ6phgmuDSbIcu25kh+li70aZBfEzxbUI4dIbNPLmZChs\nIO+Xrtt7e0Yor5m170Qvgs7EXs0FsakHx5aOHk2KLh6XtGCMbtomRiS+ycsG\nW+CQv31KWltAKLHKkAUuWFP5FyhJLsp6VKQZYxZ4WAZkjJK1eIQFmprzfDgc\n23mSgKs+dnOvhyzMVs5cFxQ18ZcQt3D+1MRr+yC0VoqoqkWjcW/n3xBSfaAN\nAMMyzbNTeuRvJoMksOzGf36c5OiWeyUiSGCM/ztcnTa8dgpeik3TPJLSkgu6\n3Ay596di4epADA5z2wqGiaskReTSqQDBeemQkT+6WhXJkyH3uLzD5fd/7d1z\nLbjx0SfusudUzbu/go6F+LS6DGgy5YRWkfoaIkqEMTyG87hxUmFUu2HcKwMc\nH8NnFQ2Zid2Wd0BrAF62NCyUPHRaYAiEwIO66laclquEpaPD8qSMrIJafxD7\nZNcn\r\n=6dnP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.7a003acf0.0","@material/theme":"10.0.0-canary.7a003acf0.0","@material/animation":"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-indicator_10.0.0-canary.7a003acf0.0_1612406017907_0.8505546945509612","host":"s3://npm-registry-packages"}},"10.0.0-canary.05f249666.0":{"name":"@material/tab-indicator","version":"10.0.0-canary.05f249666.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"83b730f7f393d41f3e854f6b6c1201ed2ebe5cc1","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-10.0.0-canary.05f249666.0.tgz","fileCount":38,"integrity":"sha512-8W/yEwnKsHojOqcVW8kFPJSpd6seFMK8XkPaSyQKRcjZogtFNeb4NKdmM5L0YG2tMotlA+5BunVPHXDNIw/1nw==","signatures":[{"sig":"MEUCIQDtJXPIXUqmqst8cUHrYCGAPzx57QD+wRSVl+ahzp/z1wIgZnu2ZTyIEOXntQo7ubFLPul/EI1SKGM3skFdVQ5grB8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171832,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHDO9CRA9TVsSAnZWagAAqb8P/0viykYr/4s+/PIICgkl\n9WC+ANQOJ7zltUR1iPGJarr9dwMlFwRKppgLgzUyeO5Qom5LAMNb7qs+h2SB\nOxY0DNhtYGPj4hgJRaRo5U6xb5a0wBp/USxVL8ZV/srIgPIv8Xj8QcoTC5GK\n9LjoiGs/XVKa68CVikvlj1dcDNV0ahQzXdv0UyF5sbk/L3AEhryKt9kRkCqS\ngI0VmPQGhL0TQ5suYsgf0VEJbC3y68eI+OSh6cPzhZ6IxZs8S++JDnRKdCO6\npgGnLPNo1ZuwJH9DnsW3czEu8qhV/1RjuJ9PEQ33XrOMT1vvmxiYSlYOwYkr\nbNHl1SZBznlz4NReoNY2p3dImM/TLRHrXrHH0w4KUQ9I9hhc9xNx7fQFebs2\nq6YPhCVMqS41tiDgOZVgkE8NbgqA7lwxHIlP8U0+kb/qNd4Fp1eKZgaauqzt\ncjftnjQIBjJJz8MI9798jiaUi2BJm3XS4xpY5h/nNxARaG+cNW0MNc7pRbLI\nYvyLALnFJa/BluDEMaiAq+qW17Lr6fYeGvBzqX791iUOg3jcyvP+mAFSqqQR\nE5wTBM/p68EMtjuC48QQb+Y4eYC5wvODorW8L6K2aDPLgv1A0aWBOfcoQ+Ui\nz2n4PQ4xK5Lk5Fjfagm34m8x0tU1EBX8VGMkxYupzCgkDL/Is3Ko51BMUQDV\ntfN+\r\n=qhoW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.05f249666.0","@material/theme":"10.0.0-canary.05f249666.0","@material/animation":"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-indicator_10.0.0-canary.05f249666.0_1612460988859_0.6343062522659042","host":"s3://npm-registry-packages"}},"10.0.0-canary.1a3a39629.0":{"name":"@material/tab-indicator","version":"10.0.0-canary.1a3a39629.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"40b05675526c3d80e4bf567d3a511d7a67ff05cf","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-10.0.0-canary.1a3a39629.0.tgz","fileCount":38,"integrity":"sha512-FrLoXquNCaclVHg9jEd7VTvfP9zjbvU5oR2r/DOpPfi3lTZ6t9Sv22vdb4chDHhMBIqhpDZn2ShY0gmfQQDRoA==","signatures":[{"sig":"MEYCIQCj1DVbQ5rKmkcWSJu1B2UysdqPhXFV3K/8SF190hyaWQIhAJoa0chMyMFmdaYu22/lKNSZZ+LI+h1kSK3q7rrOB5Qf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171832,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHEAlCRA9TVsSAnZWagAA2SsP/jUFsmD3qDIvvCjL8Vg/\nxLXXPwcvDgVwVgHZiczN1vL4S1USm0yp9af2f/nHSw5x2IynJcy9+Sy2jCG6\nHL1BKHuVqg5b/KGcD6vT/FXaKpOHLUxaFC80041FOyn1bl6YTsx6zD1HBn1H\naA9NexlaOzMzCFukzQvDSkmWBFWRxLyFBWWZO3EbPl5E7C6YKGuAOkTSH7Id\n2z/s+JSOqjOlhjToUCpWoprnu2GqvvWYX1JiX431IEhe3Jj5PFBi69G+V4Fw\n30PtTDJbUBAeHBFXmp24xuDsVm3Vo1AuHTWn1sNd9XFdVmAAefEOAu25wz6l\nqLUsC31tQ419O62MHRHoDBPslbhtBMRoOwzadCgyqriXZwI0d0G1VH5cfWY7\nWY1ciBv9zP7EadmT5arPsR9s0O+MltAwW916MpeQ26iCltD3W2IPYrQCdmvw\naoaF8CfOV31/ZD/oneOkDNMNNP219777tU+ka6wPWL9u1G9Kyqh0CssU1thl\n6b5JnUrpDjtypufjbCxwrKv6ta5Iqlr98jiYGdH88+U5tuDYQYeEGFR8K2bP\n59c67aIR46wJQHAx2glyvBXQYgoZXND2RH8npUGX7Ag6caGVT2wScPfEY8o0\nYkdlItvq9JkhNbPEOJ/hEIc4oUfrrMWFyZyc/LZStZ829YKdIguHl+AuTajT\n42YB\r\n=r1YI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.1a3a39629.0","@material/theme":"10.0.0-canary.1a3a39629.0","@material/animation":"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-indicator_10.0.0-canary.1a3a39629.0_1612464164464_0.12467812614183904","host":"s3://npm-registry-packages"}},"10.0.0-canary.8b1cdb1be.0":{"name":"@material/tab-indicator","version":"10.0.0-canary.8b1cdb1be.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"cdef0ae75423537fdc00b1056c20f5f9706bd1db","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-10.0.0-canary.8b1cdb1be.0.tgz","fileCount":38,"integrity":"sha512-uW6Yn/UdmLXz+gutCq3KZt1e67bAAUY2ZHxZsBgZ2KRIxAPRLk4vjz2qlS83+ITNsEJwehwW+1rKzyTfvwM9jQ==","signatures":[{"sig":"MEUCIDAzbe2W72Tm3X7GkYPXso5ZsTezMiyQzetmMG9PaMXNAiEAuJRiKeA9mhwHYOcGD7o9vY5BcNpfoSAmcC4Z42eJUCs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171832,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHHZtCRA9TVsSAnZWagAAmEMP/A6IRe1BeGI60x2aYJD3\n6ED61R+PlfgKcnD1ZCfBT7aKqIhI/DgKdWISU+JpDpypNVQfdpLsifkfqD2a\nQhyPGr8pg0ysO1lg556UxvW8WfiZEEdms67ht87JTCEedZVgDDEJnyOTNAST\n8FOB/xl7L/OPHA9jh5ys9opm1eZJflDDkypGw1hY8nWofJeFSZAaisp4s8CU\nvxWuACEhaRcCjt/l9imrh41yNzpncZmVQ+eMgjutGEvufWoWNFnjqN+axJJk\nZKlOH2iWyusoIntmibB+9cyHCSYbskujcgVLJOXFw2hwoyPhT1TjtoR1WiXo\n4THt6cApyrBDDW+2hmwhHIvorLqi53rshcc4g9VijR4Y5xHMkKeP7/72NFRJ\nlHMW9HFqg2nANGJhZ9/e1Eoqc0Bu65FPkK1fyMLTPctTdTK4t9q/hC/7q85m\n9tcx6rMQhNHxx4PxGZUUdSlzFPVA/dSALh+06OdY34ab6JeopOhx+wpU5oos\nyH/mdPOMzKdtg5fLiMibGkvJO7Emirg3RiTw9BsydXAs5tCItKc1vLrg8W1m\n7IwwwNi49v7Qz6IMdmjZpGp329z2/a42wkw244Okq0kimcTduK5FJobULVKt\nKkFHFCu/uR2VArti0VrQ2x0UI5GdaGqTZFaWZ3eCwSpiFy74oaaaM9bvLAQm\n0Rv0\r\n=F87h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.8b1cdb1be.0","@material/theme":"10.0.0-canary.8b1cdb1be.0","@material/animation":"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-indicator_10.0.0-canary.8b1cdb1be.0_1612478061141_0.9933890946179633","host":"s3://npm-registry-packages"}},"10.0.0-canary.8271f00f7.0":{"name":"@material/tab-indicator","version":"10.0.0-canary.8271f00f7.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"4067085dd2d6c3d99508bbf6b3a7fca961e41099","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-10.0.0-canary.8271f00f7.0.tgz","fileCount":38,"integrity":"sha512-SpMqciK2CyKrGoFy80l/mfpKu7KW3uOUvpJK5kvwziSCgQInEPlkeZAZbMzFC6pBKEonHepwWwG9gMvth3Brng==","signatures":[{"sig":"MEUCIQDsU02OP+XqL0oyjC0qobnMC4pQ4XQkC668odWt3D9B2AIgLnftzHKCbSBMBwR1iX+UnxxWs4geY/En2VYq/tdaOQs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171832,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHHyCCRA9TVsSAnZWagAAMkwQAJhzrfvfxu4XQHHBlLDn\nN6ASwtvcqg29SjXcuSGynt3+gt4rjT3Wlm5L5mHQMBCjZzqT6FEqOvNcNEOo\n7POZ7b8IGa9SsYbagjEnEZe9J+nOZyY6hYcrlhfw0Rv1iTyqXddaD0fWYuKn\njQJcA2I369XkaPNFsCYs80whtEeBmQQKaXrH0zbSWmSPv62wA6cjSEKYguPI\nxbiTPek6vAFvHBHSlKNE4vWVY4Q03dNE3YngQDMOi0T1cnwCmXfBRdFWw6t7\nEsbmkmSBCBXGl14EWtc1oQZUaZKgu9PjdTP7XkWn2ggz5pCHguKKjAWVrhjl\nu08A3Od9SUG6o4delrvrvYD2H1vU3HkMHq+miaGiDSH0qhA6lJgn0pUBAw3t\nDEzpbj2BCNqmtOUCNGTDYBCUXvHQhEWPRgz2ukIixpXkB08cnHGLiPnXTXx/\nSsMaOi1RnQn1uagYq3M8u0f+95NVKg8mx2/1eadj92leoSvJ5BnJXv4W4JDx\n9DzrHs/Xks3vouc8sAXRU9IWn8iXBocCBM0lhpKNMi05rEjItaNGo4bwqtot\nTLxWTplDWPyu8ERmIuWmqUnQSOn4y9tIZ1rzuItX98mS16Jp4JHUdouSTHlV\nhIOslDTLPxDWZuGwOVB71rZUWvlPL5sDfpGjk0pqMpgdp2EUfdaRGvtRqOLr\nuYzZ\r\n=7FGF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.8271f00f7.0","@material/theme":"10.0.0-canary.8271f00f7.0","@material/animation":"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-indicator_10.0.0-canary.8271f00f7.0_1612479617772_0.6864898668169375","host":"s3://npm-registry-packages"}},"10.0.0-canary.533092a90.0":{"name":"@material/tab-indicator","version":"10.0.0-canary.533092a90.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"93ca59b53fbfb3921bb8cea25a141eee57d9daa9","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-10.0.0-canary.533092a90.0.tgz","fileCount":38,"integrity":"sha512-nOhohX+cBUVijCZkZt2442Bbg66w7rm2fckykAq3u2v18d2mnl0IFkCg1sZX5aJIKrM4TnPEWv04ARROX3KWsA==","signatures":[{"sig":"MEUCID/x0LGjcNgTvSzOag0cwb8ljuGwpSC1CloIN26guctbAiEA/y6khN93p8LL7VKIoHqNg4QQm5+T6uz8ShQxqTLMbxo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171832,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHL+TCRA9TVsSAnZWagAA2EoP/3wbyKUEj/TM9wGe4xhX\ny/ZRGM7P9LhV7cREfLchCj2l4pV0bsiJ+qjIgg70i2+VIG6q1PADw1mN5IHi\nW3I/2wyddp/VglrryHP3iQRRJ3dEW6h1K7jjd3QJlhgvRTJZM5+2JxVDT1WI\nci6X8hV7k/AdAVOv3hpMLEGLfXEZYjGYYegz0Ui07Kq0nO6SDW97pMKduzzs\nbS1AZIHUhF/Eh7FdChRkD0KlMIQ3Pr2rvBHwhpKxfsUyjSmZBDfLpB5H8m8f\nt74SXVHdh0zMSTikW0UO7uQhmplnL/bsRM4bhBGHmBqrlmJqcJb6OE2Q9yWy\nVjCJQnUl7/8ylWLcjpPrI3lsTI7jypEPbgaRyvg5VEzWGBh3e5RxDXHbPDMH\nOYD3DwtFxpoyZhdXGqb9ouLgbMvL9qrwTBGzS1q16HbC2DQUxVoN46P3PofE\ngUj4pmhbAe3LdDVRI4juVijK3GKmeSDm2ecNVV2X2/a02ZzZhzD+oyOmz6x4\nIXX02MkIFr4d1FURMw4IXGLxNVUStnP9uPeIMw8BKmH6vJuqvSLg8eSRsZaa\n9NbWLbNhYzGepty2Ko4VbzmjBg8IAFjSUjTZMQHe4EvIiNtFZbaU3tCmmlIK\nxswiKVyrI2LILLd6q8vu+erNuE43lxEZ0+Lg9EFUOFn5clXGMMH6hgrjOF4p\nVGHE\r\n=dHdB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.533092a90.0","@material/theme":"10.0.0-canary.533092a90.0","@material/animation":"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-indicator_10.0.0-canary.533092a90.0_1612496787303_0.9980542283767928","host":"s3://npm-registry-packages"}},"11.0.0-canary.633a9fc7a.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.633a9fc7a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c5128ef55985b555261bd2b0113a5bf287ac0175","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.633a9fc7a.0.tgz","fileCount":38,"integrity":"sha512-/5LfUWUDSbBh6r/wXfnxLgbgI4I42BGIoKgissUJm+EBvOUxF73aKdeA8GtJPDsvE/kyjIXr9LiUrWHy50k7CA==","signatures":[{"sig":"MEQCIBMbYWfblrFRAQcp1IBI3HML1JKIPFRwRmDXlDmtFBQXAiBOdkdpA8nGHjAcerULPa71jMTUqoNLu6iLHDXvbhOGEA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171832,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHW95CRA9TVsSAnZWagAAaVIP+gLki3HZiSMyLC2bishW\nom3s2oIVpXAzi1BOCSJNBV7Q3Q7pFsWK1dlrhxxtd1gl9MjPsvml2Ix7e8dE\ni+K9YrA1Cj2+0PGCAIz/865TJSbyMktcmdZjIpOXLx4RePrF/sttnYZlcEii\n7WEvaCE+nkPomtTY9wNbSuCsCb9gbxaFZrktbZ1LfCwDnNkaGhWHQvLPt1p3\nvo6rdgqOvSGimIH2YwX0JLJcHHF5qb56Du8lnRjq9wjRsZ4f8n0RZZMynbR+\nhvyldiDHq2LV9xiHq47vj7eIkMeOVaYpUtzyzTRlHaEJQ8OXWGsDwSFNKgZa\nAm+Rl9b65SzPyAJ7h5tKbDac5rA0694MrGtyrvcG9WvWbkxAHrXddwOn3g25\n0CfN1hurebmhSUskuKwA+bVYkPQXdd869boJ3LDqTG9oC8+I4HxNXOf6LACK\nA6+gkVpGSlK0dk1eZXAT475uxpF1swoAm5vy0fcs2EtCbB0MgkhSsTAqzsgV\ndNfTyGv2eTxtSDpNnJ9aFOmTJvLxe2n3DxJIdCHdzvgvxO16qdAyrS45G5OO\n/gDaaOWinsLTW0xLjqE/e5WtrjKIhbQDdO+mlkx6bxi8G5BaF+GRbpKs5EsF\ngkrYNK7g1S/EwIXtOaEaSCcNuV4eCP1VyOkJvMBCi1Dc+jxm6ZbIa7E5vvLC\ncvm1\r\n=VojO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.633a9fc7a.0","@material/theme":"11.0.0-canary.633a9fc7a.0","@material/animation":"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-indicator_11.0.0-canary.633a9fc7a.0_1612541816599_0.6891353425996276","host":"s3://npm-registry-packages"}},"10.0.0":{"name":"@material/tab-indicator","version":"10.0.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c07ff7f874ddd7d97d049360acc6cd5b3406d16f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-10.0.0.tgz","fileCount":37,"integrity":"sha512-CpSyR76q51UZ1nhW5quVvYpPGA//Zy2Mjhdp4y+T8yVUtR2MBGj6LjeQz3T4cuGq4GL+yEIw6KPOBFdtCNRqaQ==","signatures":[{"sig":"MEYCIQC2yPSTkj5GqhH+nNSOHvLikFA3KTOxoKeXoWA0uoh9igIhAO1RpIi2KTDEqm30iLcET0oA/MYGhWwOoge7773PO4c6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171358,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHW/PCRA9TVsSAnZWagAAdpQP/22PCOYw1DLuUQL+8b+V\nt1M7WWGCwxFI8VckAn7fC/yZRLDdrwQYMINnVjWhoWfves/9WwKK3Q3rd8LM\nvT8GDtiSmGmjlWoFcyv1/4Ja7nUaYq4BPD8ozXkbbQppGcxUwb5cExwTsrhm\nyKwE6jet4HsTkF70VhXfhZLgePnIZX/0vGBKJ6rV34vXpC8E+5Mct7RX7MlW\nCN6XP2qQGozrJ3FAGkiWXiyDk65S9Ug8gFEuSE8HivMU6YKBQptPdMhBLFtS\n7xXbIrWANfK/GKhJIVEXr27u/wlAmBcC2dNSiKbgBgI31KcIzZKJV7Ls4y4u\neA6Q/IPKgmFpAcomQDSAMbTSORz69ef1NLKDiXNulw5lSTxLGYGqFUnpTmN2\nZxwpfhUDS6/Q3NC0cBBB9g8iUu1KXqjI+rNC1cAirAi0pK6jUvnS9IYvVbow\nfEaoQwIpPk+a4EBE8qRqCiBvmUmJWLKzn6RQwWNOYYkPcepjefvUpvOES87F\nGc49HhEfpqFSz2NuVs4+yn4cwaD087vZ5lXsmhyQhNkD6lD+zK+iZ58bbZhz\nkNmpY8ZOJ458f0OUyoalc5N+k3ZS0o9Iyc5Uz0DMWtBANYiimnJdV61ucmNu\nN77klTu/lXy+JGbrXFfWPH7EKu2pnGD5ex7JPl9qLXzzwIGFFRgNMbSb/It0\n05Dy\r\n=Ro6B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/base":"^10.0.0","@material/theme":"^10.0.0","@material/animation":"^10.0.0","@material/feature-targeting":"^10.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-indicator_10.0.0_1612541902956_0.034792699562040674","host":"s3://npm-registry-packages"}},"11.0.0-canary.b5227247d.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.b5227247d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"71bff801f31ac12ff5998e17a27554ccdab1dc8a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.b5227247d.0.tgz","fileCount":38,"integrity":"sha512-ZVIF823fv0slvijaS6pkl/Y6fGf9o0uKtehTXlRdAAMjFm9EOW1+cBzOG/1r6E0WtTQukiJjEB+mzSI5I9F2Eg==","signatures":[{"sig":"MEQCIG1i9L2TMsjevkRy1JLJHqfXe9UJmTZ2JUu2uMrfYIQGAiBb+BWbrKNQE+UG+KXopRLr7dP54yKD4EPp429JkZiiHw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHYNWCRA9TVsSAnZWagAANI8P+we+TPjbSC+LBdJZjkJL\nRlHENXMXhJvTm7ObcWakjSriu9yEMiQTxfb20k4Jp7O1CWOXDM0Yxd+try3x\nlF1G5NHs4ARg9mEXN9SljiuwyvsciZxyMo/WJNoGYGCsDybNPtwWW4CMLPeu\ntHcTPt5baMQAhKMLczLI1hXSBgEHwKOtW2OUf79V52l5UfwoMugNsAPrWFp2\nR0pL9BeYwYXb9IcnBzMBQn6WX/Dand6COGlVJPKQeDl2srIRCAJaQDOeCA5m\nic7oePuUFbbrWm0ChLMvVPmtpRnncgy4aJpq7YLgHaHwhUTjp8ayR5l23R7y\nT8DiM/TgcxVH8lCgzxkKu4BxfBFGUCXbf7dfxZmffSLwP1wudFmOEUohgBmy\nf/khIfbKAKhsNNY3i3IU45+psfBH5/m9MR8dMJ7eep+13rDIVmBKT4YwdCzU\nYfa6163/flzL0PkWS5fZNhRhetT6VRpjnj99TBS2KlZNEBbijlHHtfHG8CDy\nKwhk7NFA3ZMw8+YIYBNh3rFp50S3OY/YSIm7SLagtKCdE2wCqWSkECPjZJKT\npT6eQiHAZ9qoaMEVsaVmUDyfyFPNYGEI078TO4Agx1eZzigkgg5SEJaEaKvm\njAP+JGVYjtta/sMnV28mWsc06hVAK8HsM4Z6zM/uuqBlzY0nBJzB/t26HYYj\naoi9\r\n=nsQL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.b5227247d.0","@material/theme":"11.0.0-canary.b5227247d.0","@material/animation":"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-indicator_11.0.0-canary.b5227247d.0_1612546901557_0.41718129473963006","host":"s3://npm-registry-packages"}},"11.0.0-canary.95322b11e.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.95322b11e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"2231e13aedb81997b63c10945d2097304600744e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.95322b11e.0.tgz","fileCount":38,"integrity":"sha512-jfTLvM8yQEYubRH+N7HmznEkoKHOq35cQolXp+AV82jIfIgYG2FiCsd7OZT82tB7shfRXdt0WtUUnjdES+ECtQ==","signatures":[{"sig":"MEQCIBqT6ZPbYJPd60gBawWszJ3ptHipeDMzRQHeYg1UjFb+AiA/uDGUrjchtLOuHXlxfCwWmsAb4t3r3Q1bX62idwDxrg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHdVHCRA9TVsSAnZWagAA6LkP/i0rIb+rs6RywdsAj2OO\nHTPko0X22tLhuZyGlr27MDuLN/yvuOHY/o3wAnAi4Ss6+hZ/l/FnNm/UtwbO\n7j3Ig6e0pG+nrvbM3DABi+WUOpBbEpULJJIgNZzLDope7tExDvqnoT9ePN4g\ndQPNEfmpMjj51Z4rEEbymsdNd5DJwEJZv64uq0lUBugcpVUy3vf+nSMLdWLN\n6p9pSBMLeg0eXW2ZE1kdbNlCJ9c00OcDbwa9icsAi0PvZ5YwdwS4DBt+9gBP\ntMAPcl77M9zd6yjQBQdIrI4kGiMEw06WybqyZvDnGwyWjMihhiZ56t/B5RYg\nmUlPmI+5jy9xf9rLconouZP7jhRRABWXY5jghdDx/XQ+/Vvl4I+ezmxQRFlH\nQnfwEfBk8nnIiFhUz+SkBkpeClF2mdVL1sL59SUU9f+kW90CjSgjliLAbOO9\n9dVYKuaqDpqhCHB+//bW1NjCdibEHbPtXdWU/i89Xx0EcPsO/5RFZbJlc762\n8Iqy8ACvnHqr29Jz76gLbmjADvnanRSFppH7CNAm/4k9XZJ0VdWJTniCusGp\n+PaCtmO7Y30k4ZAQqo7kdWwL4JxPLdWrMqi9iad82n1MYuZRWova6ZoebVU6\n5QirCfp6rflwBJg3Uzxsn084g/ukQ9H526VBzn4KCHgpRNQlovptNb7MLXWs\nvyHA\r\n=Ucoo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.95322b11e.0","@material/theme":"11.0.0-canary.95322b11e.0","@material/animation":"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-indicator_11.0.0-canary.95322b11e.0_1612567878620_0.6168725401626134","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f318ff0f.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.1f318ff0f.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"519d78a4b34466a9e4a185e268022254b7e4373f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.1f318ff0f.0.tgz","fileCount":38,"integrity":"sha512-J3aTZlsWnq/UIGd3wE2UQR+S4+hyWK7HOP9cib9O3H1Uvi7mREFuKFN+MisFKsSxYN7a3EG7PL1GcGc13ThEAg==","signatures":[{"sig":"MEQCIGZSOMeiks5Cf/AWJ/yQltP5+QEQXxogrjzzuqyAj8bpAiBDsettWBMGJTZnZpy6ffrYptaAz5027Ks6827f1pfK7A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHd0PCRA9TVsSAnZWagAAJXwP/iOyTICzK04Gk81b8v3M\noj+3VDIpDSUdjaYMWSD3adkmHdHmecLZzmCUEDfTod4TCey/fz24wf1Gdxoo\nGjcdU0PJEjUurpeq6KGHEUUX1o2wb8SQVXWPm14c5RFPF0TRdMCaozIRaMLm\n9fniwU9TeBQLejF8QPiDQZG+y5h4ngQe0fxTZruWRzRJQoIhT4cTPL3jmyQh\nzGAKzcy8NreOLUhhJI3+k442ya2JZkBLbW4GMnpr5Ac/od8VRSdU/6jx3GHN\nclO4asfxqzVmK+dONQmX2kcDP7ngw6OrC4EWXGLUmEcGrl3MMD3ZtSYALvJO\nZADtoXhaif/X5AnyKGiA1tLoCMbLgfwGtpxHxO1xoI3j7spMGIAKCJrXzynT\nWOdQoBTIPFJPdSgTwFh9/54i2mavy9Md7SJIRb2eVveirtq8ZwWeZP2XCETP\nGhj89SDsxIK4DJnGp5rRxYAK3Qjsw5O2GCff9VDp2kdxdV+EE/yZsxtThar6\nc86AVlBCLoumi6gMdcXC6YMacw725+EYsc6N9WCLoPq+dchMbNVtIGSTMoip\nRuO9ScTCaXV8ebyFOzXgAAjk+2sSD+B89fg8DqAqu4Dg57nau3Tu73of5rpg\nJizpCFpzd7e1D7wXfEJocsxe2HsCAZ9u2D+OXG+mAdHbyqa0LZvy+jKIuz0i\nqmNZ\r\n=4UpG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.1f318ff0f.0","@material/theme":"11.0.0-canary.1f318ff0f.0","@material/animation":"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-indicator_11.0.0-canary.1f318ff0f.0_1612569870604_0.13547368990532815","host":"s3://npm-registry-packages"}},"11.0.0-canary.ab12cf7a3.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.ab12cf7a3.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"5aedbbb868a50e9e5dd273908720cc03b23a654b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.ab12cf7a3.0.tgz","fileCount":38,"integrity":"sha512-MeDREG7kBk3HvhNJfq2dchJjWnya/E27bMf4HK1MTS1juMDzy8rbf2cRTplMGF5HXjjGZHbQ2FxgVbiYoHVGoQ==","signatures":[{"sig":"MEUCIEgT4xQ6VIV1O8r+fC2wHIw0fJC7JNQsw9TN1LSQMu9rAiEA2v3vADZHJCjdfMYcPMmUUU0B8P/3TCH+eqm+BpTfuec=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIVKnCRA9TVsSAnZWagAA6OwQAJbS8ZK5i1QlYVBxD0es\nd1AbwEf4UxlZvMYiyeL+TE4Ciqsqp/km3nJAL+nx3O61gKJHem2u8HSCqZeu\n3NgGSRwoNCv/Hg4gWa/knqqav4hrcXA63C4iYTuepfazLWWsYBE0Y1tb3gyD\nQPpEzFdxSPwszOVHn6qKaf3W3TFJTG+DO1FygXpCLzTgwl4ixuZ1cv9f8tC1\ngkkFBNdgmeoBTh8SHJXvlAb0wC6QkF/05pL4peIMkVetsShz+fwi1ujBvsTg\nRUvOHJZkH89moOnsgxIot5uC63pMxuUFKT/TFe2ZwCw5HZf7tLdF5GCzsxsf\norNMKN6NO+PGkWZrwiY61fy1Xcw766ccQOxQzHaLX4gJ7f6T1d2T3fkTep9e\nHJiN/3TBg04bklODWOgIhSiFkmshmDWfiA9cgqgPV/tjDP5b5Z72DdmhAs34\nSmVUtPVD/ld8zDEANKyZDLrg3QyV2XrGbMzu121wXZrryDgXF5LfEDS6SaiA\nEzJlZy70i/R+Nc/0r5UE/xRwJH365LqouKx9WsDl3urNp8MhJen/V4DBPhlG\nTgb/TMzHqC0nsAGkReSgqfrxugWNuXOOc7h9nkCMcsnzD9KxyxrEMsewAWzj\nI5c0to7vM5Kp5vbcEgHqTHEZh3KkoXeCyU0k68RyepfswW35qCIGlLJhN7KU\nZdOR\r\n=FHgB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.ab12cf7a3.0","@material/theme":"11.0.0-canary.ab12cf7a3.0","@material/animation":"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-indicator_11.0.0-canary.ab12cf7a3.0_1612796583343_0.7468164638252457","host":"s3://npm-registry-packages"}},"11.0.0-canary.98db2c5ec.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.98db2c5ec.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c431999cb2a1ca02399753acf3a965eca1ae88ff","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.98db2c5ec.0.tgz","fileCount":38,"integrity":"sha512-3wJ3GgrWSNfNfckaaga1+bKO74p1TAWfajyWBFjGYZZUC34VOb1PPi47+EOj4plEvZZRnPmpV5UKiH+WoCSpyQ==","signatures":[{"sig":"MEYCIQCsmTwewRWd0Pps0MZ2Pj/uzr8TxeH1S4Gd7pJ65Y9UmQIhAICsi0+ZNEsfb1rolvJLLGu0T8WqoNNCgIBoBABYGjuy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIVnZCRA9TVsSAnZWagAAaekP/j8vPjaiC+QLaqLzUXWs\nFB9/U4pWQRjsThambgK4OAU66eer6vtv6F5/YxXT8ymNdMftBQFl/RW5plt0\n7/7XYjHR/e4LNOSd31jceymeWoCR3DMu/uLLCzsRDCZAh9jJpOF0hVt95jG+\ncT1XIEXkVGRD7MrSLabrWxNkCxMj57w+8UIzGzdeWonrx/Bwa2ShiqLOG2KT\nR8pkX109ZzVVVZr6aLFVz21Sh48XIYZA0lYKzw6zlx+YSWSU40W5IVPl35QR\neHQcntTmtmBa3w6p3NLjhhiAz4Cn9k8wa1QMgyvBL30z+N/qKwklMr7/RlkA\nZWjtquGcElFa3VXPSKoiO7exOm6CoFesKGsxYS+CJtD17gt+m1YUvwa99CV9\n7UOAWpfHrDTvMrnSMhEtmRcdSfE91AUNhweWzJsxMSlWlJaKaN4Aa6TVpI6Y\nj0okmLOZKd6E41XcXBdsntKoGqYYrQ6A1liZwgk6XibWgDuPDzyBSgZ+EANo\nXg5+I3HrShK74vCe1qmpCCDAunIJmwpnr7jhHYq5+Gj3XDKX+DHf09a94yr9\nzjNkyisAzmt48H5aPEDqbA5wmXqSmY7PkYRpAIV55G2vgIYiGC4agCJ8UQnA\nxTnX9aOMdoIGrpSlspojcjefqrqXUoUqW6rrV9PESBBL2zXdmmkBv/77yXBf\n2l06\r\n=h2om\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.98db2c5ec.0","@material/theme":"11.0.0-canary.98db2c5ec.0","@material/animation":"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-indicator_11.0.0-canary.98db2c5ec.0_1612798424677_0.4008529248537789","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f86b9f6d.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.1f86b9f6d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"70cfc354e40c2c78f570438b14c79cb0d4439855","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.1f86b9f6d.0.tgz","fileCount":38,"integrity":"sha512-txifsuAENzEiozZJFEFhzlSmxoFEMSeC3N8dqrI9JENq7qxuYuZs4BSo/ISQ6u28C2dHxK0Ukt5OqkSTQIJelQ==","signatures":[{"sig":"MEQCIEj/metBpiwxdfP5oiw2p1JOmvZHp9/Zf806xpeBu4h7AiB3iAH1RnVuhxyRF9FiW+Qny2lLR4EYxmsGoYmVupjV1Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIXIBCRA9TVsSAnZWagAAu2UP+gPgufHRe4cTgClW1Hf1\nGc7wMYIun0p0oHp12JVgJMMV2HpfwESOebbtESTr3Djl0DCs04gNikWbLxtv\nzToh1j0V+fw9J7nYXiDg29nXu5p7VbhrhNJcOtRY6+C2gJxIW2CvDcPeBWUv\njdqbnwQ1sAEkeA6MRjiaPChWujyNTAz01M7LGDh8SZbM8rcYVHx1DaLb2cwp\nFo6HIF2tbBz3cfP8lYREiI0GkYVTHafy8QQIFzYEdM5SwoUFZV3FrVLO4Kue\nbcxNlsY7JKYflwnQ2/VMMTRCQSppVeI8BheOOvFAnkbYINQIhPTkLT9zxZmD\nW86Qx0Yf86fDJi7Wri8fPfCzggdLecEt1PS08ks3OuMmIKZD+qPKfGTcNpmy\nZrTQQ9wvR48qE86HRhgt8DRkBlYDhsRQFKkpeQQ27ywZHbWsk9JLTvAv6aGE\ndNABkWJd5ZZA2yCCEzmNubY5H2qYkUszXP6R6tRf4F0OrCwrmhjW2RPeEuqa\n7muc38tqa8FuzKfOwr9s9CcokUdLnEUT5EoURtozTeWMwUVi55wgWSerMKcM\n3MKgQa58OXIGeG8LM82qX128u85qvbF0SiFmBZzBkjBjWFqL9dlMu5J0lYXe\nbZbiPNIS859e+mSogfh8YeEHKsqR3Mqv2qG+Qkij5ZYkgcncua9JCYev89F+\nqon2\r\n=mk3n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.1f86b9f6d.0","@material/theme":"11.0.0-canary.1f86b9f6d.0","@material/animation":"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-indicator_11.0.0-canary.1f86b9f6d.0_1612804609308_0.33471260447285034","host":"s3://npm-registry-packages"}},"11.0.0-canary.aac8f5d9a.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.aac8f5d9a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"f4336d12a68de7882fbf3f75b1e3134ff61517f1","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.aac8f5d9a.0.tgz","fileCount":38,"integrity":"sha512-IEBxIyzWufMp6kqaR9hXhn637Z0Ax6ePYrLKu4r6W9+liSpYS26hGH4njJXzt2MZV7x4KeH410ajDlpKNF8kIA==","signatures":[{"sig":"MEYCIQD2jlKCORUMPv0oXCVgH+gj7xpC0mtFX7PK5rQ2OdxGggIhAN3n3woHyLFLPpWWC0uMWETF9Gzy4nXcWbLyiQo+QGt1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIXwZCRA9TVsSAnZWagAAGJ0P/3SSg/fQVx5NV5BPwKj3\nTdj2n7Byr5tCCNV08bf0eEgmui01/qWHu7n1GKD3vDO59cThTFFjHBw7e5K+\nGGAMTqtYtqBu6kZORFJ6wPo2wXhVjrJkznh5LSPAodYyNj2GsJdcEJBj67Es\nlI6bAJ9QalEEt/4hDwuXrWCMzgLFrNdyMH9LiQOCWWqmU2Wn1h2I0J1/hu6a\nPYxVISKZ87AWiFNpatH2yPC4b854QiVnoycBTJAQlCCxQU0qUYMDvFNqY4f3\nrOfbOGYVOSQd7wggJ84E2r1LgifKU2WoBkJjirmjTpHt760K37tkwqcOZt+L\n+hBL08jrIOdrVAQOCdYnOY4rcCtgFW0/do5CTK8V+X+WyBYX0s+cIQRumWRJ\nOJZ+EW1Fn5g1FwLg9aJcfaWZkAcELZUD0Rz+BlhWXq6uonIdhsCbsgZokFpb\nV5H3nk9aIJKhU0rxtYAls25KzK4V4H9HxaE6zK6kAtoEaPMxs8hVttA5+1g4\nVlfrCfUXOqWajYwrhVWRi7WHcAfpMBg597yNv2LUfnAOfSSqrrKMGkj6dPPQ\nLScBTHY0LCCdnK5WKuJ2Ku+IXDuDwmPXY2mjbuCt5lf//3rsS7Y++5FKA1TS\nihVN/H3kPNxk8bVWJQ3xTw1tZLYsMSRbnJKwXYJznfhhpeYeaZs7J900wMk1\nUa+B\r\n=m8cu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.aac8f5d9a.0","@material/theme":"11.0.0-canary.aac8f5d9a.0","@material/animation":"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-indicator_11.0.0-canary.aac8f5d9a.0_1612807192775_0.37572955065429525","host":"s3://npm-registry-packages"}},"11.0.0-canary.750e18fc7.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.750e18fc7.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"25cac21e19c5c874e49a9727285a346b50758005","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.750e18fc7.0.tgz","fileCount":38,"integrity":"sha512-NXJRIJFBVasyI4sBQqgDEBQd3YkzJDmewLMqr7AqEh/g6KI5m03+cIwrmEaSaXT4GTOoOmj+6DlxudvH7WSpZQ==","signatures":[{"sig":"MEQCIBozBFoE0JEOLcIS+QUQ7gWrNUS8xW1rzd131UmvJOUBAiAebfyZRYLFbOYpGWjxGi9jpGkJY+NlBTE076XtbuW5tQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIa/qCRA9TVsSAnZWagAACPoQAJWFGEjzJU7P4DqvXumx\naQmLWRha3Z1k7QewDEcFqFMdOThbhAK/Y+X+uBfAGorh0QqGnbHW8XKwCMOy\n+26bTcPyPkxOZ5Cq4XUim3G6iRZdx9/N0ICZItycKlY0XVOvvZU4ctwUJRsU\n58Fl8A3Wz0Jskrq3wQvaGVix1ALmtaAz59kdyFi/gZ1kttdFvloSBM0JngOe\nddCSCOAhTjxMVWi/3h1/aGHV+B20/WKSAfJvSsRjiLWZKE3wLrKnrv/k6ZcW\nSYY3PPGm8RaNIof67KFg41q9bdL3C8TeijZljnnMq8AsA2coAXnHmPI721Pf\nny7VmyruG6GEgnY3hYwucjAHo4zyxirz5FhZHTIVEzNdopajVmjXQ3forHmQ\ndrXs7dNTAtIuby8Ej9vo0uLt7d+eBXD22hqaotbYUji955V8aQM9hHa6BAkk\njHXB3caxIydNPEYxikvgpBDgzwW65xhCktEaIVlYG5xTSGbOdLBrRDkzZ2PD\n3DHQyEiVeORbXj4L47Zz4JaKCElPTIgh14T7gcQXCuIWLtD1ppBRmC/kb4sS\nRHgg93Ax9rZ+7j56Kkn8VQDCVEHP/g8uSaIMPOuHd5ISx6i6XdeOWE+FXKzD\nG1En1hxXGUb7hfArzKbFu7jPLiTd6YJn6fmM04nxktWgrsDyQmHEOtMYmlos\nigr6\r\n=1at6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.750e18fc7.0","@material/theme":"11.0.0-canary.750e18fc7.0","@material/animation":"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-indicator_11.0.0-canary.750e18fc7.0_1612820458058_0.253863537859615","host":"s3://npm-registry-packages"}},"11.0.0-canary.b62b1266d.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.b62b1266d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"b2ef57b827e14506e253a2c41ccd22aa9247be46","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.b62b1266d.0.tgz","fileCount":38,"integrity":"sha512-gYqLbuF+6BOwAyiAypVrqdkow1a49j55ZgpucyxesDLhxNpk7CMlJDCsvKRWsCTAPQ/JBdFbxcCtSeG5mx0tew==","signatures":[{"sig":"MEYCIQCFUAg9emaHi4gtmwn/KbqzDMSiscXhfjuj6MdNvMcQ8wIhANhWHiVnrQbIO4SXpBcbc4Mq9X2BlFvSmKvHr8WJWk34","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIwQQCRA9TVsSAnZWagAAS9AP/1ZMUdzqXsnoUAcPvQhx\nOZfhrln1xnsM9Yh8WAlysQbW0/mbwgc+QC+xLnaiH7SQW2jB6KWcnrCgNeM3\nZCRp7gPWD9QlHKyCKVSXLtTVD5QZ8KE59y6njUpvSW9tA6vANzQSCt5aRMtt\nsxIlpSDZGfQ/BTioSP8POslJ+6NsLH1OlwreqzF4Mdkcf123T347Ca9j53eq\nOPuF6mmzKr5xV86xBEXuF4LL3Wj5T0HT7+vi/V5RZj6p9fm676kMY3G6kzwJ\neQ4W8KuEe5qnkc34W/OSLw9z9gO9rp87JKXBJbnprVaMOM9xIhW+L1F2jBDV\nwNGpbgfHnLk1xvvik3Q3fLm7qAKVl3UkhaahGMKmw4KRITvUam5vE5fYfECW\nwxqE+7tw6KD/ULgwqiQqgyUB1TK/ao58bRA03ZI9zfyjfmBnfqwI6nrQcwfI\nZPCIfvFNjr3kbV6QPue6aOJO5nQGmnc1I0V8CoaIEnlZGrs+u2eyh+wj/yHL\nB+FNjmmwhAM6zQEUyZpbPPA1tLK6rQWIf4G9RFw0Xv752P7p440avzdSg0VC\n9OWvL/7DYc3an5vWKagdQTqUbBFlBOPU0M7XNlpruca8KUkcLkcaSYT5DnOZ\nci62xJfA6TVq0t8UK5mvc+vM50+Ro1IEYqMY626XePn9BHPXC49Pk0LLy7Gn\ngt2H\r\n=1Ra7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.b62b1266d.0","@material/theme":"11.0.0-canary.b62b1266d.0","@material/animation":"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-indicator_11.0.0-canary.b62b1266d.0_1612907536019_0.25569219866915227","host":"s3://npm-registry-packages"}},"11.0.0-canary.a6b3101fb.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.a6b3101fb.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c8ae9a48d90214eacc12afc7f5b10392070dadbe","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.a6b3101fb.0.tgz","fileCount":38,"integrity":"sha512-Qsf1ChihBiz9l9XVY1NOYDlxjzQn/CjJrYBvRSfmwyyoYwEuG4ik4bZkWfh+21gab7PsVD61mGGRYGZ81qnLPQ==","signatures":[{"sig":"MEUCIQD1rbQapB91TXQc5hEnf6Kh21hP+RyD2xvcuHHn0y0n0AIgV3so5GjjAVQi5N6FT1IPheyKIyLCDnQZVOKazPyBWsc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJbrPCRA9TVsSAnZWagAAYlYP+wbI2uU0rA8opD0fi6a/\nJ+pijb9OTsvdqjEQn6N+J8YLmh7ZzMANb7qgc/iqw1d+Fa/9IGlPdfyYsJHb\nTdz7XH+aHxC1mWYB5KWYO1aRZnBZymN92rahPoriMtkVghDIKvl09K88GpvI\nAtQdKSsWqcYbIOCY0GYaehh9AdKJP+GaxwrMsqJ/MnyzY8BQSmZCgyxGrZ5c\nS8SdyaX1cmurl9QH/Th81JoaJR9g51nKS3Q4R4hWhC9rXBB2WOBt+69u0Kbs\nR4ah9lMDZdzSm5udcr0eYEu02ntnfC2x3Dq739cgmj13C7pJkLw+7RtX7R+i\nE6CQCfkW7VcTG/+DvtzB9LmRLIK8q1jPyv3E3ARAK0IIWgJxFoxU3kIF8Wwa\nxYHuYsPRhXYD9bDiQIIH2AVhLAEUV3nk4Q8zf3ejxM66geudf3hSOCOEp4fh\nEXRNwJZw0g5pGGhlQVO6jDa3AgaE9UYE6jIjgK/FuvuFs/82ZA0B3KtzZHwI\neM1xq41okalaGWebX1IWs1qnu6fp7e8LxjSqJ7fWF4JEaTW2D1qv/I0Hd0My\n584Juz7syFFlOvcuggwIhCQTEf0affQkcmmSkdpGkgwfgVOXnBXB7dacdrlT\nh0OSji08Kmncz5fkt9iySJ8s5zFuUOG/OJaF3B8yaYCqL6B+NBiLfpajsJCw\nw3xj\r\n=rQHF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.a6b3101fb.0","@material/theme":"11.0.0-canary.a6b3101fb.0","@material/animation":"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-indicator_11.0.0-canary.a6b3101fb.0_1613085390939_0.6090493521810929","host":"s3://npm-registry-packages"}},"11.0.0-canary.ed88df700.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.ed88df700.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"97d902cbbb613e0dba1eef3d83055aae396048bf","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.ed88df700.0.tgz","fileCount":38,"integrity":"sha512-Z3MLfGY79k0dQ9bB9KWX3zOIBPQ0Nobe3ziBbKxR81sFfSduQVPd2THGtiGof+0lSn0tjwxNVYqBUNLWVRblhQ==","signatures":[{"sig":"MEYCIQDuMuJaaRt0bwJCHVqatXjAb81rtHtm3k4XkZ5zYy6/mAIhALOFT/w00JPA/H2As90Tp/IvMUbt+XchPyOIU60XhioC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJcaACRA9TVsSAnZWagAApGMP/2+OHXHQiPqHnrayx3Ln\naxQKhxYmqS/BrTJ3otC2/EHH3TGaO8qRfKsIId/rW9//8F15pw8e0nJTOLXC\n2tzjqSprbpgaHHk9Aiy/mWxSATmUhw6VuQbGcSVa5JKF1OqmGr5ngw+UwsrM\nlmNRDyDCoKWFqGIqqlSNj8uXcNlC+1t+Zj/zUlzi72Q4GmPV69GYcecM3bLS\nQksJH7oSh5ZtMZ1RO76mKAYHhUli1PfkrwFT389nnzxzbHtE+F3KSKmdkTA/\nlUM+yifQf/Z7bgw+6/s9zTJiNJryc4a513OPfQ7idhpYHwUAqZiPNxUKNJI9\n/WdW+6mZcRKUfthSA3pHwqCh5CsTEtThKE6FJMSomE4B6WnV9BQ6xSmby8ja\nRmthMVcdDkUmmdC1vVnFlyOAZ7iYTRqxNG6/HVJzFB0aBxNMyGKEuxAE7S48\nskP9uAIlDFWmWurs2lQ3I3H1EwSRWWFy1m3j3WxkKl+FMB4/wo3No4zeLBhh\nnDxm/Eauh9ocw/0YB/U5mSHr4eBtM3rfoMfPx3NKVbY28HVLLZpONs1XDGiF\n7cgdyEp2aWV0mcVyUlsjCW1ziMHeH4pLbFXNL1UpVdc0h9vSmmfkCIXhH0Gg\neFkJb+6NbXaWhRe/y5CjrtKBZRO3caOlkQyf83DSFocAD2Lqqc03IaU/UMiS\nzyPZ\r\n=eRBm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.ed88df700.0","@material/theme":"11.0.0-canary.ed88df700.0","@material/animation":"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-indicator_11.0.0-canary.ed88df700.0_1613088384238_0.8028790738511391","host":"s3://npm-registry-packages"}},"11.0.0-canary.d30efe6b4.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.d30efe6b4.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"58120f1575a7d3c13ebf47f70d26db530ebe9242","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.d30efe6b4.0.tgz","fileCount":38,"integrity":"sha512-FydgsY4PsmpLBVI+Nmc20KESofiMp72dS1MvfoRa9FnAG4HGVPrQezNBJyOHvfLBbVhqTuXEB5kWRJHPcnvCpw==","signatures":[{"sig":"MEQCIF2sE1YScPX7YVDesPCYO7Zn3HEI/UDcSNNJjDb4mGY0AiByitSSJkHeqj8wWpWVhHIxcMzSSFpqWRYQPxw/0fIV8g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJerdCRA9TVsSAnZWagAAH94P+QBqoCXNF7vpe6ZdJ1sN\n4u+0qHM1tfTs31Ti55azecQLaRYwTtOZMjZJea95LPw5Umcmpcvi2Fgh8rkH\nj68WdJYuYHox+6XQ1EJmltTSY7BxCmxpy2KwQAm7E3veiV+uhdfbsksp6itL\nLVRN7b6PnmvUQRWQYywsquO6knUoOugFmo6xY+X8WqvYSCShDn99TaqiAlmH\ndXsmFP+iw6fjbwMpLlrxGaUaHpZQxhhdev05sIXH7I2EsJCAPygsaHTdwMS9\nG3xlexkYXuruzGfraarMALdrtx6uuHSHes3PhhjNtczIRC+joXl+2hNF4wMH\nbHz7lunryS4yml5yUNrIIWLcfay0KHdoxS8GgqW0X6vO72ulHRdcvRQcdRFb\nsggOLdYAF74diPalOveDFN+jmTVqePW9syq3U61T8ZSD8f4Twk5K9FTLsreF\nbMPpGvLRh34RM+LKSUwCIeA5L5/UwmKhRK4onMSTAEZ+OPnYUIyIz6icliTg\nlnA4JnbG05Ygr46cZCVz33DTidTrNF80Nuu0vsuyIxk2OC0u2Zw/txWVXyta\nM/vZ1mgSmSRwJDcmsWxEzSStZZWrt3rJELvXPkCUhU51cfi3O82b5isP60lD\noOUst3U6P9f8HL2ACCy7qkm6wQfeObp0iCr8qhiI1wPhzH2S44Z+IEc+aUAV\nD/f0\r\n=A+aX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.d30efe6b4.0","@material/theme":"11.0.0-canary.d30efe6b4.0","@material/animation":"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-indicator_11.0.0-canary.d30efe6b4.0_1613097692531_0.7383927430712689","host":"s3://npm-registry-packages"}},"11.0.0-canary.0393bdc4b.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.0393bdc4b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"3758461c11ab6426f6c07772021f61d7939af9c8","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.0393bdc4b.0.tgz","fileCount":38,"integrity":"sha512-qO9fgRo6hbiAkqpoj5xbESmBCvvtRiKI96o4Nx5V8u/4z5SiktBRN9m3VMWlV2mRNvsESdqW1RCUuBnQIFEB+w==","signatures":[{"sig":"MEYCIQCq7CCSlNRIqP5e2O9gM2WI3PsjEPCS719nIycRrftB3wIhAOEnpFTY6P15Yy0uNaYeU2BARtGvu8NW71tiJowdjJEW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJgRoCRA9TVsSAnZWagAAQw8P/1+u7PHpDsEc1Pb1qHUQ\nu6qhmZot9xC8Cfa2YAbaK145NjiBnXmhYjpC19+1qVvwVSn/aaCSXwwCwcDN\nsdIx4fIEUosfOcss0MXaLFAHBwFOtrriUb9nmU6iqABLRGjZ7F9RvjQHKMrH\n7F4AFVSCNUR95cR3IVtYTcQv0h5AhIwSo8hroZLLKwQlygK79jA4Np4gLuPs\ncrM7npZ+UmSX6USlcTWOUV/xKZ3ZH0pFTdo1GQrIc/L3e6NZx56L9UdWm6Ja\npZCdt/5bu4W22Bh9st/RKEAFiSUXXfwq3YLNan1CB3aJ82ywaT39SnVUpgM1\nu5dVdACjefqAwauFCzi+2Rk4P/ExNIrqbcp3QfrZhuOG8x5eGYF02E0gtiAm\nv9IfeoNAalUfry35RWZL5VQh9uxR0Ox0RCOGPy1XShGzwS6vEoNk2+6bkdK0\nUoaDx9IJq2erZR5HJ1dgeCllKlJD+N2ACKt2tpq3q3UBaS/iRRHZkUFZnVda\nluDEVUNc48x7iySxP2U6VT373v0RRC4U0eDDJETP2Y2kzKCmvZMRbRKNg6Mt\n2jrz9quwdcTz2H0qp4sPvxEKu//jLRnOJY/KnDN893BnHLpPdgCrjD2EisOP\nYqJJ44PFyAP0fUZ/FXofpfoiDSsaNRq/fEBI5Z86fOxoGYgYdIf2NOJYd9nJ\nnTmi\r\n=hNJy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.0393bdc4b.0","@material/theme":"11.0.0-canary.0393bdc4b.0","@material/animation":"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-indicator_11.0.0-canary.0393bdc4b.0_1613104231579_0.9208203858058399","host":"s3://npm-registry-packages"}},"11.0.0-canary.7cd26af4d.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.7cd26af4d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"da0a9c5adcd09901308b2d68456b9116a02764ab","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.7cd26af4d.0.tgz","fileCount":38,"integrity":"sha512-2+xxq3B1xlBRTQUFNe7JKWShoJQk0kAjBS3lXRBkRIUvjHnKofmpXpKqO3BAywKE/ft+vq6TXdZynhBI8g1MRQ==","signatures":[{"sig":"MEQCIG2dr20UMWZtS2t6rWzyg28cP1poR984zhj50USx7OrOAiA2DCdPWNH/wBA0bw9Jc/QD0VcIrZypUnnJ4NKWDoEJYA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJqXECRA9TVsSAnZWagAAdbsP/iRCACXPFSDG7RpoAxuO\noEbGS3PeCZy0B6Pr4rgl3Xgzr1M/dYWQ91S3TVwhOc8OU+FJD/rssbNvNXJu\nxU9xoVeyxR0GcIfkCveVC8jZA4T6aWqcch7s4MhTpoPmMCXz4wEQBaBkvIjr\nSthpbcFUhTy5wmi1wUhb0G0qyoAofmhi8m2K76ABsIyeApqEujOHtAZ6verU\nptZ33CNKg+bukNezEoXMBc20UceDXEqibwF/Jt58mo75zw1f7XhNIB4U9MH9\n4WRz4M8dnoztwkfbQ1klZ/8rxxuqdxCVwlkXbnPxwVaDmgl6nFWeAlqiNME4\n23EqgVGlGqc/aHFYaYc+mD8wD+9J4GldXA/kiy0YWnbMwt/2VW6NEo2mASpu\nXTTB4Im4yLqau93cqGG42m/Ym3v9O8O1Vpa5YLPFWzJEspWfNdAofoVi5BFf\nJkzfW5LtVBQNr6YIDfMuTQmQAKj/39QgiVaWTcYrolfKcURBiQLkb16W75sv\nHe69WEohEOha/We0WhU1gSZEgdGwCV1I0GOGPuw1jQoSuOHiMyvXaDUm8oci\njq812yVOq7U6vzcumEHsdtESAiuySklNY1ABKJKIwzWsjdQ3QtvyZaRf1AXP\noxmtq3LT1ZcA7W641C7d7PYZ29phng6qDSagW5uXjsZ4iRyQQvzZmEENB0rT\n7Nit\r\n=CjDd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.7cd26af4d.0","@material/theme":"11.0.0-canary.7cd26af4d.0","@material/animation":"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-indicator_11.0.0-canary.7cd26af4d.0_1613145540480_0.2088662849990457","host":"s3://npm-registry-packages"}},"11.0.0-canary.71fe9a067.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.71fe9a067.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"2245e39116fd7fae9cdf29c6fb77e43c2f669fe2","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.71fe9a067.0.tgz","fileCount":38,"integrity":"sha512-sXD6HrDOzS0oUCl5y2Nmnr0dWrME2CRsHD7MvNWzxy5Bc6ZlVgLDXJJtPPYueTS5I88/OV6B5pJT/7pL7qZeiw==","signatures":[{"sig":"MEUCIQDgi5OkKNOXTuxHNX1pIdxmWC5NVibbS0Svn9RajuBiUQIgLEAr6hEFoSERTmVmRtKULz21IbHZUpNIibmCJxYDTOs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJq0kCRA9TVsSAnZWagAASO8QAJCTDIcnhwIC73QIBq4h\nmWA0GQHbYk82mkUOcb8g/ow71rv31+Ba0zwP3LAJ7AXbq6ZBsYcF+ym3I1dr\n4x34nFRNXdYgKryXakwgPyN2k6Nj2nnwXqzTBGmioHe7eajOIFryH/FeYre8\nHU6uo9Q8zbQ4oPI2HQnnCQdxHH3zlIP8HJKZS/pe7USvWMnXStRd+0UHjfYW\n3AFKRDJLYsCq0mITA+LzoqpHHcZLLMlPy7JUFYU1ojL+WUDi6f6eJovH2HRV\nItWlujvY/+hYkbnXz/AH8enz59t6I4pD4m8ri9DGBx1nsf0VynPpt7pM8aJJ\nV1FIBAhb9GFe/8jPJdoNOM3vQxFsGhsGIuFVzt2tah6Xov8c3EzUKOz/mgVe\nwqny2vk6ez3Ohs4Zqvnw+apHNZiyuwcx9zq9D7ElQrHxKrd/pAmpGu/VG7wj\nwg6SBZ2NoM7TvC/Z4SQnYGnBwGIMrWHmLHUQ6ja9EFP7aSeR79A6Ffd125je\nMkJcVrml6EZaSAXzfECt6OL2hmo7P04wvhJcF0lPDd+NLdXz6rzAR/+iyUQX\nXgV/jeXLw1cvhvdWVlgs4TC6cHm5SrpOF31tzXwyOYXFlEbE2omUWvrdMgSn\nvGRwNBzB+AOex3M34VDXtRRSaAcHBwQi+ocd+FIHD6Fmo8J5092WG5cbKJoi\n/CO2\r\n=FMJH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.71fe9a067.0","@material/theme":"11.0.0-canary.71fe9a067.0","@material/animation":"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-indicator_11.0.0-canary.71fe9a067.0_1613147427324_0.623318148045966","host":"s3://npm-registry-packages"}},"11.0.0-canary.0fd56a86b.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.0fd56a86b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"73b0cd666ac1a27931717d06fe9ec1ded46713ce","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.0fd56a86b.0.tgz","fileCount":38,"integrity":"sha512-KpkmgH1PVhNbPGLGQNuACP9L6HNhTCzsKLw6H2XO7uGh38i3CQQFNLZhrPaxkncXALh8SZKr+d4uJYxhBOotjg==","signatures":[{"sig":"MEQCIFjY0OcNjhob48LdCpeEtiTITUciC1q6Xwz0Gh3ZhQ8nAiBCskbTB9OlS8rzhjGJ8wIZib0OE542qdCVJVohsmeQjw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJxkqCRA9TVsSAnZWagAAX5wQAIsDWCluDWdFQoS0+Yk6\nudAKnKugpp8D8UldNSxm3IvCekqkrVRhieIZB9FnPi0OaMM9dbcn/5kA67jA\nSGoIDuf+FrJ/3ykx/LLFPMf7DLh36NM2bhVfzKh5GWop8ic19WaP9vDXSc2o\n0Q20eISiR90S1RAWcsWGkPYguY91l8bWlt1+7xdJKsZFt4xyiiq/u5JcMc3V\nCnLppl5k74WWoGtdnpjmHatlkaMjGevwEOizXpr1X4O+KBWj0XzBa2sYlT0h\n2jq9Bux9/vxdVGhSVpH+Gcar+Cz4pyIMzsoYdArpg8WjEu/OvYpB665By0FK\nUaWmtI6w89xe4UXSoxd5IM0L+U+Z1SvmnPblydxrbvzO7fdISdfs6UN4fpy3\nalVJx8V1RPpVAWECpXyN1QJFD1RnYA8WHyxCs9LHv2R6cwOL2R6VKioUdgRc\nsBH6DmsOcpvOKfNvjak37jd5quFeqnUiLkow9u8TIbfeMY83rcqfYDvBnfbV\n92PGQ1oIcV78RpRGpx/TdlGVXcrhR93UyqDfX+OXKnECk/df02QLv+cFCm4l\nFMBh/qzOztch2OSwWuZDiGMIDN3Fpc0K3ht1U6t8iutMfGuUU1hw2HZqOhoR\naljImaxRT1uCRJR4tCRi3bhevHEkd4o+TJUitZEcwFCI1nqqGHUsD60S8k1I\njqlE\r\n=QKS2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.0fd56a86b.0","@material/theme":"11.0.0-canary.0fd56a86b.0","@material/animation":"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-indicator_11.0.0-canary.0fd56a86b.0_1613175081571_0.8234563202506737","host":"s3://npm-registry-packages"}},"11.0.0-canary.f19bbc4af.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.f19bbc4af.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"2c5682f961518170de94f507753c13740cbca6db","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.f19bbc4af.0.tgz","fileCount":38,"integrity":"sha512-r3U1Rzp8NruZj6jOsiqtwt99sodowJciE22X+ZreHK67vKOlOWXttQucZVjrz0qicQOtuLLiTJK9jBm82iQEKg==","signatures":[{"sig":"MEYCIQDNRycFVEmxug9Sdx0TgoT8UasAYvSc+XtP47jK33z/XgIhALxikcMziE+fZzYEWOSqNTGuleD7bgq0C+BOJcfbR/GT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLEQSCRA9TVsSAnZWagAAN7sP/1UM3RRe2+oFr1Pq5tjj\n3SxF8EtVvMV5Hc/Fi2Z885ZPkHQtujr9gXJHqsqtuspmd+pjH8nk5NrwVs1U\ncwoqKAFOT0nEXd+GM0GR5Ql+846oOb+nk/TrYQSMTsEkp4CurTvFDRETSN48\nyYdDLkQQJRW4raB+2npfyaCDQ+90EepQmxU5BNP5tob8G22VcU5RYyqvg6sT\nK38lRtvlerO+hqZBQdV/giwkFqcHSucJW3sNMWVxqBGJrZIKJpKTZ5GrzPKu\noPHM/GJYTDYfL+Zcoq8th22rY+ZqSnb+SygdzO8dRbRPQTWDfR1TKEajF3y7\ny3cXfI9eMtzyZfU1NegmbZZb8VdLYHR8hk5DadhsWM0eC+tpPe5Z+EJ7I0nL\nFDuVea1ke86GYfTyEDdo6lpT0o45XSe/MsQenNDk89cZMzWDcGGiSCGcmeqT\nUBKf08hR1B8pmXDGLjWoSp/TblrYBlfCJ6/M35S6EYWvJ9N4OesfkQo/z4pt\nRh4xlG79ws2LS+im60SWe/pE+9DxxXZDHprHI2M5WHBbl/f1c1pwDCWjZqkh\nZkX74pcbzfm0/H3dPm2WHi0BHII4omnf9u7MsA2fkvW5KtVWsRTrD8jpQBBP\nmeExifDZPSZtAnxAT9gI9z6t7NCgehmdMLJ2BGU90DKiV1++Vbnn3r/VpkHZ\nFJY5\r\n=jyU8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.f19bbc4af.0","@material/theme":"11.0.0-canary.f19bbc4af.0","@material/animation":"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-indicator_11.0.0-canary.f19bbc4af.0_1613513746261_0.5533178031892005","host":"s3://npm-registry-packages"}},"11.0.0-canary.f9cac96cc.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.f9cac96cc.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"690320ab2aeca0d62fe67457390a226b62344beb","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.f9cac96cc.0.tgz","fileCount":38,"integrity":"sha512-z2UvRE9VkYQZKmQYopHSbycZZzEo2y12CuB80MJqK88dQ5PNkNoPUuMR33VImrr8ZBWZQAcYXUrmyCuQCovJnA==","signatures":[{"sig":"MEUCIQCYrjp3T6jqvUpzOj/lSJ6w+rzPhKzYpiwAuaBripxBbAIgAp4+yXa9BG9Glcm3B2WaBk+piyy6jvloqFleI7RklMw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLT+2CRA9TVsSAnZWagAAdvIQAJrkMg4zZrE/kUFjJzT8\nmwgazeoqmBA9t7P9SyVSWL9xf1PfksMlIZv6Z4fcJw+BEk97tZLw0PYWn/Ks\nrz10Cehb8EF/HglouESCfOMbbN4Y7Wy8sucHTcOCRPBFNYsSeOU9gRSInOQ/\nt9AQzHKodnJLS2JS38qT60xQ6wI400LOyRvZEoDwxNQEx/BWS/UJ3hB7gnTx\n3HfuaxQVVz2jefqYTdVSmWr0d1C55tWU8SyywT23p0G1FAJmCKQEuDwcenG/\nMySc9KDjG1p2Yw2JKn4+0vE47FhuKQXnek+KmxQzlypTTj6x5yiADmDcrwVf\nKx5omu6/pSOx01C5TvbR0bvRgLM1VzTptYuPcFpFgUF82vSw9UuKM9LpKVMe\n9pXkBCo/Mpszmxv1EeB3xwkpEzk8+8ObKhgcGB+28aPwm4ckefDZk2fo0XL5\nQHdiS8dtqX8XkCF6aGh1hiX1gWqiQpzihPSzaEJDxXA+UIvrCDbObGx3ApwA\ngoUO7NCt6v/brClmgsiSOIUPSZ2+eAezQzgIv1hw+RgslJICLNfwl7t5vsWl\nlp1lNwoBAjqxRFwxsk4VHwZmKea7gTEI+QukmST8esu3TDDaiv+3rJnUeY6p\nhJ4ij0Q0HISfVRBQWzechQsMLcsjXWC49YRzOtZTHFVP+F107JysBpB3LGnT\nNvSu\r\n=XGr3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.f9cac96cc.0","@material/theme":"11.0.0-canary.f9cac96cc.0","@material/animation":"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-indicator_11.0.0-canary.f9cac96cc.0_1613578165943_0.44970683498039254","host":"s3://npm-registry-packages"}},"11.0.0-canary.79ce0878b.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.79ce0878b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"526b2bbc7263767c5335e64ca2570770b1e7759d","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.79ce0878b.0.tgz","fileCount":38,"integrity":"sha512-suINeu6KakJBbwus2+BmU5MyJ2DhFQYjzztZj9A/CqNhC3KqGlnUfsBcVTG24vutv/wkXVoJSGE29CBycQ48Yw==","signatures":[{"sig":"MEYCIQDV9S7ZYYYNd+itAYW03OSqxKw6+gLpnNjp/NUDVXoXMQIhAN6MgWHbItLabgxy27YIQuXtsHc3io07dusWkt5wmZRV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLW17CRA9TVsSAnZWagAAjNUP/jF0vhrvKq/Zw3eGNXPs\n7Xw8wCysT5qEY1GJqJ2urnUR7TwEa53ADfCt7VMbQVIrp8gDUMZTYw5RM0AM\nKk/bCyrOeqcjhYEpkB4UpWeOArWKrIGyeiLCmkbijeXYkbnN1SqMWg5s4VpK\nYKPCjxIOqbg/v4uAPIhetX7e41q7cbwgu2hPFdT4u5ghkncKYIH0yMURG6Pz\nA8UvBIcGIafnOSU3mNxd1IPvPMNjUG3CFLI+mhqeQ+Q/8uPfXwGr7O6iX3tc\nsaL1C+SFfUeuVUVpcoXRLXVwDFUfOl9XMySeY3ImF9UKgWKtxMTxlyNFs24E\nBwRWxW+DpE00SeKbUTuw5AufSN1mrubTzWLd1gRqIbj+Zc3b7F0ecrY1z2I/\nSoDlnXMrRst97lmgbvZjvOk6q1qycnu8kq4Fk0S3hDzAiZIZNKWNpGmEYp5c\na4c6iuPGutDaNBcPlLaqT/bJd4molDAM91ehOAJfEc6l/Sclyrlkz0+8KBQt\n9FGr92UflxJGZMzRcrvfwGfmLkxOBYBs0OOZYtCNbLRBCbfVQ+eYR8on12Cr\nf9ZDtlGG75SJvlRReWMN3PB7SsAP4o+mwesxMDlNxFy3I//64HnNU2sSy3Xk\n/YJfPusboyP4aaR4AsSnWcnInQdtAzQgaelVI8UwutQYFIBXYzq7qWM/yuK/\n30H6\r\n=qBfz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.79ce0878b.0","@material/theme":"11.0.0-canary.79ce0878b.0","@material/animation":"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-indicator_11.0.0-canary.79ce0878b.0_1613589882815_0.9223094128580038","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6e507b5b.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.d6e507b5b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"117e5ffef24bf6136636ffc1cc75e5f19e9b49eb","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.d6e507b5b.0.tgz","fileCount":38,"integrity":"sha512-ew3sRTWCdExlixLXKfST14vdxP49vabZNgZIQ6leucLHTsZcvXO8Uib4HFBIVX++8XefsYXjKTKWv3UDRYnzyw==","signatures":[{"sig":"MEQCIGl1xALyLY2bE8MuBajJN9F07XS4ioJTLF2qNFNsHl+rAiAyHBcAA0BKb5dA2t9MVOi6gkg+R3vT6uRdCLeGGyXpXg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLXU6CRA9TVsSAnZWagAApuUP/1sroHLcsMtKCJrAq8Hr\nPPLj4FHBaynQF2Pz+f5jk4D/tly6p0Uq0DKdBpbvZ2mbi+AhxF3hnf+yrLCi\n9hw1tISo/lX/N0g8cqZWh7zk7VJE2s1eUa0RVvNlV9c0nsTAJ3u5zGFITHGg\n9qnXG8LU7NJaVNjO5fcgx5sxxjS5no50h5NlmfRwg30J4sNmTdRMZLOtQnEb\n1b2CwAMwZuHmOylxsFl/3bZWT+nZZ2ptROXkTj2CNiATdl2DD/edq30f3QwR\n/pY38yTREFObwPlja8gBEv4mdlknAS2Fk6LktJu71XWGACVZ8Js8gVjFgTvL\ntzFTn0S/lL5xIxkdUth5a7Ygmm0eqlT+TlOnqLCdvxoGjsEW/aqjmggFK8I6\ne2imMsSO85xs6h+NB+SrJ3vR0z3gONucCEY7FVJj7Os919aVd0IZLyJB3vP5\nHcgxcIRO+b+zsCT/VHACcY4ATti0+DPEuFaX46h3bUYepm9itO4lOmMx3j0x\ndJNBfNt2hX+PhX5a2syVALMjIsbUzqPOWbdNeq0WAZgoKIQMqfRBSAlMKhUt\nCEcxfYH8duBtcIv6/Dz8bsDK2sXmP7Jv7n150Fov5KaanSjSIFkbmgeQGpad\n/RaeUcvAwN63mFDht9nQjW52z8iYKJJnhYq3C6xdsiEvwF37c5wPn4HFGbEz\nG8Xv\r\n=YI2T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.d6e507b5b.0","@material/theme":"11.0.0-canary.d6e507b5b.0","@material/animation":"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-indicator_11.0.0-canary.d6e507b5b.0_1613591866155_0.5149595569039924","host":"s3://npm-registry-packages"}},"11.0.0-canary.f2658381b.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.f2658381b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"9633be42bdad3601234150e78d16d3a65b0e1c70","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.f2658381b.0.tgz","fileCount":38,"integrity":"sha512-EpGrSmyRGTO5V0L5zxggSaLbSW3veDu+wgFXwPp/C7GRK4EGfvJ3D2ht7GhdXcwnnr6y6ROemNffFE5DBk/Sjw==","signatures":[{"sig":"MEYCIQD/WMk1UetLzzPnz3LwRnFSqQA0VKA68Z/CIb5OGmjI0gIhAOmVslXkbvbrIt6MTFcEwNV4cVayy8Hcv2YG2//vV2Ph","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLZxECRA9TVsSAnZWagAAFOsQAImJ2LzIpAXRkJWAhY6U\nw8aM8DeE+RYERxSzxu+ypCu52kNLtuvcVkvyOGLy3VgAS9RkvJTyVWI3G99W\neZrOzUJFQS74j238FDAdlt6TNYTRIayr6iCgCHQ1MadceT5q/T/4shxO0zas\n9G56RqxqGA3Hf3WggJspG6X2FSfQPWqQiDXVGgRYkf48r93tA0MSAM+KfVpL\n/+TNcXnELGfpvX7dRUaeqYtcDF3xnGe/4mzAcpXFirFVbBVJ+Ox8nzBpMN1d\njo4mWXSx5Nu1wO3Adzgyoht4jn8oceYtMF2J4xxlmCGYb6rD0JE3TVFyz40E\nqNFx5O10YOyTnUaOKL3VtkGj1We2JesFK5uVEYzLgicoiqQ5nr0QtLsPLCnp\nPJsDHZpTiH6jM7zhkQDznDh3a+SgVWUqdhnGu4m80Y9imzDl2LKcvJG2AVBU\nqaXFVMEBqFsIUs1hg1KDQz6BDeqjeEI2udfXuUU+cLI0rBi5GsNtCNF7fTBR\n5QZZHPKyNikY69Sumc8sov5wJ9dmhqCRgXgnW9tO7HEyoh2vCNBQZQu12r0i\ngzeDbIwvjoTBtBDrr9WqG69x9uPqunu8lgkSVM1zk1r4zU92RGhmpVGCfgK7\n2ON/D+AF7eH/hfsKCMHLvdE6nql5GIbk1IgZSjmw3a6wT5+CxR/rnqYGTcEG\nGCgE\r\n=Gbuz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.f2658381b.0","@material/theme":"11.0.0-canary.f2658381b.0","@material/animation":"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-indicator_11.0.0-canary.f2658381b.0_1613601859895_0.8203692472845077","host":"s3://npm-registry-packages"}},"11.0.0-canary.97c4d4035.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.97c4d4035.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"a76026a4a0d1d9d74d3b8b7291f1745ff9f1d9d8","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.97c4d4035.0.tgz","fileCount":38,"integrity":"sha512-SmMpWlKGHaG7Y+9dP/K8Ck3IqyDDi04vCO+BYtXsNgHLyesEBsof+ggGhYVk7BwTNT2trxG09/GW777MQutq+g==","signatures":[{"sig":"MEYCIQCczx6XyzgAp9zLhqzY1M9AhS6PK3ME77RAXNrypfbnigIhAOT0mQQbgEy33HQ+Vsn79mwkY4iV7/U9a9XBZRHXT9SW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLdJCCRA9TVsSAnZWagAAowMP/j1pM8/qarLp5qvWp666\nr3lylXnCRJJRmzEz1oSQ3Y9FgiwnDZZL3rhGtWV2zbjTIxLlU1rcu88KbupJ\nTaMxRKv5+lZQmB1AZZ2D7FU4QQwFjE5CacuxU28GrizibF6UUas2ATOgKsE0\n+fpg9Hgj32glI8Zdvfvnzd4+ZBl06TGCu5ZkSU+F0ukIn2d8Ch/j+15kuEPq\nX5IELOd62tLmquYoWMUx9M6UNDJ2fKJB7k6sJdZgUwQuvKbciI9HnZepdJ6z\nIH0OF6oyRcnof9x/KYLOs7W9xd3X1+P8wOhp+Y9G4/oO+ppXXr7CgtiRbupj\nD9bUQ55yHG4qtPaFOQR8RUUW3nbcjySfH33XL7Z52O8vmwczqyWLZ0gf3nZe\n2Yq9TpGxQpTf8FpekhAZZ3zy3fVDUx/anoebHxVdkArufsjf638NZ9mqISuB\n6LeP+xsDpCodP3AF0EJ1M63QiTJ945bX8mxj1GNIlRx2boekdmyvQx+SmJmi\nEhSyYa4U6KduxXCJkua1YniVIDLrWlziVDBe4vuLDWBGq3QKDoG+YVc6/xK5\ng7DmBnYdA68c6SaU3Gh7uRVu9HGBAj4oh5HHlO1Rv3T4XcGcPi6LVddTxLY+\nmMBvBBs+2Y1QrW6pY7A1oD3fX268EKAyFvT6rM6YuK2dp+5NkedBwYSKeGAS\nCSiK\r\n=dYL3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.97c4d4035.0","@material/theme":"11.0.0-canary.97c4d4035.0","@material/animation":"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-indicator_11.0.0-canary.97c4d4035.0_1613615681440_0.7488594896348306","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5bb4648c.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.f5bb4648c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"cc1a8ec30978b50117ed4d02b08fa6134fd9459d","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.f5bb4648c.0.tgz","fileCount":38,"integrity":"sha512-oGxLrwL2KiYzlb2oKOxeA40jnhYlW2IDndXp9VlethbquKO3JWNJiGih3GtQUYA7HtS2D+WC5HubjRSfti8npA==","signatures":[{"sig":"MEUCIQDXGLJ3V65bDeQ5DljSOaZHBK4dIDspAh8wpHK2xPONMwIgHMRr33bHLSjDpbuD3n6AYr/s72eCOmCLDBLoeeHByio=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLpAgCRA9TVsSAnZWagAAxf8QAJRpRUrtSWctBF8IijJ9\naPykqHqbazIYGDKjvTffEuE8VMItNmCl9VBKatG8j0Z37VhDxc/WRV3E5nUR\n1cyRO5w8WzyLHFyA3a1V/s5j5FgGQJlb1uH/AFkH3RSg264sCZmDtuX8nYmZ\np8xyIaU3Kv7HKg483K66qpTT8K1FAf2kk+flAI8YZjcBvegUkcPiTevEeebJ\n5ojMUvhNTOECRcQkAYAlJV4aEmHcQtWnGmDBcgGrmwzMBol48GEvMb6jmimn\n5dozLi98KZ644wOgRd4oHJfyzg5Yt0t5mOV6uWAxLKGIiTkSRkS5/rbIYRCm\nU11LnzS/uj8Puo+8Q2zuTNqHbyCzIo4639Q9DF0endycLTKOZAMngOOXYsWf\nO6bDwmyBXrQKhH/82E7VVvLnsVmq5+17wvlyFCqrchyKnb0HKvtvmtcbf2zk\nT0JIT861XekBcUoR4ewBWJbUXILAfsXk0vlSjx5/Yg4YiYzY9S8MZhrYV5wD\n9CJgqboxTyxn17H3RkCz4hFsVN3MPswVcWJhBBv/vzbx9hIpll0MenMz4eJ9\nr5M4C96Npd4j+5C5vAg7sUtXgxixU4zyTX3oA0+aowL6ZwyiBu2Phpp2NFkg\n6pphN4UxH00gO4QXkX36bn4gQMbXzRS/mVcWzZrbrYRyDKVN0ld+K9ImtMMi\ni5cS\r\n=CIfg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.f5bb4648c.0","@material/theme":"11.0.0-canary.f5bb4648c.0","@material/animation":"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-indicator_11.0.0-canary.f5bb4648c.0_1613664288042_0.7102656556895843","host":"s3://npm-registry-packages"}},"11.0.0-canary.302c7a960.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.302c7a960.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e2ef1e933f076fc684dd0a0a7dd9d6a4554cb4f2","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.302c7a960.0.tgz","fileCount":38,"integrity":"sha512-FhUD8O6DR6dydHYFGtvGbaGgDL5ZS0wqeE0wXXyY4N1yjhLOm+M6jMN1zhDbFGeqj7PpHoKbup7bPHGdyAlZYA==","signatures":[{"sig":"MEUCIQDH4SuQ04VEbTYq2PqXYsRNjoeHsnDE78uVBXPKmZiXqAIgGlJVe+2b2Qu4QAcdQA4n89yCZxyiQCsjvAmEj79/UYI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLrPZCRA9TVsSAnZWagAALmYP/2spuSLUCUlE7U9wON/u\n5MMQSRv4zB4JavRzXiBTVpV+buQw0O3qyknano8z3MIfeRaQJgAjOAC44w1/\nJcg9srd9FjnIvvTfekeagYnaTYrK2kG8AdqVe6ewVAKYfCAATIQdDZ2Dd07+\n5CnmAcWQ9jzsD/n+TJ5UZyi7JSUEtH+T99K08+bNoCPQgwu+JU1n/o6ozomd\neRcKtYjrtY6zERf/lC+iR5xfLMMaciWFL4kOFGVUqGtpjJik25DYnxLuvV/9\n1yyoJb6Ls/T+LJR2Yqy6QEaKutg519Jwz4/oZ6lJ7Is+myJfnmyy80PlhTLA\nD7yQ2DkKpN1yehEJvB0MLijvZTCZ29Opevh5xVZxzAWnapBlot1NUNP9ARb9\nbTAdjiGASEBGGU0tVvpHPLZ118agoNa8l9QZqU0pDZp3+LjFdBMWMuJo6hIP\n7aklahS4fjXVS8ErWoVIYEYP5CT1yBYGyg6e/uUcpck+6b05FbFW7V6SQVe2\nu4jQViFacpfqxnpLjaUSWB1sXrAO5Pb0bp0t8XP+B4CrlVp0ec48RZYpwuaz\n1NF/yWck2CZnS7SSy9sGh7K6XZXxDx86O77dackg57CfLRfhPf8t2QaXtO8Y\neUnLjdQa7NkZ5mwa/WfCK/GKLvS8bQbFgCfSytTTikykzQyVPnuHOug5fMen\nBYW4\r\n=4im4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.302c7a960.0","@material/theme":"11.0.0-canary.302c7a960.0","@material/animation":"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-indicator_11.0.0-canary.302c7a960.0_1613673433116_0.8674207060818975","host":"s3://npm-registry-packages"}},"11.0.0-canary.aa0aaf026.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.aa0aaf026.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"23262212b869b2e76e52017c52f7c7c60eff5327","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.aa0aaf026.0.tgz","fileCount":38,"integrity":"sha512-wW3LaQMeGder7+4DYBdQB6pvhwL5tHyD24E45Vfq/Xt6LhBpUkQ5wFqHDTJcb2be0nS+5LH91rvkXyLC/gTcxA==","signatures":[{"sig":"MEQCIEslnAts0oqU7qhzjJ7MRf6BVGTGbXYntdqlyS6gPGW7AiA3prrtml/185/BsFDHrlpI7lGYBSRNbUVjSrcSltHofA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLr6LCRA9TVsSAnZWagAAa08QAKOCgHQp/HxBHe0RaZof\nfdIenZBUX+v4JaDGjniHF438jfvBLt4kiwp2pcmyjXVEth54je53ZWEW9KrQ\n3Yoxan9ptu1EJ1GpMrvkWEjQsLBSd3QLnvLiybGxyXtn1k/5Gd9BUZvOoq9M\nW9QvK0RgzMFETLLqLFXz0roHTfms3GSqwoSGM3CeiqjWRR3Vfo7JMLJiZCzZ\n2MoGqFdIngJFSl9esaeLlcPP+UcO6tdpFxYqIPtBzzmzL1K6WsoGelkau0iA\nIqfEREehSp386kh4c892aGSxjsHY9b34xq6LBtnN4dqhGbaEb39R5oENiDh8\nBWchiM6P4/Km4SzEN0fiSZ9ppUuX5P99Rc2jVvzdyMs+ctVQsNVNgYpoSmoT\n86KvXmZSrzjD7XPvtxgAPzhLWMWHhkw+6dkwG71nqRUgRIRlGnHaIlVTfCux\nufAwox8WRMjFe6INUT4cnJ7b/8jP5QKSGZtSPagQhrXvHaB//vb7PaJo448C\nTebZ6i6ERYYxKzRHoQDLtPTPQqdD1mYer7Dp7wwqSgz3DYWECfFG7srrTv/E\n2XSwg4BCXmNCRCXnmmWGngdF7XwnXyOljYmOINpjmBVzCGjUCZSpYEa1ushY\n19c/oySsqYtF1+x4Bli4Avj8pl+bjvjGAzwZWQ12Ktrvhg17A7uZacBjtLh0\ntnp0\r\n=pvub\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.aa0aaf026.0","@material/theme":"11.0.0-canary.aa0aaf026.0","@material/animation":"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-indicator_11.0.0-canary.aa0aaf026.0_1613676170695_0.9020194627428455","host":"s3://npm-registry-packages"}},"11.0.0-canary.07ff0c452.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.07ff0c452.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"a1d171629fed1cefa8216bbf8b2e1476f16d847f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.07ff0c452.0.tgz","fileCount":38,"integrity":"sha512-2kdsXVRHnxEg+LCykU/mxEbfEPzspo40AfoS/5aQc/QgL7SkYg5e53l+ZCTq0Fgs/JBWjq+AYSxE+A2VoQtRWA==","signatures":[{"sig":"MEUCIQCFP4h2vT4YqteEYrzAOihWx+thVjBYA294dZILdOdDGwIgTSYlZpFl3xzSppPa8YA0fATJscActWCuYn5DMa2515I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLsMRCRA9TVsSAnZWagAAPicP/18MzyMXALT+6kSkUThB\nKQyrzd2vzccIkqmY/Nzcazp8MGYv7bqePYinitPDQ8fogy3q1yGsKsNZ8q6G\nJRCSzxXUKAXvdWMeDkbvMM26WiiRTJDD9CwCwfwkWtBbeE3ZHnwsa/obgCgr\nKZrkQdDT7Q0/aOUp77mtyxNGGC2QgxkDXKOCzTaJ0EewzehWbdls0bVm7CK4\n6zEDZIv5tV4xfEtxyIdQckeI/4sV07DrK6/ZeMPdudK7cERf7zHF4mX2myEQ\n1JLktwZfR6NaB8ltKD+rHEuRUl44ZtiKea4YhYpyMeIQ1dMnfFelK+NsI8cc\nDSmk5o09zV7R/B24dvH64UKKApdo3zu3UvK66moVtBoYPTv6AnghDZ8135WL\nrrb77XJ9+Gwf6QrlrUjjuMqV61Yck/JkXRA+6f1wpIq+EZmfwCPZK3+KCJib\njq4W3hK20DUJ8EJfWnRf15K+L4biP1OO6qmOoELlKYutX9mt7QKz1HnzdxaC\nHYKdQ9WSRe57o7qh6+tAdVwf9cy+9bbRfscvpozY6HEPDQQhbzTL830bcNY8\nCxVMIzrLybsGgpXEWy4/7UnAmwSEWAcxwk9jOQBvu2X6OUTGj7barNShzHGs\nMLCZdISmixznV11C8gaWSABNRu4DvkSpmPvXcBuN3vdVhSm5ewHO3Tt8YeI4\najQS\r\n=HnIT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.07ff0c452.0","@material/theme":"11.0.0-canary.07ff0c452.0","@material/animation":"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-indicator_11.0.0-canary.07ff0c452.0_1613677328760_0.04961810691555257","host":"s3://npm-registry-packages"}},"11.0.0-canary.bed7ecd3e.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.bed7ecd3e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"76614af370c48bfa5506feaeef94651b95ff3e7e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.bed7ecd3e.0.tgz","fileCount":38,"integrity":"sha512-Bqew0fJ++bmN9xVbpgrB4bGWraT0UWesiYj15s/+6e3HWaDCAUDxolVOBc+Ym2u2dPXNVfh7yb7MNIZJf9b5nQ==","signatures":[{"sig":"MEYCIQCSBARpcidGYM7GCjq/7/TnOQFXJ34pwOZjpMEzXCfB2AIhAIeuCJXFGtIz9QhopRDXSio7dk5QUu2nzroutUSDDRBh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLvfQCRA9TVsSAnZWagAATgAQAIPa1BJj8HgGFtruxqu6\nWc9ouKPClsedGYXcRpclabrOQUEaEUBYE/9KaYmTVFWbrcn/lRrXzln7fB1o\nJBqgr8rCLT+1Xy1EvkfbkI+3SonCguoO5VIiPJf0sVXeqMUnr27FcdpfzZ8M\nnv0ffzZSaxGUv+0kkZd4ZIRTCJxS0DpbNvkYZWUnZsaOY9umNVVys7CNy1IF\nzkjFzN/OWdMO7s9cRNuiHAzslzGWGGhoxuIgOfnIgfHynOFOOLRmc5ldlRKj\nSZFv3DGkP1E/P1B8Kt/8fS8Ipo+LYnXfqRtl2LCAxwBFDlBNuHLj0aBsq7Y4\n5kyeIQbTbth541NipzPWJgghbxBX8auYf4OzMEA7PoITKe7Tz2DWkYIWlAyj\n8de/Ng6UuTo0SADYBLQbFD9nmSujPIYrYEUoHw3naYu4LHhifsw/LvHRZEot\n9f2nU3tnBOIUsPmJ+XHsXOrfGi4RV2aLOiV6cH+zZtikZYG0uCDPpdO4hq8V\nXkOzJbC3EiQDBEyOss2JwFpqydS99KBbqcSlLCorkIE/s6iNIcmcNvXldkGZ\nP0j62uyFhUfBlwDdKnIOB37ULCXeSYDrWp1kbvq8Q77C310Dp1tSdjLmiIsB\nys8wLP1hxyvKJItIfuJ7vB9peq4AIjSIbmT3yYyc5c5vvVgj30ar5gHNDRPI\nvMwo\r\n=TiXE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.bed7ecd3e.0","@material/theme":"11.0.0-canary.bed7ecd3e.0","@material/animation":"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-indicator_11.0.0-canary.bed7ecd3e.0_1613690831904_0.5091197572719428","host":"s3://npm-registry-packages"}},"11.0.0-canary.06dead2d6.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.06dead2d6.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"b19a40217dd23a2b4160bbedd7ea7f1487cf1cc4","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.06dead2d6.0.tgz","fileCount":38,"integrity":"sha512-+r0RAMt0jiWZl268GuTBGR8xgLbgagEZ8bM7X2wSnn/i/0VLqgx1ck1GWf/+tDkVezBwsNpGBQ0ukTRz8m0LOg==","signatures":[{"sig":"MEQCICiQcJ+zqA7JsOjXCMCkWcMBYhJmb6uQl/j7YjXdUL8/AiBCjQwh27UnVWMqu4gjwQmiL+2Z6OIbyWGccbAGMMcCAQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLwgPCRA9TVsSAnZWagAADvkQAI2X/EK+cxbUONaWibvB\nA8FkQiT+iQMRDsHNqMAcE/ueihKx9w+BTWwEhZShAXdVllbdcYyUlKNgk1eW\nxeQ+i/sxsThPqat0epgaHb/0l95Xs9Kea2H/aabn1gyqt6S5rg3o4CrTvoGg\nzEqAOgClKpsePVMi2Y957rB4kyrnx5PJYG7vbVoMBMGjc5qg+yzDtL6iC+T1\n0MGa4kmVMtXDHryZ56O/XhvM5TWFBe9Sre5ktRvXHdS8NXdbCqTgoaOTO/rG\nKz52b1F30Erh9dM27tCrMyYD7AjvheRvgnVnVPYdCSUWM6B57dqnV7sDc4Wv\nucfv8hoNM3NmCqXoNIjmjpWp78gIDJG4H/2DslLdT4NOlYCyvZTpluWKLGmL\nHoQwsLl1tBSBg/Woy9N6Wmx1tha3AGqiGTHtp6FmYhvDQdMwPlulwpsF6g4y\nV+L8oZSH4uWCNxjQl9Loy8x7GekSM4OLVbi6QZZp5IgE5fSPD+7dqZWceKAW\nAxtVuyDOfHl5UTFy1Q9arcZovZ+RWY4TZgGEk/ahTSfXlP0SAm0tdx1dMBW1\nfih0Qm936pqLoQi5f1086hf/CktAQmGD48CUQeeyaqVMyjDbXLh8mZYf6tD1\nIZXY2O+NdwpNHmMDGL80QHPALxTqXRgYOkdYwYe1oV1xsVYUGBcL8u+xPcHr\nKLAt\r\n=zjEt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.06dead2d6.0","@material/theme":"11.0.0-canary.06dead2d6.0","@material/animation":"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-indicator_11.0.0-canary.06dead2d6.0_1613694991302_0.3256444915517367","host":"s3://npm-registry-packages"}},"11.0.0-canary.cddb03553.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.cddb03553.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"961f5dc80d760caa8f972ce09a9e3c89d9383c33","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.cddb03553.0.tgz","fileCount":38,"integrity":"sha512-5208Q7AwAQMTOo2ZKXshLl4R4jjhZ1TWF3ggTRft2SU2c9kAQCWx/CuBgLwWe3aZv7tJbUokAZHATxU/rdrgCQ==","signatures":[{"sig":"MEUCIANE5PSRAEDUYeiA9SYWLtlyAJZayfR0ATm247Z725zHAiEA1KTYUFePhsHZEL52WHZfdjN51soO2Lfp5eCupkh+R+I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLyyzCRA9TVsSAnZWagAAR5IP/1Y7B9m+UXYdxV/AEsh+\nCO5E79rccQHVsANVjqeDHC/aRh/EX68h4DvOl3JmXpWXf4Jr1o4ooNixIksC\n4aRLsLmFZ+jWCT+v4J1nY1BHrKTBS6UkK8JTg4Q1opDlJa3T1+BLVFv0wN5V\nc50pvWOtyqXHbkuogpL6qOJ64OXO+FqMkMP+cjDyku5y2O6rgssdirLctUP3\nNVJZo1eLnpXpjIItvCH87SMTOuVXZwSXl9kLQLEecqEZWW4CYVxvhei9pTYm\novxZOrUDK7KM24ji9aH//hsvleeIxpikmUZkiUlRsPQOIi7B0coZB9TChte9\nBZ5TZ8Naryc0vkG0VPuE2WQMUwQgoKl7N0lMHdLL9EwSakJCLjqT4xv57pOu\nuh0BlBVOJnFrx3z7M4aBhh1U9sMy7TZI6PcWdDfJkFy72d4sUEyu4aERyYyI\nj/jVKF2O+zaGJ6Qy9F9+Zh8inihbWyU0czpB/zYVIosbRnTeGKwXHWoRV5I9\nRrIaOc0b75xPhgDBGczZpBWB9LkblHy0atiOWkfwBE8Ug4Y71iaz7KWRjW8E\nw4Fbz/Bg+3Aa1PUng26B5kKCSHvlOuwEsNhuvF2slKBEUOqjU6YVZHQp0cHH\n2/TmOFbUpHm/4OpLK5PmJgxXf6yIH9uLR+0NzOnayjp4wtua48AHNPTsuPfP\nnfNo\r\n=fCPn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.cddb03553.0","@material/theme":"11.0.0-canary.cddb03553.0","@material/animation":"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-indicator_11.0.0-canary.cddb03553.0_1613704370698_0.24681163688788255","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6d8d0476.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.d6d8d0476.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ddca44bd2f1361008d4b180d49553397311ab96c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.d6d8d0476.0.tgz","fileCount":38,"integrity":"sha512-I3A5/PWEaWgFwPTiq8Xe/1u56UwXZsus8qzsZRZW60uBNC7KyyW9QqSxf9Tkp0xZNIgYimN2Rqo4bUZ+Zf93cA==","signatures":[{"sig":"MEQCIE/4jAsMBeGCMO7pwixiyTRMUaGSAo2e13cZ09/9vVcLAiA+jMnwtc+xRbLNvwXiMT63MuNxPR8aCuilYG3Kdr6oFQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgL05JCRA9TVsSAnZWagAAnEUQAKA0oGz8UZkGFGOycR1C\nvQnOQZDiK/tRmODOYp6aLlVLbDhJP19Rg//ayiK4cr6ElKXptuUDbNQWx3Yk\nCdGj/tRip6dqO96K7rBDk+11dJ82ffBd1AFpYfsUuuQVTqyXNhGEKkl1hB4r\nwuQSBV7LzVhPKe0xMWez600A6swG4AU0uS0TAqd+rIWq8nbHBUtdut3pPpnP\nrR3IYp9xxtsONABp+uNK+nwnvYAyQSbfqXOi1DuJSIJ0awwWnTahYm1e9uuD\nWrtO83EjdKSHvxABqqHVL09TGBi1+Tjstn56nipY2EjJTtRyPdA9XIxMjXDM\nJoX/S/K2KE40RgIJJbI6TJss3iDDit5G8PK8+zGxb+G+dTMy+r7HccggnF1E\n3hCBZKqUDF6GP9EBIOSl6ADsgwgPTWJcZmRhLD0qRWUBbV8s4yUbcexA32v+\n/DNxKoONytdpGU3lV1LtSUCSmtx+xP52olNMBW5gxAhRiupsBXn+nZS6CfVg\niVpJiwwSU8D3+Cwi9rqBdBINsy0u67r3TAxPrIwmL7M8Qr8/VS+kLPFMNlCI\nPO0DnwxxwHZosNlIbvPzPSjtnGOpN2+vz5XGFkE7Ot6IXrpMVEkjBBTo36Aq\nkaR9RtcAp84I409pJPWNUGTnjhoRqscBvy3zqLuseHpL7MqPk9l5GwOOABkh\nf5Du\r\n=Sr1Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.d6d8d0476.0","@material/theme":"11.0.0-canary.d6d8d0476.0","@material/animation":"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-indicator_11.0.0-canary.d6d8d0476.0_1613712969120_0.1316662210653985","host":"s3://npm-registry-packages"}},"11.0.0-canary.0b4a4b2eb.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.0b4a4b2eb.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"5cfe67c3e9f3a25faea554587fdeeaf1a102b308","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.0b4a4b2eb.0.tgz","fileCount":38,"integrity":"sha512-h8wWtC56uaxrM7PsuslRqPbcdWEGDj8pKgYniLr3CNfr5g/vesTAD9bBmFHU9KleJmxEOINu0gOoDiA4IMziMg==","signatures":[{"sig":"MEUCIBYq4gCgq9PUnGTdUfg/5r8fI2TYVE4lFzbcfDAPV4ggAiEA1q0Nq7BJnsjP1zzVjpK/dk0ztcRPr6hj++WOoV+HAFg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgL90NCRA9TVsSAnZWagAACNEQAJzA3Xo5J9EqCUxVK4me\nqqjRIBQtRNk0j/2fQdP8obrYncc/f9NDZrJXgkkwAEDCkr8pkFSnCpWeuog2\nWaKL00s89MD8fSw0Qv6EZD6hPdkFmICgCRPGVCnIIRShGQObhMkCQiSMRkmG\n4fqT0K55CY1zFlgRrSrP7P7DR+xY9LKN3GrgnR4gl7/khJR1q/cye3V6gETq\nGNqyPvyGS8oB3rJ1BYWiJJGj2+XFBAmPSKj+jbclfncrKZyYh2SRdSmV7F9a\nxcIqlW3DwdAjJDSv2lgMN6O2KSRUIVma3usMNLpfeOS9dZymfn32bw0gtagB\nmLfJSciw4o1rHqJ+U7FIdykGIYyrrBFVXt+qNDMdsNRxbBk2mCNECExyYkY7\n7PdHoPxSRERhB4kCumyXIthJbO7xTgt16ebm1C0IatUD55nRX5tPfffmvbbs\nIPmCCPBmW1NmqwMRrVUmtNaFnZ2+5yAyHRZqI4PlRrwMPDE00wagw5bYZbn1\nL99RfpCLO9lUXNFF0kkYI5KdgGR7yMeJ0anWnGvSDU2YHo2pMQrlx/EtF+rX\n8tFXXmei+fyZ38Sf1y53VnDzNm5FKLQXe0daz4/hQq7aq1xxWDJ+qfNPmsMh\nYbVpccBryIyK91fuh61aeDglCm3o0OzgrxyvGU/Sa2nENxfdJO8GlA8Tg0dG\na5ym\r\n=yajx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.0b4a4b2eb.0","@material/theme":"11.0.0-canary.0b4a4b2eb.0","@material/animation":"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-indicator_11.0.0-canary.0b4a4b2eb.0_1613749516262_0.17472606279215208","host":"s3://npm-registry-packages"}},"11.0.0-canary.3201cae47.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.3201cae47.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"f49cafbb27eaba802ad912dc92ebc1f4ac70498d","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.3201cae47.0.tgz","fileCount":38,"integrity":"sha512-NisQIiU2npZBrv0BQbk2PGdtgHAZEfK0s8UCT/tzg9t95bjK46LRWIO5G4RHvgCyiAZ/KUymjko0tMaBptS1Yw==","signatures":[{"sig":"MEUCIQCDBsGwtIG3qwmcDu91BrJ9OXlUxTSezwFFMiqG6mXYCQIgBYKYJ/7fFh6N/NkJjReqdGpbnRVlrnXQPnrnsTpDSe8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMEL+CRA9TVsSAnZWagAA+M4P/0VeN7hHKrmj5LA0zJd8\ntAezgQCEK7fKORjllMh7L9qf+AQu60dsPZThGyec4qwPoL9JCW6k/c+xs67Y\nAnAM22g03rdSc1QhIIGoEwFq3vtqe9INAnoTYjlO0OXBtUWJrGSodFFj8t0n\ntjRJtMU7ptRv9D7s+Ii9nfKNGnfFQTW0ulraFACT/sg2rWkAJYFQpCUqBDx8\nsFP5YlATdCx3jhD3jX/MYbqiHuc2KJR0EbvHxAU+CvpQge8enagjOQzUEbdL\nWiKPI1Y33y8/5VMLZdwB0cgKlutl0YPa1PG4WQmxVjL5WbWcdopOrwTS/63Z\n994ihhADxKQNsmsBJTDrCqqkKP3wJJRhWTLaQfnOordlQeRMX6O4GwCZTI7P\nwYCP8mhUvPcEToo2zm7CR32fLipANzNhpxtdEdG9WkbxaWqtuyPNPLr4bCGt\n6QQ5NpvDasMxJAKnCuaBjmFFNNur2INh/2asEOec9Hj6ImUXaXoFvYFWeEBY\nPFtzoXs3tV3NSLx7nxV0ckJ48FzhczGlJjALnfqz4PHsldCGYXs1L9oIeCf4\n3fMQWV3MopYG242EhofGEnYfWlkrA4r2QVfwtwPR26vbzxGyiAasnm5p2kgx\nIjIHQUfgvUWYLdhOi07LgVhEHq+MxEyrWS+rMqmJwj1KKA8hItgxWb3TDvG9\nJ+BX\r\n=5dcT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.3201cae47.0","@material/theme":"11.0.0-canary.3201cae47.0","@material/animation":"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-indicator_11.0.0-canary.3201cae47.0_1613775614303_0.7770200403149938","host":"s3://npm-registry-packages"}},"11.0.0-canary.f1b1fd5d3.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.f1b1fd5d3.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"bd91bfe1155f27ade24d98c9b170d33f97fbaeb3","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.f1b1fd5d3.0.tgz","fileCount":38,"integrity":"sha512-cOLV4RjoT3MCrveMWGq7CFhtAFQ6X71jB4dZ6BlR+08ZcUfXlylCq2OfhVYYHsPFH73M89cFcRjGFxd0rfhFAw==","signatures":[{"sig":"MEYCIQDJaWQGjTZwVXIT0OnarhzAGFuWEnOMKwGs5YgFUpk4SgIhAL/uPqRqwn+yqWU9yIszx82gSqG+H6rABnFDTOghbsVx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNAqsCRA9TVsSAnZWagAAuOoP/1CbPIa3yf0YJrj72ujP\nlREPwTykyRMZ94OA7HdW+DXsbUFujWiOHa85NIsYFSR4QfFSorbwIsniDchm\nW1oEe2sz9gUgfU9TI11KLUO3TdrC9I3l1QU6p6xrUSgOt1sSgeK6DpT0XuVf\n6arDR4njcj2e53+zaKQx+gxyxbVHA+HxFpiTuLgbYsTKxq4E6RZwTgHhYVcv\nhB0fOWufJRBSbT14BTP/8pES4FGffR1N6Ul8SsjG3GxnBkNORUDgAiHS/jQB\nbDWS8as3Mr/2TD+1qfFMPLgoiB3oZuvtDWgBz66QSlCtuaxZ+fWoLJwAAUUS\nwkhIPj7RX/Wz+bYZX7rRXcGwa98F9VrN+20Tw7h4J0e42+jI20a33WS5sGLS\ncqkPU8Rec9JXEYGXNo1+apGSCRllEgCqk+fiR0l7ELRILmQC4fqrXlZAA/qe\nCgeD+c7EaXdE2fDGrIxC8++y2CRFC9yN+piRHpp0HjYD0sF93GmS/kC3y+NJ\nnh+bnoyVzk52OG4RU5mh6AyIYl14V/bgxL4YqCa97RNQ2QwMBixShQGBgerp\npmqIVtETuBcZlM4E7X2kFV+J0+Z+Bfy89FNEbDmUjwSlARtcwjFClyX28SXe\nWqj80VRk9wQfnOeyFkF6eQbMyu61NYOTc6HT77pZm5aV9dRcAhpGl9p5y+vJ\npDLr\r\n=0uwQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.f1b1fd5d3.0","@material/theme":"11.0.0-canary.f1b1fd5d3.0","@material/animation":"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-indicator_11.0.0-canary.f1b1fd5d3.0_1614023339719_0.5512573667395115","host":"s3://npm-registry-packages"}},"11.0.0-canary.7899e0fe0.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.7899e0fe0.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"770bf8b50bec70e0015f40ffc46147602d25f944","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.7899e0fe0.0.tgz","fileCount":38,"integrity":"sha512-20L780gV4jDtJxpLYJMtJVq516cM//wzOfq5o+zMfvLZOaLlfSu15aPti7wWA4+k76EdrfOxoK7fdGcogeAjtw==","signatures":[{"sig":"MEQCIH+VMm7yVojOY93pNCYGSTunR6nnHpTJY2rbc24xTUaCAiAeE324GcRh+iExV9XopWqjIkpLGvl4sJBQTA7nzCP1rQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNDQMCRA9TVsSAnZWagAATOMP/2uMZ1ibJOwnO1cKMYUQ\nhe+CxH/m/Kb4ydGA0t57PSn2733JTgVlRXJqO5cxnbKiRt2GzmRl+jgDaps9\nQYa2NwWk8LAkrpFmBpqE/kAeP2lAsmu9oLoSzdfUJ6i5vvxwRBmKYhXMV9VL\nKXgCxOtLQbZlMH2M69faUhvqDJ42NQ3wKSMUFoDyGq7WPssAEkwriS6iIwz2\njxTITg9y6zXGQ1kEvXZYmLY31nyjoJH3mj9k7YPoeZf4l1Ow3FRxXWk06A1L\neS159r1BWDvkV/yw1lFVNpBIOr0I+7HxIryDjaXjAAWg72UUAaIBEgyXglc7\nK7Aw0kmiESAr/0xORbwd2jdB7R3jAcI5l/vxhOmGS1QWcje7T50+Eq/4z+Cj\n3dc6kRArvfsUK/Z0wDx+sPp1EyDYWUW91szpQmoxrTFIOrRXjOo7Rmch1bSk\npzL+u+o/KMAqi1MujBl9R7Kx3zzSeksBbDEbDUjEyz5lnJ7aI9LyILc+wWN0\nnZNj1CgFiIFgV8R73aYMr1mQy3AgswzJ0/VXcrKGx6rV3sjEcvsyBgnxbwuI\ntebujKBu5dMHqldhl3qiUPtQHEWBawOn3To5B+JZ8rToXPxBY6o5zdEZ/OTe\nXsshaNbtzsOg/iZeoSUmhveiuVp7K0rhBuof76nR/fOnYIgjlygWDMuLj4yY\nn9FZ\r\n=TVsI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.7899e0fe0.0","@material/theme":"11.0.0-canary.7899e0fe0.0","@material/animation":"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-indicator_11.0.0-canary.7899e0fe0.0_1614033932374_0.7378606212044188","host":"s3://npm-registry-packages"}},"11.0.0-canary.f19c86d13.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.f19c86d13.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ce6cfad46f4ae896f1004fbbf1e5f6bc142e036b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.f19c86d13.0.tgz","fileCount":38,"integrity":"sha512-NAA/dWFXb+z1bK/ihEk5rj6rgqW5xaTKR3NO11VqIQ+J/ozmUhwC0ud15lUgWYkHDRHkDh8CLKaSQPXqqHnR2g==","signatures":[{"sig":"MEQCIEbrWuWkMJBtKoCTO1C4TC7KFfma8R2cOXqD+DOgC9wJAiBC/dY+4HFGEUNXtIuquIQ2cu5wXCWTUCBWpTvawmNVpg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgND6GCRA9TVsSAnZWagAAE4UP/jG5HWpeU7VkxYaYsiAc\nQZ7JeH4sXFZ7BzfHg7p8n4HNoLw8QZAH1ASd62RATIrURXizRDAVlD1oBG4Q\nQlD/YB2gjBa+XuFJI9SNP9rSYL2S1s3vyE5XVMSzKgfpDSOiln8R7/fGsZ5G\nsTyqzrtioUBJsFaFeCM+T1/FEz8wkPx+6876YkrPbBfaodGZF7Ko/gptgYdR\nwLzyXnj6n8MqfA/6X5tkPD9TDAJMNwb1i4zr5QIGQscIPRdaIk8lSxatfOQ7\nvNsXUwG4rJKoaygMDfCkZYDEUt3pfWyG2mUZRoNIKg/C1bkZzfk0+SRVKbhR\n2ESGMlTLMxz08HN9NRfx0/LztWPVusqydZNx/j7W9PwHIeJI8Yfjhws9L1h4\nWeI4S0wmg2at6uJczYRGJCLPp1kvekEv8yVE1yiZ1d0L0IhUQEAZNn8w/Adm\niIASmL+JMGclHLIqQ0eUnRcOJgmGtLvPSuwP8xAkOF+BpXibpgS+ifZiX2Ph\nS2pcp7PcZdWLcDhvMzHKAEUZ1xnKPXcSfkpELjAnmO3APLkukhhdVyzFcQDW\n72aBha/QUppTZV4CBXCDysAoAgWHWNEK2jMNCJQbbWjh+V7wiqtdB0R5Ey5G\nnYjXhlTFkkIOpATfttAFLfigxOilsSUIYll+EcTSAmMZ0KPDFLAWsGqbuPOw\n++pg\r\n=M7JX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.f19c86d13.0","@material/theme":"11.0.0-canary.f19c86d13.0","@material/animation":"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-indicator_11.0.0-canary.f19c86d13.0_1614036614003_0.7317353808377476","host":"s3://npm-registry-packages"}},"11.0.0-canary.60e892d79.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.60e892d79.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"45a72a8c0d945d09ce5fca08801ee2a997ed2f17","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.60e892d79.0.tgz","fileCount":38,"integrity":"sha512-d9V0OATuWtlyss7OZBYA4g4a0DDwTDeMVo6G1f29qt1xxCjTd4AgDyJLYiz9BMKkotxQrM1fqmN9m4yMRwZn1Q==","signatures":[{"sig":"MEUCIQDsPpWLqekXzzkc4MG8qo20IOQ6QpFRYdKwgVDn2+df/AIgRaLFv+mDgGeK3Wfwmql2nupYKBNHMoa0QpeVO79xDiY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNFayCRA9TVsSAnZWagAAkVcQAIH0QLG8+2PTqGoVdCr+\naWL81e+rxY/83nQuWARwfHz8W3z2hy3+3tRy5AacPdrq9mL4CY0wV4M5sqo2\n0W+lERN7Ztz6zhtwq8xn/sJS+9M6RoJbgZLG5mb7xEJu/aQYLyRSs0JCDGBv\nyW+uV8t7DEFYdGXyMzOG/9z47MMAt/AZMHskn3iNRMUTJbmCDKvLmlBNxk9e\ndArJOxmyCTmlC1w/gG8OgMzhIg6VOveUNZpi2i+Rt+Hb6B7eSQcAzIlAGKdt\nzzJm0cOS48uhwPDpsb+M84NvvFDnlgWLMV9zykMciYjjSJDfYyPfl903ltIk\n/Wkk2k6nMg56Mncvzg9OD3UeoBIkALCcKfzGTzBguMXJvY2nodt1mvGtC3zv\nb9bGFrz1Acu4sG4zHuQkuDwZcS+a8SBi68DH3j/Yt/hHwbJLrKXWZMjRF5Cv\nNlLQ/VO22BZsLDPYSW/EEIcvd/y/FMXcK9WE1rsdeivZWY4Qfbbgcea87RE8\nlGht7CQowhHGNe6+jZdhpW+yK77muHWJzarAeQoXegIdNbZNdlMob1CgbxDL\n/gFm7Xugq6U7bokb3WqAqWf4ntSQA9Rr4IXTJZ8VqduWQoMKcsuKXbW6Jrj1\nCEHXnpA0A1GZhlzIaTRRw8LajL7/TrT25Aqf49ug5/W8qU9gDD7iLzdTF2Od\n3FIl\r\n=Rip4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.60e892d79.0","@material/theme":"11.0.0-canary.60e892d79.0","@material/animation":"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-indicator_11.0.0-canary.60e892d79.0_1614042801615_0.7078767548220604","host":"s3://npm-registry-packages"}},"11.0.0-canary.c96bfa495.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.c96bfa495.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"abf61d18c1094032b45f57e851b206c09f102810","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.c96bfa495.0.tgz","fileCount":38,"integrity":"sha512-uhazwMbCpkHB+LccA9tCL1s8BHlLZwI9XxcDlue1tRYiiA9dbq/y+euSF46juw4B97sp1VBXey1SqZyDI2MjRQ==","signatures":[{"sig":"MEQCIEwJrFTFcDRrYhuzm+6BlyBmvhtoWjnA105PnGBZp7jpAiBM8kuxP17rFQddym248tiSFWDOmVcKOBopbjjVoGDNYA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVhKCRA9TVsSAnZWagAAcMkP/1hhyKTKkEoO5Zi53dZr\nlwtf4mYG8AktYGNFdndusS15mQZS35SMKBfGzNwsMukCO3J5MxjwfGoNW0+B\n5WDaWM6HLRFIqqoxrnIxZegGekkY++Pwu3LqyGsW0gmOoETuWe4wBKp3MzuT\nzeYY3RCmk3GDT8h52A7DTOAQ3xEV395/ghFnYQqs2srHRIU/x/M1PfxkAv1B\nkC8n4f/lGWccpb4kMm5K4iYKvBuiG9Oc6I+aLhFAESChdJCDinDaLnzfCmT8\nxQkkT4oxTmKGrCwsLI6hRpw+YEpmc2jdMzQXfAlaeHccmIcB1f2DC/ATxi2H\nwkTFpLdEOzLiZgg+UC2zzkwvA19w0Wu0ThfUjoldM0aO5HZSAJRkWnRJUMwI\nAgCwYFfBC4tKBvSTCNqaD5tLdNaw1lDntuwaqNkcfI5qB0jw5ASXZsUZW9kN\nYl5+R9JvvrDl6/dga3JPIZ5B2QPA89uSLwY0kPxAUabDlb7GfvChnnCcw8c0\n99GS8e0S63iEmYXv7lwYx2cL/KVCmBVsDfDstybR4yr/g/yHJ62Wf0eOIFfQ\nAIdbS1OmyDuTYXd1yRaytHB40/RtiUj7Q9g9O1xgwLKKfl81O8+YhNYTAhLw\nln9XO5+8VY2A+v5uXiMEGZYzM48n/8zcyYzAiwGY1hrJFwUWAcQ8Zu9M3QGq\nZHCh\r\n=phAY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.c96bfa495.0","@material/theme":"11.0.0-canary.c96bfa495.0","@material/animation":"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-indicator_11.0.0-canary.c96bfa495.0_1614108746379_0.19313486822884274","host":"s3://npm-registry-packages"}},"11.0.0-canary.fa9b59f67.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.fa9b59f67.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"00df72be9a3801fa796cecf21fba35948b386af8","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.fa9b59f67.0.tgz","fileCount":38,"integrity":"sha512-Vtj4e/a681pw7gqQKM4pCeEo9g4fafPnwEy/LEJtb6ZVHth/UAo99bpaWMl6Ba9kBvvGpdOkRCja/S4jbPTnRA==","signatures":[{"sig":"MEQCIC3pM3BVLFHtzZaaKGiZLvdfmvVUK3Iyo4f/c00HjPhsAiA/TskaZ3p9jRkDeST9g3zQoiZAalSIPLrCPvlvpHKkaQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNViaCRA9TVsSAnZWagAAObIP/RV20ptqDZeGiDZ7mDM8\nIfdAFtA2c+6OVK5vw3/xgF3RMn1OAxrxd2dvGSLSxvW/vuzqYCPV+nfiYm/B\nI8QKp02hIZarccfrj30PTfVjpvxnXyxG0sAMnhAwUj7oQEYeGLj4t3EJmoCF\n46nSOUYQe12gMoRaqztarOkP9sG7EBuMFG0GQG3Tbrr4z/cBHrSdTK8q8ooA\nCbrC1RNDQIXlthmU9WIt/rsgp3mmiupu0q72fOy1ltAOLYSv1sQ9iqYBgamq\nTeM0DAlHtTIthJHfDhwnwZtw5Qy1g4xPPiXmqyJOzyQjFux9M/xbx2BVVxjm\nwId+0F4eQgsDRcd6gtLhgWSp+omq+uB0EhRyGwNvob5N78ge/V0vzUWGykv3\nCvBSiyL+m6TQQ6/ZUFoNpp60TbzVxFgcrnM2S8uya0eB9PbzNoLgBA79IDJ4\nUj3uu25HWhodZmSufuIlnIWHNffrKr9dPimTZEwWFrP2ZXQhsdktG3dV+iia\nYyykQDpu6KluyMq8vmz1rDj8g+AfrpagIoBdqoVmRv9/22DoOkD9JC/tyDcQ\nldMJdn9NKsyaqJA/edRlXtFBUxhDUypFoIoV+z2yn87hoDRPE3C3PV6QBttl\n17kYZYplO546OM8blYxvsWQx2nXxOGB7ap3Cbdb2e/DHAfSR/R26giy4J4nv\nGdii\r\n=OzLW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.fa9b59f67.0","@material/theme":"11.0.0-canary.fa9b59f67.0","@material/animation":"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-indicator_11.0.0-canary.fa9b59f67.0_1614108825921_0.21982491831772677","host":"s3://npm-registry-packages"}},"11.0.0-canary.869e3497c.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.869e3497c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c841daddfa9141de0076d7e63e076c5136812797","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.869e3497c.0.tgz","fileCount":38,"integrity":"sha512-oUloZNcDYTP+Egg94rsbCnwhNC1ItCA1FFsu6TLfkne5QipM41I2YY4yhwwx0S31i9kdvVWdz8fF3hA5qaET3g==","signatures":[{"sig":"MEUCIQCAxerpUIaQlm+fKmvPwS/RxCk5h2JluvpdWC+yngKsBQIgTT72WKiFILUrp+YCyKAAphY7UuJuEWDq0bgLHMFJa18=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVi5CRA9TVsSAnZWagAA/EoP/21gHEpFGt37WqTiGC9X\n09U+Og2ikeCypjcajypKe2ONNVvD84sDzB0+HV/gSo0jzEB8drYjo6AoR686\nVJqaphRCuBYmsIF4GWnnBOOOkCEcS3/YKkbVwgXtXlZj595P8hwrQ630idYL\nLDdz8XzDSMj+9kkmUX9pB6Iw5fAOWPSVZRMTpVBZ7Xzlcl5Dnm2+zqCqp2C3\n2bG9FgXuixYgLrd/3YpljFGJ+hif2g/14mF4NKULIuP+mHdvBrNX2yJt/2F2\nCLegKqBPZjQ0R6X8TfofZwvPqOzkaWVJaoehTpnyY7ZKuKj41T6PVSyLr3yy\nVcmL2mrLNmbgiLaMzyrPimy7k2lowUTnqZs31p3J0qytfvwV65QbIb6bkKHB\naYrhJCn7dr+slACVcqlpRbnnFEviF5SCnzx947Bz+X2wCiadt536yC1L5Jig\nj4BCNoUPHs6el6LRGtFuRL89btfYO13/QKuwX71opSpTnwt/Kv/Pg6BSKxQD\nJIk+DZZgZZzGd/iqCwhbNMYkg4XAsyLcqF/fsW2tsZuLUpnb3A3RDrsP44eh\nreq7Wdzx7pe1NfaQUyi6Hrl6EI8OzAq1Coa7PcWZteVZ8MDyMIShAm8enDnJ\np14YBr5AnUuAMTFn9jG374HYRizaOJ7HV9fGrsvaJJXDvLfWpkIUS1TTKMdd\nb+sj\r\n=9Vd+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.869e3497c.0","@material/theme":"11.0.0-canary.869e3497c.0","@material/animation":"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-indicator_11.0.0-canary.869e3497c.0_1614108856562_0.5481263160579692","host":"s3://npm-registry-packages"}},"11.0.0-canary.8ecd7c9a9.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.8ecd7c9a9.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"46d413b207c6f36e20626414b6405a4d09451165","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.8ecd7c9a9.0.tgz","fileCount":38,"integrity":"sha512-YtTKDY0TEMyDGwDR6SvNyD+GO/k13J4tE5AXdy5nC+wxoVg6qTVQ7yvkbmQpRSbeA78qcJ9lj9uffpsMOfma1A==","signatures":[{"sig":"MEYCIQC79JfRywTsElBDvIW7+5Af76L/iR667N5r0n/09qG+RgIhAJpJ7zhorloILZQTb21owMUl9UXNUlD+XYRCiTAB3wGq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVx1CRA9TVsSAnZWagAA4G8P/27NIMMsa/WUL6kPJQDf\nH1T6mzuHCA/FYRHoLkZ/ceShKEg3VNKxWjUgN1DZjTr746NUfyPTT9VvHC4q\nf+U4NoVJOpwayAaK9mmHlrSVhPDproX+mdQVYkdtzx48pYOi3LU84NFC3CVl\nYGSO8QpyUv8WbBPBGnrK0+cQlAiAblqCi+hOK6HMi3soQI7AI6GpDpsohNHf\nzc1o9LcLjattUzWqqs5KkTeRNEzsL+BHbgIDxjR9t5CFRGNbvMCJLMWKrAMa\nT6IGGL4+ujwY/ILX7qmPc4djZNfMRpgKOFzW2xaHOFXGsnDA0pYnbG03GvHy\npXhAWOcUdFHxRJYoJRN5sWcdftZiQce7XZI/V60Iy0n4Nl6Lja9c8CimdKMM\nObuuifxNVE8BTV5l3YTzI1wuwnA3pCTASCECXWck/NiSSfmYNMAr/6l89Cqy\nneFWjuzJLIn6OvMNy4fRdVe7X7snL4FzoS9bgFiLJYCLo4l0oBRjrkPpu5Ez\nJ4dEOC8a7Vp72WCONlxdCWPy8cWJBX4u3P6zfToWAj6tf9tj4hSKPT8mPDUR\nhYXwIDY0PEXbqjcfDXkm+9ozUrBIWlGfnAB7nlYov1peI1tEl8Wt7V19DbpT\n82rzVgac0EDHDMbzSc+AdMLjUFmr8J/DI7WZpqLbkbaCgYIPFEAb57eaZver\npgYF\r\n=NG59\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.8ecd7c9a9.0","@material/theme":"11.0.0-canary.8ecd7c9a9.0","@material/animation":"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-indicator_11.0.0-canary.8ecd7c9a9.0_1614109812624_0.7616552065636548","host":"s3://npm-registry-packages"}},"11.0.0-canary.9c85d505b.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.9c85d505b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"6577c16e321b4170cff521752e60bc462870ab04","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.9c85d505b.0.tgz","fileCount":38,"integrity":"sha512-afPVms9mv/TO6DDFSlm7ZXeN7zrS6rK4QiNq3jGL8IflvFw0/nN9r5lZ9tZjG+uhBjEiqiSFOdQYM49NOTfXwA==","signatures":[{"sig":"MEQCIGF3idGNQEqqi/gVhe0Ff4ok8Rx5jnvQAtg/tNoxVZxBAiAeTqTi8SmnVGjHgK/dwZ4sIrge0pn0QzSAqBLsAtSz6w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNX5qCRA9TVsSAnZWagAA710QAIluJVHqvtYSiwCYeZRj\nTxFcrYfO12Fcc7OYRRIYR1++/wgaOyOZhhJ/TmvI7LwKSwQStquLLxPJ4P+m\n35izV2UC6sLEREWN4jI37dbYjTp2gNd1TBvQhIo7/K6ROOemox42R4lo6GV9\nIMvWDRqY7UsPAji+SDVwo3utkJiShHDUN5Nm1rwLtcdLar79liM0XBUVIdDB\nlJFDwkmhQovrddrObDAy8Z2205yVPMMQYfAdUq/Si+mW/LZpxCCtSrirgRS2\nIzdbukSlW03iZVG+cn1RcsqwvbwX0ZE9NnRSzFp7lsEPRsYsK7DOri2lb+7o\n4ro9lCrfcz3yt21g/ihQhIRnGJax/0szBnA/l0KbHf/LDe4+V9Rb8LtzUjoZ\nho/D7Xm2Sl7+byjeefPdtNDqzbBHDgqu1SnOtaVcmY6qVjqECrCSVI/FK4ub\nrPmQUrHlWPWl65MTctxrjrm35Xi0JWMD+3lH0GVcmakjkXsCmuQRsE97Us/0\nF/c6ZjISuHdwBMd1cYcP8JnZ6YxIihD7TnA8g7H/oNqnsVX5NxrUzAC1XHLw\n6nE/0m/0g83n1TNZ+75nRfLbzQ146xOOIohQ/jcipUEVmsjWyZvp1z0pzKR0\nCQud5gwQQthzPACdxnZ74W2LhYxIgODhjLgj1F7XWoL75DaucFAdQXhcZ9YL\n6H8i\r\n=q2E+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.9c85d505b.0","@material/theme":"11.0.0-canary.9c85d505b.0","@material/animation":"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-indicator_11.0.0-canary.9c85d505b.0_1614118506052_0.73455996906662","host":"s3://npm-registry-packages"}},"11.0.0-canary.9f2e85fb8.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.9f2e85fb8.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"dfb8ed79416a459f81980a7949e3f8ab0363f775","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.9f2e85fb8.0.tgz","fileCount":38,"integrity":"sha512-v815pmUFabjJd1nJLOcowAVUHkJahZ4Vd3uhdx+nBvoyjPPOEJnYnzFGiCdrp0/6OA1iZHm4pMam4mlBIsr1gw==","signatures":[{"sig":"MEUCIQDdGH01JjjNofHGJUd61L+ntkDq091Zo9BKr+Jww3F9IgIgHsrSBZQ6Nr2gvh9j0V7kiz9z++zVMWUMAvaEjQ0C6Y4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNbAoCRA9TVsSAnZWagAARZ0P/iHRHWVm/DjytDCHdluF\ne4uY4Pnqcfvpd9itmPmtl2tLLegnQUwWDgiJpvPqCXwXI/Ag4Zo957pYeDNm\nghgAxW/Bv/2nLjr9cHJkwRBCyjTm7zv9KN0nqt1amvI5aavpJpvO5Ke/qCja\n6rZ0zzRDElTlD6TB/Y85Avy+4RjrlTMDc0zKQ6Jq9ZU8XKDw6LGVRhtzPuLy\nxQ/9oWxk1ikOfkNMtjS/rAp+B3r8vjvx9RBntl6bmKwSXj46MwfRsFBdThJy\nOY0Xh9XWvw7iIIQUwCH2G6+5F1785lvwIT7tP7IVUaFb3QdhbwNVjorshlnU\n5w2WaU/mQOLc5/NwN6MaMSwyFlZV4SU/V+TwABy5WP6v8K3tBQe9Ro3pKHAR\n4uMc73ocR8M8AmxE1fmM3v0AZJEPK1pEkmW3W9IFuq7MEBe/HTtdY7XW2zYH\n0cOnmy2/95W9jdUk2BlbQUxWCTWzOH+Dsm6+0d3m+wxiKUspX2KowuvsSIpe\n1zMmcWRo9JIqk+gKOOctLX4VWjwkAIM9uZlB+6hTdI9svNal5HfndqUZLaZB\nxqLNLcUtbBqwGgEEUqyOcJzyOjNh2jDFMeGy1iZUz+okyD5PRg3Un9k7BG4v\nm4rhep9tIpuR5nrvXpM/o1NTF5ie6doUeBawtFF6hGRIDYgBki+DgvE/PiGG\nu7cm\r\n=kNiC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.9f2e85fb8.0","@material/theme":"11.0.0-canary.9f2e85fb8.0","@material/animation":"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-indicator_11.0.0-canary.9f2e85fb8.0_1614131239824_0.42716278761644344","host":"s3://npm-registry-packages"}},"11.0.0-canary.19c4f29ef.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.19c4f29ef.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"db7e9c7d79525c4ed9ec519fca158860f0d17215","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.19c4f29ef.0.tgz","fileCount":38,"integrity":"sha512-J3pgUrCJw6CiBdN43JIVgw8Os8O2iNEZZ03UVUEcSJQMJ88I14TDCKIgRv7yb5TwT0+tVhGMJsyptUWV60CK8g==","signatures":[{"sig":"MEYCIQCZhNClxi7J7hfXodNr2gFW5XlELlT7QplvD7AlBVEN6wIhAPflK6h2ZeVF3edZKGNCthrkr7WJv1MLefcnEksWc8o3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN/jXCRA9TVsSAnZWagAARpQP+QFnXJ3pkJxl8PV1BRwL\nllMJ9+M+qDmRZ70pAbeNn0+M54v/dTU4K6u0CaIksyVutFHYHGqVaHuUp4TW\n9YCGpDH8p0Fp1UZufBspXnDaN2W9KFHSaDi4XMUVa9duXwCpHempoeDWqO2Y\nFEMhPCvx1OZWlENhx2AxI6dv/czPoIDShGOm3xL79lAOwNmfk3Ml+tl6waXE\n4k12A9CurxiN92LMD4cksTpY0llfdMOcZU9pbpDEc6IXKBbumGzoTqS8TU3g\nMz8vU4epEEVVg+ag0GXCsRLKfJInTK+w6hCVOYNqnHJucEyDepjE96SbaMG4\nDDuxmvcznERdCslrrT2+Od/YampmLaY/uvzh6x9ObmqdB2NLrVlIQWfz4HBS\nmt9xvj2So7RhoDCfM+zTBf+zlRvT95MAyJwgLWi2VznzAbIv4FsvdEOjgDCM\nBYvcsPtneKvjCp4zMN3xX+hMBhRcIQJUwWaa2M0omAkZqwfQj4dFWBRdsj9H\n0qsdxEydlfnOMP7NxYJoGa0V7ShZ+wT0pM+YqBpoahg+4Px93euqYkVbeWD3\nv33izo4ePlVZ55qcGTQeTU1gffbvxg15iSeS83EUcCCJfH6jxYVZjpuRJ5E/\nd2MaUHMUhfk4EX2RtXoEhSSxOzTdbAhrCRa10R0G56ShV2ojvFYmb2qeqZSZ\nIpMI\r\n=fi17\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.19c4f29ef.0","@material/theme":"11.0.0-canary.19c4f29ef.0","@material/animation":"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-indicator_11.0.0-canary.19c4f29ef.0_1614280918838_0.5146801790481563","host":"s3://npm-registry-packages"}},"11.0.0-canary.63df6e9bf.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.63df6e9bf.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"5011a987495065ba7acb4bc2c32bbafe8b1691fe","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.63df6e9bf.0.tgz","fileCount":38,"integrity":"sha512-QMmhmMhREWm3SnZ5bnusAd2eFQ4vh0FRutf79gy4dR8XNCnGzvwXg87xeB9V1XI7oREWF4qnLKrBOa3sq1desg==","signatures":[{"sig":"MEYCIQCt0wSXZlSZcgECzxGL6krfRplIeSGuedxULFzdFgsInAIhAMSoBZPZnQVLGoR+1OqceFQGaCzO29lhdngL+gI2JZZw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN/xNCRA9TVsSAnZWagAA5cMP/3DXODMMs4LEm/Ypkxa0\n31pVryFIBumxk5ffmbE6HVXtmeXbbTXMtSwa0YnPP2XkZk2brKyjIDAg3onV\nSzYL2o3i/WGscbNqE0RFZfxcZls7kcocAHIzLTiqWGGTnZ6n2u3jo2dgnd6c\njmpo32iGgU+1AzexetGy7tZMjY8CxpGPF58MOkjbNqwoWSIwBH7NPegw1uoo\nPUaOuFfcpBTAmU2uWRnjQ/RUA2Kxg6HFPj3J/O0oxtqpoHmpnui6n+eFVtJF\nnx//Vqh0quMTS7+apOd9b2U25Y+WwZIHra/KbGF4/EZhDcGYY5i4QoyRskCf\nXE5oifoFFItwSpYLIEw6DEtgb6PAiY/7WUHvoMztvCY1sveNz1nVrmlttZ/M\n4PKPrMpflfgFRXsdqoAL4k5r94HxQzj5xCqEQHWKo4C+vKz6ZFLaRoDqjdBT\n39aaRFDqTIHAKuznBtbO6FJCyI3dMAHBFOMKsYDDUY6FDL+iEa7Ky55RK/cU\nPtmqd5SLR1bOmzjfF3jm5oeboEzaXbEevr9rk1rcGmex7LRGM8ssTbw+QSPU\n6e2+yVMp/ABqh97/rziZcO4+WquBigu4lQbeg8f6d8i47XMd01L8w9X4dGKv\nbxF2OvZq52SJUNDQUcmYO0WDlBdmfMI3yRAAQaU74b193HJTzP2cSFFApATt\n4GF1\r\n=hiDV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.63df6e9bf.0","@material/theme":"11.0.0-canary.63df6e9bf.0","@material/animation":"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-indicator_11.0.0-canary.63df6e9bf.0_1614281805045_0.9478570594498048","host":"s3://npm-registry-packages"}},"11.0.0-canary.981ad970a.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.981ad970a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"27e6e6dbdb4b83e442788df9a5260b69266f25b2","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.981ad970a.0.tgz","fileCount":38,"integrity":"sha512-GqzTFNAAPZ3JfrrZiFuuf0+O4osU8ZFG3NWfOZepJDNk7dbH6Sn0uoCiIq0SYs5jdNcljfK1nakHHK3KN1oXZw==","signatures":[{"sig":"MEUCIQDVgZRYeyG7C7DJb7MH5vnmwZvlDIoeaoHPI+aQOBlFhgIgVz9kqJXbRtEydgDINp6SiM13Ua14ZWPDcwV4W5YLsXI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgODueCRA9TVsSAnZWagAAV4cP+wRxjdG6YL0k18jutePU\nYsmvlar8koPP2JXvc9a8Nzu/j0OoTPZpAo8dieSKdC40+DEyAgyb871pNfi6\n9wVADgqT7mAuxEvMQjz1SkOHm8xzL7ZqW74AZ+NBLf5q1A8Cg0fHLZRRPuhI\n+aBQGKuwH4boKCv4oyRkfhVBk1iBWdcWYd8Y9+RV4WQy3lLXyZRsn3l5ZfHc\nKXSxi4xdls9Vn/9Cu6d+Q9EAatbVlX/suv9VpSHl6s7eOmkiYNPih4hA1oEA\nkTrVY2eGVEPGiqxAJZfZLOB7q3Se1ILqWstlO1tvY79Ew9IFpvNBdgK6Souf\nn0OvdLYQS9BsHkFglngnas4PdhL5EJR7Wmb3BSSxq8u7q3Uy1ti5Gmpfzm/h\nEvWOp5EYGREn1zSYVYJshDo7LaqAxf1mkTLZtA39zD6hz2RaESaVzODMixwm\n1mnXEt0VjT8RhsWDe3pJiyOQ2Y7A0XtQ0pvxwNvb+luaexkuarNTb6IVuzYv\nDJlJSV//RqZ6QHlhjdODRlD2Crcqd/9ngPhrcntNk3GaHncgbkvfPl1wjYMZ\nVj/nqbRhc7dGGs5fIeEvfRu/My5v1nBKXTxyss7UUCWclEGS2UJyQaQkNsbY\nzkfvsSQR6sIeNAPJthqHsFEanz7C6LrUaF9H3NlakRQ8g6y/Vb4AOA0IbYoI\nErGV\r\n=7cZC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.981ad970a.0","@material/theme":"11.0.0-canary.981ad970a.0","@material/animation":"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-indicator_11.0.0-canary.981ad970a.0_1614298014031_0.8855195418803876","host":"s3://npm-registry-packages"}},"11.0.0-canary.f9c9e39d6.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.f9c9e39d6.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"f68631690655f274a78357fc4cf20570f8837af4","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.f9c9e39d6.0.tgz","fileCount":38,"integrity":"sha512-L2iwwx1kGnA42YPOgngONGAnC9CeBTyZnqWrZ7eC5HDlnCYPtFvynSclTRw1lfwKntWx83jfqfphghrIWxGykA==","signatures":[{"sig":"MEUCIQDXMf9GDHOSWh9+hoajvJ1X95k7Bz61vxed9k21zcLQkwIgDgS6GRStPN16IGVHUtBUiab/bwRZ5msShBidcncI/Hs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOUAiCRA9TVsSAnZWagAAFGQQAJvekOS/lKiMBYSkvKYT\n3wKwYOx+WUqRoP72xdD2tp8IxQl4n8KnAhxC5xEX8socC8ARuOL74InSpZMr\nBxxvMUKBa2jFYGG1UEWEihfRAh67THRK8ITUTkG7Bwt83CoqjU3y6OOgB6V4\nMOCZr2B58Rw5FRFLCXCCPbVJA6SjUHFpr9k25Ayhms072ifZvDb2CcS00z/l\nFCVSx/g4LJdvk5njHAcAbkXJTBvC+9yZPgXLE4RFgWa3kxDqUC6o6DnN8odz\nZt3r2Qk03+2Wj4orWx3s2C7iOVqm5dn7/4m8TnA4HPW6C94u7nhbqbYmCjF6\nbbGFF9YQS4fV78xBh/aBqT+ae80gOvqmrNW6Fuvwytwz9M5EtmmJHDUgsbLm\n2CrxsxT7S41zjBIQeGMeBys+xIp+JFE9SPFoprIhpoRVGytSFXbPSK37aaIY\nnWuX/HZb2V6r5i42Dg2Ht9g7MMHQATKLlRMYMYvf63sRxrTCNbyNVvQ+kKOs\nHrKRZBW/xuVA5AOwc443P8klTQu3kFRXt3yl3JMyXDUfXz2mKdSdKhX4L0gV\nQDevU+YW8Hzzp0hU2YoB1aorTiPjMlt8+lRf4rrw4C+JTAPc7fB9djdW/y9+\nKrRdhSer+5da88gFvolI4CZ4AweGkEpI3hjTQ/NHul1af9ldqs7Sm8gNdr2g\nL/HS\r\n=rDSS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.f9c9e39d6.0","@material/theme":"11.0.0-canary.f9c9e39d6.0","@material/animation":"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-indicator_11.0.0-canary.f9c9e39d6.0_1614364705630_0.1215395430347459","host":"s3://npm-registry-packages"}},"11.0.0-canary.c97d7d881.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.c97d7d881.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c2ce4b7dede5e98e426b7e83fab4ba9e51cec8c2","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.c97d7d881.0.tgz","fileCount":38,"integrity":"sha512-5ZA4RYayiU+hmDLzbdpYX3jXjCdtdDwVopqkJLCZoqnVOIQakjC80Obqur90ePPqLYRj01yuON1RVH4eJ+cQvg==","signatures":[{"sig":"MEUCIQDpjye99CZduifFRIfYiU5cIJsSeeHJENe076tQ4He1XgIgLv5ZAJFbmIlMGuCCmZh2x9ZjtKyFxR6ipyc2shC2nvE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPVQfCRA9TVsSAnZWagAAbg4QAIxUDDzENxro/PUxc1EA\nxRLh9cTJ6fadD6qmqqsNREjGMb+rrP78SQMr+et4yAedoGWilV0iVyPkV/xy\nGh7gFb33svKHN9mhGlK0w/p3JbhrTJ9iZy/YpKCczID1b/SiV8qAv7r8ew1J\ns9QXDytgE6SceUF3OWbuR8C9grU2b/mIwstOLHxBGRGdWbggP9fyLrd7uyOk\nJt0HqSydCGI/pcvMPn3qybT8R8JFZoXfGxx50E1oareQ7Dav1zPPbjlAVDe6\ncyefki9jl6D1MQ/eoWTRhDhVk08UOI2mS6/E5uZeJbsdAlwrW+CZv09+loST\nBEuyt7DQGo0VwXR7v2cqs1uNdn3dzBx2lz4KSe2bLK+SG1jk4HbgfIeV0u7T\n0joWOLpdQ7/UacyrnlnR01S/fIohLdQ5WqnGsRfxdnWu6Kpqod+/IprROuwl\np8/3sY9KjTY6xobwZXo5E5dKAj57Ll1IAe+vupROi6AuYA7bqaAHMGAzB4Nj\n+MNZyg1u+O5vWT7o7pzHyNSdJEn64FpsNVWLcAw59LDmJieowbYKqidl4b2P\ni7HQBd0gCDC3Y0QyI6INpxpO3XkhGdpz6oKwbDg/2M6ttiTjpfgEVhJzbkbp\n9wn4RKHHlwy2ncmq5aGKdgrn7qBIGNeRfCS0LQzZAzVPCWA00XB8Nlr2wNMq\nEBXR\r\n=2HjS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.c97d7d881.0","@material/theme":"11.0.0-canary.c97d7d881.0","@material/animation":"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-indicator_11.0.0-canary.c97d7d881.0_1614631967164_0.4251554161739257","host":"s3://npm-registry-packages"}},"11.0.0-canary.bf670dad7.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.bf670dad7.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"337dec8b922c1a4208e7c9c8846883bf9eb96e32","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.bf670dad7.0.tgz","fileCount":38,"integrity":"sha512-dHDLrRq5dtPpOyU/ppQAL0s8DBethCTtxrbrZZZrY9+MI/usFQiuW+/xqzfxI1Z0gFh4VEmpBmnbElHuC9PEFA==","signatures":[{"sig":"MEUCIQDkpXloAtRLvKte8wv7vlzsImZ4dHAcVDL0W0OV7PjpTgIgJnkzakmX6VKOyGbhhTIm42yJ09ZiATtZU8tI/fXnrnY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPtZNCRA9TVsSAnZWagAAncoP/j1GV/OHQWeA37SE505p\neRymxz/Irpaf+pIITL35Xpsqo8pWO5cZhU7Jl+siMJxqVnZQGkuDvtzwl8C8\natp8SeaHPSyOxNknSgCo8fzDpYvilvwQkjChAtui8//dlw4o0pScfBY9Zu6U\na4qMK3FCEi8w3RYix5DXE7yDngHW0t5ypsC6pPkDpvlQIkZbtb7gTcL091KV\nEUR9e0bK5muB+XKIMKsISVC9+sqAzAMTlzNL4u8XtRLIkfpxyvRUgyZM1Rlv\njUqpsRMN1NXNcYPErTPKsyrafOTS/erMKkTt8Lz2RWcMyt4F3aQ8ztZiXCsH\nO0bwu2lO6arl44fcJgonIVdvEYd3bxQCzSbhX934M9WLdtIKgTNMy0VzsXub\nj8xClb1kNM/QKIkJe4JjTQpEfLOQZKIxFNGPbLWKy3giCBQoSd04UjEBZk1X\nipOU+/2CY8ysxjdyADV8Q9W43/opP1GNzEAQQgqPNrnbZJRSNeYL/GuB/hIB\n7g56dEViLNuvOVPpBIfN75Ue6mer31MHm60fCljHhaVGgyYoC++HNAKcbCns\n17DWev2cdt9ZwYk0f3njPiTd6jq+sBlJ+eI1mbIGvmEZAH+3cSE59f7sEUji\nRDQBUsStWSM7npNU6Ins8zP4FtZDknZuFzLLxT71QwCGscG+80jiif2t7/k9\nbYjA\r\n=SZCT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.bf670dad7.0","@material/theme":"11.0.0-canary.bf670dad7.0","@material/animation":"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-indicator_11.0.0-canary.bf670dad7.0_1614730829010_0.027614761872429172","host":"s3://npm-registry-packages"}},"11.0.0-canary.c7d98fcde.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.c7d98fcde.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"3bf1e04926b8659bbc646e819aee9c5927dc5db2","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.c7d98fcde.0.tgz","fileCount":38,"integrity":"sha512-2/bsDtuj6v0+AYltzANb8JzaD+8m57YICNw6H5As6mHT9iVZyvb1twbaq1glDNbPSQ9E9gsX+rAPzpxgW/dzCQ==","signatures":[{"sig":"MEUCIQDzM0f1nMQ+3gXV9YZIF1HO2oFTIl8iv6MoSVftOKpoOwIgdULgcF1RUAbIDA6p3kvGBZ4zZxfd0ckXQ2cVv0NPJ2o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP/IZCRA9TVsSAnZWagAA2Q0QAJkx9hEgX2nFH6vN760d\n40f90VES38n+raEAfQgamHYI355OrL+rwC0N1B8OvXSJzj5Th/AyLfwpDOun\n0BA6MInpqEloQTJKSLXkdq79my5GZAgUxJRS5p+2hRNvQrBEGz6FjRSkeGdV\ndrcwgKWpdXuO0lNBfMgYrKx0ZKMv2DdPvIy/sfEHTIr23846MXujzlhInaH4\nXDLdSB2seb2S40+YM2PZhMVNVK/rbQKqfaF5FNjVJ2Ou2fPRlWzbih/+awiX\nobpjYeVV81UzyD6xK2OE3NiOm8ktJfIlbdNhMhpYcbSEpwjo2lctExgmC84l\nebhI5VmNVsEJ+1t55TrUoHzlDwcRDq8utCUM+mjjIRJCpFnjjKn2ZSW34Qt8\nInaZgpwj74xWlRbVvnzbVqEHr5x4YHlsQCYYgbC4ETKuooowU4IghHf0TRxy\nZ2oiKTVZ0aa0YOlvRuAtM6S+D13Rr5WBTtV3V8N2S52rYJL0if7Gkkp6Pd9/\nNSDCKArXILa0qVD6EQEEEf8Q7wfhu87IWW2CKisFQab/l57lwWIcx9X5BHFQ\nVD2tXogp7BuKS58ZGhl5hvmdMQwsFF1vHqeDz2UoOLnwqEQYiafthbxBewjD\nN/qNYF4QMn6Aw1o+fAXzkkKH/QUyomXy7oPSvYGTX8ZIXHYwQwFuHUzzZSXs\nz9rq\r\n=uakm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.c7d98fcde.0","@material/theme":"11.0.0-canary.c7d98fcde.0","@material/animation":"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-indicator_11.0.0-canary.c7d98fcde.0_1614803480526_0.337578951069893","host":"s3://npm-registry-packages"}},"11.0.0-canary.4fef8bc1e.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.4fef8bc1e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"eebe26f0a8d0caac6046ae90860f9134c7b632f8","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.4fef8bc1e.0.tgz","fileCount":38,"integrity":"sha512-QfK2kdxE2HWgqPvhdHxMcoppbWpcaI1w0y60/99S/bLagrGxx2toAn0YP006xieq/acLSatDIPN4FKRMiN1cMg==","signatures":[{"sig":"MEUCIGKQb3Z4zp0tzkwX8mQrXwqiQ2aB2Mdfj83C37R+jp63AiEA+rKthzGcdPwyEJqtVQBVAr7h4hvLYk2a2JZb4h8ixN8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQBqECRA9TVsSAnZWagAAOIMP/Rq8dCfcEOhww/GfGfur\nvBY4EiJhZkT+6wnkuQkGdusRvybMFr4fmsf9fWcZ2T5I6qBNbsWPD+7q7Bnv\n1lSA40+wGo0JQ+2WdEELX9nf27cIMnx5iIeu/HDv9XTgncFkAq1RTMxq82zM\nb4BTYVSZE1XsLyz6u5FZLzTaA7csFy5fIvojukBw+u1Xl2aGPfKM/gF2DGoW\na2Z5YHAtfR8rKI7k2C3W27baVzbWvh0M3yBAkshKVxJjcAz/GZy1HHG2aI14\nT4A4+WWpEm0ezC9CUD0uQ2OhNfVmxFZVTZk3rMWPJr49GxNUaWdQEWzR9HBp\nh4Cni5l1+JFKAowg5Q/aeLAVDk88+HEyD4oksgv0D4lriD8CF/5oaGYVX8I/\nqTvBufSyU1bW1Us4GkHut1lBU3U10DcdIKuGdcYbOuUpTICwE9WO/gsPMYP5\n7iKZorP0KtKwC+otkmHh20YVhIjASoiEhDCRidLEv1NE6RjqG0Cbe9TDQ5bS\nswhnSe9xHPCqAhKnJ8o9fdUMYYw0ikT/v/m3nJ3V+Lqj1di96vnJm1IzZEZ/\nQeAqylk2bRc0Tyxp0r1dGubGcADneTCsFnw4jDFnhliH8fqDD6ew0TUqdw8I\nZ+poVZCk7jYeLFfSMNeHo+9Ujuw5zIbaIB4N3L+B2iKO6jBNZ3XrYs6Zf85q\nD9XV\r\n=f1wO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.4fef8bc1e.0","@material/theme":"11.0.0-canary.4fef8bc1e.0","@material/animation":"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-indicator_11.0.0-canary.4fef8bc1e.0_1614813827989_0.5460630995728024","host":"s3://npm-registry-packages"}},"11.0.0-canary.afae3a3ec.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.afae3a3ec.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"cbb5c8d23f8b5d1e49ca322054f1ca4ba1cc362e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.afae3a3ec.0.tgz","fileCount":38,"integrity":"sha512-Z01RhDvyYrkZn8XnAxyMIVh8gYtvcsN8Y7r0oJG1XVyprGMY/T0PqSh9twhFDOHRqYzSNgEu2GvcFClStA4L7w==","signatures":[{"sig":"MEQCICA2ncdYRMKt5ACNbLRxLfMFXEZfO0yskwsx7tPjn6CsAiAsQgKX4sDsx6hqLb97gXKq1/oI7QZJpZatCEAissmiAQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":178532,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQB6/CRA9TVsSAnZWagAArXQP/1juJjvD2bZkQjXXbFmD\nQiRMDbABBKCtuszkH1KNq7fyOrT1rsMr4hM6cdd5DpPYhFOU17YeC9UMmPx1\nbA/L9Hp7nuY4Rd0qZnkx51UCc6GWYceWJpR2v+EDi44ii4cDaqcEQ9BFU45Y\n+n3GrLwzO1PoJGfGrunK+F0wufx8zOIu1AjDi99RdoEuW/fGPiSEJEn4dTp4\nX8V7PTQ7E8T2I/xad978Ahrt58RsVQezcwJIZ+wx23WC35JQtrS7OgeYyo9p\nEjJcMQq2D0GMwYbqkTT+PZOg23FS95r+Vy4XlVmkqCzcuZVbDm1orJtKqaev\n1QSOcBZ5lhM1fCKX0QeosbdP0vx1HKHbZfyAHZ+kpta05/KoUBB5dTkWgHYY\nzTz4J5xmqYi4ArQ6JQFMgGP+ucwtYzHuoRJV2XiPnItyOU8dJlCfk/xfM1kO\ns7BmmYyqV6E7tcn9B6x/KpGmt1ihZH8wQ0450TnwgUVZExxrVus1BTI2y0CA\nyG2QnyzC69iXsW2O5m/5Nn5yXjNcUgSOG9PTCJktcprwg+zXwgyLamzzEtaN\nuzzoIm91qKPLKCJjDHvOR7tLQDW3oR/OkdSSJ1Txao73OBAg/pN+1y+QNbi6\ny/KBtBFsSKJPZlSY4sKSvz8yXhw1eNVJo1FUyR9LAMZfxkEL2TttU0p5YPFt\nZoJh\r\n=8/sx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.afae3a3ec.0","@material/theme":"11.0.0-canary.afae3a3ec.0","@material/animation":"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-indicator_11.0.0-canary.afae3a3ec.0_1614814910589_0.09673159121660246","host":"s3://npm-registry-packages"}},"11.0.0-canary.0a0b10f22.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.0a0b10f22.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"91c01c1f08f9f2d7d83c3c4de08104663b0aaa91","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.0a0b10f22.0.tgz","fileCount":38,"integrity":"sha512-q2QC/Sc/hJpKvMX+Wt1FYJ/nWwbtfsjlt9PiRyF6Xni47XrxpmPbjNzLHugUq3cGVcUfnqfVgBPclPQ76Scrbw==","signatures":[{"sig":"MEUCIQCtyaDkLMrwN0kfbQgYdj9gM3gJPJa5hsQo8xrQ+aDP1AIgXQVZkUHnJips/9ufRSn6IORHaLvDf1Qt6KBGHGtmSII=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQCMXCRA9TVsSAnZWagAAQHAP/1WYV2Lxo2OosG9kek3A\nYMpH7NapkWY4ITV9b3kgw+9mKxGtMASmGqm4/Bw8b6fZ1BgaOI4epDJ+0jr7\nksorTJ/BEPZOnDFX1n+IPPmFGNzMXdpE1ehArjPhArh4NTR3QAVNsNCV6iOz\neFkM6OwWhsQayEvvLs8AC++5QR0Zy+oU2ia40G7XW+jLQQkSMi/V+MrNSb1u\n/4AXlgoN8DHPA550/fp+xWltle/rGXhNFamAK8WbuP7c73Qq7laNXstapU04\n9O75Z2MlJMeP5j1dbCOgpmEa4wh8K9zvs7bS8uT5c8C5uh9frQxZi6zDIZZg\nCbDiVR/IsXX9TywR2kTn42f0BYvHWf3wGqe3jwi2hwyLPDTSpn2xoTYB0mdl\nmf+m8W0wXOf5GLG4cxMrsqREJNTe8wxG0zKHC9Eudd8lfA737wNBj8TZvWEm\nSz97XNf7EPfi3RbGC/HTZFj3wokkeS6wj5v45BMMKqPbsuFWRZJHSknZmzOx\nF32/dy3C2y9e+WkyX+da8wC81GFdnwQG153FZE/Hgmpgj1fIACtSgWVSS2aP\n+dWE/xd6lRft4BFrWML79FMuUUHKtpgjcy5WQNwqbgNdGl8QXOs6R7Ozy9Ey\nXbzdyydOpp/Es7a8tXB/7F6M9qxQCdyAFkk11Mt0lfSaWrre51n3wstbAvRC\nrAiT\r\n=m/yt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.0a0b10f22.0","@material/theme":"11.0.0-canary.0a0b10f22.0","@material/animation":"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-indicator_11.0.0-canary.0a0b10f22.0_1614816022884_0.261083790120304","host":"s3://npm-registry-packages"}},"11.0.0-canary.6f678a91a.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.6f678a91a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"6f01b85dd972e40c623190e8b580e35ad2cae300","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.6f678a91a.0.tgz","fileCount":38,"integrity":"sha512-EZBhzr7XOAEELG+0wwoSzQekj6JzMqJzx2LWSldfzqKj9luSnXapUf5E4iPW8r3ZzZ/JJz5/c9MITqS6rriO8A==","signatures":[{"sig":"MEUCIAdm/QrApctZmEjupMGTbbzFOJGUWQtKpTqOXU6w1THsAiEAjtGup53fg8+BPiec4mEI6yAvfh2+u0bB6AcO2ZiBxEs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQSlpCRA9TVsSAnZWagAAcLkP/iAsL5hkIeiPMoQWz0dw\nY+8ZchCqr/6REMJfiFySdUdN2oxvXerhZmmk+fcCzizxfSDVyXZsj0BObI1g\nSNY49at43IXc3DIRu+UqYGipjVSVygXgjcJlBdO071aKPbJKVcpEvs4zU0yw\nbP7HXTW4/6n2PnlR2E6AHuOJkMVWjjLWwJhVZaSJuBzRUvKqR9c30wGvO49t\nRFsAzQ8ck7tYuW+JjMT9fsF+aXbIzQt1y25USMcdfEQZ2sENDz4HI0VF17Z4\nH44mBbgtFMRnX9R0pA/j2XpHGSX7yr/L184mewvlcznI5UvwLl6IFeihmlMW\nMWznb9KCGLVcAh2NlY0xWj+lCp1ymq9dkf5OlpqX7GW8TCnrp/EXso0H7w1n\nrYUhbTZr3fAgYgMo5I7IeidN3BbK4MSUW6fo+A77ge/Q9f9AG8iBQPBm/+rb\nopauPxPKxBWFuM7uIXMIagB/TmJctOtU7pXDKufMLuH44wqfyEACs+/OpBe0\n1A4Z+SzNNsGOTB/VRkpAS9WWzSJI+t+y/Ru+6odIkaEf420UKokjjRlXcI+B\nXkvg+J5n61sV9YZ7OfFYTAbx1Ckc6V6yVvKPil043/ruKLES+ib75VOzVwQv\ntnKYJ5h7w4ZaWZKGpwRPNx0aZNnnhuI/mbT9iu4jv2fwSeNsVc5WN0YV8vO7\nuJUk\r\n=IoBm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.6f678a91a.0","@material/theme":"11.0.0-canary.6f678a91a.0","@material/animation":"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-indicator_11.0.0-canary.6f678a91a.0_1614883176556_0.641036888119515","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5f1b613c.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.f5f1b613c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c0a9b6434399527db376223c691df69295987d54","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.f5f1b613c.0.tgz","fileCount":38,"integrity":"sha512-m7tGn4/+k8UhB/r6z0CeCJfUFaO1sFOT8tYvYzb+5aQxETYsGm+GzBzr7rszhqBCzzPMdFtO8ttF/h6xkB5YKg==","signatures":[{"sig":"MEYCIQCIlac9jTfc4DbdHCHsrPqBCZoEISCsP3SIARJfZjGSuAIhAPSdtpvhbJOmhHFGAKBGqgH8Vcxzv1MXdy6h3sCPg/h7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQUe3CRA9TVsSAnZWagAAAfwQAKRT+uQUrAAAasMudSkB\n7fdGQBH1zP7J0tKNgttHEpEtiuC6YTL4QaYYCr6V5YZS8i1hn5D1Ea+F+cz+\nJpKRh6vH2ZYuWoMKyg/bYDtUT4dNoSvKPtQnIRfAO4oBOktLa2FflqVtG/nw\nKGW8Dz1iC7+bb7xRm0/mmzWmn4eOOFgPVy8Bdg/7tt/Yw88TV9VovHUmBow2\n622bnMcw3I7vqOIY+A0XZe4QjnL7AdwyA/BlZrO3LhY2ga9Hkx6aQVpMbM7F\nKDLB9CukWIQ7M/La10ScLdKzEMUkbS5z8Q7GDdLbBe0I3+izj1MYIAnNKa7x\n0RgKcEI0/F5f87E4AlzC5qm8mwPpTJaJpn6pPsCZY221l6lRw2D5G4f1Q4+I\nYA1J3tF3qpxiQwUfTjNceW86o2ZS6853VebcJ/GYdgwSKZWbAZfkr1Yr+Laa\nolBa8tHZDPcEqRKqlKaUhPsbY2SuM/xm9qaFgqZjGSFq4En+q+tPp2xZHD4o\nrhCgvz3bJpjVq6zv3bWi0dzyJvLhzPdQ6b/YeSgeQ+ZBK8GQ38Q8vkX1PsK3\n+Lj5WWwr3Ons8kSIvjFzHj6nIjYVZc7ayOT5KBybLKMePZNBXoCOZDonZLZm\nw8v38rFm3mfAmRRNe3kBg5FHx5O1ZqzsAraRpDDp6wJbSXkfyvMDefE3Wg49\nttvm\r\n=g6b4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.f5f1b613c.0","@material/theme":"11.0.0-canary.f5f1b613c.0","@material/animation":"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-indicator_11.0.0-canary.f5f1b613c.0_1614890934935_0.32190111070969074","host":"s3://npm-registry-packages"}},"11.0.0-canary.606e767ef.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.606e767ef.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"4658967ffe4c72c5e2a64defa76d5e7488ca3b5a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.606e767ef.0.tgz","fileCount":38,"integrity":"sha512-08vCHkpqwZnVpVhzr0Lf5SBWD4nXHYVjgvrxzQ/YEzBG2LpKoYl8ZaToeSCvDcKqjfFq6Yk6U2rGjcY/1cVslA==","signatures":[{"sig":"MEYCIQDSjzdFJaKSoioSnPmEhmsmvIdg0UHiOG4AIdrKFJEPvwIhAP+YndkbfCYbSVO60K1NPdP/3IzU8lmB95qDIvofmaih","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQVTWCRA9TVsSAnZWagAAs+IP/3qQ/FUedGc01e3YI476\nMG1yl5k6Qp+HWk5TV01qPMDxRpENyhgvdMELA9IcWZ00TWRMGzWqFFeF1xW4\nfkG6cflK74a7t6stLzwgokvep5v6wVKo6dIs+4P4zKLtG4SOY+xuFhUFtTpY\nA7uAvIznKFWQoOgM0X+GjfFy6TE3GDnWfnomyGXEuKcY4YDi8WD4kBUPAzjl\ndCBp+U6k1mDsvgkRTBSs3AVf0gzt+3768uZMTfURb3Meu1/b0y8tfW1pwlrv\nTCXAZngQGR5YD9uMsygJ5YBKJvduouN9mXSdEGM9ZeC0uijn6h7Cj4R3EKHi\neD+4K42AnO4p7wTXFE8+VXEENg6I3ouK1PjCz9YhTazBqeaI5qf+b3xSiNpz\nc3Fy3dtxHpYCUdh4SIaNNpumIo2N/EsN1Ij8JnyIYSHYdUS0YOaH7q19ChJE\neX6A7paTejhjzyMmkJ9c3RNKzHvLcQBOuBh39HvB74YaX8XaYk/hJH1usC1i\nFEieHjyELKBii74+IpooWvFVVS2VO/fHbLTEq8T4YG7I92l7CCgcYywfFy12\nXVsg1ihFOIpMnS/h3GZUpSWjhyut8KZGEmw7yflaqFEIYwx6b7BzWrqYobPO\nI0eX4iIk0uaWA3aIE/d3hlCY6gsgkQqij+mNrkz+UHA3T3wojtLBcQ3KVfBD\nfny9\r\n=ki//\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.606e767ef.0","@material/theme":"11.0.0-canary.606e767ef.0","@material/animation":"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-indicator_11.0.0-canary.606e767ef.0_1614894294356_0.9129767441305012","host":"s3://npm-registry-packages"}},"11.0.0-canary.f77a4dd1a.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.f77a4dd1a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"8f6b168c9c6f8f1c2ca9f4c6a5382f75502a9b0c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.f77a4dd1a.0.tgz","fileCount":38,"integrity":"sha512-Oqf7Zvzqafh/cVyRZq34o0Bwm4YAdE7hvNb6D/XSZtrHdL7W8YaBq2ercVzL920GZLVqMeZge4N/+yRC0INwbA==","signatures":[{"sig":"MEYCIQDmpcKpe8siJrrGf/cjqTxAQbyDdnmlOZXp8L/Yb21owAIhAOZvNLbxdFPZpeFEn0T4RrjpcOntj13NndyX36m2PpmJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQwd8CRA9TVsSAnZWagAAs08P/ju+sBk1yKnpXnBTrMtq\nDfDJ0ce//fbu/CXgpwTBi0kXR0cMVGaTv8n6e3vUSzOQfoekJZfmfwElkYZh\nVrdCQqSVn+AdTmTdG41N4kHc1taI/ZnL/ORqj/WlYgNO7iqxP/+5f6HH3EXx\ntd3o5Wum5Atmkybez8VS4G4HDzxIJOyHS50iXBY6kAekehYEn+qYPShi9uvT\npeDB2v0CWNFNuB3YYXAy5EoXhWulO93kax3ZIfEONaFr5TDszsL8UDVWGOr/\nGs3+mt9cUFu+piNt9diyyfSo8BNYDS0P5aZOB0HfIk1hZeEQKepi29MQjOYC\nrwNcsv05Saapo8PLwVwLAbixdO3GTxwr9GKLo8PtQknm4Aog8dTswtLmgyiV\nFpKZC64D0TWG1M9M6utkostCCvD8TN50z6aLlRLaMNaikiVhPL3Fy8wFHf37\n2NQyCoxdQ4NCiw75RrnWmLT1m2I1bE4kfVAs7rpBiKimASJY9wQg/wiZtg52\n+IwwS4JdLZxhIGdUyTIdxXSI5mEc4mfMvqHsTNPWfUBSfcupXZnCxbL1On4t\n6NlURuGGHbzHfnq6Mty03M0+f3Rlg+YTNN9npKgHMNTnOMYttXzvWYYejbf6\nr+5Hc7LuSw0/eCa/WsEX1S9qULkNmbRb88xqlQns5lWjkrncArnDgPr3K52x\nS1Ki\r\n=0cD7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.f77a4dd1a.0","@material/theme":"11.0.0-canary.f77a4dd1a.0","@material/animation":"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-indicator_11.0.0-canary.f77a4dd1a.0_1615005563898_0.04390176892114628","host":"s3://npm-registry-packages"}},"11.0.0-canary.2d6ba2c23.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.2d6ba2c23.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"69f37622a6d5fa48abd7ba2e084c47307a9bb628","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.2d6ba2c23.0.tgz","fileCount":38,"integrity":"sha512-O67Trc4gZ5CZszP1G3EsmoXdJqryZofUEq11YAH8+FHLfFqQTlxvAp2yFZ2mYqivSBPJRR9r3odky+x3IGi7pg==","signatures":[{"sig":"MEYCIQCEZAn6RJ1UYUOCtQOGEPPwGS24EkHLBDUNeQMeJUOH0wIhAPzZvAk/pXoWijXDvy2uTZkHTkmYRze/ByA2d1SYCHbV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRqieCRA9TVsSAnZWagAAiAUP/iYw11bkJLM2THchBW7P\nrPbmY78KTexEgEtlbXxFObBVdD95NxStWttNmMz+Hic2oYpyeMa6PtHWoVSj\nRQqoNfKxIe7yw4uqy3gRD+TaRCoXohNXGqZaOE779DxOFBd3STcePvJOwZ2b\n3iwaY5cyaOoKCYc2gvi3SVKGu2+dQsTOm+XfggM/lHiF5Wqbk6QEVN7xxbhk\nmKps7DE8ynu6nJzx67tKU6+n/pYWkVsDG5CXCsLbJYSzmRKN9o5wgIUM7z38\n5eVbANRDyWO0rxln12l8wKpAhqJNUCJatAzbtVObbps3tWqw3BYsSqQqls4R\nHs2UOdmNvZpR1OKyLPNPN0GY3j60nxKDLeH2yNnOQB3Kb0i0nmpJ2+Wdjl0S\nbHni6UrmVERgqZhTAOq8Xe+WQC6xj8tQOFR6m/rYnQvh1HaZmWL2vPkIm1XH\nzr71+/viD2dcmcnplEhpvr5hqPf454MHN6xCv2QC7y4Ey0ZL+P6osxLq4acg\n5E2DivGG68t4ZTqGjbeyyZK0Bp8dSLIPoVKO2XP4kDew8Yp482QrlxCqUtmq\neS6It1ZD9p2Eb66j/f+Rmeg+swO14Hki6uK7097NbOCRbuLa9kbJw3SyDi0D\nm7WIIIrOYONbxIFUadfMBjTej4i3l22kVIZ3gBViXBhsG2QJbyeNBTtsQTL4\nzKDG\r\n=tf/V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.2d6ba2c23.0","@material/theme":"11.0.0-canary.2d6ba2c23.0","@material/animation":"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-indicator_11.0.0-canary.2d6ba2c23.0_1615243422425_0.38328753148826067","host":"s3://npm-registry-packages"}},"11.0.0-canary.7522dcaca.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.7522dcaca.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"028a04f6f13aec36b0d87f0749e81fc365ee8b28","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.7522dcaca.0.tgz","fileCount":38,"integrity":"sha512-zJOhFahl1zonjfjzKdHVjIV+Z/XGFjpByI8grNd1qSFdzuIlzedZerD2GJEiso68JgYkNVLMT7v9de1tAfv8Mg==","signatures":[{"sig":"MEQCIGS9Q9IhuL3YoCgHLlZbDbejm2jWSl33/gZhsZA0kmKZAiB1TcPhDYRIA8BcEPmAA7wXmymUsW1XUA0aEZidPBZ9Vw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRsDcCRA9TVsSAnZWagAAlVUP/1pwL3kcUWipD2n/CX3o\n+yqLloktf7RviTRAsEXV820wo3lJ0+XIvQplAQY3mZ4HvjYkYYLkV1Tmp6db\nufGcUqqozKgrLg09U96NjYzcMFXXC39IzjFiLn+2AN3VN8fr70QqxECFps+1\nuSewKy279Zrl1AhuYbu9JZPzrsljdxqrIcwWFrvuwxB8mNkEUTsbOzEgaR5i\nXTdB9SJWZyl2JAcKrE9dZMHramCzPlA6u3gXWi+9v1ifwD4zjGXIP4H7VJn/\nX/VWQWimSpTVhekaLp28FBQgd/QjmJyx9kKqApx96JxT2fN9clc9nV064Tuz\nOixs20SSy56M/+PgnSftlsQsPrwCQwhu94Mqaf0kWh9myuLbPfSVPhrW6pwg\nkh6BN5Se2G8xqOVMkAjddRgL5aoNMWWSJOl4V1Ehe0SJdoq17tdLeR9wovaY\nhxjX5SV7QlWAMEgAq3JshCMPYLM61n/YiwVrJo6B38TkbEx2YMv/tavaZNMd\nHzm+1RxgR+ztb9H45fYGAd7F7Ee+2z7KR8WweNJBJ0R7DMU3Vu+dfONqq50X\nZr5hXmvSBnq54hM1L603YuUsmrNZw/PZIiqFSuxZ7OH+05THzBtrcMwFPLD2\n68hzSIqpUT1PRFr/T8rfMKrIKx/64Vy3oE8ZJYiV9x5lWq8n0VvkrlvR2MO3\neefw\r\n=Ifos\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.7522dcaca.0","@material/theme":"11.0.0-canary.7522dcaca.0","@material/animation":"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-indicator_11.0.0-canary.7522dcaca.0_1615249627648_0.20292209602812994","host":"s3://npm-registry-packages"}},"11.0.0-canary.5c0ab7401.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.5c0ab7401.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"4b754327c699d9360bfb8dc9466cbd34f2fac622","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.5c0ab7401.0.tgz","fileCount":38,"integrity":"sha512-bEDtxnhMaazpBThq2YA9X96Pde0vd5J6bBRX1TKF+C1yZXfX/EvP2173A6/ZTLXMDs61wQPLXaEkt7bn2JMmVw==","signatures":[{"sig":"MEYCIQD0PmKXYXutKio5kxVu0q50MGujSNDyliX7lWTd1RwoXwIhANP77INH780oMpJSGFU55M92kuZZN+SzUtN6HHAkb+rh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgR/wJCRA9TVsSAnZWagAA0oYP/A6+tvOl/SbvKMKa3/4v\ny79KDYjzVVbZP5YYTVg/Pw+wwrlCBVE4ZWZqiGBmgVtRdKNzCmZ3olQMIesy\nWWOBwjiVnBTtEf3eDhVf0f6QgAIPOBDFj8UyDNLS6DRvYweCwIf7pDeyqn/t\nvP5fs7EMk+pXgwoP16AIcTaNcWZvEDio5p38rubSfLzyJfE10HUOibV2i0Pl\nLIjRkFhzPhEHX5xQme+2qkSPEpu3oNlnobKPBd5yxblkdJOEI+HSPjqscZQ1\nRrTgpZtObXS2642tz1JDztWC/VZM9wfb4ZGwadkFVcoLyQWTx9z/smqT/L3D\nJHrrnfe9+QJPq1zHeZlTb5Ya9B3RU/Qrb5vzYmvjGdD+QgEZInUAGnU/U63b\nZN5XWxImB2OZTBt5N4EkyWwn8m8e2cRdvGDC6XNVtg6XIn6RzTXTYrcFpqXM\nd2TV/QXEfiwX/57prwFRctMhLuw6Y+OJObv1r8Gs54pnzN6qb+N63ErTWLjO\nkVSeg0uMQCAUIzJ9lxnEn48DPi1ekxDK7HijrfYWhA3lhd71jJ2lclKdC6qB\ncasVNCfQH6UVMZAuqA0hdg46kYRIKmNCxu+Nrf3w7YJwI9bzpCuIbU6vVO3L\nrwQCMH091/4/PEhNRf/1wDuBIcLpMpJdWp+xkzSEAcDLuZxiLWApxjEeXJfM\ndmrI\r\n=Pg/f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.5c0ab7401.0","@material/theme":"11.0.0-canary.5c0ab7401.0","@material/animation":"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-indicator_11.0.0-canary.5c0ab7401.0_1615330313025_0.4768407933454446","host":"s3://npm-registry-packages"}},"11.0.0-canary.59010b6dc.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.59010b6dc.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e5f699ec7f8186b19233ea0910560325eb0c6766","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.59010b6dc.0.tgz","fileCount":38,"integrity":"sha512-TzWsO3cqwq+dFmQCJvn/t4Y3t4vvobexK5Bp5UgHTjG9+HMIjaEaikKarpRAXA1Y7XB0buRWiwo3PM5wu9K5Xg==","signatures":[{"sig":"MEQCID/u1mj1uG3C5lCLZw17+mdXf4lodtvfqZ8N7Prb5VxFAiBSreEwkCKrFhAa9FuO+lCC2Fy/aCAw91QvHf9SzjPH7Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSPpMCRA9TVsSAnZWagAA0B4P/jzJr6fsyy+s/gwGeo9B\nVF1FFVQOyK3vX+4K1BblHTkrnahVdy24Jo7EZW0+p62BxouHDLcUB5lnM+pW\nMjrmwKEiZQhgNYA7GSOxjfSVE0nbnyloOA/9Hq/M7ESCI0i8tFPQqOToehTx\noewezP/WSDLLpQToJI3V5AJtbrNOmMqsofsDUbZAW9E7Lmy0SXqjVuBPGoFs\nD7BUPZd7+4sFzebkivgRxWgSwKreqoqpLB3fhgMgj5IXWqZR2wVjH6YcHmca\nN+Muj/Y4x9D3UEC8UasiTA89NkKuBSOE4i3w9KH0qD8CWX4ouiE6/Z+wXn5Y\n5v/5ksMv4ChM4OaxGRxhVNU+s+8NOBzTog44ySXJoAs3lV5h2W4iAyPB2FiZ\nEcrNFukaK/jcuL/3aN8pCF0ULYOP1UTVKvRdPCQaBpK/Cbc3wR3maYXlYHvi\nnXn3xF8GHjicC7VzFqt/y5lPDNRl8fu2fOs8uFUrLzF08TNIjUYBliGM2OCQ\nbL6F7FiMgVEo6wotkv8NCwwBqKXUXv5365hnVO1t2X+ewTXdhJQF2bJ2k+ro\nNJNoJ/75/0qVQtLZLF5S288DbEzF5hliReVFXLKg+Abb+F1fVT5ukER9mvb2\nXweMdrOkRKPMEQ2H28cXXAfigzq6CfAvjoK36ySjOfeFNOnRBuqh9mIdJHzl\n8wHg\r\n=aSAl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.59010b6dc.0","@material/theme":"11.0.0-canary.59010b6dc.0","@material/animation":"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-indicator_11.0.0-canary.59010b6dc.0_1615395404301_0.1094738789434484","host":"s3://npm-registry-packages"}},"11.0.0-canary.9e52f5544.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.9e52f5544.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"4fd00e6a6b36e217210eb04014429f44afb4b5e0","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.9e52f5544.0.tgz","fileCount":38,"integrity":"sha512-kf4vp1w0bQ81hezqcOwulAZdhPBs4mg7sqKBACrA4mwk3XeNIcn8VeVxI05fWFYAU7/KSeQLMRW7FlaE29O7mQ==","signatures":[{"sig":"MEUCIQCB+60IdlaWa9vitHbKHFAqoviM3EMj1T66eCCXTNlzGAIgcSWFg5wU5GlK6OtKcQ/gPWQiuQazU3fSW22EW5a0lHI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSVUuCRA9TVsSAnZWagAASmoQAJ6ysgHfPzU7VCtcW2Ss\n2CAJ+n4hiP85WEBwrf3fx54GDHSe1ZtN2aERZaFgeVJnTnUoc/ItWDuL8R7R\nKRvwB6g7Wj66S/aF50LaQuypLfA7agZHd5nJ5vL9CC00p0ipmafszc4gqgv0\nzQ+Vla64muveqB7RlnsuhCFHb8Kik86fTBR2nthK4kBTw7edVhjSH/1SW7Fk\n74iPAQvppyIddo82OEONZwszuQdTQAKroyqkOdAgAkg5cRmYVn2oQeN3o4wN\nDOBTg6as4buQrOLeeooyRSKR16D5rSscV19ODhk9rn1hS0HAcvyyx4iYJTNM\ndzRsv/CrHVltRjjZACPVFulzGe7mraPXn3gyLIt/5Ywzfx5fvdSfkFBVjJHL\nOoVOp9HyyzBZ1RR8o90IH4iuXtkj4nDD3wLdg2ninSg6n0EFFHaERZ1o+EG3\nulN+JBF1rq/N1VQvUl3fnulSn7GxSDTsGsCRmHoY8J84rAxT8l8oNRdywQtf\ns5M9xAXAEepF6HP3pgwtotPmQclT0PIHqhONdCJ4R9NrCXGrkfPKWFaClmUX\nJV7dkAitOjiVcnK1KMTIDp0Ye00+ihH17UU/TESoGWm5q72+qAwcobHN2tUU\nZ+FZ28QWJYfrr4HAb1GRewxgDQwlozpdM614s7emAXFq6vKGCKvhsh8qiPmX\n5ZCJ\r\n=PzA2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.9e52f5544.0","@material/theme":"11.0.0-canary.9e52f5544.0","@material/animation":"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-indicator_11.0.0-canary.9e52f5544.0_1615418670464_0.5754886431081712","host":"s3://npm-registry-packages"}},"11.0.0-canary.a678806f5.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.a678806f5.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"de772d3b76ec1e33e36e32c80a53517799df2e03","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.a678806f5.0.tgz","fileCount":38,"integrity":"sha512-kbj/Cl9/jZn9WZyUoLj5pzqdOlZwJneWvI83n5iqhgLClbCvsntaRRbmvfnqrZutYFAAnWDbVvDz4pyprJAEew==","signatures":[{"sig":"MEUCIQDwxqmqhQr7kcoMZoe4UtFYdRGWg4eS3+U4lzj3dUpq1QIgKlKSSVRQaRqIw8u0vgPgaMbuLzdw5VROQ0NcOxojtcY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSXcmCRA9TVsSAnZWagAAYYEP/3fthWlY25LUJkuuM6C4\nA8cBiwSkSCmnhvglTBZ69z5WSz5ArrAYlD9zF/+majE9Myl+V2ZbwF8I5wmR\ngACEL2vtCfJVtn9JnWZN6v5Wq0UVip/h5NYFcODVtQGIv1cmseFzs7zuoR3A\nRFDraHYGV1xAbCrZh0c5qrA0ewK41U2WwCH5JCB4AcEGMNwTWjUKzf9LyBHO\nUPWr1HXxfW4n5UOS8r7xL0gXE9Pxhpi5o9oQCNcvk5I36U7UT8X/TNbTnumX\nNua0iI/lLxbYblKqg9U/3/VB3l/dAvjMbE0QUd/AvQWQWrlX2J/V4aYK0QZA\nQTgyXVQzm4cO1QDbChw9irUGYdgbCJaj1DOVNVT5/4BWHUMyWV9EE39PRUse\nO/lpUZlZA4uM1NuA6YcjSikytv+7wX6/xN/EAWVZfGt5FLNKXzq9wgVNNDEy\ndeL8zQ1r8eZ+FjWWWHORMO6LUHO+4HvZDVBiPEIuz02RjQsCrtTDLKfOxD4e\nRmBGy9pX6QlVHactVrEaclS++TItvQ8y4pvAuFuFpT732QNERr5M9U20iLWq\nvB5yrCaA3o78kgZkBDajwM+hR0OKaeZhOe7PD659AWdWzQR5kOmceAYXvSyu\n0K98wim1Pw3M/rqMm8nAuhyIUTaQkD1xBjfFoeNvPiY3QlHjZ52Kw/Hz1s/E\nvfDt\r\n=774O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.a678806f5.0","@material/theme":"11.0.0-canary.a678806f5.0","@material/animation":"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-indicator_11.0.0-canary.a678806f5.0_1615427366483_0.47900352689454495","host":"s3://npm-registry-packages"}},"11.0.0-canary.b2d22df5b.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.b2d22df5b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"72c691d7c758dedd2ffacd487955a1a1bfeea673","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.b2d22df5b.0.tgz","fileCount":38,"integrity":"sha512-x3cPDKBD/hVefPmPFO/t1dcqFdaovwKlhmdvUvpPtglbCltXofq/BfXh1OBfQZHtOocV1uq/qDhz7m3ud8FBxg==","signatures":[{"sig":"MEYCIQDG4SQDE+nyWgepPYTX3n8Hvt/vq6LVuwzo32EDeOTzKQIhAP1gJSGXQD4/vRW5l8iDX0WlLAD0tNwyuoPt7mTkogBe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSk0UCRA9TVsSAnZWagAAQOsQAIs165qNcKieDkdU2BZh\nl5lisQ7rkKtj/ppxKBnjWCrn+Ioh5DimGFzFVjP0rAsXoQThMPA981IqcOTL\n5l0bfqJ5fRz88OZQox474fCMX3ettzlbGrxXAA2Fkt6qy2fgvE4zgEbDllFx\nDq3Rfjs5ynsbRULC0ZLzEYxo90P5vZyBp4roQ++6hVgROn6A821hYXxW9tzv\nrpKGdzO2yd3hQYrPJTt0RjoM/7yKpGOSXX6/tObUcYJq47nX9csocJyvqTsc\np5ggNV0b0yMb/YR0HHoGIwwaI8/N6IyTBCNXY/2z7F87bNAQCTCvrZYwCkWs\nG/G8AxZJFQM/D2ipI9WyVFLb9S+RFFPb+yS76dmeEcK0ahLfI6YhKJZDZixd\n3J2G2UJjx0FquZXIxebU+QBPHgX4fsT1Q2mrtrrfq2obNHC5OuGALoIs+3w4\nLqNYDtwLF8TQ0OOjmIi2KsgJiWVwbwgJJDaPvH48y1P8SlsFn13P9pdVcxtF\n9JWsFvefxbc6IRRzWxFW3mJvLXuiq/37y2JAgj3rwOQtou4SPw/s3X0dvYRH\nPRqKxfsn+NFM2PxNQBXs5flpFmm7P2AQvPwG1gHJWfMq7kxyBgbTrVICaOmR\nJCO7+QQOdFyzn4Rn4PakfthMsW/+pUUl3VqeU9pLDbxPO2B3deQjwXomr9xt\ndFD3\r\n=39Tt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.b2d22df5b.0","@material/theme":"11.0.0-canary.b2d22df5b.0","@material/animation":"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-indicator_11.0.0-canary.b2d22df5b.0_1615482132245_0.6593755461230282","host":"s3://npm-registry-packages"}},"11.0.0-canary.81911b707.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.81911b707.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"5e1f2f3ee25e76f284b07906772a577f70eb64d9","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.81911b707.0.tgz","fileCount":38,"integrity":"sha512-xAIF3qMKWlbbo6VfyeU5vtzHMTi5L2S7zvkHOz5WlN9x+BLssF8BEnyU6Qek9NV5bu0QMDt+OzRRddOTp4g6mw==","signatures":[{"sig":"MEUCIQCCPvJl3mlk4r+KYUFtHFVxumzNer9L8KBPU3Dva3OvGgIgSW+O9c+b4muLe1+kuGj5Dl1auPOhwcbZXHJ71Z3BEyI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSl/vCRA9TVsSAnZWagAADgQP/2Y7MiAQgbR97skpVChX\n8P9pxFQXazEonVi4AolkMquBbxFe3yiSFj6HUjLYKDti3Dqdc3monULEjaL3\nF6Kchv+j8MEElrcymPoG3xSL5ouTVRT9yQUCaV+MHTbia5yQzYQ9zCybD5Z+\njp5wNlZblM8WB6/NABDJ9RM0rmL2K1qTJ4NZl8+ska2T23tIz9LjQme56fV0\njMiJrOaa8OBjqdFSwo0XKdtJrJw3yiIJk7qgjdq21rSOXwxdbER63RyPYaJn\nAWBCObObQNU3LM7a+qz4Ov5KuclSfo5SeAyREHHQPWVRWqfvcpsUw1qa9IVU\nqDdE6iKWr1/NRFfFwPSn8M2J3SBicdQjK3IQraK+c0SE0I71ZlrMUpG/d5y6\ntNxC9enU5Qn/vx2xhYNh6SrQlT34iUJtultbzpRj3G++162J9O6QvnY+eJBm\nTqtPxxUK+MRhl8FgM0XlfWdRNv+zQuJt3cEwiSIkTYwulfeN9r54nRwoIIOX\n+mGijoLHYiEGaFsYQmWBAgEjxoPav+mN90pqLL29r8Fyb3cmt9N9Zs3laX/y\nIobIQKRUdcHzcZ9wpt6J4/itbtw2d0kb4qIFInEsjXu1yuhlBp407wZhhjXq\nEcM9lnYhGI/X5j7cCY915ymZ5TRFDgNpUpWrnyom3DeDGrTCS1BrvjkmxaJO\nO6Oz\r\n=kQis\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.81911b707.0","@material/theme":"11.0.0-canary.81911b707.0","@material/animation":"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-indicator_11.0.0-canary.81911b707.0_1615486958623_0.3553108002252314","host":"s3://npm-registry-packages"}},"11.0.0-canary.9eeb35c38.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.9eeb35c38.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"b6eb562fabc90205c7d41717040a477b1e7d486c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.9eeb35c38.0.tgz","fileCount":38,"integrity":"sha512-7WxnHQlfkffjrsFkuhky/STByagoWFwEH7f7TZhQR+UV8uxE5t+0/sc6C5hUbYHxGScYsnEVlalt3Pt6cPeoqQ==","signatures":[{"sig":"MEUCIQCUa6dSzCG7NcG4gQDEuDv3IEA3HOwrd9Ik1GTFmoh6WQIgRfOgkFVe8zXSedWXcr10E7FcyJw4fQAfC69abKeQCg4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnE0CRA9TVsSAnZWagAApxgP/0qcTG01B8Cwtcq1t3nZ\naC+aqWXr/7xxppBS1YET7lzxjJOAyadt5a9jmRUVnNnZP0GSnvF3hQBskQcL\n4rzBq4CN+CiTaqP7WhiDc/+wwH06lTJyaJOJKI5s2w5P6UQFQpsdWMihyE8o\nRQwWglXMBdYUN5/iPmH5gGcW0fJ1Ur/XJ262R9hifwcJugO4trp3blHJbQZY\n/8PblpqvA+yU5E814C0gkaa93DuoFCr1JdJDQa75/2D9jsgf9T/EI27HmZpm\nA7i8Z08Zj7nOKYIEWMawcKhs1Ss/ycK0Y/CYv+oiU40Vz4UgxWhNXv0cmG+w\nrJKhwcd3IlA3OYfSpMt/Lw0PTytdHucORlUaBL9tL+S66Gi9XiSRbd2k6O7j\nj/32lKA/wU43Fb2z42CI7/TG0ibM5oE11eGHb5vUISXANUuMABx7exCtI9Ir\no6HdpIEGlTQF+ORjjX8fmvtPF24ZJ1RViYmlxmsg/IS2Ox7iIeiXilFSVAr0\n/QIi2OyPIMAhwYJmR8JZbcD/mezZAAuqDQZMssa0i03dtHmMwf/KRtPUAP4g\nUIZgvC+j9W593o/vZuSqwPBAqHu/8djGu1i83Q9EV621ZSjzg5NLJY+gF3sQ\n/Z2G3W0DCbW12vTh7W7wf/Rz2OsTa9mf/NaE//qjZVVVYY8JUvRztchDZ7cn\nxc8N\r\n=joiF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.9eeb35c38.0","@material/theme":"11.0.0-canary.9eeb35c38.0","@material/animation":"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-indicator_11.0.0-canary.9eeb35c38.0_1615491379544_0.5321155071160097","host":"s3://npm-registry-packages"}},"11.0.0-canary.12be3e95a.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.12be3e95a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"9b57969ad394ed0d8a26245f098ab7dad837aa10","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.12be3e95a.0.tgz","fileCount":38,"integrity":"sha512-FlxjPghgJGNp96KPuJiDX+jUkSS0wg87PKZvN/F6ovzfhFp7RQHmixmRu8tZBiV+PyeXYTeBAIHUSlV07KY3rg==","signatures":[{"sig":"MEQCIEBO4u0R5y81UraEI1utBEzXJ/p9ry3nGGP2HB8VfY+MAiBTxj5zADXXpYRQCMo5rM3K2sScDa1iHtTkHq0N7e1N7A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnb5CRA9TVsSAnZWagAAmnwP/0aMVePTy4CtHHthe8j8\njlGg0kF9N9ceXKxzaRsojA/5mkaBIBlKOJuii1PCZhYDyY6i+Z+pysAgdmEP\nxd6OOn5gf5756qWUu3lmErpYQ6D3Y11SFMRtUX8GB6jU4FUu0xmhy5SMW6S5\n7EsaMGoKi/p7OmtAKE775yOj6mEAHQ4riX/FJ99n10suGjjfL81k+5OKUcU6\naAULrPxMeGbFoEbJKB4lE7RcB+AfFiKYNxnnqWuQo/GLV6Bm8lNR2hWwD8ZH\nRYkzUbCDa63QZ0ZX7CKRx5ZOvOXFwjmGE3sa3Ln+EOvXTOC3plLKL/6vwrMC\nqgzTs3h+02VH1MNNGnYAxDtBIIx91iHb1WoitPGhwMc9a4g6XpeUnZWGxeot\nqJXbPwbPF4wVOAdfqBoIcDEqrBVKabSGVKZMzi8+t0iY/7JTDxzg+JoPgVGl\nmEuD/0IakHBPWvUhqRvYu+cf7QzxR7NUqVvAemD3kuSi4k9TEF9y/mWWbdRn\nJvW5UFPNCMd+1dbZ8N7ft0IdmyPM79uMjGMpSZYcsaYTikhDvV1yhEYkXpG9\npVCgZno/hHNG2BGEHAYRZ3JGIdvQBS97Emd1uFV05WFlIoNI+uehCmvPLN3U\nec5kg79jcMI9dYMA3AvjWhmoVxmTKMusk7hSIfwkit8IMbquavitv92x7V+A\nR2TX\r\n=CkPa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.12be3e95a.0","@material/theme":"11.0.0-canary.12be3e95a.0","@material/animation":"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-indicator_11.0.0-canary.12be3e95a.0_1615492856748_0.033938888136866296","host":"s3://npm-registry-packages"}},"11.0.0-canary.e683bdf4a.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.e683bdf4a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"17ba72a0e3e7be1e721696df9f4456f7bbf3ddc5","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.e683bdf4a.0.tgz","fileCount":38,"integrity":"sha512-1ZbTThdBZLnd02VcUU+tvwyPSkoRrp3YojeB3FqvZBRDpnoz2/AyQQvIvTvt3M0TdC8lb8VuoSnvLjfwmQO38w==","signatures":[{"sig":"MEUCIBz/htNCVkqGhHRZbIh/XZJziHV3o89QuPnTSi7gXdciAiEAodG3S0D8G8HNkDFBHPOQhpfdqB3MVZ3vNUWthPHrevA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnivCRA9TVsSAnZWagAASacP/jtyys27nIuHlCpr51Xa\nKvlYQgyIHFwjb6079x21b1ot1YYusav/wpIeYaWAHgfCb0tJeSoShsfTZrIK\nqtXCtMX2GShTwTug+m/RPfjz+9juqEJ/wIPF4+kidSpU1QbuvnlpfPMAfl5w\n1VwK3MUvQKSgFrgDnpkJo+o+Zyx+UhhFSptb2MFMElxioaDUPtsKuVyMgRMa\n9NYt2zh8d02kJQ/dtSz1KLLpML2SP9DgB0bY5QY+mgKNc679ucYhSwyEHg38\nNTHK8z2AiCbIw6cLB/Qqeh5FMYVDXGnI0IKAzhfsCS3fsU1ZImEZICrYVZn9\nuiqWowtjZ9SCwGqd6bCdt4cltX3eWuGiZAUYua31FgVjlQhru/S3/lX8Siwn\n30o1huvPWAEqXu1m0oB75eOYWW0kdFeGWfnRXk+VYVfwjstwshAUorVBKFnG\nB+vdnqaDMrb7KWr8VaVB7L2+V7JBb0hMdgkHJ0Y+QudyVA3fsk3JzOvhjuAz\nOwMNN54G6krCF0jnLg3XLve46hdDGLnYGUw5EEKQUdeQX9D6jkAr35X72aso\nZTQ2ynXbrGcvlmVTx5anLhsvn3/2l0MJEbsjnZh8iP4DQCV2L+GzawPQe5Zl\nr0ESiRpC1qROaKsXFRX/s8+dmIZbFAE7HP+LBGskb2IU8LADX7cLxtmEn5GB\nwNKg\r\n=N7sA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.e683bdf4a.0","@material/theme":"11.0.0-canary.e683bdf4a.0","@material/animation":"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-indicator_11.0.0-canary.e683bdf4a.0_1615493295270_0.6623214538197217","host":"s3://npm-registry-packages"}},"11.0.0-canary.a07b6d486.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.a07b6d486.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e6f56156e3545ee1a2d3345c0f5178d6d6241e11","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.a07b6d486.0.tgz","fileCount":38,"integrity":"sha512-L6GtuPoxda1Ub0e6+PVU8ynvZeUsczJp2EFobL382QZ3sFXmjT0AxBKkkGONtYt88ZtBB5KxfPgd+f1Xbjn6KA==","signatures":[{"sig":"MEYCIQCQ5tSS9MMWpWalfrAt435jIAUvPEsGMkRNt/Z7UebJgwIhAOG/R9g9z2XHreIn6nEAs8S3uml6jw67r1hub3bMNv3l","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSn5jCRA9TVsSAnZWagAAO6cP/3zVyLZ+QWcVulci5z2q\nxrHmGdzymk0/eQ7bkLyjyHdodXzOxT6uyyYOAi3Vq0EsuhevuxZD14cpspzR\ntvXycMTu3X7OOJmTkiC4skvCaUkQi64oX92jdAL3IIAMyj46/EcTYRH/HKIM\nm4mfpoz/zO7RL8+80K07KNWYGptXbjjaUhdPS6jY9lSQ7SFDdF6gi+uUxxUH\nAZU1NyTAlMhUqibfC3Cye2XGgHfyewsyUFvkiLI/7fl2H36JBoFCVGzsSWPk\npGU7U2kytKBKLSA5zoOcQHSgI3pxQ96fAMsn0/ZWPVPTF7W2RY3ShxOrDQFV\nb9nRZ79TsMlh4YyRQQNgdFsLzz4ms+RfGhl3Qa1zXgjD9X0XY76o2rcIwgD+\nVtx8EOjS5tEGx7vSKss9NinZXHEPQGkOLcM9R6oHIjMNuzQ+VptWATXFB1Bo\naiYhIMSCFHA7r/7hl95ucuwet2ajKoO3yH+aJEsBj9yQmXZZzHrGxPGT2k+6\nkmFLbBIXwXx+2DExbjeTbAN9cV7Q2Q8j2pJ1HuxhXn4iYEk3saRIJDzflIlx\nIOq6FU8bRrCuf90oT+xLqtH/a66Pra7absn4eQjKMQ8xxj2vpM2snrOoiQel\nKG2j2r4R6HhH1/Rq6xEA5+qpEL15M0AXvBnAjGnuZM+HXH4fd1LSqXf3t4Bv\nqV/P\r\n=ta6Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.a07b6d486.0","@material/theme":"11.0.0-canary.a07b6d486.0","@material/animation":"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-indicator_11.0.0-canary.a07b6d486.0_1615494754915_0.4783409630585691","host":"s3://npm-registry-packages"}},"11.0.0-canary.1e0653477.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.1e0653477.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e3df1871a615ca0110c81715cc93b56b5add9367","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.1e0653477.0.tgz","fileCount":38,"integrity":"sha512-JP3ggs7Mv6CRRS3SHGrrqxXQ+PWqUJxaKsYGqOYe7y4B54T/JpEoocgx31weLZcBKZlW3e/01aL6FoEb86AjOg==","signatures":[{"sig":"MEUCIQDQfM8dXmsE49M5lizfPs2xXLXKCvOsGH4SFDYm68k00QIgSsCWrjnF4R+tk8ruelOGEAfyKkWAnHILFbxOBACVJW4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSoAaCRA9TVsSAnZWagAA26kP+wR/vmQlTn/SpSfiYbap\n1Ao6eRcr4K+0aMfdlBTPTrWUfs8G1ZA17YU/wz9jzuIejahe/4VWbfsNEFx9\naBUsnKmI1tqpGJ0N0SlIC9wTvAw7EAL/KmjFD4jU+Wvobyxufrv9MGCnjKhp\nd0vCpclKGuqCI3vG1kWgMK+0baMMcNz0XpE77Z3JYtB3qZQJcrNMaoUgyher\niOZhSpkv3SRt+VFXEWNvn5MzUgMGqaApK8GwfTiFjrLeqEPHLJMrARFXdHmq\nQAUUpLiVF1zAWRjo4YX/m4T19n9W3m9QfbUX2vzxfJpAZtZlicgXt0IqPX2I\nXb0dsOJ/oLxT6WMqUIIphRvCYb/aElOClrbSk2PpqABH5GRV5vRZrnkR4xjx\n0eawvjLyts27sJGveF3FLiaiW9GADoyEyYKRKfhyYJo+WyTATixei0HUHlbQ\ncR2vtv5E+vGLbQNXEUN911oCGpvmE0cM7lnR7vBZERaJ7RXtC1/8dvNCu798\nLhjtOYzwLadRdNdPHd7a9Zh8EmagjhoyD+h/X1TTzMg02/dID/6Ezvup9tua\naQTUZZWVtg17i6SiTbV3rkndmtDCokqlAhcJRRGivCxt74tDww0SrwdtmvvO\nsfSmxwWyBHXsfno2EZ3Ma2Xel6txKrHV9Q1dIhZamPwKCj6b9cEv9Y8MV7F8\nY29q\r\n=T71X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.1e0653477.0","@material/theme":"11.0.0-canary.1e0653477.0","@material/animation":"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-indicator_11.0.0-canary.1e0653477.0_1615495194146_0.8012685892261402","host":"s3://npm-registry-packages"}},"11.0.0-canary.148e8cfcc.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.148e8cfcc.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"1db53f6024ec3747b479f9739a7beb60a0077ee3","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.148e8cfcc.0.tgz","fileCount":38,"integrity":"sha512-z1cs8YqyPfV6oto79v742lHFDTCXcCaOe/+UxPZSZgTswn8yOP0ppvLdHNKaMXpg+vbpOe4qg1yGxHm5/fylPA==","signatures":[{"sig":"MEQCIFowLtAEO2RYPMKHEaaOpZyovzIOFoyMyyF7hfoNi2EYAiBVh0LcohBh7TqVTuS3gkzex6uJBgCGt/7GRLKptbewJg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSp0gCRA9TVsSAnZWagAANdYP/2KLXuAMI5TsMZMO0ZfU\n0qqaFZ/hB+A/UYoj7jQX1OzpLxq7GCt1fGRtBp951n7ezXKLjP6o719v79nq\n4ec/Zyyl4VOMgPvz05m/rrYb5u/rTXAuvBYlR7RWZPPak7tsIsxy4IdWAIvH\nlY/YEJCPkEG4g5mYNO+PQ6Xwp6p4KUvJVg+v+2T3ry5JqzShH+7mIHjCuSxr\nQYL2D1+Y9npWX11xuY4BL6gciP6ZCv9+aO21A1ZnXLKAweiLnT4ZMhlLMJHp\n1nnvxwmYkf9KvZWNCJNUnACL4GB8a691lm/ji9q8NpxJSrCAxawICxsRtr5j\nX9AmZqlVO44lGX42g86IVlnWSlLsWq9CrW6MDLO5a9ytEsLpW4NUr/ad4HFt\nrl8NWEN+gl2f/Nk/NrZ++UB2FJwoa+sxv0PQovfWYnyBwpRkSScuQqVfUvFg\nafisjxY2ZpAxeOexqsyaklrQR+CSMx8JRv2Bnf3IHKShvQpupESGNjVb3is9\nCejapCw+0ioB5zuA9HfGAl7W11+c+AFycv9RDPzLcN1ANbN7M4v4UaPYFe5Z\njhGwYHMm62Cdw0M265eVf5VZV52/EkmCsKo+jWIORJF/2N7hbQxT+jxxpIvI\nPpMzIXrTMb2Hyh/0Xt4XntN9C4+sxRQjn2etNylC28aKTPbE5hh1Rkz7KY1b\nPcyk\r\n=GNJ8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.148e8cfcc.0","@material/theme":"11.0.0-canary.148e8cfcc.0","@material/animation":"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-indicator_11.0.0-canary.148e8cfcc.0_1615502623641_0.6146780117606396","host":"s3://npm-registry-packages"}},"11.0.0-canary.73a227194.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.73a227194.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ba75c0fa736a11d4d060872c0ad082a921266304","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.73a227194.0.tgz","fileCount":38,"integrity":"sha512-wlxW0MmYKqoOj8Ff84b81uyQ6SyD+/Qx2bYHoejxArzdZ1zVGirkE5xpFepqWJSQOkQCDDS9meuREzPQTiyEFQ==","signatures":[{"sig":"MEQCIDgNZH2Z/O+Ep/syH0+Kh/YyuznvGImq3JOCKAGCXOVQAiBSBD7bfVbovoIICA+UMy+zshjmhTbKWfMX3Uul5ohxSA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSrR/CRA9TVsSAnZWagAA5DgP/1iNHE996dPFg+TaoAlo\nddr2EN8aucMwnGRY1O1uFLa4zhhnnRDOFwkVujuuoqip0BN0nVF99aFA0XGn\nz4BaMsJikrrZ+5XVR0liaXsc+/BZK4M6xceCDrVRW3qsacBGKjF2KmICx1hr\nDyxierPjYFvZrgfEyW0UHmTj9AaEocj0o+kEKub2CZCLI/iTxZDDjLGoEgMv\njfRBuOrFTtKiNo4BaD/YXI23olLJdy2UnfdUrFnUUomWcUjgoFSgKqeoLIeC\nzWrAA2sc7ksQrPKGqMgxTwXmS28x6LZ8T3dJVZEABIMuMHpy/1BiHhlvdGBE\nNJgDOLeeU99Vc7QbVbYrAfaDhGqm/QSeJ1yK4Pmt8HHzoSE6LqPB6WWbavXb\nfWLdfMq2fhTHHD3Rx630Hhka3sIms4AfacWEzmSzI90e4TJGLLMdDBo+jXNz\nICihj6fmfVX+4Q+5s1hiW/byYZupjZbNwE9/m+LiZyAX/z5gEcMHXofSpzfC\n+znlZLmHscIQP77BNbkvvj5A9Zc1Y7UWyFljkhUQ8oTqpLANbIVzj9u0jtWn\nJyF53G5ch5LGRGzK5dmZxM4GkUawQ9f6ITzjwRnjN2pe+2jtoQJrFs36l896\nykbVjHF3R4HbQViEuOHYCxIvJuznlDBANTcedLhuoGyUb6RLbofQIbYtSsR0\n88Os\r\n=0UnT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.73a227194.0","@material/theme":"11.0.0-canary.73a227194.0","@material/animation":"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-indicator_11.0.0-canary.73a227194.0_1615508606592_0.6610716354886137","host":"s3://npm-registry-packages"}},"11.0.0-canary.f8579b7ea.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.f8579b7ea.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"1b844db8732d2fbaf03a40ca3ad8bfebb008ac4b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.f8579b7ea.0.tgz","fileCount":38,"integrity":"sha512-QHSgpRONLgivPIg2GfRNlcCYVxaZ5CaCZTxd/QLTU6U21/ghd4dWaWHtnGEa8zA1JqxWl06XWYxxI6t69eQv1A==","signatures":[{"sig":"MEYCIQC6twiuX1R9qJ/XrefVb0xfvadKvadU/i1NBSeVU4ulyAIhAMtqIfl0JPUUfpXSVzPnvXWiWX2m6PF3zQrhj8/b8KrO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgTB0wCRA9TVsSAnZWagAAndUP/0BUorSENSCqBWZG5QbJ\n5gICjZw1XKPoQ0GfPTKbgHFKxL8Vu1yzIW7Uk6ohBLIL/I0KiFOOFrtUzH0a\n+0nljj5rwCHDJbFZOJ3ZAMPBU3oRn43D+rm6Gilrs6+7bHBKS7HEI0BW7CaV\nz4B0yji0gHcNCdnADCOjFBjexxQUcTdnk+H8OuqNEWdqfNCQR+8HSTOxPxli\nLcV1TKZVSQ55lcCPY1mjhPRYFEYW6MWAVpoz33VgzoaOMO+ZdHi4HpjoLXCp\nk3lc/D9FVNJf4EiNYEJxh8ymzmBTXv28iJVoSRErMPkg7qVDGr3M1v7/UmHQ\n4fGU8JiEs2GX4p1KxAPvjpCmpXpJhSzebSaiHg+tDK80y7Q1VBdGtNSAxSdk\nUuxKBnnGURH8czHBcbbM0EZ9hQPtTm10qlWOYOzTsGDiX7naeJd2WsVGJlT6\na+eo6bThMNiO7HmPP4uniSAWoYvXxil0VzA/7ms4XM8gvCZCo41MwOvBDV0z\np5Hl2iSe9mD4hmY97o7dWtVwDu7wBNbA2ZgIsVfwCtLQCmI2YT7lxOjv/DCA\n/bKVyfzuSZA9TqyWNZPPPNq6fw6+d+Z6MsAvAJ9HvxbPgiqa1g6RKYErj0As\nPyHUywgmDBSlorLT0UjSgLmT5rqnC4XtIb+28fJpZB7MYq7Lh2vYKqYWegFQ\nDlMM\r\n=Nemt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.f8579b7ea.0","@material/theme":"11.0.0-canary.f8579b7ea.0","@material/animation":"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-indicator_11.0.0-canary.f8579b7ea.0_1615600944183_0.7576068192328509","host":"s3://npm-registry-packages"}},"11.0.0-canary.d2a39d300.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.d2a39d300.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"87fa78c8c0d7e0ab064536514ed9b7cc5fa13b1f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.d2a39d300.0.tgz","fileCount":38,"integrity":"sha512-bLRFWawmxtq13OSybETJtu9bKQZDjFV79rhAOQ1UxsJ1QCQdKK8yJaZln3UHlJmkq/906hTMytBNfax3vF4LjQ==","signatures":[{"sig":"MEYCIQDT9l/p0mtyFT+PhlMHRRSGDyWXBTgtO5TcqATYL1Uw+QIhALqywUYPhWxztVvLTcLjMBiK/gHkALtLA/viYKxEb53F","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgT/0NCRA9TVsSAnZWagAAvJ0QAJ8tQlt2OAwi6gvQR6/A\ntKsdmNMiK6MTi2KS6YHtwUCDs8X4I0MpyPMHxE9GNw5Ty3Fd2KVQ6h7oqU6P\nHnQOSZof0NsyfqssE6g4P1qwJxxDtJhPVQvxXCOTardCO/1oavp85raSnSB+\nCF5CPTwr0MA5mRVgMUPb4Kf0S6txKSXiQpzwuvcX0c1aa5So8X1CG0o/KXHj\nJdnemNM+1ThswAHbD4rsdhmYTYFe2OMsmU9uFkpgzxfdIaTlKO2r/IkKXQeb\nQMGwKNxQ1TBqi9wyrBLfqQm0zC46BuGqcbQ4oO7E/TIZY2KQtXvGDTkvANMP\nof/KoKo74IsKfu+isq2DjjTxNCykfPtSyKAHb4oCzw5natusK1yAVLix6Cu0\nRCAqK8jAHd93W/z7e2PWeGRvNfkNGud8H+o6XHzWHbyXF+HZXiojmJVjSwTm\nDXDwBJWan/o+pF9Rcq1EwHwRD44dAODilk4GuOMaVnCUorc9R53fRQ3254Sz\n0M1rs1Ys5dLar9YUmhMgapfmZshxqXMBWu9VzCENQ7Co4/lP3ItmvnJefeLg\n/NMJWFPDWP5aY/z7Vv5zWT+iMO3ZdqqRwBYptxM8VzUVtAlR975K+83ssNpm\nMAgpG1umTIAUpaBhE/eaKa3n4kxOnT8qfoabZ9B4r77n6n+AYjKNgZpdif8g\nfqeg\r\n=gaJJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.d2a39d300.0","@material/theme":"11.0.0-canary.d2a39d300.0","@material/animation":"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-indicator_11.0.0-canary.d2a39d300.0_1615854861052_0.7282972324246777","host":"s3://npm-registry-packages"}},"11.0.0-canary.7cf67823e.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.7cf67823e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"9262011279af11bcb9d37e375ab685f1288dc58d","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.7cf67823e.0.tgz","fileCount":38,"integrity":"sha512-yeJMAtNSJonD5anNbAZiAjeqm42t9+4l/3hEkl480gWA2IfFqW8mlfsauUN1FPBOjIzbMwoB20Dw6he4iNGVLg==","signatures":[{"sig":"MEYCIQDLYXLOZ74fi7wiYxZW8LHMLd2dwPNv9WuuG5POe0VFCwIhAMJn2c7ntJxfdoeIl2NLH56/Yd2YfCtNnb2cp+0syEDo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUPa1CRA9TVsSAnZWagAA8boP/ii4zfuNqsCHCmyuQ9kQ\nxcmfqNk4nA4Q3Du4u4+GtoQHYRcmXxFT2oDRVq8w44iEezkZArLq7JNR1rQE\nNh4VubLe4Ha6+t5a0Bbi1IrT/nCsSjbCvoKFx+TCcVGqrJaASzQDugJPJIwN\nBTOshxDkgcMUyohgbG10rj+oEWvyK+TLSabunuc2sWZ1idUsJ6p+8ke/RJiS\n+Wx9bSxfJGR/t92h5JOrg8Y7Rhj1Z6LNpyy0tCw7P8N6XwtDUHqGGVhzyk10\nCbCYVyWTCO7gFG5wmU3h1UHzaS8vMYhG3ngsCouVR1z7OQoUW+Gaz+bE6H4d\n9Vg6csnQiFdi/TLsnMHLPnBIAfyozKkmLv8vt46pYYlhJGvAym/m0uc/kPEC\nqna1EtsHKXpaVkxOWf4pWD65ORq/6lGLngQ9iIvf1JPyrXgMga0RusrvNJrF\nNJh0tKG4RJbsU2cSACJprbOiLNh4DJeYlrqhzhTlc0XhSsSWo/Cy2A1MjUPt\nyYBCCc2LIj6wSjBN2JLOhzyRKLVV7Zp7ep3xXarNe8VzpU/UXJQxXZ3BpHXx\nCpXT2nRfr8TfbsDAKsSRBF54vEjxiWPGU6Pwkkko7DGqC4NVjzjUugqO3ibA\n3GqIbCMh9nVOtcx4LhRpJKn/Q1HBr8qCyEfTGsNpJvv0KEpbaqzIp99Hog7T\nFI+d\r\n=3vj+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.7cf67823e.0","@material/theme":"11.0.0-canary.7cf67823e.0","@material/animation":"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-indicator_11.0.0-canary.7cf67823e.0_1615918772751_0.220997320435524","host":"s3://npm-registry-packages"}},"11.0.0-canary.67d780c79.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.67d780c79.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"148b297c7a53ec009abbf495221778e7e2f10a29","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.67d780c79.0.tgz","fileCount":38,"integrity":"sha512-/lpKflmIzObye2WDyyAR0t9qDbH9qimJzN2LQANe6HZfGA/kpPzWQsIRh+KcAdhm4pyOTMyAKS5jIlkzW15PKQ==","signatures":[{"sig":"MEUCIFhCC27wLn5V3x/j3CNBH2OgEbryhLhIlQEtHX4xpAiYAiEAloFJVUB/+giq+ImfVEohGvwNi0x/3qHX9hZ1grWrZWo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUQtBCRA9TVsSAnZWagAAyxEP/js5d7b6zIBoMgU0MP0T\nLQ7osXF1t/wChbhwhWmDmqykNkaQXc6WT5v0lDW8BOwxzhHxzMZ/0l/f38iU\n6i0fUdl6szg+/+3G5CqbOr8sNJxsw1KX2zkWiLT16+KGcHIcSZGg9Ehdr97T\nt9ai/oK0Hwi8GWXoKy/OQZxfdjNKA8t0Kw8YrxzhgpSMrUofgccVYBjsb7++\n5T4Pdd6gkFDmIDq7Yz70HFBdcmmpRbq/PDEImxH9KAg27eogaY3HbCryaNGu\nRo6V0DCNziufPtXoErVXkp8Vy7a5vJEgRUtchK0G1K1z0B9D9WZLbAIY0Ayw\n8W38QCuPDT2xHpEeAasut9HX5jMgpQ8QMzlF6CQB4Gg2MsRC6q3IdPO61vAZ\nCuiz++kxiUSZnhhc6FMlQxRcdkstAquHRFoTteC8FUJSnd8ucrhwZffxeGQY\nV/Z8GqiKtqIziTV+02kRowz/2g/MkRtGB2oZS1kx7GgXF1nEiACxihhRaP8V\nOFxenjYpyiHyK3xshTHSB9tUuHA50r4pIsIY1JZnUYw4nlkdH7XDXVDkabNf\nyL/+O9h9uYaTd4MK4gVTfSBtESN5DYp9lSQqXKTK2jFudhQMtL549j9fJGeh\nE57PbddBPgS5IWB9xY/UGF6uoCl/oDhETrmxdYMktvCdLKLEmFmswnb5/Eo0\n0PWZ\r\n=/RHV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.67d780c79.0","@material/theme":"11.0.0-canary.67d780c79.0","@material/animation":"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-indicator_11.0.0-canary.67d780c79.0_1615924032972_0.08551899357425352","host":"s3://npm-registry-packages"}},"11.0.0-canary.0f358ddae.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.0f358ddae.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"65a2198b2b7bd0447140525082b47fe91920e761","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.0f358ddae.0.tgz","fileCount":38,"integrity":"sha512-KQXtP5z5Ak6+OiBHefHCkXsvPX0JxQbVHsy9lrLG2vKFZeNfEw4XA3htBfh+jL9mPQdvXvUxAqOE8eSTME62fA==","signatures":[{"sig":"MEQCIDvgBWlOv9Vl6OIBG+lnT7xXOL9zYgCt448mLQ0DIm5iAiAPefctJGcBIoZFYhkat2AHIpKUQQGDfcrEBWKFvwUjjQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUS0gCRA9TVsSAnZWagAAR0EP/idGPIybGm2C0uTBrEDx\nnHXXwVemnp7nssERNTZbtHHJHIzf63Fgtp4LuT8EuyclNxn5a/zP/lf+Hv24\nEjzXNpt7QHn/4y8iBaQIHqhE0dX7oaKBU5Ghs2cDQXVG79omU88P2yLkMC+t\n+aHqaVfeUOnVj+Ui369vM5sWm6VVB+YXioArAnygEvDRlobR1kUZIUOQm58X\neBUuTDKK6hrRSqxD1tR6NPPBVxsB7TAnkcEdZvEDF4Hooibs73BOUQx6/tUK\nsc56VNq4UH+Yy7a+m7BE419z3DRWdh0EI1FA45z9yEbuEOaDNYeV0GiD/vKc\nSf8Y5Fbt/0y1OpT/ORTwP5fqCH6uQekp3E5ofPJf0Gy3JTrexkO3rAKRUDFN\nmSn4bzVczla7aEOI4G1gBx/l8kXfWp1yCC7OGWDK1vzCm7ghZ0V5Oj0aPfky\nvvCsSpUZVm9XD8NG0Vds5LGjTsXlphGNv0WYGc33U2sF9DrVjEPn2/AgAfGs\nxeiuybbxmcFgVqcxYMVgG3M8ctkq1RLjap8vTWKJsscKy7sS1UP16s4D1/4D\n4Gr9pbwjUEEcIqmKF3v1vQcGjVGUJKWfDtH3XiOmMtTUFIOLQXGd4IkWnJ7t\nvGlIcsCxWKIJPEVOQrrFvOjxgVUHqcy3z8UQBIrzfEgStFR84MOmT24HWnCI\nrcwv\r\n=13Eq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.0f358ddae.0","@material/theme":"11.0.0-canary.0f358ddae.0","@material/animation":"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-indicator_11.0.0-canary.0f358ddae.0_1615932704562_0.7814240230338951","host":"s3://npm-registry-packages"}},"11.0.0-canary.67eb0df80.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.67eb0df80.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"81b0b2271be343ff14434d361284f9df74621eb7","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.67eb0df80.0.tgz","fileCount":38,"integrity":"sha512-fDgsGKB7SD670GUOg+oqfbQAleALrkNXsKUvCeeH/K4CW8krFL7UoeW3Etvq/S9rbLTtVgz0c1KcCwIB4Q/smA==","signatures":[{"sig":"MEQCIC3nDOw3QGHu8paYf25ULichi44Ormq14LW681vS/k1DAiAnetP/hsAB6ZJ5kGpbm+M9xRekDwiEUg6jUb0TUpUECQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTOCCRA9TVsSAnZWagAAdUMP/2QV3G3RYdAW7VLfkzQt\nCXNJPeQfCOBb5YVJMo8jfvnP//MDBS6IXXcUr6w/AZ091SgCbQc1xZvGs24A\n3IsW3vTWrVVwYUy80TY+5KAzyCPE8vYUhlC+JbdhQSpAbxFjg2Wit+YEzJIj\n5ZE1TIvN0Dzjfa4hL6jDe/50gKtCXo+DN4ZH1sMvzMRj4CcIwCQGQUli45Zw\nE+iYU9tJl6GarkOf/ABBj2M2YORHllK7NJHSiDz6F7O78ld/R+YGac/tkimW\n9iuprmsucnYTn3LPfbllZHuti4vtfbc65sjiJPlbDq6n9pcgU8ciwcCrcx1m\nHIx571PCzJ2HQWxUfDcLT0QMUPPP6a4Vp4n33Q/6BAHSG1fvx+BP4RXAjlxv\nHFPKu65qeYs6RROP2r64XJZQ47GNoGAaAvX2SEEZTUPX/vmVaCNxQEBzCSNd\nrcbwwCZlQVL9wYo9zK8W2G4bzXhTYYxInsvQUa4HE4R0A4i/iEfF+A3vREbS\nVp5MjKzDEPUZgt/nu9Ius1x0X8r66iBBbutbBkAEDY4gZL40inmo9gMC2xAN\nl3wdOI8CuRMN/K8TExHztaM0htnjomfkckcAwVZR2+LWhQk2OwqDkITdbVXy\nt1z+GWLgjEuyINn1Mk7djrUX9McrRkrtFsbFdXd8kmFHc5h8RZDTDuPTigrl\nVMSU\r\n=vQga\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.67eb0df80.0","@material/theme":"11.0.0-canary.67eb0df80.0","@material/animation":"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-indicator_11.0.0-canary.67eb0df80.0_1615934338196_0.04568824691964202","host":"s3://npm-registry-packages"}},"11.0.0-canary.941ca3b3c.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.941ca3b3c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"861da44842ce63d85f52efc801e9b35233a8c144","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.941ca3b3c.0.tgz","fileCount":38,"integrity":"sha512-hOH2fZH6Dfv/ScXMe9kfMzOWYdlU5SM6y4P35IEOJ4S8Bz8z3AGSP0nyjgbO6lZVxBMNJi4Ms5j3s+QIJYUXFg==","signatures":[{"sig":"MEUCIC8LOgVqxLo2gqF9b9bgC1fpL/d9mWxoSfSB7HgUHUP8AiEAzH5Yxk291n/pMcytqlqrmy+TEU5am5zyea04OtlSzKI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTPwCRA9TVsSAnZWagAA074P/jgUXZFnrSAud5lce1XH\n4ObqFuhgR+xCFqFU/67lH5vaqbreiE3aabQ+2tO076DiKc+ght4xYdcqzilz\nGLB816WrZHO3e14np0xdt1Oh9U7JCLWSQ6hoWJXlqXLxji45HA0xqnepHwSv\n3zva6s3ue5uOrutSgrYwMOAjf6ZF+8VA4ESrWNEG/O6+O3O65xrYzMyvnQCN\nvYRNtQEPww+2KdxIxC+zECN4Mp1K07TN/9rPiqI8OxJYXWwouMXLC1hiiuDh\nIsrvOAWxCo+VnVYKaw2yTRIXCLvTkfXadENUyPq6YvndYa13N+im4xjgR5mM\nFEv4IVj+vhKmw3zz01zR/Hq7RDWW/74s0xTiUR6+IS4cEh8IsJhhNJPlun8U\n07g+7wfDtMuJN8MrvMkmw0HkL2Lw7TJCBKeBHw0eSbZOm0zpqUKT8rltQvcN\nv7VYBHxRpP/qQx+QAr4u0KQTs0kKVFHmE+Y23bgw/+dSS7q59m0e57WkhdOS\nn7tLwdJnfZ0ao9QrNOkQAbaJyXFKsjY0AXty0RgOgBS7FSVHiKpENYLGHitP\nBQmcU9TpCX8SbZCmmupAlqPqXXt8kr5U5CBkm1H2BA5E7znokJqNuF/tjfzj\naLfbnl/7UdMGMoqbV1qhnS0w8+OJfyMfVXAlhbBqFaLGqRihhIyVTkVs+D0L\nXiy1\r\n=ejmZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.941ca3b3c.0","@material/theme":"11.0.0-canary.941ca3b3c.0","@material/animation":"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-indicator_11.0.0-canary.941ca3b3c.0_1615934447978_0.088365841506574","host":"s3://npm-registry-packages"}},"11.0.0-canary.3344d12ad.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.3344d12ad.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"2259c4b37ab2873ad60ffbe63bcf2f3a5c6509b8","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.3344d12ad.0.tgz","fileCount":38,"integrity":"sha512-MuUBXerDmfpyf9cnLZnHg0Rkd+acpg//EIUI0XonFmTA/o5TLmLI5qKQeW5UiFn5F8YZx7wLh1D1o8+zn9qc+g==","signatures":[{"sig":"MEUCIQCwBWfMzYWCmoyhUKuv9uAOIeqdqsR6mlQoivu2nQ7VUQIgFnHCDpv9YjuzWuybEnXkXtBEnZ6sDuWBWHzHoa7iyXM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUdNnCRA9TVsSAnZWagAA1uEQAJGFhC08duyAiN9So69B\nbImwGya6Dv4XSZZKe/SM2N+klBT73U8NeuRWr5Iq+jouJt5lfBPlz4akblIm\ngsWOzsDG8hou+R97eTVkwpPmtQ1I2CqzYJCx4IBJb+GVXXCRegjga+HYBlxN\nbyrBV24JrqrmVmgyo9mBIO9AOILN6WIpZ8Csi1xMZKYLRtWRP73k3VgUMThw\nltYsJQ30CoTu0jEP/VvNAiQZmDPr3Pl82a/IIQ1saT/y6UmIKMGS9BoNkHsE\nzxOFwwoReuqKfzv24mFlcC9ZuHI3Zt0AHDu6sNCjZjqhW0cLjZwndkg4hpaQ\nDwI5EJxoq12vEuEvRCHJ6lPND2OCSXorMqDSHM2iQhlidTjxZ49/lSn1OL89\nQ0DnhyOInzbBMxdoenyJbBm4t1WU6mPybHBv5sg50qsN3R8tlyajl/kAsNWN\nP63LgNN+euZ3ws+nI/O7DNcbLEVsTWOPjGO74RGGa/9cvnmQk+dLNM7bJlCW\nbrEEjkM2zEIl5ciMcpd6ywI6A/OYdLUjRk5Uyj+PdjIEMyGws0ICzCj1VG8C\nD/LPgqeKSp36YXicksi6hEUnCdyJD21qQA97do44zj6zLil4vU9E+phbK5Jy\nS4TIWFeq6/FyNYCJXsRssuOrFuQcx4ghLWwiq2sUFdeYjTgkOtV/3Q9U1/LJ\nT51y\r\n=rbk8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.3344d12ad.0","@material/theme":"11.0.0-canary.3344d12ad.0","@material/animation":"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-indicator_11.0.0-canary.3344d12ad.0_1615975271096_0.5111760835579138","host":"s3://npm-registry-packages"}},"11.0.0-canary.6072ed604.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.6072ed604.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"12bc86a74180694cc6af09a09befc5928f886dbb","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.6072ed604.0.tgz","fileCount":38,"integrity":"sha512-GZX5FWW9Ut+ueNgJiHMQXdc8h7DlYVkQpLAmpvdSK37IF92F3wfnLPbzjpYvnvYC8LpKWeI+u2/Wg/aAUw3YOg==","signatures":[{"sig":"MEUCIQDQEr919Uzoi2hi1cfUKX0mhzTeCtli6jzO5PcwNpOVVgIgYjUWPL+jLArkrXkjff5Z1sB6V5n+zzAwffDdNGcfbNo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUomwCRA9TVsSAnZWagAAYFkP/3YnUWw0iIJ7KZd5dHts\nAU8jkUUzJWzdybyXhjYwFan2YaDxN4gODs0iQRqx1LR8JkjQ8LtshlEN2bow\npZn5xNDx1qFZKAee6W3Akm0yrxS36pF9flIAJc9VgplBYnYUM813jNtmmuPZ\nawEGlxY56q7UlrTvYB7dGOunV1uPwSkYoJlmw+6KVsUhEJNS4aeUlugAni2U\nvyuXLy4Jo8tsCNzBeh4sJRtazoNDzuu4P4wTNNPlsc8q1lwQ3kOElM0TBOeA\npl1EnoXOmE3cnmw8WlmwOPUHiz6yqoJQEGUrulfA2nHIVhcWcLbwGARReV0a\nCgBMtubaZ1barGgxVIZ2/0IpCTC1CSmjAL3Hla83P0w9Rz5YrxpoNn2LciBE\nOfTyyTyCpLZ6c3PWuuZq0EBfeqFquxHVrtKwGjYo6gvEj0TMWC1pJBCYid5c\nlSQjIyZHAQBj0HmVYzlsQ9TgKQ+snih7mxiDBaPmoiEsAnLSA+XNICdjWn9C\n+A5hT/OGCIKhx/Hoy9SZgbu1oTuT01ukARoJjYnw4GThbZnZqgUstYagpD2M\ncXVAJrvix4FGdQTD3YeeI6ImhxVKbwnUf5P6jplDK5MAEnPAooHNlmDxlVfK\nO0Nq7hInCV46JLf6GvfgbRmnjcTfXsANWvqN0Am6Cv/eGw78OSXV4miiv1E9\nXTRd\r\n=FdoT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.6072ed604.0","@material/theme":"11.0.0-canary.6072ed604.0","@material/animation":"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-indicator_11.0.0-canary.6072ed604.0_1616021935953_0.6671323122822288","host":"s3://npm-registry-packages"}},"11.0.0-canary.d3a6862af.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.d3a6862af.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"376ca70281f6bececc52f1d6619f460e6a0cfa47","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.d3a6862af.0.tgz","fileCount":38,"integrity":"sha512-uujVJ6nRPLjSFyYhD5o3tuRfps/p6hTANPMjurXkDnol7nbovEx5WTp80l+YShc7dOip0CSIRIRnWOidzUgLtw==","signatures":[{"sig":"MEUCIQCJHWO/mS3yIAg7x4rsw0PyeSLcnS6uspaLqtb9BGsCHAIgRCigPlu5vM8VkOtjQxtru5I8lV1JioIW+xiJV9ijq9E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU32JCRA9TVsSAnZWagAASuYP/2V70FPIJp8WB+AZTvsI\nluIhYWMi0v1g6LGr3fsQyYH903ZyMcMJj9WXkiPZO/1jGZnZ2qpZ3DfQ5f5I\nQKTDyJtdmPFtTH+ipXYittz3464sRX8ZeFKnMVHkT3idUIqvFW2ZK4Nq/T9a\nfiTNYoSb3VJuQkI0KixAmHmSoLVeHjijmwvwZzdeuNRTzffpEcumIKV2Uk7J\nHruCVaO8SRFrLf+Vxb+MpTuWHK4nkzFnJb2ggWtel6DyuZLp+YZax1PDgL8C\ntO/6nZp5TVtcROpF8TwCp7TrrAO6kF4wYlFJPdsLk4N2/y94ImGmVxRO3rIq\n7GXfpkiL6kqmfhtOJhvBsToL6h8PzA66eYbQ6WJXZF15u1YWBGeE6Elyl7ks\ngLiYiEqAw+u8Q8S6WmTsy1xhxs5ZVZqN5sNeSea80P8CCcFxHxt8w48Ozr1H\nfdHduhZjFAUVYGpEjMgRZUWX/cTA/Wmcj5Nw7C5glDRTOEgoVj++wYsWHJ7X\nLI5kezu7pfyST80qttAzg7pAn8WY4+L0cHwPWVa9Sz/RtN3Djeb480+GBW1f\nlR/JzEVdES/vvKznHpXwQfc7+aNd1MZMTI7Tc+SNpAI3ZRWvUZBh0zBrREom\nwzafL9QoQTkFfZW99KCyKLsNDWqV0MuFB3sCRwSADJ1QQJjD0si1mBTJhoic\nYhWG\r\n=MgUA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.d3a6862af.0","@material/theme":"11.0.0-canary.d3a6862af.0","@material/animation":"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-indicator_11.0.0-canary.d3a6862af.0_1616084360547_0.956946119268411","host":"s3://npm-registry-packages"}},"11.0.0-canary.40dd242d5.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.40dd242d5.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"cf7804d143a5de6b031f2154e6c5eefeaf5aeee9","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.40dd242d5.0.tgz","fileCount":38,"integrity":"sha512-0Sn/Z1cPMwM6z+8rd/LEQD+wuea7ZPkEJej4vDYedf1xfyU8HobbxAFOw7YpDiOLk8kZBnGTAWjw0zKEM8/G1w==","signatures":[{"sig":"MEUCIAaVJbsxaoCRtVXqt4sDeiT+4UixcrVeL9Enat8h1VixAiEA+N2CpCIhxunkxhPl+oRqskkjQHIqHe2yeW1IF8FbkUA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU8M2CRA9TVsSAnZWagAAbwEP/j8T1w+yiwd7Eu3UYCV3\nKGIdohcDnoQs5kR3j5XgOTufS51FnBX+pDyfjsiyO6wQYLGRCpxkFHiLhbiX\nnFL1abhNPSLNBm+rGYCFl0SRaWXDFfyl1um5/gkxw0axPcWwGWhZZpPssYSU\n3cn2Mr8eftUmZR/SLdJJR1Zk4+w+LnzFC78L7KykS8RAdH85xDifrVe58HoZ\nYWuUNua7rvmPm6GCXOy4WwDKyV1igvM2Yl+pbhd3rPAjQfDtkO47dj7bA20Y\n6674B9fICp1jsrWozQyX5BQ0b02J5GLpnCx4l3Am5nU9IpJ6/pTximBrZHeE\nEkMYhFgkkxn7s7TMkKop3mQsUIrzMqCIx3qhFgzxDGSt73lZaRX1/MREyWSB\nPZEHmIWOiXwguy+T2dtxHWWMaXpWWjbiS0XPhSQJg8uYM9sQ8s7g1ZHrvjK/\nVmIynoXKM2KO+eWAzCBh5CkD6JqYwmjkEWQyawMwg7iupa9mWhSumWtJ8PMf\n3sa2wrF8YH2FMpr3OH97Tx291CduXXI4RXVXXg+xiqnZ6u8pYMQCodM2BDJP\n2cUG+1hrMHyChrC+TCawpJwjH3QrqNlkysVWjpm42jyUWPEWLLnZoTiF4Phl\ni0h36fm7f0o/UJeXiavwrVUcz/Aq2GzE+Qg1iyGSFH5ewhW6mLvrU2GHcMW1\nQAqF\r\n=ivus\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.40dd242d5.0","@material/theme":"11.0.0-canary.40dd242d5.0","@material/animation":"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-indicator_11.0.0-canary.40dd242d5.0_1616102198199_0.1959580532371119","host":"s3://npm-registry-packages"}},"11.0.0-canary.ec8f8465f.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.ec8f8465f.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"477889e03a2c4d12814b2e016859a15adc7c21e9","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.ec8f8465f.0.tgz","fileCount":38,"integrity":"sha512-P/joc6W2dXWDCn3tm7d7aLUNrgdjEukIg7qDXFgrz9GNqK8IhyTDd/UtA7TjqpBjNdToWg0HeGJzH/qxTUHzIw==","signatures":[{"sig":"MEQCIF4mI0Jf0l/yxt5/Ef8QLotDx0qgFIMOZTYm71p/cfP0AiB/8kOpiEt3uHQEFd8p2l9W7e7ET1HTD+PwdXpE5ENsoQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU8mICRA9TVsSAnZWagAAuF0P/REu/rmkV0XZNbAXaEyf\nCT8wNLazh3s9QobCMJCvBkSQn2L0RHp4PUJ08LHRUsSo0DInwWTbfpI/XjUK\nhxa26Hsl9BFbZ5m6bx1U05Br6TMbLgK/CTjIGz2oATZJSWyCY3zsbM3pXYjH\ntUp/Rb4KvLV/cSeuAgLEqnAIpEy3cCj5Ryk5bpLxXRmxmAxaLfVX27nAOc5g\n+01P0qKFEGN+b2VDYwSXZsJFfvFSiMksc1YlYeyIny3CHnPJMMua7EPkIGcv\nDUXkbWmbZR3TrbARN3sd2V47pZgBB2Cow6vWxdBbGdrqvkoi81N1z2F1JAla\nzwaYOKRQPW8nsCkyRwd4UOULuNHgFvgy7iSwBj415gWe9yWa5M80/2uIIdMu\nj2WaSm5PCRKuE/Wwa9fEtnDVt5FRdWB08KeQ9eVwCPCaY+ZLyGjKVNBshp5X\nsQwxhmVGMOD+m1TUpOAMiIzGrobqai51JRzK3cRB7S1NyW6A5gvy1ZsGToRf\nWUMC1CKBzEVmwbbhHCIN0DFOkrtOJpkXwzBhH95iaUik2QVie44a/kicGCKw\n+YeybebtwISHTsMgTPCgj+nT30d0JL7fr65U+O3wBzNGiyN94e+/1y0yTits\nO0m2rrxiljX/hbVQWNZrEQIrs1R3+Mk4pwJwtQ3Mm6lgWvtNq1h1MJB24Axl\nzb9b\r\n=JKOt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.ec8f8465f.0","@material/theme":"11.0.0-canary.ec8f8465f.0","@material/animation":"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-indicator_11.0.0-canary.ec8f8465f.0_1616103816171_0.2981078454756032","host":"s3://npm-registry-packages"}},"11.0.0-canary.da38969ec.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.da38969ec.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"55f191ab375fb06cd9b5e80a84e2c160e529de91","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.da38969ec.0.tgz","fileCount":38,"integrity":"sha512-6XhsbCgFpsERtDPWGIkbRXSJaklYHT/PUVQcu16TmIRswKnpbUNPfOX5Fuw3vDAPRuNmknAJYiad1A2vblnzgg==","signatures":[{"sig":"MEQCIBcTuWKMQedSNzEL5BQCpCrrx45qy2hl3AWykPZ80pjEAiAUw+F+ic1Wxw2UoEZwXBrwL5J37QstR1rD9lGJIRMNUw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU9FrCRA9TVsSAnZWagAA6YgQAJfxdwtS6D0xSc6YP8WV\nEZbtKbOBg0NySRk+gy11+TIN+HpDSuG2fZl7UvvGzG2zTCuJA5hWIdsawf92\nw1tk54B+3N9pjM5DoIQkixLBdDk+DYAc53Vd2noa/mQoc99/OC9g0plBzySh\n5H1mWlxCx9ShbvgnRrZ/Nyf2lE6vWNgIaIKBA4eCD58SfKaRK+SRtrebnuo1\nygYaFmhAVKzGUhP2Lkdf8J5WowBSTc1X73iMH2WeLHQjJIhtKL8Cizn4uedd\nmmfTbYETn/ZzJAcZs3XYzyt/n25U1+zOnS2JYwMZA8xfw3X89Ub/Mpe9FmkU\n/LRKBiKdXJcqyE0w4sz6HOiFNlLTmnS6q7x9uPNd916gPdAMaKg2FwVaob8M\nRc9nTiTfaiFt6FrUgBg2/StgkpK786U/de1IZusX8RC9eAs3YViqC6pp3pEc\nHTucjgXRx8zZKR7Jd0+unmBODjkAJQ/DauH1DlHA5f/4h0HADSCaAsL6hCCN\nTaPrThWWSh6W8WW01ER1xB0UDrldPr8QwEJ7YxteJWtU1N3gdk5IhZc4uhFZ\n3oot24gTltDalguDvikcPjw4SkV6dvpDE2Cq6Elnzd/0x4SnJN739AV47SIU\nG/PA0+tqk3hYyPxcUNFBmMydPZhS2sLoB02vC3USpElDJhMCEYjZSi6cqwEw\nNwMl\r\n=0GGn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.da38969ec.0","@material/theme":"11.0.0-canary.da38969ec.0","@material/animation":"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-indicator_11.0.0-canary.da38969ec.0_1616105835413_0.5785683421693191","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5246264d.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.f5246264d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"151c535a88ca77dff1bae9c6f67050cc9f7b12d7","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.f5246264d.0.tgz","fileCount":38,"integrity":"sha512-yaEZ+AgDxYH4VxfASO69wqzgvsEWVk+ZvYtUqt92EQnDBEDg9HpMP+uxhFeNbKteWI2umualq72kk29r0kKBkw==","signatures":[{"sig":"MEYCIQC9XqbwH/zlaXWrj/3wWlXJ+ZRyDE08L6/ng8Y1ktk2OgIhAN4zbym+OzG+NbyKBcBJWPV2q18zqeJ6F4MgdQx/rIcZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/I6CRA9TVsSAnZWagAATlwP+gOCAZbYkfNMx6RG4DFD\nrvN86o74uE6MO3UG0LR1g2sGPovK8GYugt0K9t2bR1wSrTVi9quasPcSO0jT\nY5xqyVKuwGrYW+N7xv28SKc+KRaYYSm8KD3oKWZ0yFUl8quqm89uq43PqtMC\nvfiyR9XASFdQjKHx0q17ZXDFdoH3A4DiBN5kJJUL9c+6ndRG+lbUz7FRoqeW\nQRvus22/14DYuwfWODvvsfaYsEM9SauMS6fjThMNuBRNDe5+MbBAbS4BKfqd\nf7j5qRd3oAYUQHHnLHwfPWie/nz6y7zPk0fOvkZkSzVjDgmY1pTwPyEj9CKB\nc6jJx+JWBaaAjpHGJoyPPex1YW5wk/MUCKCSWuIS7QHXBcqzH9fcWmUDbpyX\nZG/1B0uxsx7BqBqtWRDBvnSCrEn8shhXXjr2QnzPDGivDOMzPX6f3GXmySK3\nCc4mI3kI055Ad6TAj2oE0VHSH2watwQfCuPUz2zUv2U8WcuGgPKL0ikqXgPM\nkkZ0ZLPmKGj1OqBbZh+TQEOeJLnFXNhALv0/73EypJAgXSF9S4ilUjIxX9S0\nPyVnjHkJXsoNny//s9AJd7oiC4KcFTDM2dsCLQxkHfSW5IKBS5M2IV/WrmTa\naoMx2qirNFZtmyNAY8SSBldwJV37X0JL6kW4CW0nj1TekxlNqUWcFDGBO6Pd\n00Cd\r\n=fp8N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.f5246264d.0","@material/theme":"11.0.0-canary.f5246264d.0","@material/animation":"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-indicator_11.0.0-canary.f5246264d.0_1616114234192_0.9336637312803471","host":"s3://npm-registry-packages"}},"11.0.0-canary.03d34bbad.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.03d34bbad.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"da4bb71f474c3ad950387e747ee5c20a4153914e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.03d34bbad.0.tgz","fileCount":38,"integrity":"sha512-6b11hydqfymcLYUc/+UEiZuRC78+8xf+nsDB85DPRvU6cJ+uYcOrYI8KAfQ4KRQqXb2YRwMn9vSeMRo+oIpEzA==","signatures":[{"sig":"MEYCIQCxxDL94DEve9G1fNLw4+NVNW/DoJh8Vk8ApLhxWORiiwIhAL6FVHPZCkMwqGY1Lifn12SQ2+C6WVuqnQ9kZDbiejdg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/VXCRA9TVsSAnZWagAAWQQP/Re2u+8jIh0O9pr0017w\n9wHexFGRVYntC0YBqyTswfhjxGCRxmYHpmu3deMI20sTW4c18qY87LyEO2MM\nkcSMQ+QVNZ9sMXwaEfAz4ftu6esIaiTwHDell4laKlGvTLt5LYr/a5wabcCi\ndFI3E0bSwkNwsPm2LzQBvlfI+tleU1fojswxmT1LiSyIwnKvBTdWhrsAANIC\nZqRAlNUZUsJMX73Y5+gienOCykhXYThdMakTefnURz5xuAbOCPEPQo8Jnn2f\nE+FnuZ1jml1k54ge/kDeX02Mz5hPjWU1tRFisrs6WmVIiNDR0yubMl+gOL/C\nEGC8h4HHRInA0xXNThO38BVrReGzYkRxnbWbWUDmWhdNcGxr8NMX6NB4gJ48\nEIsM82HbIW5KPNUI9b3l2DD0jyxAvFRifOOLvuFidK2tVZiFihIhcaubnWK5\nbv5QcaSDXl7NDJz+QTCPEmUr2GQoN/w0EMPPdwiiRnIxq/Ewy0G9CN1gfedx\njwngvZpXlwtOH8k3gvi6UD015vHQMeZ229GH83uJZX+nUA70e+/b9wpOge5f\nG41fSsjFhjRAjHBhugLyKgmRc+jFalTEyITwCQ0qqgTyfdpVYCLjTblVQPuI\nzQaxQLnEBpcPHRo/GFucrGsLNar87jzvRlI9GNb1W3GP4EhLP3+IjyXa8kqJ\ntsd8\r\n=nLJ3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.03d34bbad.0","@material/theme":"11.0.0-canary.03d34bbad.0","@material/animation":"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-indicator_11.0.0-canary.03d34bbad.0_1616115030685_0.33076489431534317","host":"s3://npm-registry-packages"}},"11.0.0-canary.cbc57c600.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.cbc57c600.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"787bb10f47739f9b56319eea3d9ca3ac067a1345","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.cbc57c600.0.tgz","fileCount":38,"integrity":"sha512-HKBlNIqx3herKET3y43U3458hd/c7Nv9V14mlKd2UlzLbj28y4BSj0ODg5VKKqSXrCyMm1K+8pZnQGOzeKbTJQ==","signatures":[{"sig":"MEUCIQCZw7C17rC69F6r+W2ZDthcQkSG3u/4uW9RZNCRT4XkQAIgIxGwhOpxqJixg30O26Cja3GxnHaQcpJdinw7UUak5yE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/deCRA9TVsSAnZWagAAldEP+gMFmLAdGsGN3XF75gRh\np/HeM4+Ia1thmV6PYFlbtrJvwRv34xBt043+fbZ4e5vjn+ocP0ao13tX3Aqg\nB8hfsVJ+l+Ctj5VZc1+dDz/HaBKgu5rIWvVfvFe5Cocg0rRCLXOIEwcEDHDD\nK/5lSWXjnv63S9iEKuCZSie6aEqBjz7p36zzQov8fyi/ExMeqfw+ep6DzYlf\nIE6imHwytaRZDyxjTrGN6i/klG5qoi5vN+DpJuhd0duY+JtoG96UcnnpgOnb\n4Jg+r8C5ADMuzEVW2/XdlDmySTYXo3KoWMImJyh89yWcWEJO5oLkQmHRzbq0\nont/luPJzo49J7yfpTPA1K6lNsjDHZSw4lWy7WXr+QRwQpKQXz8qcA4A4OnP\nxnhE5KNVyWpV/81JGzdv/XOuzm6dlmPkrF/K+COWEl4ZNJVtCN2eM6BukkP1\nsCtgWCqL/z56xNfBJMEGuZmfZErWMK1pRXeJ779hpAJM1twp756QCE38w2j5\nxM/kgea7yXXgQ/2soA5rQEZ/kjglJ6lTG8azLKtU/bFf2FoqD5wJUfIuT5Uw\nMZSnSXOswC1GuMqUawj+F3k1x+Jv57vCCv6Gs611S7anxl4DZj1jOsGsVgKa\nmTJllKJBjQ9qhVbDp0LopteKYF2jb/rerM8rUc+7G1nkrZT3DQZ7sKDZseFq\n1EcD\r\n=vdW7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.cbc57c600.0","@material/theme":"11.0.0-canary.cbc57c600.0","@material/animation":"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-indicator_11.0.0-canary.cbc57c600.0_1616115549884_0.06923350924537708","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6c5bcf37.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.d6c5bcf37.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0af799d6dcfe18ce5bf6bed82ede85a9b5b009ea","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.d6c5bcf37.0.tgz","fileCount":38,"integrity":"sha512-0IZ9hqEOTK9l6bBohRiPBT+VwdHoNvoWngFaPYkNkDVJupHhsgnjepVzuN47EPcUhCQcRAhmh2I0aC/dI3bnWg==","signatures":[{"sig":"MEUCIDcYVBshLIFlf7xERPpZLlEZUpC/MSjlr2Qyh1qEI2GDAiEA/N947ZmC3TIKRnWEG5NTR7T+eX6VCUYdQ0xVN98arXM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/pGCRA9TVsSAnZWagAA4vkP+wQ4iGQhmLe3mQa8aiL8\nr93eMoegu6uHq+ngQatvSqKgRPpEV2l7DYTejQrPTrmY6b1bJUsDDqrOiax1\nnp4bXwg+uuJIQ6CvU2sJRkp+w+D5Sicjfgo9VKtpSlsjcPKl6UiPAzL0bdaT\neEKop6mIgtNuZlDdskM768EHKWhV+sBxafIXcah29aXAOHsjQJ0Y/a2TbmpJ\nwlBkCbRV2Up4kMuiy42OnQ9/SfT5+5sMFucNMSqaf1oxpYquLsq9O86p2u0O\nVzQT3yUFwxahZbeWots0AoB15U+VXqKJcZcdN/j5gMQ+M/fublaob8fN8VbS\nZBxYugr3GU55UdtNKyaLwJlSTZLkHkI6RoKUxQaBUGMcOKkulg2kRfSFehqf\nu48EGRYCrLgLcZ4eCX7xbUifBcl9xaDlyJesPqkp6XvV7nPj7xjtUqLe1GeW\nNmvrgw7V9wWx7Zag7MjQSRjkxyfhWYwwGbZrcApbkp3Ey7rwH7qMuuc3H2/5\nDgtZdy7KJKMcH7eKh84MW8e559flgTEOZc1jN7wBLQPQPQh4FLoY6Ayeuc5/\nyaUJ/E26dwRYBIAexZzHtoeO0q6qoPr6OKzW/sXTnrSg+GPBugX3yE0F36U6\nWmiuHoWgHK3Xq0gxXvV18OjNiaUwzGRZzNA4xWIH0Fr1qJe95V/hGe60Xq18\n1zfA\r\n=hHTm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.d6c5bcf37.0","@material/theme":"11.0.0-canary.d6c5bcf37.0","@material/animation":"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-indicator_11.0.0-canary.d6c5bcf37.0_1616116294041_0.39565057126578873","host":"s3://npm-registry-packages"}},"11.0.0-canary.fefc668d7.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.fefc668d7.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"3fe3ce1fc68c68b123607d106daf331cd2415b29","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.fefc668d7.0.tgz","fileCount":38,"integrity":"sha512-cmin7SZl3p8NUzW9WmSvltOaTYA3XtxfJXxFvL1Ut8B/xxrBv9SrlDg9bq32U2lfQWYjbcU4OAWIuJ/kKVoknw==","signatures":[{"sig":"MEUCICJmo5cDZqBjNRuyc7n7Ain/iu3CwHznCXThlsniXVcLAiEAuD8BtDw6owjX9Dr4uEmBQVpYhGOfPoYtB0fJwygzUoQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/9ZCRA9TVsSAnZWagAA1msP+wT5eprIDlQ763O9kNmU\nddmIUbiHLsP4Uku5LevnNlQ3gK0N3iC4d00XT+1GERYTSayHItrOqyCTnSl6\n1d5qlOrbG+QaTRrcr8seq9Ev1MUYH3kX8B+kMd8qo1ye49x34cLX8GvuS1Vq\nnOSUiHYBr2lea+w8lii9Yv1E9LadK4Kwptvjt3W6UI7ghSDQYVvwkFmwmaMQ\nJfqlMgBZZxYz+u38C+liUM+IIo/uqoMEjnFVNkpcf9K5wW0OI0H57hLEOCYb\n90X0zL+w22NgUGb444Vu+4hKLFs1PhfGZ9Fd1nJ1c8I93wbK9K5UENSfXybw\nk4oHSV2cx7aKVUde8cdu3bb9iAs3vTjp0d0AwtWuAGhpoXZmBntop0j5PS48\ntIhOWOliISvlw3Ttp5szaVGA9CBmH3IJ4NMWoLuwdvZwQLGQuCY4EIGgzZNE\nYDhq5LBUi2ib4Gr2z8xxgf9IJHfC3PZDqMR8iKdUt9FiN9XqfILvDRUTxVi/\ncjmmyST6EV5uQKfaPrq5mkItdu8iXJLql4blQzPZQkpdv0ifNLgjHQF3ovRG\nFAjpNtRYX4dKY7Ll/oA28jcC3KG1HRmkLVSbOCYnul/Y+gdc0MPbyjP+/b64\n7Wu0EsvT8PAUp/cKtfyQ+H0ZZkB10jIz9uEt28I7f2C++K3ihcDFgMskxoRN\niPm1\r\n=WxNM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.fefc668d7.0","@material/theme":"11.0.0-canary.fefc668d7.0","@material/animation":"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-indicator_11.0.0-canary.fefc668d7.0_1616117593265_0.016051384331208673","host":"s3://npm-registry-packages"}},"11.0.0-canary.faa7d3226.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.faa7d3226.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"114954c5b8d27dd5916b3fa2c537d9da69245274","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.faa7d3226.0.tgz","fileCount":38,"integrity":"sha512-ouEsQGewg7dd9K+YK53BrjNs1dv2HwSgucPkS393FQ5COXGUfZnwiUiO33vYaedcQfBKZ7edxxxqePOas/AsZg==","signatures":[{"sig":"MEUCIQCmjDyCAy+rmcuKE828I5yto3205T/Gxz3kaYVO+E4iOQIgdYez5zk1ti8ckYHPtjbWI00vyN+V8cb6QT1rEsPPNEg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVOK8CRA9TVsSAnZWagAAr9gP/iFfkEUIz0qMmjd8Wcbv\nQYyWLd5F93oTm7SlleKvOkCOe8H7wjGgUZZGl8fe8EpOoCErP5/YOfp0sOeq\nPjf2piv58gvUJQGCyRw0rDxeHEEXqe7Av6dCtclPn543XzHYSyWtptpARixG\nGMMG+cuGWXqde60EVIfc4aeeDJVh+FGpICumPBy0NbWQsjDLruXtmrLNxcCF\noEdlOKRvtT1025ed+K5Trwk+bH+gtZMLVR409lbOQlYRql9kmyydh8YB+r+p\nighCBRHFCtWoc8vRgCZsFDrgryNRGmABDBdkvcKAipbrtarU6YOpk4PFgooo\njv0VE7+XaPDoBFQ+sXE76fawGwSOxNng2rECAwD6UOIuqyTjV+yLvKGTM4yn\nqp4EXQoESrUmKc8KoPYIacnCGS8gRmOgMJAuIaiPSf0QjzhNKkPNRYyJ+vYI\nYGkwEGVxF72D2XQd/JHyJwCGE8DhMGjYpsLve0kv8vUjfnFQPuw7XsnABKac\ndvCfG6VA0Guu3/TtU7BcQmqUNwym+tzAQFgIr/MixSycGz6pgJVj/DG2mI7H\ndZTLiQvSyhMKJyMmHwqqiQlHPIg1V06c8QwbbGyhXQCQNHExl6eYtVyRWNAV\ng6IkdOtoC2kIG7XD34gDaRG04yrS8v0K/DalSZnNYSwW9dZQq9O5tURasiI2\n2LcS\r\n=t9En\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.faa7d3226.0","@material/theme":"11.0.0-canary.faa7d3226.0","@material/animation":"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-indicator_11.0.0-canary.faa7d3226.0_1616175803828_0.9893642907635192","host":"s3://npm-registry-packages"}},"11.0.0-canary.c60449bc8.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.c60449bc8.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ef43d71841e7d4bcfdd85f37e8507a0ed3927cd7","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.c60449bc8.0.tgz","fileCount":38,"integrity":"sha512-daktPVjJPkN1AexACNzS4Tm5l6h+7/ZcsCE5QZdS7i7bOFjZyYs4BOK1HrWvDi/FyCmwUKIi8OUtYKCZW3UUIg==","signatures":[{"sig":"MEUCIQDm2uL4PPnoPZfZb2oqJDbeh0DueMpbizjWd6plBbBM+AIgEq8aLWu5Y4p5BkJyoJ5V6+wKR9gmhL7stKfIbIg3J7w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVOevCRA9TVsSAnZWagAAwrMP+wTvV4JIVOk6nl5IhnOR\nEoiJn6rleH7LHjCzeYeR+VXoFp9pP9eh3Qxd51130XfkS7wmAJlxKxzFSpwv\nQupanJk0wgvhGBkvcQ8wtUQpbim3RX7U0lE0pLLsQhc/p4RgVNuTvZ+h9xmp\nfhVCnqJoi7o568HmkGlVy4H3vUdUixgIcb7auey3MjY0smhe2QfhRgZXU/VQ\n7xfubFfMSGU/6r5c+ZbI3QzgiRnlJNKhrY8hKMBIcGAwIpx2mvxw1hWGiBRD\nYusOXTi+0q/VQ/7e3vqUdfrlvOtgGHOOxjUOUuFapUx1rg1CHYWCko2lzfHG\nl+Bb2FWO83+hqy7sd0UYSitU0mTjqDvEY1N0vG1oTQRIE0+EjytE1V45GI8W\nbjzt1IOXe9MFW+s0HJrww+nqfm+v0N5xFeJdVyJpkT13sGXlfTv/rhSeUTo3\nITuiLwPkSIlc9mPoagkirkSpsVAyitU2HBIVy+krdG9kczN8EZ96AAfRmKQJ\nYuORz4hneHq/Si/0TYMN8LNGsXJJAAcR4Mdr4nwfe6vV2oBLd6lecXmzYESp\nXHh5PDvQW9Zk28eibZjWRanTZ1X69g4IexzTdCOCzd7boq6UYl8ExRe5HWun\nZoLPBJ/mbB+7uuyfBx9ZH8Vob+1orMbkoYWPG2NTYmUtAi8Ck7vJrFQTpV3f\nozCv\r\n=MRha\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.c60449bc8.0","@material/theme":"11.0.0-canary.c60449bc8.0","@material/animation":"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-indicator_11.0.0-canary.c60449bc8.0_1616177070617_0.7822317161104211","host":"s3://npm-registry-packages"}},"11.0.0-canary.5f0fc444a.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.5f0fc444a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"946b1f52f547d50ddfb4996cd5f791d496bca4ec","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.5f0fc444a.0.tgz","fileCount":38,"integrity":"sha512-VP7s9egV8EQdprtstGQYRkenCuQZSmQHlwYHmRjik1pYBTMEzHW+WaXGNIchrK/raeOI7L8fhhO3wAjIhypqbQ==","signatures":[{"sig":"MEUCIQC7m+WigqAxKCsAqmB1/sUkSM9kU/4GO+rISfOfYSu91AIgKP9Y7ANM1EmlMpKQMl/fY+j8a/YPSg8/vKnNxi7KFQ4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVO9UCRA9TVsSAnZWagAAbJEP/jzTC4fsZJt0rRKRoxfB\nbo2DxzRIpMslWawJxq2kWB89qtcr0KblsS46aEkseFWb5PuzC+z2Ce6GpSyO\nGdkR1nnN45JxPRS1pRXawuJvrwUcplBFDWxLcdC2TNNZmkkEf1PMZmvgEBZ3\n1EbudEio2NVU1VSWqUAn9HcFFmcte2W4TeAkjzE0PV4f5m5dw0xSqRAOPyFe\naOik4Xzs+l5y8EKoEPA0S9odPp1Uoyhe15HJc5WMCgPeMt4gwZmdHzf32SX5\nZA9itlKC6Saoj/h0THjyczzsOu+0YXRUZ73sa1PBMogII5lZsKiEQRxarLde\n3VGBHp1Xok63moOox9jVp9HIjYFbOIgEZGsaD0NkTtJBAbUq5am8j2ieQrpr\nUF+CYo/T0L1JPr1hcrWOqLVWyqd0QHfBf3dKsWoOHyunAyCcWUeuhPdvu5W5\n0IprTw1qSRsWDpP2sKSSe8hOc0JoFIqIW3g34JKfULgIaCDBWGHZS+r3xCPV\n5E/CS/ok/gr23Mxuf1KjfGQ2DyPOZPmKrTfJfDIPZq/TdWgF3rx8d72uoaAv\n3wYB4nCWDxTqa25TdnFaheT6G/WEviM4seW6yXRJ8S9t8dTwEr20PuaWvemV\n2P0FfYzBo2P/0cpbtcBcn6qn2RMPioSzSp29TWLr1/FMqfr6mbid1JW059BW\nlpAS\r\n=UzI0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.5f0fc444a.0","@material/theme":"11.0.0-canary.5f0fc444a.0","@material/animation":"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-indicator_11.0.0-canary.5f0fc444a.0_1616179027493_0.547610447910228","host":"s3://npm-registry-packages"}},"11.0.0-canary.4567a750d.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.4567a750d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0e94e411d0930f54ae798ea2dd1e6273f6004aa0","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.4567a750d.0.tgz","fileCount":38,"integrity":"sha512-zf/D0epbityjIdtjWhZvyZzL+XaBh1mgg/MbWrqJhiUV/NRGhfcB2W8BpryZIxaIpy0BjsHEFjh06xX0oqaa+Q==","signatures":[{"sig":"MEYCIQCTloXL9dBFV2bafX4R9xc2m+wL9httLhuq2jHjifjWDwIhANG8I7I7h9aClx7PPQBZXnzTGHkAp2g7x0F8Q5hYcBeM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVVjHCRA9TVsSAnZWagAAlEIP/iWlJL3GRgTOO6ACzcK5\ncF6zeVM846mvC53vmyjAHFSar7ECpgnvZUTKy5VXx3MIjSvupw+AYr7YjHOM\n2hCuSgZivksoQk+VHWpKc3Yg0+1zbwD3h/0+c3+wTiHYkOmVDToVO1cIZclW\nxe+S6O2zJbCSfi4Ya50t7xunt7SmlvR6JuZutkoOSpq5RQnKfJim9fBJ3xxO\nqKKZPtgbVytzuLLRVCyq/OdU9OuW3y+k92OWW1PpV3UMIT+aL8WbOM778rE/\nHI1ve9Hve+snJ3x1uYilT52ywblxhJHoWHzO7qpWWdbmQMYpFQfh6kY8RgP9\n2OG2SmLvDNQjyyL68g1SkqRLoD+decA8YHJsEmhdGRvqYm7jjqLO/Ph0enGM\nqyNwzE2dTMemy0q5oXEYVXu0MjqYaeJRT/pwhCqPq95eFe6UE4mdx+EaTgLt\nAZ/uWLxXDiNKYSNM/pEbzHa6VC9CPblRggN1EfThHhS9hfuZr1+EPY9NnLs7\nNM/AkLPmRx/LG9uBy4cAunxiTt4dmHVfxLEbi0kZBL6l8pMv3dHUJXn4MLU3\nMWekTw1KI8Wz4n8OJEaqbfzZ2pDrrmHsl4k4PSRDyeMVuqxyLQtIHeBThrSF\nFcsfyn8DzQo89j1Petuta3bWFQC+iotT5Nv5aF01OFfCN/JIP5lWuL9SJJCH\nZaNE\r\n=ziqQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.4567a750d.0","@material/theme":"11.0.0-canary.4567a750d.0","@material/animation":"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-indicator_11.0.0-canary.4567a750d.0_1616206023219_0.40275503507395904","host":"s3://npm-registry-packages"}},"11.0.0-canary.0cde52f5a.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.0cde52f5a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"536c3ae75545e15e40a2a4cb6bccdef3d8cd54b3","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.0cde52f5a.0.tgz","fileCount":38,"integrity":"sha512-No6Cht5xQzqpWMO+tv7utF/pRqGscq+xu3WHLJFtnqIyR+TtwyVMCsuLVkgKDKlLlXW5a1hYPu3IbmDYqY3JGA==","signatures":[{"sig":"MEQCIEJuU4HJNKWv4a6weyQ7Eru05tgKMIXTlNhd3MNhYPuYAiA9Mvnl2Oi6LKcaULtPCUaK60yqhBFqXRPJmczUTIwB3w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWTAHCRA9TVsSAnZWagAAwAYP/3oYPaSkwjTFxFsUuohc\n5Z4U5xKI3PgodLLFGGlQcB/LC/A1RGtsavx63+RHqlPnFlzv56qTK1th3aUs\nwpmUNAsOR10IgHMAeZvatF/A7AR+uR9DTzOkhkiYx0B5tNOoDWGn2N746QnR\nXHF46yd7gfrj3lAfjIpsUKtDTCsWxAqGkdfQOZqoQ4iT0wczQoHQpRSlzbgz\nC1qaAzQF4mJGTCQkvnadf9o5daKY/A4k3ZgUX/leywxvR/gXwLxz88IjZCKK\nX88LEBcv54Esa1VEXiVwP5wDE6dDw/QD9E/VMi8BMArKbevxPTbPxdhapgEq\nSk8Lm6icX9yA2486T5Vaz2pDkEKRPeLlcbShCuUhgCmXdZKpiDk8ZbkckiQC\nHn8JAsfDtG6xb3g0+XpUXuI5uSRYeWQGFO3jhp8ZOjZrbkM4bSa+D6xp8YmK\n+Ejv7G8aIS8AYrjPj1jwhUNj4wkKXHf6IJmNLAt1X3jsRXYRkvcM3ytwWqES\n1SG8gBeI2LrPYWSJBWau28S2pvMMOTen2XZVOQ9doCskonPYRPR/Riz1cYhI\ndiZHUKRpgcV9t1TsBt21Q7IgRSjojgojljMU7Svl9uty9r4klVZda/WjMHlt\na+fLkj6RHC8tE7w0G+znjLHDVP7NT+aSRbmPKFiFtij01sby7Sjuv4GCP8Od\nZmfB\r\n=9g28\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.0cde52f5a.0","@material/theme":"11.0.0-canary.0cde52f5a.0","@material/animation":"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-indicator_11.0.0-canary.0cde52f5a.0_1616457734547_0.8946551660921414","host":"s3://npm-registry-packages"}},"11.0.0-canary.48f4b67fb.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.48f4b67fb.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"8ab33068d8c224970a8cc6934dc50e605e6d7a24","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.48f4b67fb.0.tgz","fileCount":38,"integrity":"sha512-g6soBRVJ3MQNko7QltBoFgCkxHPhaBzDYgyMSWCvyk56OP3umMqnBfiW1Kq0Smt3vPt9vwRXGO1lS4/9DRLHGg==","signatures":[{"sig":"MEUCIBOzGk6I3hWmK/1obuNYSaqBVDWXpe4Ecrlxd3ls5O++AiEAv2nWnKF1nvyMTZETFovUIerAPmhRdPyss686TQ+aeBU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWkcxCRA9TVsSAnZWagAA60EP/0tPUcQsD/y2QOGYEElY\nclv5Ue9FOOIqC12AVf0zs61crB/M/yA6zydL+Vl0Cl5tHmS9wlcnSpXYwgZX\nUcloj/A2e3nMa8SoAhfdz9EJ4Ee/tcg9c6Lv6nBBAkGDHh3E/z3VXtR4ccce\n9cCc0zBdM36JNOfeGaTBqMmVmCEPnjNRkLRoTcjaWqYvac7CeRK7Vge6vt7E\nI0i8r3MiF5PShsqOmghzDw/jGidFEp+DmbYvg1gUS5rQA805QZBpf4f9u76w\njb7aqtXIhFWpqFWxkN2Frq6AOr4STEk6tz0RyDuDb1fTbuYCoRWQDRZMf4u1\nDKj2bd9XStltaAs2P6PqqhGwCC9HwVHdV0RVw4xNL2j1YmDTWcCM9A7vRf9k\nXXejIO4HEU0oJE4VXqhBQ2VvMBY9lYUIVZmlKiTR2ZJpAnWnu17MMhxh/WdH\nRc/3N64h6MhbKRTDC0HND4DvpDJCmLgPZpbeA6usS7D//j1zMDlE4SA5yZvm\n5dpVgg9N0IabV7DKypdAfFJlrD1y+ePCrM0jDTA2WjH6fT9lEsvrbBp1tr+3\nxq/ZqsTuBBk/w4qKwQhcqulm7ZblyjAoCF7bhEBzf3yva3KRck1yff904c+I\n6oPCLTdCrcjVSxlUdQcI1HtKo4ZL3y3UfOg3aKwiXVv8JipJ4xnmB41L0CTr\nXX4v\r\n=g3+N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.48f4b67fb.0","@material/theme":"11.0.0-canary.48f4b67fb.0","@material/animation":"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-indicator_11.0.0-canary.48f4b67fb.0_1616529201252_0.7680937864721726","host":"s3://npm-registry-packages"}},"11.0.0-canary.0b8cff734.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.0b8cff734.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"4c6ebdd7ea9885bfd835d3a98b2fe9c039459bd5","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.0b8cff734.0.tgz","fileCount":38,"integrity":"sha512-joAcF7Zt9NUhlfb7NXVR7+GCZdUtQgerdA+BunHs93RImfTosQGQQgvjmWXkUwweDKMCiTOQ1aRuJ6z2CgcHtg==","signatures":[{"sig":"MEYCIQCaDrdvgVjIyGi+U3BqIjTV7j77FUx642z+Evget+JV7wIhANPhfC7lbqo8Xxq79ObREWnIkYgpiseQ8xevc3nho1kf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWkmzCRA9TVsSAnZWagAACjwP+gNJXwEVBxtlZbdryIva\nqNn3mTK8II6kFwrWE+k1u6gAa7hLIn38N4fnmpdJGBjDlKWkIOzGLuktbWOo\ne1T3TwY2+6nL9Zd7Z8SqLEOwQkX8Rb5U/Jsk7nAyO81w/AJt5ZWeHVzFAPEK\nLDe17+1fLWCauPWqcp1oYuZUYZg8rL974JZpLtuGn//Pd9KR95RhR6K9CSNu\npTpyGV99Xl0osdVF0M50m+qQNqC0FwldZnA3eo7/pIGQL6GnTTxjxE3bFSIe\neBkdl9JGGdGJM3B3JuG8qBBS59EdZzf9PSLaS7p/6D4ZZ42H9KNUAfBPuLlQ\nP2DiYNmYIqnqJV4g68xX/box/59TXU/c3OqTr3ZeRIsCIGMXEOx1KgDgXU/7\nbBVLlGeTeaJhAoLROWpEkyB7J/gWwkdBZBhLN2a/AolICaOe+ZCF1z3AuIPs\nUgTuA/DP/5ibFDKA4nJG8b3Ki2xEkojzPsRiih/YK8wnaxEt1KIg5YpiVkb8\nNrta/3JpV9b0KlnTI+LfM74Ah+9+XY6/43l9BvRW2UAiQw2nLBA9MCBS+YdB\nRKBf38patVXrQCu9PA5p6efnBBuWhuTkCtcy2WTj+CH2DQihO8e74fh8Sfb8\nlSuFs6NzDSHE8qNYOZA0PUNRXTEx5xrRzR4gbH+QJPC0TGRIT5Gq/7aTlQzj\ncSiG\r\n=IFVn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.0b8cff734.0","@material/theme":"11.0.0-canary.0b8cff734.0","@material/animation":"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-indicator_11.0.0-canary.0b8cff734.0_1616529842670_0.7242088250320753","host":"s3://npm-registry-packages"}},"11.0.0-canary.8943b991f.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.8943b991f.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"9755ddde692f697241bb5d88ce567ba1a27c8497","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.8943b991f.0.tgz","fileCount":38,"integrity":"sha512-4FWzQKYbykUwberI7bzdAFYClI87kGGtBfmSex/xq8kq4VKOYwYwzvbdyilf/mgU571Yb8bFVjybtNWO7Kn87A==","signatures":[{"sig":"MEQCIHJY7jSB/LxOG3BB38dv1VVEDRm7Ja5vtXdiZWB2O69LAiBnKcMLPaNspUvOf4qi17qgvy+v5AGCWXcYLlOEptsyKg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWk+LCRA9TVsSAnZWagAAvC4P/05QnX7Q2Au+I3HcCl4L\n7mieLOgWy7bnDT22CZsDoDYDsZFM95ek8qNz4zxbU1UCQBfxPrkZ1amxzWCr\neJCu6A0NT6hA50WQu127jbWTEu12Z5huYctRzJVAbx7Kc1GVO7TWOzLGtJfd\npriXqGtg38Ki/3itFYBD5gJ69M3rdvr2Lxp+dCuZirIWuvdQNRmdrtH84+EK\nWsF7T+xGRp18FhF5V8s14AvZ5HGRrVPeJXX91jukwFnzUP30Zix0086BZ/N0\nfyKpLiMV13Ggce4leff6ZAqEfMofmD8Um5dQBswBNtX5+9X1ejulOzs8bTrb\nLkGGCVxcfYotIej5d+rsbStVITdWi2ISZS8NGmwmYQWxjPTGkduvR/d5im5x\nVT1U1Ghtp48ggYmNEzEAP1ZEy2x+cILi0YjUSMiyYKKKBPiJdefaIi/B56/v\nO63rMad6tDRiC9RUAfNj9c33JGCRuR1p6YOwrAE3mkDsYZbsvpvZit1lOodf\nm8Vhuy/YDMY6ziHRW72akbtO+ViCSMjiDDvHmaEREL3TxTersJ1q3N0Txbok\nsL1Qkxc9mmmo9547WssPmtBkb54D6AKyhEHIV6bw625B0bNfCf4SunHO9D8E\n9KcfqFG2WbMs6x+pF9+VusOxlUMCOuj366BZVT64ZxfJqfPQJ/4xdA3KAzRi\n1n74\r\n=UwPq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.8943b991f.0","@material/theme":"11.0.0-canary.8943b991f.0","@material/animation":"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-indicator_11.0.0-canary.8943b991f.0_1616531338497_0.6158120525147044","host":"s3://npm-registry-packages"}},"11.0.0-canary.3955d8d3d.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.3955d8d3d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"1a0563289b50c632f4d8673da27faddcc4d4c1ee","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.3955d8d3d.0.tgz","fileCount":38,"integrity":"sha512-CThfnJ3yUVKBkVb7Bk6SXmWqjxEmmeNjASbfjMj40Ycv5OLQhQ5qIfpoAuBSkX+atmAeRzYQI2TpvvR8AOAvAQ==","signatures":[{"sig":"MEYCIQClIC/9nTLkwU8tfMQ+trlKpn3BZDmEXbbyr85n1R4ToQIhAPcCJILURsY2EvLmsR2Dwm1AyFPGKL7jZTp76YqIZFdy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgW4/fCRA9TVsSAnZWagAATC8P/1UdChJ5nErccsjtUXQa\nPeta/E0j4AZcpTM5A13hPoJZIErFYjz3yQ4bIeRezoDjrf6Pq6azTXPWuKto\nFrDoP8FyLIaReJ5z5GlIqyymC0aCOi4QkydBmsS6vJAJw0xEhimQEGGAEEYC\nFPULAv57qpJmTKH5OM8DOyGmFCqFAS+bHNEqemgL0UZjQXbwpcn5FyMahjRA\nddRxe/cwZqigQafj6SZpF8bti1dNiI9/o+2ONS9YeeiekWvSDecFLug7/0jh\nL0gqzBvxv0V8e2+1Q8sGANGwechLXBRiFCQ6+Ut30FSNUfsajHB42ZuoTo/Y\nd+QrXW37SsUt6RCAcyblYvZSnG8b49PHjHin19zJldGwiuncMbvS13i2zkBx\nKIg1JWWCCZoQLeOZiAQu5xPg0pLnPFcNpqISQbkbF1W9Xo4St3O06W2z0Zc6\nDlmROpWqfPT0qFJRc7Sp7ferAKGzqJhneOCPmA3Vbss1HuhohNU5ImmSuoaB\nD2cvL5BoFnvZ57nRTMaMMD3Ex8h0az9f0Zze8S/kcYf70YCn16WoGySXmrzN\nRiLtZocnJqBEVvc6C6yQ2FaQXCxXOk7R/R2/K7vnTZdNDUmmWLwMS3tm5SEi\nQ5pA5ZDKOx8sPA/VugkJiiiluiFfn+6z4t0sy6W4tRmoPqlzKlbZiEvz6UQO\nkwuO\r\n=UbHp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.3955d8d3d.0","@material/theme":"11.0.0-canary.3955d8d3d.0","@material/animation":"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-indicator_11.0.0-canary.3955d8d3d.0_1616613342591_0.8844192914397799","host":"s3://npm-registry-packages"}},"11.0.0-canary.23ea2d85e.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.23ea2d85e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"b0d815028684bd60059d778a5294d95769d2d1a9","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.23ea2d85e.0.tgz","fileCount":38,"integrity":"sha512-PBdWcI9VhZz0MnWUKOnhDgrpVUUGxDrFU+PnJCgbrFIRUudWejIZwWzF6UA2LQTjzbi/aFe8KGJL6yh1Sp+JXQ==","signatures":[{"sig":"MEUCIQCW5acUw77vzjMJUyhWQRdIAau2KHZj7vsdj0kJGCaceQIgPhlncMP+DjiDW8S1+3yU/BWxoG1g4Xal+t/NPhQn1xw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXMkOCRA9TVsSAnZWagAAsFcQAJNUqAauT+B//ikzfMYE\nEP3eTuwhFIwLKGQlpS6m4WwynLgIFO4fLrZoQOz9PQx2cupmQCcWfCor7NVe\nHLu6YZmgI4t7gW/27dUfDlhdDx/XEzMGQI+wfTfLPI580LyTgSqiZw/yHxuw\nKwdwaD3ZEPNJAI1e7RR+S3yiarYD9VG5LE7Fq/oNPL8g8xAyVM//JFeeySlS\nEyA2Ab1DPwcyQIe3ICNxiY13YNi4ObyT8QXEjNgvgNOpTL+eN3iEq/3ezKjf\n3THMDC2HuFKDfi/4yLt8/FMDgYEaaHBD8b/Zc7SUv9yc+RYvpttnFSwIvfco\nEar0CSTo+xnCBmoytQWE7inqBFsKouHuTiHXE+hk8ZRJ27Ts0leBVt11JsXK\nUVIrtuij6h4CGEZda+4I4dX3eWR63tc8Cfs9etYKo5QV+coJfBex/6j8DYCm\nCQTrHguDkOzkfDQ8pYTA2vLJOicJHXcQ5Q3CKvWXqlZvSGsyxFH/ZD+ml+aU\nt/YVZPjhpAiq735WsAYtFx0FQKYMcasfC2UuXXMGOiXRwsHxi3gz7KGWybEs\nQL3vsr7w+GTGu4sNu7XL/EwmgMW9ERrflfdzwGtkziKO+kgvrK6a1DyrChYH\nOgs1GYBe2t3KbF7TmfFNw+T6ADXfN68wGUpeNjANP4sn84uG3RlXx4GPJQpY\nXfqR\r\n=O3/s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.23ea2d85e.0","@material/theme":"11.0.0-canary.23ea2d85e.0","@material/animation":"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-indicator_11.0.0-canary.23ea2d85e.0_1616693518009_0.5793752446434803","host":"s3://npm-registry-packages"}},"11.0.0-canary.e3ec22f45.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.e3ec22f45.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@11.0.0-canary.e3ec22f45.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d967a955999061721ba71e82cd56740b096e88d","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.e3ec22f45.0.tgz","fileCount":38,"integrity":"sha512-AQp/9fJ1G/XlEsiKDhRc0yFXdQfYSGaMubGxSL8ZgtPgGzdsa8k5z2ewrj4oApbSHFfxPqr2gV2ebZuDNuJOlw==","signatures":[{"sig":"MEUCIQCIzB8flq59iM80ig67UYH879Wau6Dld+vzwvI1Sxc+LwIgNfGU0auQAm9yNx/H3Y9pzwzlS2hnEEYi1YH2eV0N9YQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXM6HCRA9TVsSAnZWagAAufsQAJpg5EkFrO+58rVjS/tH\nfbX8ZEs7Hzf47mcMfNeowr1aS1t3LvTGdnmSjdFBtOT6AurKgG03m4eGxPOY\nGPlTvDjZ/42TWN4osWzAU3jXzigF4S7B92/CQw4XC78ODAU6+IPmupoC4GHt\nxIpkGyF7Qu9l5MS0CtOzBtDReXqXHAhMH9M80G/gEAPy9dB06grprkgsWcIs\nUF0krI43CqfGRyHWlNOA0+ov67GypUp3Fp0NaQM8X7wyVPS7760XPTFMRQu+\nqCRX30SepR5HRvK7ZuD753xqadNYl6ty/Z1QYNE3B0ZzNdvPbrXlF8vMOyFZ\n5qDLmOpT8n/GnTK6fJrrEpdDP0RwfeEYM2zi/1v0ikCHZlEPBm4HGJXYdJpC\nsJENJuWeRPaQh41BWtix3DNrbqj6gtNMjBaZ4EtMsk75SplsZFKSf5aTe4ZM\nxeKd6rYyiAB66FAtqile3niiE5zgTb6f9zDzmi3TeArzXQDBLEjlURGmuhyz\n2LRrDl/VWr4gKLj0OZ2PiZ091gcADO+cYhR3YBKNeI+x551XGalrjCAV6L8g\nPoPHlvdk3k4856OxP6ozhwm82uRc3wqFTprCl+owiSBCgSQHqO/KXbEOHzB/\nNzyLd8nHyEbRg0aB66W+8Him9fjzRk7PiQLV4uTXpqwt7mH/EUB5KsSblfju\nJXhx\r\n=YDhP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n","gitHead":"2827fdf50a2ab264554f8f307d61fddbab82c5cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.e3ec22f45.0","@material/theme":"11.0.0-canary.e3ec22f45.0","@material/animation":"11.0.0-canary.e3ec22f45.0","@material/feature-targeting":"11.0.0-canary.e3ec22f45.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-indicator_11.0.0-canary.e3ec22f45.0_1616694919202_0.08208760993875419","host":"s3://npm-registry-packages"}},"11.0.0-canary.4ceb42220.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.4ceb42220.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"85191643b6f83ff01145019604df8dd9766dfd9d","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.4ceb42220.0.tgz","fileCount":38,"integrity":"sha512-mSzjFC0lIu0Gtpt8edJVFlheKM2fL6V6bCaCn+l2TS/M+YV1qiF6sq7ZZA8pgZnNkMl2fL7Q64WbaKv3K3w9WA==","signatures":[{"sig":"MEYCIQCGrIN0AZvmEBVaM3CU4eo79bbMuJYmTZ0XOlE2or7jowIhAIvOPuxV23s1zjLhj8saWSrYyoluunzbHfgZoRP1rsC8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXZPBCRA9TVsSAnZWagAAB8wP/it20OjqjycnNw9m/A/8\nHGmJ3tgp91xrOq3fvOORdnN+xAynzOmfPezZ9eUAp6ysMGMnw2HQhrZyRoTX\nuo1NotZOHqw/l2CW7pZj3ao6IjCS1tcI6Y6lwySww1ld7R1Vgs9Pce3OdWDb\nGV04utTaVuXX1CHzf3hxuqe64zd3jujUbRfK8E5jt1RY6mLZ4Y0No/2wd2oS\nHDAn6FqcWvTMUSmp1H1ANOBlqSxq2KG/vcPbdyABMKWba4LOk8cW88AQAME5\nnW4bdS++oEBB58UdyiAMtO/zg/hRoT6lQ5Fwyfzd5M4i5j/DIb/XsFY50Oru\nDXroopV/DOAt7/3Ndaj2rFeNr5oXPKjzWV7KkaqJtyQt2vdS2XTeGl4HxsO+\nZV3M6z9MtJDHxQh4FJIEJms/wpkFgNpUCVmYmzMars/v31rLe9jENbDY8jjs\ncB2G8aJWgGMVjfqLKdRU5awucD/zLjEZoQ0r1jRyoaJQPxnv249uIjVNtBtu\n7awoNRwa5RjIUetU0X8dcyveMQlbUdyK2nE1VtQw5Jg3VnfVeLodpdO5fVpt\nv/+HX5jOATmRmSURr5GvUJOV3eGUF/6Z1OJcHljKxPHYytPse7n7CoieEV+c\nm6mD51nIWRQyZPcjdWuzmIpoaK9rS9N+qhW1ZCIvj564tLVk9nkA37GiMXRA\nbPbz\r\n=H6qO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.4ceb42220.0","@material/theme":"11.0.0-canary.4ceb42220.0","@material/animation":"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-indicator_11.0.0-canary.4ceb42220.0_1616745408985_0.7953511461180569","host":"s3://npm-registry-packages"}},"11.0.0-canary.dc9c84023.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.dc9c84023.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"952234cd6509579cc4ba792361efec80a00dd4c7","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.dc9c84023.0.tgz","fileCount":38,"integrity":"sha512-bzghArrNve4kyaWgXhLKR/C7ZCkeKsZSDd+6Ga1pItPt9fTKXf7PMNOC7rj/DTFxWpUm2eKNwrDRYSm4rR0Xlg==","signatures":[{"sig":"MEUCIFuIR3nDYOWhJTw2CGIgCyBNJ9MCyktG07TFkwG0nWkNAiEA4PLvabxZT81Sl+YsxnZ3lpFRy35g1EzG+D/UGMmFcy0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY2RTCRA9TVsSAnZWagAARB0QAIdGtIb1o9xwoENTJggy\nCoxtbFzR4TkqNGyTtmvjCrTj7n689BL9KlCfOV9YU4fWh1ttXye8y4pLgOcw\nbcXFq17Bt8xCmB6n1miZO+vQUj1AdHc3ktXHc2GuMEnwVX8P5b3YClubEFVB\nbkLI1mQrvtFLDKTseGDzj778rUXroO/BHeGYEaSxRpBpz/SO9BTA+A1NmYTR\nsEmHhmOcNVqcUQJpcSbnndiAEfFx2d9LhehMgQPUAoC2ifyNaHVEUoNDISE4\nb7swaAuX8+G+c3GNvQvlgp0qv7I4AiLvq6fETPQHkVWbvngBnQeyGKCuA2co\nbn0Th8+KZuFRmLA894zPt400rE0CsiQUtZhe7sfIMfVHcpG78bsvXNxnxZ79\nPwyJUNIRgxAbWGo7bhAcUKL3BNROTJ5WSYup14/0C5cfOlvrk6RisCInqIwt\nxT6cg/X5I91CA/TKjOdq/d7/XdQNloEAwofifHNmiZMTWLJryJDz1gqR7pCm\nlb6ZU51H3YyUzHIfW0yVaTiW1QBnx9KNuG7jcesZOJIh8dS2dr17+lbbVTeD\n0IHdQ16qT922+jIGU4cAgEaDLwLnhFYu3FJM+rrvclhUsXyNTadY6gLPMHSX\nyihczrClw1Hqx881p8pDaq3oJ6UK8yN/9fAMbrdVnGdnyWM/3Q0xxSH4nEKb\nknPv\r\n=AaRd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.dc9c84023.0","@material/theme":"11.0.0-canary.dc9c84023.0","@material/animation":"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-indicator_11.0.0-canary.dc9c84023.0_1617126483440_0.38302962200913715","host":"s3://npm-registry-packages"}},"11.0.0-canary.56fc26962.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.56fc26962.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ec8e489078a3eacd211814a6cb40dc4bedd30783","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.56fc26962.0.tgz","fileCount":38,"integrity":"sha512-WruNB53a4yNOS+C2iOgNMYG9AxEnOPC17XQmWZUUmEYS7TZWps/b/ZR5re00PkzAmRFCgWbJfNYI02lN4FgB3A==","signatures":[{"sig":"MEUCIADZk+diohlZa3B4gaIEHcNlDIVPKtjNajEchoLNhR+GAiEA0Lq3au27MYX8oMGHfkN5ZXCKkX/Blw4dnBluf1870CI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY8BDCRA9TVsSAnZWagAAB6UQAJxuiiJ+vTwnlOp4iEF3\n7kWfrbXY+rPdNY5lUQVbTjxfJ2r03VZTKTQzDMPcslItfia7g6iLUPeHdGcv\nzOo5uZsocJVeKD79A6TY7lrRQ2phNYJnc1dbymYet2543umCT00lcFkyelcf\nkdK7dkd0+dI6LaAEr98RRKjkEVbc5P5l3MGJRfPh2h6zumYVAGg3gwAfjrEZ\nN3ZuEHSLWhLvH9qPd8FyIGqeJquh5SpgzikBeIkWeSFsQNoN4R8GmZUvcJFq\ngCtGsdgaHVEn3rqNyx2AHGZOyi20bfKCjzyR8qS3vC0seWDSSWr886DcH4L2\nzTZVYU0cFOahNYVeloEjO6jcpO+IVBpDruojTPBjiOqkcvMYGbbvadb6p/d1\nvTAuuK+aXH0LG9DG28feYvjf/K8bdePBCjJl0OgpPCWl55V6BH8FetsqJW/W\nk7Q7czfaWk9TUXMrbPpQ4AwPl6nOlvm5HQu8lEl/Krb2rChmg+Q8beBEBvao\nXCZdFeatm7YJolUTTLe4Mk1q8UUvx0dzJVmgzQht0YaLJqkmGj7gg4AUX3pd\nDWcWDCfo4OK1aLZdn02BhKGMI9edU/T9+R3qhH74XexhxHyokVp1aAkPVj6T\n1xGlBLA03WXs6Kc8Kx54eNqEHzqyn6L15ORpvGW2vrvNvtqosgYohTGgpUZD\nhW3s\r\n=bVmU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.56fc26962.0","@material/theme":"11.0.0-canary.56fc26962.0","@material/animation":"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-indicator_11.0.0-canary.56fc26962.0_1617150019536_0.25982845883150363","host":"s3://npm-registry-packages"}},"11.0.0-canary.bc318250e.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.bc318250e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"a80d9852abd3cac4eac85878393deba5004ee065","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.bc318250e.0.tgz","fileCount":38,"integrity":"sha512-pSeosxD442qzuGG39CU5WB774prRmbChlcVxP9Alje7mOz84GGztSh5u/+NY6XRKUryBa/leH9VVm96eerXnNQ==","signatures":[{"sig":"MEYCIQCMab6pGusgtSPA7WZ+kp3LrlmUWBvQGYcXg3K7fQdnsgIhANiE1B7TNdL89oFf0Ihp+zjtO5GWJJ0UDJwfbOy5EmGq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY9FWCRA9TVsSAnZWagAAur4QAIrYugYi2rCCqL/YMALf\nC3ANw3zWgaydJZmZyAhyUi6be28XliHE8+xjjtg5ry3LP/ifKcZj+DhH5yXO\nL6bP9HtK0lIiUEKbn9BJrOgTIdg9aNb+YSxWPBDJ8goDNmaRATXDROF+ID9P\np/+S2uud0SgV7PD1kXNAkNwADG9mvnUnBShgWi/E8OLweVUfEZMr098koStG\nl0D6M99UYH1xPb4/OL7R7Lq3E7l/vDEyd03F6ilkVGSh2ocK/+jVtCWrAdej\n0viGoe36MsVxs/K/qxM2lEwJByuoJ3nF7fxboJ8TnhVC3P50VDjDjQTd+rhW\n1cdo+LzHCUjo0ujCsqABzSH3OA+YK1f0NGQv4s6CT6xfuutM6B1A35fJ0G7K\nMZqucM6L0TDkZkSsZwrrmZnphz4rgUBlZYDwYhp083sohT0WJnxeHUzd2wk8\nM0wUT31dDI2AZtpGhlcj6P6aukfq0bgSKWLNYbYR9oCWCoI4dT58XHgcGOh4\nNu77K9b8/U/TULrxa74tSyOpO/Z1DODw//w1ErNSVolvUCHdDoIV3yboGdsM\nMPB8Q/fztryz8dP41ZcRQdCOA/rbbTLLq3ZdxAENj0B1AJqBYQVhwwCzyQWB\nFkWEWhSu+Y/1lvcLo8odRyhl6sCnXkQNwORamXQ9gdlshyBubrVIH1Of9dpA\nWyo/\r\n=1YXf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.bc318250e.0","@material/theme":"11.0.0-canary.bc318250e.0","@material/animation":"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-indicator_11.0.0-canary.bc318250e.0_1617154390181_0.1795685285117934","host":"s3://npm-registry-packages"}},"11.0.0-canary.edaee19aa.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.edaee19aa.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c90ade82080f75944899ae51b11948194b330f3e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.edaee19aa.0.tgz","fileCount":38,"integrity":"sha512-a3bNIJgVwF+PKu3UPyz5a4p1NcMWPFGjppwRQ2MUGE0GSDO9x2vaR6YGIJKNjITOxgiIfbuZBtHBPeU0iUkZgw==","signatures":[{"sig":"MEYCIQDaiAV2jkkSc0dH+TMMXXUlTbOgV2aPK0sjcDY6IZF3EQIhAKu89qNaUEwjXLZ5Ksc0xP7sxVv12/8F5maR87+VeoVq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY9o8CRA9TVsSAnZWagAAYiEP/0qIrscjr/EFWIm1rspg\neZeU0j05VMLn3P/S0hhUhEgQM0YMGCtgcp72VBi+hBNKHMiPNZAoH369hnYc\n/kZ6CxZdvD0VUeuB3kiGhOx7VofcOUWqEgycw+423fgLsafQ17XIoEmuWU4b\nRPZazXNIxpZmE5w7AUr1FucN0v5jEYZqWcjzll7pOwNnZQVz2VFRqS+je4NT\nZ5lWrfjtMlIEsJTQIDS8voOoUImOIIbSMNdx6aqUV6oYohgpLbdXDJkdfaZT\noM2pHxam6PHvUY/rb9XVQd9aL01wnyW/7CfOferNV9gzvxTQFh7zgYbq7l8Z\nVV9X0tncn9sekOxA5X+qRpfqOVRqk4bBBxgl1IjTtmr15gLEbvxJncyShXBs\n0nFn1Qf9okJZJV8tMOsKD9Fl6bnSz5cHlT157jzTUL2b37bQDfVhqrNnpVCq\n8iLwMbyUGs34B0ZxFVmeT15qt5TbOlQEak5kBAEV1ttLVK/IwOgnxMcFVNlO\nBdKC/aiXKftD+5zNvvvixmHVHBUJm/wHHYG4sKtEiWLRPcgCNwkmkp22RwCV\no/nyOAggeLlKPL+JabuHVXcUtMozWoP5NvGgxiUm2LPZfJMtITN+ExlJYVXx\nQWslTPmdH8iLMO0ETVFoS35mdX86Vckw7TQiAb+dkO2kJyXEn7jQipl4YjT7\nZhRj\r\n=kWAv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.edaee19aa.0","@material/theme":"11.0.0-canary.edaee19aa.0","@material/animation":"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-indicator_11.0.0-canary.edaee19aa.0_1617156667742_0.017520270521279135","host":"s3://npm-registry-packages"}},"11.0.0-canary.24609b822.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.24609b822.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"9da6e9a5d5cff67490c654fc63c13bca33d19d02","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.24609b822.0.tgz","fileCount":38,"integrity":"sha512-q5rUKFsG14D73IeixW8n/uYXNP2YHPWWazafWrVkHclbImOdtgxF5kcX+RwhjmNR81VkgmAoFpez3/JQt1ZtPA==","signatures":[{"sig":"MEQCIDhrR65isFKXixjSKAIvtHM/8XuT0czRgkxykPr2p95MAiATAVwRafnk0Wa5UvlH7OpGIwbZcyQJxclv1/lvkXwUAg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZOIGCRA9TVsSAnZWagAAW14QAJFh2a1eGaHYrDJ37RvR\nR8AfOMpXjzWFiqZdwULssXfaFM9URWfDBsYrDS1PGPbmn2EFJzjq93fGQZkX\n/Obx1R7WmarOMqWYO5vZHTSdcc4vsX2p/GiniFE1pBsAiQcgSKsjsGoJLhnt\ns7rqGNAN8BY4cKjCZRCi13nmh3ntezZR9MqvBofvePv30+H0/yWxuMBSQ9dz\ny+BgWwIXmP0l3QlRjiFDBJWvoklS0AQeUppPAA96jnPPqWrIrumzY2hnLYpC\nmfdTLzv5olsgUEcfGyvPP2xfGMLWw0iuxCABlgEtChpcsaB6yPDW/P6zw1nW\nQBlLWi+KorFYvHEsjD9vh5j8Tv8JvJv5yTjZrhj5fZpGHD21JhjjPNBX1su9\ng3siZ5x5iiTAQzTZ6oXLU/PJWEuf0ywSyK7tkgAYF/uKYDUUn+uiruVOFqPN\n2gqRCVzfxWd+brQtL62TdBbMhTh4e3sYWpQG8/VO9Ck4Fahs+Co6huL+6WyF\nvqmPWMxeF5MOhXca/HZUBk86MK68Y94f4fyqAzYkD6o75EfLq6K+Cocue0Oa\nKi7POMCPuR/02i849d4Vp4T8bIYBIAoFWUmNEYqmVb2y/Ib7TsnWpwoNXYbt\n9IUMRVYTx42IL2C8X3v8SLF6P7bbDM921DRmvrTiH4D/kmREAlGY/qlR1Sja\nRPRF\r\n=7wgm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.24609b822.0","@material/theme":"11.0.0-canary.24609b822.0","@material/animation":"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-indicator_11.0.0-canary.24609b822.0_1617224197957_0.560337458091557","host":"s3://npm-registry-packages"}},"11.0.0-canary.b6cddc2b7.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.b6cddc2b7.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"1832c9a0ab4ef66c915396504a91909db2016749","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.b6cddc2b7.0.tgz","fileCount":38,"integrity":"sha512-Ouomsd+EAYAbZlwhRl8pJswO9vll9giVMTjZzAa9AgGXgX5YdZpJgSrHYJtSjgAs1+XuldwexWrGwo1uniEi3A==","signatures":[{"sig":"MEUCIGhPRQibi0S+i8t3pcyAvgh3iu4RnkRk8NK/DlsxONxaAiEAwVX72/0hPpTpF5GnO8A9gVj1J2LALDNEV43fHvCXo7Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZeD/CRA9TVsSAnZWagAAQ0sP/09BdXzlc6mAGB62AZyz\nYVOeXPfk+ooOdfCVYQGO+hgU1CAEz8kph8LT/Aoq5Epwn1OS+KmcahbIvgIV\ntlFEfQI3ZOD6Ci5hGOvkJMqyaMPo+m7GhDa8c8choSVOFPvmpteLQYDEfRsF\nc1DHHyGl84DhvmUtkBYlCTd9oOKoff0c3gpLARBUcCMusSBhVpIZ1Am1eSNB\n/zd1TBURI8fn6XxvEaYFKKMsfj7iRW04ANvYYTz5YlsDmzNfRdhh5JVyZMQ9\nmujqXfmRUDGYEIslpCTxoPVOGhsqaQB1WT1U7H2QfKF2gc+pooSBxhw8U3E4\ny9YSqZ/cj5k1JTZhx9qpSJJAqwXTX5gjxf40grTjXaAp9IYIl+Lk5g43ZO7I\ncR/s6Pf2e9tT9kQNmgu3Uh+l4+8aA0o4xS+65zJdaACrao2mxVACF3uTzpzb\nj69nngBUDV/Cu991tv66Ls1PzRmokMV/LX4DIm1PUEIRbG/IqMaVpgapBbf0\nh8Fdkmn+WLGv2qQN7pQUbfPuRTzT4Ru1WKUjvOWZ0iXrBU0iXYV4hvDK/J3j\n1Fi2h1DWDmQbrZDNa4oSf6jmSQtc64C7RPlRsSNAiRmN6W+wy4VNDDPbX9l9\nE2jUQsUY1GnKoihxEltwJau1GG6OEWXdHefZYvLZL4N49wSxo+P8Mqh7xciH\nz9bI\r\n=A0ic\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.b6cddc2b7.0","@material/theme":"11.0.0-canary.b6cddc2b7.0","@material/animation":"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-indicator_11.0.0-canary.b6cddc2b7.0_1617289470678_0.816713662040742","host":"s3://npm-registry-packages"}},"11.0.0-canary.94937c78c.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.94937c78c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"d4d0abe3b6701229f7f92d20fc63e069f47d30ff","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.94937c78c.0.tgz","fileCount":38,"integrity":"sha512-LUb7Wqv2ExZ1buc9d5eSaccEgpOUbq9IIjwOtXHWCo2jhpuIz7TlZhC7PQCZ6On9ftTGEwgAXH5F+0XCK1fzSQ==","signatures":[{"sig":"MEUCIHeIGTwNAB1CvRyHfv01E8Acx7ekOj1R00FvleGe+kmQAiEA2PcePnCmtkOcDfpQpZmjKZlUGNSDHxW/Y4i0d2FBxEY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZjRhCRA9TVsSAnZWagAAjtIQAJ3knzZ28wS4e7HpQm1b\nx39Z+3Js3psoqVSGQ9vcdCpXplIewQTkWGS/cUtukW1N6nzG6jEfXwKV6N/b\nfhkfkrpXqbvaosl4z6AE6nWDCDEyU0iXlkgiwi61uK3gMRwfIKXJmdq9j2VO\nARFjWontMkKeW8FizAxPlqqEq43yZobma+18Q//isz41qDs/n8MieMU8GjqT\npwvisPfTrZ0f7+wmpm4G87PrVXxJ54SBBuh+y2kVdr+t6kRHVSd8RsWQGexM\nS537z8B3KLv0IfdHe+sR+3NxBJzvQgse1mwIBVID3qye2p6tvnPy1sjYzd45\nGmmDBUe3owb3lJwMADJv7Jl4tt8m77eUFPWK9B0uHe8hNWEQ27GHxfTFDh5t\nPTjol4vEPbGxN3CAiKY2Khe7u+lsrFZe3w9iJiIEkAzjz3RVX4yA0lZdl68V\nFAnqvQ1NIhIbaHD6a9uZRFhk8l7TrDDY6OulrZDC6hcplDjeZ1fkHgdTwu0n\nu4konu55lg9aSU/90rrS0bhFmDohQI1BQOuDiVp1AktkWRv/pOIy/b51lTIo\nXyWLtgV/+uodMIF1JndU4Dg9ROs08QeEe+R6Npfvt1aJNjv4Ohl3Qw+pvhVK\nVMnlrQQ1BxNYpaaEPyRj4+0hzsp9NrQ4Rw8MovwNTD2yeI6u0yJGW6nfPnwG\nLoCf\r\n=GscR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.94937c78c.0","@material/theme":"11.0.0-canary.94937c78c.0","@material/animation":"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-indicator_11.0.0-canary.94937c78c.0_1617310817271_0.4521770730794028","host":"s3://npm-registry-packages"}},"11.0.0-canary.e7202cb57.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.e7202cb57.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"199fd57227e4e7d45b9e63e3eda14bc31e249911","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.e7202cb57.0.tgz","fileCount":38,"integrity":"sha512-ZG+dM0QHpmoUA6DjJRNZnhWfSLXXR9eogsQqy4/QFslgGIQwG1GkSPqZW2+Iv4j3yWZLgbItjmhKc+95lq+CvA==","signatures":[{"sig":"MEUCIQCN0Kry/peIKBKLwe7hgEVpCWGlOro8TsHPyfqPs0kdRQIgHoMUSJoOuHSjzbi08ME+GfBJ12d5o8D5EUlTL+h+zyU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZk1WCRA9TVsSAnZWagAAI9cP/jZaPsIU5uvxXUW1DSul\neFmQtBxs/O6UodO1mG209fiQG6EDmdqdCNJxTMOUW7s3Ig7PNDEY52VnSzjZ\nIkO5OEi4u/PQ5SvNepNcC+NOo5Fst0QuX0PsSbNOSSJqWnkhyg6oo+mkv9e9\nw5P/RS9zWSm1sYKMNkeNKjybmQGQ1RzUeROmZU1vmnM8A6lh3lm9ja55cTJ/\nmgQ5SP7VugEtU+/ikSK6FjPNwhHZnHAuI8fgAR2aicr97tFSNkz5Duu6U6iB\n0e8Y7QDmZ98tBnHwJRAU0sCRpYpA/+9IQqgSGWJjknIQ0EFa+jAG7htqQ9AB\nWkeuwnv/OmDuMNGk+XfJW8qjwWnF4KH82GU9eZ/Q6emxNT3WFuzNHjm+AqTp\nNbBuhBCX9MQxCt+ALgbqkNIaFJa9zvaW0cC8W4+E3V9WFjPUqQ7Z8VBSfSPK\nd1xdX8MHJ53uQgJC7ygMcQVTh4cNYCl7CQ6HgkY6ocgi9Bsea7/Uas/+gciF\nklNgdknAC45hWWtBTZoOWo4RPKAUABOuoYALhB8pX3EZ4Xzu30COXpMp0bkK\nMImphpNtjtLA1DcYXRXRfwe6OmA+1dOtM8P3os9/UoH23SCCIX06Jv3tsJn3\nOw84g+qeQtRVlkeExdXfAjBP9io9DxYcGimdFZxmoYrTwjnrguc5oGD3EKji\nVfj+\r\n=cgYl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.e7202cb57.0","@material/theme":"11.0.0-canary.e7202cb57.0","@material/animation":"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-indicator_11.0.0-canary.e7202cb57.0_1617317205560_0.08623003292542242","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f636b205.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.1f636b205.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"bc822c205e59803a95b6de2c4b3a69a07dea145c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.1f636b205.0.tgz","fileCount":38,"integrity":"sha512-QfB04Vc+OJeW2E4/Iv3B9lzV6vYcqbWCEFuf9PQJIZpJs16u9hrgcCSD1n6V2OYKIvTJRoZ/lzCel8gO2m7suQ==","signatures":[{"sig":"MEYCIQCgA5rB4r9ds7jhTcA82N6DWOj6k0tEyz+CEGNFGl2NaAIhAJzrnJvzpY8oO13QE5pg/oUWPC2Lk33bJ73NIMW82GIp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZ5lgCRA9TVsSAnZWagAAAmgP/2ey/EZSbcJLygOpb6ge\nHtvn/peImyfjCWRbNMXG9uircEgaVSlWpGr1DZunEq9/jQW4gL7ADnZ50Bpe\nF/Jvv0XIYcBXDQOAaRxlXgcAs5xzt3GHSXvqGzo4ZJcVvX+rOUe4Klojm0NW\ny5arhY6vklrByrYv38AAaCIrz8Uxyua7ZEPPTYoyqbhCat/TUOM0PdjJSj1l\n1In6ToqtlBiwyiirnkYcZrPE00KQhF4RJqCZbRAWI7s1rjJuIRNwfFsUPKY1\nh+9fyRmsJEalUV2t/TwURQtCh+1eEYIdT64QBsluAP3QkhvRG891oy1bBhRa\nN524EgdLPTStwFDz3bNvg8kk0JyC3U/5Li5OgW5BqRmCN14QAsWcdFNA07v9\nhmZhAE8YvL7xLIBEwwEvN/OhOA8RTgP06nVmqiORMm8Ww9QNeGfzD120bJx3\niXvxNZG7qmUeQMidhwqO458yKQFvFGMJTkEyCn0pYGSy4tcWHvc/5YoEzjjT\nKh11uhunSZaZhts7P+24oggMtoBXLDyZluR7EaM6oigK3G7zQ2wttxr7KPf5\n2s4td4MOVKH8K2Z3wf5HykB5V0viP+1nhUlkoi8/UeW3uhvhHHZMow43Mlo+\nITcvy70oTNR5NfuBTzY6/36ZX3+ibhPshzp/C7Av6TRkzFZVqWIa2NKMg7Zn\nr7CY\r\n=XvYV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.1f636b205.0","@material/theme":"11.0.0-canary.1f636b205.0","@material/animation":"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-indicator_11.0.0-canary.1f636b205.0_1617402207945_0.41779379585811305","host":"s3://npm-registry-packages"}},"11.0.0-canary.94f50b260.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.94f50b260.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"27a1d707f6fddaf6b9614795abd34f10aceb9a07","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.94f50b260.0.tgz","fileCount":38,"integrity":"sha512-iq+ovJjbp4gFAS3N2GmF2cabbiqsLpryyBn7yT2iidCY568XnX8NdKy/KAINDvHnYECTPf3oP3BvyhPEeqEl0w==","signatures":[{"sig":"MEUCICa2ABNQYYdO95XxH6YzJrE4ihitJy+TxyXuqTsvmaKKAiEAm1Yos9e7RCpDK6JC1UUI1JZyX7bwVR+VCtFEazKD/Y8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgaycBCRA9TVsSAnZWagAAqE0P/0VGl5FJtQM1l99kuCrw\nPOT/2tDpLT5jpeZSqcpil74HHyPLAjhFHXjSfC1c3o1ZH3Tv4YTSb0DgXhMX\ngciYkB760QsoJIACw/j3YFQSzQP9nPh5e5ZgakSPVQ25WN5rSaB57WvxqnuN\n6rWkp+KEc+cMl1w7M3wnQ6uUj53m/qgF/O9rfJ5NCMWbD2zsiV6AlG+s+kxf\npAFjk7Sk697NNCgB2joS+YLjxnn6u4A3wFb8ETDEdAsJbmrEsyDv/PG2lZpr\ngDkgbl/lW7uNctQBHlzWM5CcGB7VK0uAdHrKj08lqUceTtbYxRDWO+XzVic9\neVFoRK7B+o89lLYZ4/KKyxlCPyYoMQR6X3B7XHqyCHGoHET8LLIKHKNdKLEc\n3lPml+y/pDbJvBSa16C4bKPuFiqp7AAVZftMNAf1N+rRpibMA8lQqGrBvG0k\njyioSIFnTt1Sads8RHxIUj8bBHuTpcJZ/5k3Rfp5OkA6LnjWMa/mgIwTvvsA\nx+vdNNu4w57y36ksYHHJHQlUJBTdVHZSb4+0jlSoE7bUHeGzQJWFsZxoFpA1\np12+llmjefxcTIpHewK7MThPwIgUpr8UgdbIUeOHqEmmjN4Kk3o/1VSNzH3K\njxNU2Rg9qpWld1u7wePkEQoOgBLkzOo1n4m/uo99jfXhjcoKd4w5nLd+uGI2\nvWSH\r\n=VcvX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.94f50b260.0","@material/theme":"11.0.0-canary.94f50b260.0","@material/animation":"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-indicator_11.0.0-canary.94f50b260.0_1617635072563_0.6534162704665698","host":"s3://npm-registry-packages"}},"11.0.0-canary.a4009b80a.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.a4009b80a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c0a6102696a1d1093f7d04617f66891e41f32cd8","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.a4009b80a.0.tgz","fileCount":38,"integrity":"sha512-DGgAJkr5jsC2xgL+pHHAG7Ke5m5T4MIUFM2MhOu2rNQPUgmA7B/IaxLdIajSc7czTAYF0db2tsxIZ3lcftz2pw==","signatures":[{"sig":"MEQCIHX9omw5cGvbG+z8p97GmLO8hd0wlOK316JAE59S6+o9AiAjoFoxSRO8mfBnr1q4e+xG/O1eKSGGUjTDDqX20JQOcw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga4hjCRA9TVsSAnZWagAAeSMQAJyt64dh2qCpRux4ndTr\nqO+F+qBxHJRH3HLSpWXa+fmzpvVshTuyYqkcyTca58YkaZnMJj0tCEEIioym\nJyZ/ANb3MMvkMr3yw3MoAE6bT63uaq1reM+iUikWFE1UuIXiIuwSRUwOe1wW\ndkTMGlksKIWLQdjRCDCEOggywieKCEDVplwgJyrZRKTuG6SqrSHxVB+W116Q\n8rts8xGl8osTN4i1WiLdwoTRhsckt+Sc8O046Yt/CZAQ+VQuXeQn64BiIE5f\n7Z9FUfIWD1ef2u9u7jC5nNyeaegSyIhMSL6gvf/T/Fb2eFGNvMSPWriV2hBb\nse4Ot+8tddf2fD/hLdR4wi4R2O/wtiNIf3NO8T2z77R1TFFjAwrFKgEJbOtp\nSxIm34kSQDeMg1DoTvvFWzuvmV1RlmgPoX/oYuUi8Ze4gDxVCAiopYUh3nw0\n6WA2MTc5Sn+B4Ust2M3U8K16fXm0wEi4JgOJFju04osbK25xApgjUPps2P1e\nbK6pmrykiCkWBjZ2qNhPuvRyScrx7uAixrAYzNH6mjoP7B9H08zQbOb2uV5z\nH8lEo6tJe7iUzkC8BPSCP+sDM2ioHq6G2317MJYtZxtJjxAkIdC0PBcFzkYI\n6w3p5SOllUyLUOzG9Z29M7cg9t/3dT/BKUb3BTubGEAiPlyfn5LBThpjVwH8\n4DEh\r\n=PnmI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.a4009b80a.0","@material/theme":"11.0.0-canary.a4009b80a.0","@material/animation":"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-indicator_11.0.0-canary.a4009b80a.0_1617660002600_0.43748844162752665","host":"s3://npm-registry-packages"}},"11.0.0-canary.15604bd0d.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.15604bd0d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ae4807ab235cd3f27581af7d36df99edbdf3faaa","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.15604bd0d.0.tgz","fileCount":38,"integrity":"sha512-c3JFJnSjvyFWc3P5xnforwrHPyf3v6OMbzv4z9+4nqYpaEXWS7xK72LnMvVmhBhBDzRZLVR4HZpU5RhRXwQJvg==","signatures":[{"sig":"MEYCIQCCJiz2bJ5LL1pMtackiKM8RnYQlWuFA/Z0xYJ2lAAxIAIhANzvEehLdeXBy0O1aGj5a+TUxcIbX3gnlnpbijnrVUMw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga5IrCRA9TVsSAnZWagAADMIP/34IAWfSs+3+3qB5B3lC\nHfIE4VSn/qiqBZv4/MbG5x8n58zu2NaIuwKVxqYiUusOh1nyuc399bbNoo6h\nwBJXm6oJSg0D78+A+SiXMLS//oLRYNoKsIqkYvbu2mxpuNx37tvnxxcNfNYQ\nKULO+eI6iTrps5nqqXgf+/nnMfNH+c6iJQRlRvMWP0Erc4w7AE2oxXHig8xt\nZi5RKlTQL4iPKDQajUvpa7ReWoz5+gYtBKBQNsKu4daEqWSDSYdXtzvVVLFL\nxqZi5G6j5aDByUrn75LxB1qWXGEY+QSEzs3QK11qIo2OO1jyF+i9IqlwsDI3\n5UlZgOEYeyp0O8Ufy+3oE/5muLcPNWo2JXIMOngmp0n3cjOXRqIzWCJaXeI3\n4tK1zntW8Fyyb3OGOyl+axQyImd0XPNPt3xIwIhryrPTubo8PgMLN2OIcqjW\nA5Z+PPtOyHVjKclfF2OQ26GNwabR7fHHWQ75np2ZfwDqp3wnQQLaXQbAwGED\nNkFhVo1oMCfr3VsJQOUy13T3ndmrDNpCpYyj5xrFsk5P6eCFT21uzY2/E2WV\n/+YV5f98mOa/fvo61DiVxobFvEetu4ICsm381LN6tFMM6BFoyScbAjXFQ1Bz\ntkWH9rk4FsYz1tAWWRsMl/KrAjZetua78OUIXMgBO+fWPfe0PcBdC/NSDo0/\nMWSx\r\n=j3/F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.15604bd0d.0","@material/theme":"11.0.0-canary.15604bd0d.0","@material/animation":"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-indicator_11.0.0-canary.15604bd0d.0_1617662507079_0.8024675219016137","host":"s3://npm-registry-packages"}},"11.0.0-canary.76da7876c.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.76da7876c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"441c68674a06103c0a214a61cdd2a40f810914c2","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.76da7876c.0.tgz","fileCount":38,"integrity":"sha512-jCDDy/lSTLG6oLBGOf8Mepyg+VqRU26E5AvJbfbE9FY62d33UXhnDbjbAWOMttyu4bG0c8nUAXIWL0GyMZKJrQ==","signatures":[{"sig":"MEYCIQCAFuqQ1R9nEO1huLmlKbDzCYrRL6HoZgJL/+m8Yf30sQIhAKL3VsF4M1ksJCjx/VtLUiGtc6AVbLlEn9kZ4lV3KEUI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbQ5nCRA9TVsSAnZWagAADwkP/3iB69RjQNGZGQwl+0d+\nPGPEwHRfwoanuL9z5KH+8MZBm5WunO8SPZ7l2r1f2SDombXbvOBrnl2sCrJY\nX5tlBrhN8nlQxRmI29a2dLvssLPVsHPkJm3Bt8DZOjd5gIxulfXYsNbojk77\nbrqGqOY6cj7BSk6LSBPQrq+SsYnOm4J/rNYzAPB3Hqr7ceExrtSZyWZh0l/h\nJ7H/PVZimiSgLmpWR7xsFWklc5qi/C7Ift9gHQCZfjm3RSF9ZwlsEJVe1lF1\naq5W1c9X1e8LPR4Ef86p8g8dJfjj27qCRVqu8QvOUiTWeihRU7rxudlIXlvi\nJjXlm+MNaGX8XvBWwnKFvlQ/+XsUX02JO2Fey1yDsAE3gyogwjLWrFxmu5RH\nzcJ37b58x/SNm3D9BIKnQxe48Q9Hef0GszF0h8BmAZkYTu7wWyQDCyOMcow9\n6ikpqs2rnhyO3wPzfqMpCaD0jGvdxrlvXh9uleTxsOL+VryjqzlSuHK5iFhX\nCHilrY3R6YdGWBnJ+BfbOAl+t7KVyCSwRL/gXu50gFhWskiayfxB4RkBZZkA\nvE2Az4QZ9J2iaugKJJBcFQFBLj2piftz2clVk5xm5uiHfah3UluXHmA95x/o\n4y85B4Kthfd/ZwuZfk0VLRneXEp1xl1i/9ZAgitjayh4BbYDSlcFbDYWO92G\nV7Mh\r\n=NXgM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.76da7876c.0","@material/theme":"11.0.0-canary.76da7876c.0","@material/animation":"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-indicator_11.0.0-canary.76da7876c.0_1617759847199_0.3361911590336466","host":"s3://npm-registry-packages"}},"11.0.0-canary.6bcb6cbd2.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.6bcb6cbd2.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"2b654b021602ecc164bd55238a1c300ce44532c9","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.6bcb6cbd2.0.tgz","fileCount":38,"integrity":"sha512-TuLVqqYWy/Y9Br5Ot4Kw/PgcnVAiebKkXQgBGWOqH/sJd/Z+1/puhpzMJdIBiSG1HaspVOnSY13nWZArEIdG7w==","signatures":[{"sig":"MEYCIQDzJf6Zo28PSVIxBs0w/uvy2x+hnktR8ReKQb8DPRV0MwIhAJFKfwZCpIPioCC6A3N35QKp9DpDKMelltyQSkgtGved","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbf+mCRA9TVsSAnZWagAA2JgQAIX7rI9EOj55kYYRVZCN\nd+a4Aktp/ACXcwKBnfl+IsoTw5w/xf2ZnL2gWqqbcL4fG0400/WQlXXiUBdJ\nDCpFcZlY4cEC1/2kvBMMJ2tdzNOKX8thE+i0mCaAOYrN2JA3ujr17FgIRN0Y\ncgHrlMu3Fw8aUvP39WQin2aca8BvZ5xArd/J3S+Q7kDTZiMr95Dxbflxhf3i\nnoV/V6PdrTXTpFGjArOdzIyJCH66Ekakuwgt/4VIfPYSJiE7Cqk38i137TD7\nOWCH4UTmhKX2moSVHUTMc6qsXmvyeK4opudXozJ6C6LWjfDzwlPgD4xmCkBd\ns+2KZg4kY3hECZWDJFELb+RoHEto6WUuxhojF2U/TeTVxS65550raZbI7rnm\nwpQ8QlOUIc9bTCbpJe2+q/pPZKRJyKYl0VldpGXhiDcjn8iav0pH6BCDYbuM\nVFpZdXC2jM+TiofNWPu/SheBpab4t8CiR/yB9VTvLFQx0lsYl690j76VDhXe\nUIiQUn6pbN47bBzmRHgVlME/5yfkMCdAZNhtg14vTEJsIWuP72+JKoKBe0/L\nulGym4Tdyah7sxaEEiuHsiNSzMoDdp02WcfcFuhIdR2g2G1wKLbAOFVsYemx\n3LK9rMRSZPSkRYFZ4Nh0StCStqLPBDxEaGmx2mdcQjaouBc7P9CC4Q6tGXwG\nrmdQ\r\n=rr/c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.6bcb6cbd2.0","@material/theme":"11.0.0-canary.6bcb6cbd2.0","@material/animation":"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-indicator_11.0.0-canary.6bcb6cbd2.0_1617821605776_0.48384523444931915","host":"s3://npm-registry-packages"}},"11.0.0-canary.c91e8d141.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.c91e8d141.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"04133e0e91de7f71ccef6658610589c33d8c388b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.c91e8d141.0.tgz","fileCount":38,"integrity":"sha512-T+UMXqme23RvpULeElkW2eIAwHSocjgwI8uZbauPOgJgON+YtUO2aWh4VHBrgnTfgAr1ip8W8j6zBPPvBE3fVw==","signatures":[{"sig":"MEYCIQD5q3f6rMOnosw/a4yu5orkwv7RlFWTmJboZjr3es2LlwIhAJlMgt4agBQJKvfYgrjQeuzH72M8fVL4SGYoEbDaZzgf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbgCSCRA9TVsSAnZWagAAo5cQAIEbNIx8DtM1sgk5BD3j\n/wCmUCBiXso/lT3JcMCfNP2N35/RXunr/Xm7cpYXudSDUi0aZY10n98XAxLk\nbZBQGisRsLLzUFnB+pdsch1kR9Elex0onX+k1lAQsnYuWLAaz3Uyu2qM7vnE\n+XTrkCT28xz32gv5KiKGkx6N2xO4D/IeG5pcB+yucdw6fI1fjgcQI7LSnlM4\najIBakiACaNE/A5kmQDwyeCW6/wlob0EAvZfKZXitYOqEsJ51AW/W+Iy2g4x\njoV/3bg4O+5zpCXpe1GlLCEKPP1SkMSlBbZ98w3BrMtOxysYQP0WnQkruS9K\nDWPFBId84xEq+Grk+I84tDfcE+VWoFOukzl94tdPrUgKqCAzK7qxWBP+iw3L\nC0u5gZkxmArE4FUZxVnrOUNcza3TSwGW3coGjuhOSGIXVDBBDWwoZSxI9R1s\nlfsrTVxJUZfx4IsxPjyBUm0gmT/C29tsMFokUsDY4UbxaqwuaQAIqRg+RTCE\nNsPtcalGocGXEl4dkw74hJdmeBWfWpbzdMXyHp+Rqs7Gv3YvIW6sOJ66eIqm\nRRavm1O5CytAVIa3KW/AyS9pCel4t2DlGsBGB5abjFRC4l6cPt7B3NbeIw5C\nSg6VGTpxOyM2cP89FNt/ei8z18Qno4BiQAauCklPc3Vl/OrlMeYUsUn6Jxzf\nWOXZ\r\n=pxVa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.c91e8d141.0","@material/theme":"11.0.0-canary.c91e8d141.0","@material/animation":"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-indicator_11.0.0-canary.c91e8d141.0_1617821841864_0.9171277449758195","host":"s3://npm-registry-packages"}},"11.0.0-canary.f77c50860.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.f77c50860.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"21b869dd079f2840ca666eafd109a8613e2a225f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.f77c50860.0.tgz","fileCount":38,"integrity":"sha512-H4g+IrlkGs3Qf2hx7Ky3ny36r2DoRVibOSDA6VisMpNzTBtSa03cX+SsRqYK/mCHnasug1BtuMJCgE77ep2Lhw==","signatures":[{"sig":"MEYCIQDdxcHGx0zmpxMU9OXFWXNeBzXVLrNGZ3Z6MwDadLrpGgIhAK10AV9Zzqi4w26Bz7+NQPEf1EnvYaQsgYL5P9OwbVLP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbyKzCRA9TVsSAnZWagAAnxgP/1iyNDZF3lz3wM3S65Df\nva05jBzLgoJLydB1JfxZXjUJlGijfMDeu5gbKobvcDel0CmmiQ2qbi5H0hUz\nXushwsPr4Y7bUVas/tYSdSgpoVPMla4mx9dt5APxU7t1RB+z1bFNzmMJ9dB6\nxb+IIEX3rhSe2xjNtnpqq7IcY54okgCN/6yQX1hi7QLCaZtxeN4tPZMcHSQb\nI6MAEyagFimeFNsGDSv2cNEk2rrTfxK15xDI0uzyDLUchxl1Ba6UAauyWewn\nHvfAkMIeVi5yX2+t459KPGFKYHVmZEdWRioxtARG/t0vcIovU8cSyjnRITen\nDrughgBikoPdywqp+kaGA3m13azlGMNkCZwaLcC8eEaCgFJj9EURwY0Ah6wB\nIWSVaDJExHRIbMo7ymo9r0Ux5YjKI4phWGqDd/BpvUjwJuzPEnfhzsEgTFxU\nDI5EiRDIBnMIpAOD8j71acAQPcxFE2CUmKdQ7TqVrB2Ux7zJkK1N6V/1+9ER\n3krEcZuXUVsoVhVFfCE9Hk5pnLLiFT/KFZr/HC/VpAvXhN4w0v/igsPi3kyR\nv7NyDSu7w1yLqa8zhgpzqXzAq3JCySbPdvGiymkQJCzYhFrRgTKaAEZ+jJwA\nrX/8BwFH5le4hFDnGv29nUF7AGtgEA3VI8cGxfUWE1zt5EJF6VgnLpKoUxG3\nNwtU\r\n=IDxy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.f77c50860.0","@material/theme":"11.0.0-canary.f77c50860.0","@material/animation":"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-indicator_11.0.0-canary.f77c50860.0_1617896114476_0.754675914266089","host":"s3://npm-registry-packages"}},"11.0.0-canary.367d88bdb.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.367d88bdb.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"4636329bc7b9918fd4e506f5321796392559a38c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.367d88bdb.0.tgz","fileCount":38,"integrity":"sha512-EC1V7O9qL/TT+T5GmkCBalOZSzw24bcKUFzgx3+LbLlgawUXBAtQH54zDJgCSdG+HeBh7gwmf1cC5+/OnS9VQw==","signatures":[{"sig":"MEYCIQCkFh4dsL0UY7h978wY+6FV30gzmr3Lj9wBRnT1/VoIFQIhAL76GLFWgtIgUCeV8UxYhkeJdSU88TWdxUDwpo/WyFBk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbzFuCRA9TVsSAnZWagAA+GcP/ik0jdhNL7w14e/ym1Mt\nZo42xJxnW0w5p5f4AHZTqVEmjcz5yuofEu4/6+tO+QCTzelD0JeGcPOXS73g\nXnPS3PirHPE2oTB4BKfZcNmWoqK4UaasZeGHikGcVdk1Q6UDN1GzYtvYLEET\n8M3lRlMOQ417FMtJ61oETf132LuPvVo7Pmkygczx9RT+H70hkECsHRVN/fqq\niAksya+gYpXSIN5xN0qNl0BjSklrHfTw84VXsBHYyyeci2juvodqe15geEJf\ndLZnga0QCAr4jNUfm+1MAEv/xp0mtWP7WOHZGRXDI55itUVBxVVbHt5ZtVWK\npSvNgbdW6npBNJOdcLZ0q+JIqbgujjwafHaN9pNnHZVtGX1Ovjc8UZ0CEhwC\ndQZ+Kkl688zJ5rjY8QkINa5MeepaW1AJUD8akNJwAi10q/mGzHHx9DZex365\nVAgffSSFlVZBCX6E6pCYNGzimI5faOxx5s59e/Cj1WcUhLx8nUoiEB1jqbfK\nouxlfsqmE+C3sKwRAnbJDX4PVD2u0S4AWglBRQOa0ic+GSkfrJ4SF2hQIyK4\nrjC/lP8Er6ONxSj1TMMEEiDU6Lux9EXX60E4Nk2FEi1Zq3bI2UFhB1rYlCLh\nnvSR9aPL0Xrau3pE47OulczzGrINew9Q9zow25IlhpLQJcD2Tm4cNpuQfJQj\nIzav\r\n=6ibu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.367d88bdb.0","@material/theme":"11.0.0-canary.367d88bdb.0","@material/animation":"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-indicator_11.0.0-canary.367d88bdb.0_1617899885950_0.3216641080961147","host":"s3://npm-registry-packages"}},"11.0.0-canary.0ec437d3b.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.0ec437d3b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"b42c8bce485f902fb311679872024e118d4faa6c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.0ec437d3b.0.tgz","fileCount":38,"integrity":"sha512-uH07lVmMHDhUpU0v6bO6/nnoMyxsOE1U4127rBu13RPiql3wpJKvK2/YVQef9EYZt9P5895B79LSgqxncEQOgw==","signatures":[{"sig":"MEQCIChtVvSBXbxvfq/CsM9UbCC89FzSbFH3IA56QrWjwDieAiA63yWDjzaTx0+p7r9Hfrev1b2WQcoJZkf2HHY1C8kXwA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgb1riCRA9TVsSAnZWagAAfJ4P/3TnWyNRKYZxXEKCCmil\n2iSLIJa3wlfa2JBlCXCPAlTkPEmotuTNaFHHmlvn2V4kb3PtETMPaDzocDg/\nSo3IloPJWx+xqS0S0losojZ2JYTPAm7VSOKSvWGJg+ThNhQ1yadC5npPUEP9\nRlCrhAsjrkxsRh7xqtIAXDmUpHVjUYDhgC9UMkq1JfG/9Ngy+I/lqnZ/wU2k\no/zAlAWCyyJt8cg40eEGPyJk3iu0Y5/do+re3tnMf2BZyyl0HvnlvxYx4yrg\n0QGtvW2JkymGcZrfNHs+T7LCMNO99k4h7Hhwwko2DI4mRDxZ/PGNPCGk1ug7\ntP5SP+CxdIkU17HdAL3Y0brXgLiFBSegGJ2Asgm4kCDPoKU8eqkoTXrSxED1\nfzyNTeOmEMeg39eUj+UQ5WOyD0kYOHFkmRO0bqIdy/ybIv7Lztg+7LemA0n0\nKiPXvVSKC9AjvC6mjQEB7yUxe34MvgBMVpuvS3aXDbIm89lPpHFQRVWEnjLS\nf3Gp/T2KI+d5kmGhfREWVw9NEpa1kRi4CJCwHcAokhsevt3ra+CpNVxYDu9O\n+WdYehcoI4mtpnHJA+4L7SnL2sEZbFm9wMrCVnHaV0eRwLOIOTGhA+GdyE5a\nmqd/Ced6Bnpy6YNI0zTVTN04bzeO/apAKouVXcZEqttvfYrEiBmJ9uHZ1jmi\nRqs4\r\n=gCy5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.0ec437d3b.0","@material/theme":"11.0.0-canary.0ec437d3b.0","@material/animation":"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-indicator_11.0.0-canary.0ec437d3b.0_1617910497568_0.5265365717856096","host":"s3://npm-registry-packages"}},"11.0.0-canary.b2fa996a1.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.b2fa996a1.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"634bb8a19852122a0caade4fe2e010c99ead00de","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.b2fa996a1.0.tgz","fileCount":38,"integrity":"sha512-/VfvF1lHnvc4GsjUV8iESCMb5CF7uTdRSzJNmmE8QEQQao2iyfKn/hepD0YhodYdOLl86BOARq0reUNSbL/74A==","signatures":[{"sig":"MEUCIQCHE30OdTRq9vnG0nxXprETNFgqqvEv7CcVXT10CdOaLAIgdLkXllN2QDagk4/cy8PBszymz1MIlDHfKKQuRrSKmp8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcG5rCRA9TVsSAnZWagAA7HwP/3Yj7M57NlHfonVqATaa\nrsS9Gt5D8Djmn/J1WfnItYzGUMOUlf8GIHnSofBWdKOqkGVG3RfvA5ro46Fh\ncw05zNJCk8rgbkSSAJUm2GLODUmBQqJf9kM/mhE+57R8mNtcW0BcvA+GOnhg\nhoALualdnODzqhR8vucnhNFkNKJiOeHRrTyV4aDk1b8cJQvhV+9EykzNuSkA\n1bOClBt5eK2RH/63QPO0oFOX/E6eKf7lHYN3XDclRgT/YHIcxvF43Lq+lj7d\n24Y0AcPsz5daJc+SIXBbtaOtrA5e2em/+f1+SyM69SaXveOyw3M8QBK/SDkN\nKB1llwk8YsXZ/3U+2Zz7JgawvmMd2pGWONFwPgUtg9uadugCabKF9JGSkQpP\nZmB7EKGlscweSfMNMupLt9vzzEnmF5HdVi0Y6XWBRqN+D/aiCtYT6jbAt54o\nMrMojpSNmB3NTuGC3I53DVwDfdGcJVPi0zEG7b83lgCyb/cjVZXSsGAgfoMG\nm68pjjQP+TciLf3dqkxtQBmBbE9mL7TsBL6KPxpsz1CVeWn0kW3uVikNcevG\nx09Wv5Zc8g8y/3lqm17GEEymRXIoMkVRTMmjP8AYGqJI4DQsrGzYs5o7Z5FR\n9C8baSjv1eZW1SqW7bm3f2QRJerbm/9cQxsTnvVYbpqXMPF4Y4/ydA8stspY\nM6/w\r\n=aGdI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.b2fa996a1.0","@material/theme":"11.0.0-canary.b2fa996a1.0","@material/animation":"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-indicator_11.0.0-canary.b2fa996a1.0_1617981035038_0.8443084751304892","host":"s3://npm-registry-packages"}},"11.0.0-canary.24255c408.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.24255c408.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ba3470356934df7b499e34e6d5e1070cb5d34e28","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.24255c408.0.tgz","fileCount":38,"integrity":"sha512-onQQEAq3Git02E1MJKalXJEfefEZx94ZmBkZl3jnSvFv6trsP4yyo+3THoq+FjdtaA0IAHwPxCO1sWBOhmUhCQ==","signatures":[{"sig":"MEYCIQDZrl4R1mmA+kxNxAx4v7GuNoq7PVbLZac4fQ4J2XJWnAIhAMV+O41RadIvYjhaiJhg1FQ4/Ga59C8bc0PovievsUZs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcLULCRA9TVsSAnZWagAAyXoP/RelZXmKbgPnKokkPvN0\ny3V9kerql0APoo23d70LNguQ39vAJEooA64n9+cc65pyP/X3fPY5nsXsiQdl\n3MN5cIkPaMuBtS9mx858NPeitIqgTA1bcgtQRffvpilu58nG8VmPw1fi6UNq\nBZtfwB5ZwXEkSc2QaH2D6OpT7H/JPJIjWd2PULE0raMQwQNIOs9MlEI5sOW4\nXcGnab3g7F0olnTi+ytVlVvQNKyK5lr+2T9Z0E7AD6Vg62XIPezEADg+FrHV\ngq/5OhKMJcuO9PJpWEG8q24PyU4fCIDyO+Xy4+Cew1DFTspeuwNOt+Bnt9SR\nD3zz2Qk278jTqEp9cCyAv+biu9zigaYb1l2bKd27uPUfo7ZYsMG8m4aCr2/F\nTKxJi3IFRjUK0WlFWRAJC1LrsLGmSYfSPesK5IaQ6MWfJRK19v3IMsMH1mMu\nCqNfSUALIDSHlLIP1jbrhKYI0epv4lSPSY7UTxDo4zq6GZNJG0cFWx3ZMx8t\nq6QCQ6a2GL2XiBFaae+otEocSanJm+a8z8G13Dm/iYK3SXukJSGymTFh6tnq\nD2Pk10CCtiKjoASYtICHsg5YtF4kZYDnxxWFCu5o0aJc1Wg5JFkRn7zvT0LG\nSy9gStYQib5t8UQo5iTYpWV5gUj2grQwf3RzfW16Fw4Jqyt8e54r5limg8PZ\nx74f\r\n=p+Km\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.24255c408.0","@material/theme":"11.0.0-canary.24255c408.0","@material/animation":"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-indicator_11.0.0-canary.24255c408.0_1617999112623_0.4454107630899897","host":"s3://npm-registry-packages"}},"11.0.0-canary.7d6a4bb72.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.7d6a4bb72.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"db0d425461b324d8bc1eac98e3afd781e026ba99","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.7d6a4bb72.0.tgz","fileCount":38,"integrity":"sha512-9XvsrafQ0YycWRElHVIdPE0dy2z8uhZx015vHSkOswSnHXrG2BNEMTYMwDUMtmhNCkblDATKqNgouK5IDhb3zw==","signatures":[{"sig":"MEQCIC4WluNmMqptfspEI78NdVE/WVFsJ906kzyEovHXIfIfAiBcmbRKmLTbvb5Ynd+roUhR5yg08La253yXS/ev9WG3ww==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcNrUCRA9TVsSAnZWagAA6BAQAKMbznnfIhEh56qaeZzk\nL6ilt3SXIwAYs4OTGsARuNz3QqarmBFO6Ur7nJQZVM1ky6L5MAUqzfnkjg8c\njgW9Hky21/HLFK/I7ZKGgwrLmoDu+CN5lsxOTmtWHafL4R55afbVwCliCvBC\nTXAaGMqgt7IhZkkUOB78IkfSg7vZWnhggO91qnA2KsuXhoaWkNcSH5WbEdHM\nR/CXe3v+Ho+riaXZ/1k6AoFeIuSEHp7IdLPsaWyj6fEUENLFYo4i5QWEtYSJ\nrCASOq8ecRXEj5ruUd1uEfM5jE/68zD23k+x5MUJpj6I6r3yw0BGLUOVmQys\n9tLKrDsIxueBEqoVBjIakoPpDvpXCX6sMVdwjBIsU2ySAs0O7MLSip8PQ7+4\n1azR/2qg+CMSiZwij/00V80a5HCLS+w034hW649sQIDLnBL/V9VbgDr4aWTt\nAkKFxtXYRVZhr0XhGrcI/qTbo754NQXZIjUlx1phN5bw+b0eB7lzxXI4ocwL\ni7BXFi+lHrlUo3gyXJcxONK4V8uuxG5CYHQ+H3qvhUuT5AZtTsB43/EQbN+d\n205y9LlU3GFf02BaA5m5i/s8K62DDvzvC4gHsBqmMqyYJ3WD7garh+0zvEBH\nfLr+r5y3ilGA6+wGMxT2f1vmw0l6SOG7FSuQRnn9C9xa8/NumTp5F/UoDET9\nlzL6\r\n=Npxa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.7d6a4bb72.0","@material/theme":"11.0.0-canary.7d6a4bb72.0","@material/animation":"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-indicator_11.0.0-canary.7d6a4bb72.0_1618008788084_0.43789975895322364","host":"s3://npm-registry-packages"}},"11.0.0-canary.352b295c1.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.352b295c1.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e6e4dc2fe8bc8720f29145e1bacddadb48c70037","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.352b295c1.0.tgz","fileCount":38,"integrity":"sha512-JRkhLFzS0fXCYk2oux+sY6t7uzWsgov/nZ9krP1KAhCMAV9OjuYOfXa8LfuaFnOdkFipwNqNtO/ubQW6JKCE7w==","signatures":[{"sig":"MEYCIQDGRWbJdaj4NiEPBy22lndGSYj9XBnJec/urEUGog5+AAIhAPwjmSQNCuSNgGTWYRMBWq4vqSCF2er/lpGf5IMwRhi8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdI4tCRA9TVsSAnZWagAAUb8P/RMyhzORe3kco9X6kab6\nHa7dkRqBStIrTU4s87jxN2niu/4Umbfd4wkm3gAvLBilIjqMwX8P/0pEx5d0\nMJdhxGTSOSB1oBgrOOGCT4B2Q0HNexWXJXX2FvIaRwRc7CYTn5ohvAaPYFbp\nyj1yVnzbdJXEQcilVTzavP1IEodPhyhGV1agc5GAB23r0YtNBAbl1mPca9Xk\n5pnMQeI+CMwsyptdJTY/LPxmPDKY9rwUxL95vOyVRQ4R+RlyujKZ7nKffZvK\n6UJlYCxf2eSyQ2d2bP38rxAXV0/PqCOeN/YC79IjT1ECH0ywKsaToGzPUAEQ\nHXXsjd3HUNzy4m7GOBxnH95kkpseBRoFkXrDigHwl1ku1ZJjWYFdYHtHCzbs\nZR+hTJTITpaRvc0ppGDZi1EGhG25OGy4ltlMAQvAvUYPQnZDBXn5u4uQeEIV\nFGKaDg/5e5d0u19yplTdVY7HT5aP38wdS2FlB5iK0msUU/jXJEsud3kTWfbH\nZyAMDrxgrpptybBIy9/QrOeTOHBH1wIDtEK6+M8OdyrV/SsN/l7bJolLgS4B\npKp2wij3ftoVl+ZldsBHJYujpMIdHH4UbXJCaIiSlK6WweCNXx2omvgw+ZZn\n2xsXE8qTKKBFkpt9uN70E0Fge0upWNdr1S2ZfIYdjbb4NRKXsgRjU8UmqooO\n0CvQ\r\n=oooX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.352b295c1.0","@material/theme":"11.0.0-canary.352b295c1.0","@material/animation":"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-indicator_11.0.0-canary.352b295c1.0_1618251308942_0.9789441414569022","host":"s3://npm-registry-packages"}},"11.0.0-canary.ab99b8064.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.ab99b8064.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"8e06d3c069e8f24bf613f248734879f5c404166b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.ab99b8064.0.tgz","fileCount":38,"integrity":"sha512-GZxRKzTnl615VMq5mdLHshklBSimwAXczQBGQrrOQzCXFdOkQBKHqsnt/VcwNI1Glvpa5fLgiJPTXQFrICEiBw==","signatures":[{"sig":"MEYCIQCKgStEjw+Z92AvgTyluFuyKYXwJrkAzCS0b+JQpYjyngIhALnw3tVfJvGAV4kDtcsPaj7nVHjgvEqhG4DX1grxLMWb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgda30CRA9TVsSAnZWagAAhY8P/jHGjRSI69g/eHpFjzTe\n4lmY/ZzVHcZADfFtTYtXNSUIGrIPF3VkgPc4Hjc9oLOr+OChYL4aRUqZCp9E\n3lO/W7bJY0+ZTlXTWkfLu5v7ktoVgX0vwqvPTzkXhnR0IaK8QYwBBzx6vqwX\nfuPB6wGP0Y7wzYNZwZ8LQ04KyGlTXfJTU8vAnQnbgGj9EMYlXE3mKW+ofK3a\ndaVc7a4JsG6dq5Y30pNzMAE61slSpUOmhpxL1a4Ar7HzN3uRk3GXVIXnAN49\n0jFA5csGmS0I9oL6dTpodcqwofnpLvokqeMUShMwC7vIQSQHoZ5UhhQLJ/O/\n/0G6yXnxwm3jn+9u4Cs6siG62KZVJxzHxPR/R1TP8qcDm/DKj0/u0v8ASYve\nK9/uRd2S0TNVKyf+rCPBEJv2hEKUmSYNGdrlMxLDCYvWB2bcKI3lqwHHLLm5\nNxNzHXhwrjKAPdGrtNqb8ZylZ/vRFFnMvYoAMzg4JBCwJ740pTKJ/aYSoTWb\na1ZVCppJsX7mTTZcLLaLyaU2vutyTsNumubad/m5SM9+f+AMWGDk1/Q3CuRY\nbRk/FwV85dS0MmAqUkYjBnTudfQ4uHeOvNP1oYpQlJ5aMp1PQUwKfUaq0gUT\naiM0/4LLYqF7YGAfoYJ/wT1E7RfK77pxBX1hEF6FmJYZ77BdwFA2ooRa6ztD\nC1sp\r\n=Dmso\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.ab99b8064.0","@material/theme":"11.0.0-canary.ab99b8064.0","@material/animation":"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-indicator_11.0.0-canary.ab99b8064.0_1618324980215_0.8466984409807801","host":"s3://npm-registry-packages"}},"11.0.0-canary.8f0a11e32.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.8f0a11e32.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c7e27085047d5f51acb10859fb6be81aafc92bd3","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.8f0a11e32.0.tgz","fileCount":38,"integrity":"sha512-/rLdFTRHSWkt83ieq1ZDYOtR3YFFfA/S0zFYF3quk4DXxSJcfiPlgUybOD4yM16m2xCPU7uI3rT3Fz5yfQVGhQ==","signatures":[{"sig":"MEUCIDjo2989W/3UGC3ZpvGBzsKjoPLd2sUvAtO8lhR66ZouAiEArmt4HCecsz7fU7zEKV57ZvyUJ3U4lNy7R60o1WEcR3o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgd0peCRA9TVsSAnZWagAAqPAP/RsDSel5l/e0jfBXvNTH\nQO53fZCP0lxpMfJ8my3vHzCkKk3O1WbdOkoNPIqSXutXco7fpQ2yDSb6dyBi\nPf20MqWYVfAtCE7j4fljnhkrTsQadqvKPEH7RsIqOg2Z862MD8YYWaQh3YD3\nU64BJ0pRF79KOO+VTQL+SCLCaAaXuvAvRyHiGsTptjVg/fewNjx5zku/OoUe\n3aq4U5rbk/0ggoqJZ/z0f6/HKD+ykTaBc6TZ9fPNyHAcbfl1madxWomzk7mw\nzZldoOwk6+hb8KZQZzGR68N5QDHDP3JYmWPP6SGC1rAcPRvMCyQXYGOJbkR1\n7BevQNBWjPj0fRTCn7HbhADqWP8zNzFMzH0Ue+kG1UBxnsD0VOk9An4vBxR8\nQ8B2bfnFct9su7O5llOj8zu9RJCB5rFhbjky1+FJ6994MDqyAIyKpI7sMJZb\nTYJxG5o4cVi/x5LBH6PEUozyPGkBnqtO9ErHQ9VeQLc0lsIpwLth3uPxaE4R\no1i/cumEbE2Zg11OYEa5f3S9ttZelU05beYVyIhYRIKrlI/V/lt/IRi25SsK\nIQ2FA3FZZJ5guXeC9yvOm+hql54gOu5ys8hKEQyQutZaRUvgzqZD1JyK1sch\nzmbKRK8BsUSJnpx07DdLE9m6ZP4ENVLi+IGsn7m89Tdn4IfL8nyeDN0u8IW2\n8SYB\r\n=JMob\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.8f0a11e32.0","@material/theme":"11.0.0-canary.8f0a11e32.0","@material/animation":"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-indicator_11.0.0-canary.8f0a11e32.0_1618430557615_0.686020054126864","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5c6db8fc.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.f5c6db8fc.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"9df1892216d8e50539d5c8bf60e7c9ed5368dc27","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.f5c6db8fc.0.tgz","fileCount":38,"integrity":"sha512-NxJdr/jd6FE9zGgqmuDS4lua6rvnWjLfQyOooz+xmgUPgcYCUeKx+jp+Kuy7FY0s/Hv1/3OeZcC6Nz74kYtE0g==","signatures":[{"sig":"MEUCIQDJo7M+fIBNNqj1RoSINKoS2C/GGf9ObiOZSmqO350trAIgIg/zMa8fAHqunby6Zl8ksFOh5SQDdelyXdahK/wM/vw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeH//CRA9TVsSAnZWagAAlbQP/1hHTVaUdrlFZgaokvFo\nwEgZgP8BGvlexDGA65FU1hUkeumAtPjQRYQlWfpPgBB5mgY5wajTYpNVxgOI\n1TXhdoYcZSFZ5YFqF3s6R6aEO88lfJAwS+8YYluGxa8BhDFXrZPYxEeOvdgE\nG6htKlj0CYEAs/LrLwtnyJzg3+jZBpEj5v+xHGpHZYv+1HJJhZobQjDo1lV5\nCPg+dHKtB6KkyS+0GmvmOvmxUAKOyDfpusHBKTt2MDzbR5XQfol9QUuCh8Bd\nZWolkCiiq1E/T/aDwExJLHQDwYuqJribRExOODrYm/snsXcx/+FXtCmL+36N\npzbGChtUidI9khA96AYeDL/wscvWRqVxwGfgX4HpbmbAQlyoV13AasTntARu\nVBj6+NUzFXVIIpxSS+A0oNfDwTpjRWTU8j0yd3H7gLV6fltORqs9+3MdsIbz\nVHGThdL19LYCypdZj4lB0WTs1y0w1EavLWmWRTVk8p2FRfTzLmWGmvstPZCC\n92Ze6Xdhsj15oiQOlfJ9D4R/meq4xdRd2jV9JE9Lcofag/k3N9pARUAXIFe8\n8olOOaggXlBsRVrSAL42FmiHYZTSq4CsGLsmxLKA52GYGrGk0GzpBl2Rj+GT\nk+LrNTaYblgdEkN3SaqnfK0WtIrPnPA2v2nxiqw5HQLntN1yUXxF+G1GlpzY\nvrUm\r\n=YLDy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.f5c6db8fc.0","@material/theme":"11.0.0-canary.f5c6db8fc.0","@material/animation":"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-indicator_11.0.0-canary.f5c6db8fc.0_1618509823090_0.20024268074944707","host":"s3://npm-registry-packages"}},"11.0.0-canary.3793a3143.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.3793a3143.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"7ae06750b3565de10dad7bd642031991bfc09a68","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.3793a3143.0.tgz","fileCount":38,"integrity":"sha512-BTA8G9Wd0k9x73oRiYFBiEeGIseU1LqOlBTQNJAG6NNY/Jx9H31ZfFyyhEQi6fi4aRuBiRL2eI45UpqbR6LBag==","signatures":[{"sig":"MEUCIALGWQk/u75xUnOFNspet4iUiICzPQwqw8SzJ4e3oiojAiEAnFZegGL4bLsmhetgw7GoYl1y39kD80DORkO2Zcn0d6w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeIZZCRA9TVsSAnZWagAACwYP/i2b6io+ifsHDCx4iUsw\nzSfPguM1K0RxhYQ0rMFoUyuq7a06LLWCyostJ9KeP72iNwVjqAEicScVvnqB\nGsuWDxTn0TfdCvkCxPlKEfrYRcDpApuTIFHsit7nSEsaiBUCGh76fvfU7WHx\n7DR0h+7I1UOgQyzGHe78bqf0+Yp7OStsCp4Puxig1qCmHFucA0jne8K6Hp0C\n4CNHHwIenZKwnqU22B2r1KvVhypY0LoIGHU8lE2ufjKkdtUaR8xaU2F8SOLK\ndk69iZ0pa/iDE/WIt03Bqjg9Eq3kwwHZYH6Pl/7ZZaBCKqJR7rkCrwDPn8+j\nKQn/sR/lEW4jRABkA2qhZnIRa0D2Rws5KE0OWHrtrVfSql5quQ8PRE/XgYgM\nQRFa8w6eAoDc5b5tz3kAbmWuVca3Gojwzg9n8M0A0/u8TwU+t27Aavets9Qz\n6ImoBFUjGnAxJ+iJN0l2h2Uddml1yvvOmorEadAUdHtRuUBiJc4Ib39Q28zP\nB4lc/7IICwMMyGbpkC6fILXe8iHE7VjOGZm/k2uAA7wjBqX68ZgvFNX0TcHS\npA3Eq0DkBQiUvetx/dYjKejfuAsTMuShXpRDAMExMx+9BQ3pN0/L6XIUtIzd\nxXuVJr1sBliAxjh8ja39tnixgDHNAoSBJowiNhrzmjuXitnnW1e0WVudXVSi\nApoJ\r\n=IHKN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.3793a3143.0","@material/theme":"11.0.0-canary.3793a3143.0","@material/animation":"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-indicator_11.0.0-canary.3793a3143.0_1618511449348_0.18979239210692622","host":"s3://npm-registry-packages"}},"11.0.0-canary.bc104bae7.0":{"name":"@material/tab-indicator","version":"11.0.0-canary.bc104bae7.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e6666d84462662a8ed564b519d776614c5fb6580","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0-canary.bc104bae7.0.tgz","fileCount":38,"integrity":"sha512-bcH8e5BjV2Eu7V7hbRXRSNKo4t6E16UJIKUS53deTzPPCUVUdl8G6JDUwejIbuEOmdAsRzwe8UblvkJ2en4jHQ==","signatures":[{"sig":"MEQCIC7DCIWAVwbliMNXdwriRPWXpRUeXpZRRKpP7IKkTG7iAiAd7YhaFsw4mMgrrxk9uYTg+zDlMnGBj3TUNP1IjXOFag==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeJfpCRA9TVsSAnZWagAAvs0P/AufP/wMwpgMddCzLMfq\ncZjgN1Gul4GHFaIFXaCpRJJ/1gKCPOqSENGu2yzf3hCqmZe7dx1HKtD5IzGE\nXoa1AuG6w3d8OCPv4tmPMPq4B6sf+eRaQlnMHfCFuKZjJ+1T4awtd4n20Be7\nB4FwXwFoos5m53L4EJQSAvGICAtEsBJaz2YwoLFXBgfGnnJO3cfG/Igw6Qrl\nf9EPaqjTUK6BSFd4gwfx1t4WsJy4up+5Z46x4AqjjZmAB4lvxt8hURF3VCtE\nWx8KzO0utqRRGCPPreMaWPJFeFk5jlL7t74bPIsWxdhyCKavqBqpztSYtHiz\nR5YKF3rCr0qWtvAbCa+AygyI1/B/vmalrwTgS7hfwR6GDv7oNj2VaLJY6DPJ\nTckmAhwxbE0hTgN+xB0s6Rs0WOMroP9P2dq9kgHYX1EZ5bZYF5OiP78tsSHL\nXsbOTcjJtjWoCqFvrzw04ONJAPSaIZZ1pOThXrSoTet7MZb6nVHqaMNQ1Jzu\nEnAzZ1D7cSWTUEO6GBIP3f9cW/lw5roLP0+YTY2iEIdA0N63VEaZ5q8vq0g8\n1+KELyUqRjd3XqZ95m6PyR5P33irzOCefdSM5/FpkB9ekK4F4PgrdQfWw5Qs\nIlIzhG15kAoCh23ookq72s8SIWgiKn4DIt+0T+4wZdtleArebI6AyYV76Tk8\nBW2K\r\n=T8fM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.bc104bae7.0","@material/theme":"11.0.0-canary.bc104bae7.0","@material/animation":"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-indicator_11.0.0-canary.bc104bae7.0_1618515945207_0.39372425445220793","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f342c3f4.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.3f342c3f4.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"9158bcaa0a09f7d1ecaa1f003861ca9d61085880","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.3f342c3f4.0.tgz","fileCount":38,"integrity":"sha512-19jqmnWUdfAHwuFy3XG7PO42cMROfGMjIR1aEW++XapxYXwsanDHq3603LqR7ubdZJC1Ys5PkspUt7P+yhOvCQ==","signatures":[{"sig":"MEQCIGVdi63N/ayHYKFUKmRm5m5xJ2u8euEngcxyC76OQPWoAiBgpBjuvsYunI5/8WVIVlA4mxX5hJ4HXubliTtqFObbTw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeMQACRA9TVsSAnZWagAABnYP/2C2NNmvbzstN4CSeC5S\nMGzSeAYFO+LipBrCunHo81jV04T/lXKsutrz1glh+Jtt9NIBuuxYSPGdLDIH\n0ankvj4lOfVg+Y+Tl00rGAaB0//Wtzq4Hp9MQMffDiLxwwGUn08cPz1eMfkZ\nMhnsoU9Sqnfy1ryLtDfAlyF6KCtCPYGDZ6KtLjTC31TFbTA8iiuTn1lyBoZg\nkY33+ft9f5WHoocqxbZhq7oE8p5zHR6XhUWtXKRj1VL10FSlj8tr7Ki7C1ag\nOLfVMUJtGPt6cnFSHMmAv2oeaxP5k5PVfVL2cmfn9+rsa5FTgEYe+3hEp89M\nl1fk96S8meafuiMa13H896jvQh4AQq1D3/mQKqhm+IwXL8PKnHKZGIVlLwUw\nh1iED40nQapurC4P7Cti5lGp8GsWOz30lA+DIWpHRmYNoa/p3gHfKzBAVt9Z\nS1J78WeGlAbAUFGUmti1FFqGe+7E05hNt0sKBIM8Qa6wWnvVRCrSYkHPovsv\nWvo9bHCgaKKYDLWfuJzq/xn6DoU6ztB3u27HV5SQ/ZvHs4LjJhsWhNYr47dZ\nCGtjwt4ntIZ8PJaPsEPLKN8hSAu0rRdM0eLf6HECwxLxw/rcS0vA/snpf07m\nH2F3KjWXRmw5oIN9nTNLzg2+vpiTJJ8Cv+uDLjxuYGPvUBnUhS8thU/Q+d6b\nbeHO\r\n=GcVa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.3f342c3f4.0","@material/theme":"12.0.0-canary.3f342c3f4.0","@material/animation":"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-indicator_12.0.0-canary.3f342c3f4.0_1618527231852_0.6987514941640802","host":"s3://npm-registry-packages"}},"11.0.0":{"name":"@material/tab-indicator","version":"11.0.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"d3f79b0bca5acc26cf9e4f0d99be9429490fbdb0","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0.tgz","fileCount":37,"integrity":"sha512-xNieCoP8PhTh9yn9ZfLNz7dvIzhk6F1g4yIkBP2SJHt/QJOHJ/cGZPiT87ZrEqAdCQLfdjovVtR0vxaDVqb86w==","signatures":[{"sig":"MEQCIGitY3+AI4pqNpySzhiVxzsUUX87HDTTDu43pf3EHXNtAiA7r2Db5gbPmoKarZPFf69yqrd+mpRQTwzLxVnrzZbvBg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":178931,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeMTxCRA9TVsSAnZWagAAlHAP/RymlIZrVHwni3excbdL\nLk7b2yrM6X49Kf/uCs6R56sbAJBoCQCfg+BUxzJcRKyknDx2HBrC9QE9njTW\nhL7N4OPaImj6vtYZgrsbWpzcaSHBLDnd9iBntIELQYe+yU60eSi31KnV0ECY\nTmkieMujSDrsC0o8TjCKkr0x3Mw5C76DXhcnuwtZAraywXaTWKz453GDAAap\n04WCZMqaFLRAJXlKdso0GVV7sdD85zAQHhHvmbe4bFE8sYIT7wvBXEcfc9i9\nIKEmumgbAg0T7o2GviXGjEyvzLQxTnWGouozV3M2hkH/+32sVsWWJmnumIMb\nywgLZM3I8IO34GsJPCwdyp+GN+U29V3kMBkl7qtvw/WB6ISdoPWs5i1yq2h2\n7l5C9A/dkSn5fzOwL06bs0lrmeePRxcNigLX1N/f3LUdfQpwpHPDSrhwl4TF\nIezh3VID7rwON0mQKpr9t6M9ADjeB+ovyVhv4hRr6+6hhQcylSw+tZM3x3dw\nYxmlk1ZudWPP7hmOQIpKNUbyBaWUgQjMEsHz0nXXnGLLHCfWeseudewblbuf\nj3lytN9Fc1IG5PabwMi0rqEm6p38yI8wgc6/3dDenisnilrwLJa4jIt7xJzv\ntxVvtLh6g3wdzg6vmZYdDkfkt8iKUFOp4S7qHdmUKw90ZQ1m0JyRTi5ZK5jo\nhnJy\r\n=Nbsf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"^11.0.0","@material/theme":"^11.0.0","@material/animation":"^11.0.0","@material/feature-targeting":"^11.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-indicator_11.0.0_1618527473320_0.8510318875344183","host":"s3://npm-registry-packages"}},"12.0.0-canary.2ebfc5374.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.2ebfc5374.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ed7d76907f4e0708803fd8e9771a3435a964cf6a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.2ebfc5374.0.tgz","fileCount":38,"integrity":"sha512-urP0YJ12merxPwRpCCq7OlUCAmY76Yfmvld33h7MNX5nujrZ8QpwBJTMmt4RERgWEf1wXyTAytpU94Hknce9ng==","signatures":[{"sig":"MEQCIHR0xYUGsONubrnxjpIT73fs/ABSax0PXBDXn6qLGYkHAiB1jyttGY2cm3fXIeGsCDeXmCr0cFpLqS5YGvFrxEz1Tg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgefcuCRA9TVsSAnZWagAAiIcQAKPJtxkrqHWlfxie3p2Q\nFPqwG8e1pGCAmh1g1mWdl9EjJXrQaxxvMwSL16SmezF7XS2WhTcqAdZcvhOo\nThUDj7Thw6JCWeax2tFpmBmbNtPTqVz21vcLhMDvlOAjSBDrVkMxGDMO272K\nGTWTibCHrgwt3d/LIAtI/iYPaZh2ee5t5sBlKq3sHJjkmmWhdBsBVE8mRJPd\nTgGBlbEk8bwN/Ytr6SYSxpxSAGsAd2WVl6A4paT+LGUIsDUBiZbh+K8ZngSX\ncLAqAZVgbCXKloS4Md4DYOQ2VuM6b630zLKn4qb7A7NXpfxUIhqSw64NkWwL\nH4+5A3FUz/803GnFUpn0/KCPE7Hd2HXORYOcL4CAlYf7TRjVnvRDxdwsqCb4\nQ+/+2pH0pdbmesPTcMlxl+tcPSG9c9SSTqJKqDsJamFuynHs38WX74tgB+We\n56jWBjx6Dwa/FTl9XdILgDaIS5Kt5Uvu0169N1YxmCLZoYRMMyhmwqWsbX5t\nS0wDwzg5W4B9aC4WxjBelyrpc8eNfSYe7I7CHDB9HvAUjpkARKno+bKGi2D+\n9Y4Ecj8AwNVT0nVifYUQZuSpKNNvRHpg8hIHS9OV08tT9NYT7QWSC58byzu0\nxmmqcJz3fbnICRASBq6wI1+cyJ3ZI8Q4NohPqVgudtRDW9uUz3vcXglcCf25\nbUOi\r\n=LeAZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.2ebfc5374.0","@material/theme":"12.0.0-canary.2ebfc5374.0","@material/animation":"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-indicator_12.0.0-canary.2ebfc5374.0_1618605870264_0.8259477919533964","host":"s3://npm-registry-packages"}},"12.0.0-canary.5631828e1.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.5631828e1.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"28d1d973b1a7a5f04a04b562d8e2715d987469ae","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.5631828e1.0.tgz","fileCount":38,"integrity":"sha512-Gbn2YVhfiHpWs+tlW2/Tdb/jMFnBfQBske/VVo+5AscLCGSZbVh4im8IbS1k0/aBcQcHzbLf7M8KFiInJtIV/w==","signatures":[{"sig":"MEQCIBOIJL/HlFrgildnRSW16wuxYJvD5h66174T52Orn4pKAiByUAFr81rHBc5b7PSwxUeSCueJEejPehMY6gfz4P48Cw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgepJTCRA9TVsSAnZWagAA2sYQAIq/681sYIZwRRiWOsFY\ncDfi3CuwprzKvADIuZynSf34AABMWGLf5IpqnjJ3w1VWd5Yt9yOaBwtbJqY5\nkpyWiCmhm1KpD0XD91By7D8FcoM/dAMG06YeggtR+lxnQe2biRUn6LqY8mE9\n8nDi2VcT64R9kEH9nTEFiLFxbKwvzn9aMwn2YblEalYjSPdzjQB7rXtskkIs\nSi5W3BbgnUbXmPyszn6Rl4jKkBQZYSlNPYexwdcsOlw9o6DdqR1e9japzV9x\nsT2TDdWaDKJPouNlkjhlsxT/HNkDJcLMKyHpsot4qC3kzJChkJZUwh9ALY9F\neoVVBZGv7cYiIn01/i9iZeKCHWsCldBWZqqwcp5CATUIr7eYD9q5ddbvy0ZV\nL1EdL9wt919rrxTO9CeOSt2kLm42aKF0z7Eho2koqVsPyNs5X+GrSOSHaZLE\nRs7TW7wGHBR5U7NojV71z+1pGE6JXDPWuvgzEJMiZ009zjzN0C+Fg0dOh6CA\nZTLhKHfMSCuhRLuOiX+VkL+LB3pL0qqVx7hT/fygtyHIxnfSRl3jz7nK8wXH\nYgUcVRK1A56pQ+z2nTENSfzdyreGagp8NsVP6Z+nKhqFX27EW8e0EmA02Xrg\noE5/gt8qrXlwDHbb63voLvT9TH0ZW6fhwl8yBYjY3m+g2nibLReGoBMm1boe\nDtSp\r\n=oUWn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.5631828e1.0","@material/theme":"12.0.0-canary.5631828e1.0","@material/animation":"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-indicator_12.0.0-canary.5631828e1.0_1618645586972_0.5334164292630967","host":"s3://npm-registry-packages"}},"12.0.0-canary.bd685395b.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.bd685395b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ffc9e17155eb8deb20ba1da1eeeb7255e8ce7132","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.bd685395b.0.tgz","fileCount":38,"integrity":"sha512-ouHgtRZCtbClVlU2qor3SXpwhebBu8rIcNtnzQsWvHmKdgWt/9dHKKSD0gnNuKgyl0JG8QtMEV6/kG3HVERyXQ==","signatures":[{"sig":"MEYCIQDfi6lE//hQOxe17P5q2ZDWcL7qiqJFzM83iCuQ2op8mQIhANEhNL8pLbL/h35HQOBY0oGR1Vinf0Gw9PP9466pD17S","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfc64CRA9TVsSAnZWagAAoq0QAJTVKE1cLHJRvJJbpoZk\nWqmu5vpIgex7HqlXWO6tnaftlftRBKhIQPmmGEI/vQy8+c15fEKD9sVtAh3V\n0mSQvJtGvaSmidwXicHwFxf4jvkAfWlRj3pMNuXhxtHAKC3byPe89vMqGXnz\nIhiBVbq6jpv9I73a5Msdqx2NqSf8CDCpKvLRk6HTGxMsw2+XKA/1rIoCSgx5\nVP3mk1gwR3sa4MdipZJySFHEbI/fBJeNBxpFp7ZjVhINVnXI3uBHsI7p7LtC\nTC95Rt8yjP/Oc5QLR45Zt5Ua+SevEVfEdBmzUTZh7kJm3967qHIzWqr/oCj4\n2iuJwRNhHhzC0ABmUKJ7Iulvi0BzUiRKeKx75YUnGGFKYngbqd9P2qUp3tme\nF9CBqosfmzx9UXexo93qhmJaccX2oH9LfG3oD76cIbp35WLRAh4lzf9B46HU\nDh5OyP3dF6ffJPl1La6p+PrvKi5/2JE5BgyXvA5z4nHFpngIZRYL38lSSUXX\nRefR4XpucTQdTlYtVFad2tDOt6+aR2pSWwwJkCros7sNbQaIb0jxLg2tWaJs\n4Mn6i0hmvAXbtVgHalehC42ftvWE1ir2R2YXbme0iZK3pwXyRfRcHsJyqZqp\n4Vp3zQd0HrV6OZvjzc+IKElP5jLbykMmwW54sfXpDI/aIaRrk3eQ8JAAHeLm\nTE1C\r\n=1SEd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.bd685395b.0","@material/theme":"12.0.0-canary.bd685395b.0","@material/animation":"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-indicator_12.0.0-canary.bd685395b.0_1618857655997_0.4180240051448876","host":"s3://npm-registry-packages"}},"12.0.0-canary.b52196498.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.b52196498.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"70819aa4ce4886decf36dc8eac98b538444d8291","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.b52196498.0.tgz","fileCount":38,"integrity":"sha512-kXcXzkRg88S+g/hABEW3en9adCd0XArexoBkRym45fK5ZA0i5lNdzTI1BUgdLldf6JGnG4ApjNKVtMTcra518A==","signatures":[{"sig":"MEQCIF6lJdS2J2u+3bdcGlauiSWaMoemOXDInfBiwsSSvKzAAiB0IAdcel+/5ggeTARWMMi4ZM3mS471k7E6Dmem4QeH5A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfeCoCRA9TVsSAnZWagAAQTMP/RbxPYQbMvFp9mheeixt\nssAWE7oxCKkuMJJCid15ICJtP0aMtF68vAeK3O2NWs0tuIC5y0p8wi1AW767\nhY7KmLRDGo1AoWXJ65ESNy22756r9B+RDflgjbJ0GNsKQJ+eLibT3+pNP3cS\neG8d+yJBA4IsEBH4ZKdaXefwAwxAk+ld+ga7fwNPGBrFruLUcx6mdL3MALCi\nt1BRNX6XJ38utO6vKjhn865iSk12KgI1ePy5wSB7DuUuKRN9epWWgkAvnoN4\n6KPvLuA8LIO0eJmjmNL6u6NjHehpKHIDo0DW0tNNoKtwu4qbwlsaCdETVrAW\n987agnyJ4azkLwPA4FrxqzdljWBJE/qVvw+hgYy4P3BFg4i6C2kAAeiKujV0\nFIktlNQ4BX7TuFjYmS15WyjTqDjs0fw5P8SzxRHeKTprdZ6HeGkDrggXwPgl\nHF8EK3/f0rOIvAaXej36RUPnmnCI+Dhjm43oQindjI6byHzzzgcN3+59Ijet\nfCghqqvphaNrezYXuZ/39Mt4L/P47xa0upWVAll0LthSByDM1kQHhAxTYhDK\nQEc2ZsSWZx+ssvuXKXCMemf8THu50/87gZHP674orLyg1zGaYmWJE/BYdHiZ\n1pONXDLdg6rBuDY9dzSGVuoBxtPbeeGWYMUPw99QPLm9kXkZJVzneQWxgIqH\nrWSm\r\n=+mWH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.b52196498.0","@material/theme":"12.0.0-canary.b52196498.0","@material/animation":"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-indicator_12.0.0-canary.b52196498.0_1618862248102_0.8133773972275886","host":"s3://npm-registry-packages"}},"12.0.0-canary.8ba3e298c.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.8ba3e298c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"9ce3943f6694f0e0a796a266a8975c85655c6c5d","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.8ba3e298c.0.tgz","fileCount":38,"integrity":"sha512-9LRaHIatcsDBLQpA93r/DhqB83/8FIOAjxmy0qwSKl5Fm3mfvCw6txvLcBqn80URL/TeiR8ImB3rMmA+EpQH9w==","signatures":[{"sig":"MEUCIQDttyzSREoMPGFETQKbJ1VSDAvT6S4b4PuWoGrZhrIrLQIgJhp6xn0cJqwybYlDLxSmYn1J11NnZIkuYXLzzMIlyts=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggDHHCRA9TVsSAnZWagAAzL0P/iF+GmRDAjtcnXorMFKw\neUQpkmDIUrcD+eBVfgBUTzpyqbXKZ0wvzmOFPQcK7S6SDsPEAzZjU0FP4G3w\n8nLR0VBfAy2p61JbxlR8zJLfDDQy9qsmsQV/lKQwBKHIxta0dyltO/bRGB1n\nuKXZjXVMzm9EthcPy2Nt13Sa1Zw793FfIH3gPYwmXHoea8oCzOXxb+aF5k/u\nad9hW5YYtxEnxyqVDZqbFkMQIOGAklJYZSLCCa1jvyXqlU9tk+8EG5HoGXHv\nPURbJSPOdrOe1TIGUZHoSVtKBYvVic3W1STkD0hvgYCN10L0CpN8I6AWp9B1\nnI3vPBH2Wdteb8eXCR/8Rk7PpqCpuacIFu8xs01eGmq2xH64ewTmSH7IEHxY\nxosDRu4hY+a8AV3i93UnG5tZGRla+bOeiI5ZCXKIAquX3pcvD416XgEgsl3F\ncYrwx+N/MmOv+m2eW7PDO3KVSgrk5w52Ng/AH1i4+1HXtTz6rYkYqraXsx1Q\n0wnwDVgrm924DPBzd3UmMWb4NUkLx/gXyk/w0Flp0LQ8Fv0eTnknNNI2Guu9\ncjgxlq3nyMMQUtwajk0oa8dFInh8CuN7WuPG29bIQsVD32wZLtmjkdWNwvv3\nxJgawu+cdNVwwSltk5jMYruli52mLHzvkS/88b+X2JSQ9/udpHSAEKTYdm/S\nExGB\r\n=nQsU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.8ba3e298c.0","@material/theme":"12.0.0-canary.8ba3e298c.0","@material/animation":"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-indicator_12.0.0-canary.8ba3e298c.0_1619014086760_0.36931912770404907","host":"s3://npm-registry-packages"}},"12.0.0-canary.c629eab71.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.c629eab71.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"788c370cc6bd4a9bb899333613e051830f390f9b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.c629eab71.0.tgz","fileCount":38,"integrity":"sha512-4FHGtksGKpQuFzqeNy4HeIDZWbIn6CYDZNcKhWZzK/QXgzTMQTyjz+NStgpbMpiuUVzfwieV3ergrWI9mJTSdQ==","signatures":[{"sig":"MEQCID6LwZFXE3LsDOdA4/lg0hVjVhwFaPpvMit5G/Dxq0poAiBQLvP9PhKrXYNh3mhN8A81/N+dYt2ezemImyVc2M0jLg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggIOACRA9TVsSAnZWagAAUXIP/2knyM8LsK/AwatQjWbx\n+LSewxPZB7yRZMawIq2uUgNWIio2fOlHc1QDz/RUXprkoqUsumq6wPzIGFlJ\nuQwyg8Mga9a6yGpgrBE7cV8cuUQ39YaC2vu3RKN9TXFdF8lpgFJ8UmJdwn0N\nh3ApR/Z/BD34bL/b3tl4Hcr/S6LQocEuPwVuMu0YeFEm9s55HNo1yI9rX5Ns\n1YRBzI5K9iu5JE0CWmw1QFjskGOrhmRrK5ptbFFYIaSYE7dZnLgG74l/p2Vu\n5jIvY1MlKG63buU8sjYITOpDBQcVWSKN1rpRbLUV5f0jmb5Kak1t69nF7O3M\nW0B1c51PnNrPs1GBUwzqKOysBlHuqmqCyJe2LXrw0z5UscySdSLxSwROG9sd\nj/5KqFsl8scjH7PWf+sqcHK7JL0y+UjnjYWXfyZhfjuWU02VYmNHj7f7RvPC\nBZ7cH39yJ3qYy+oizn+nRS2jOkY4H6BuCLZPa9cjpnbHZzo96QgrebdwD8Rf\nJnRrT5VRsaUSrXa5HOXcKozNisRywcLDECgwRIXr26VGHUPpnmwYxogb8Rmt\ncWp85tTV6w047YoNMoFM6Ao82gTZNdx6WftMt1DKD4dpt+zUa8I/hMy32H6n\np5ACtteOaE3w8X5jX9wa1aHgkwaRamGJ6/PcmMXP03tAWHxA0pSs5umokKSB\nTKvl\r\n=cDE+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.c629eab71.0","@material/theme":"12.0.0-canary.c629eab71.0","@material/animation":"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-indicator_12.0.0-canary.c629eab71.0_1619035008065_0.7485070515412309","host":"s3://npm-registry-packages"}},"12.0.0-canary.8ace3b810.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.8ace3b810.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"cc69849796fe5747a608ff925d7f6c2cc4e89f79","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.8ace3b810.0.tgz","fileCount":38,"integrity":"sha512-Sj6USJdfiWId1adMhLBXHG7D6uqpaslowr5K4odK5QB29PFhLJFZos8w46kMIfFLo49Q1R7E/QQ/m5S3FgbKjw==","signatures":[{"sig":"MEYCIQDxm7H9/PaK61Vu38nkh4lUqEf8v1AKCtfgB0CGg3Y53wIhAM0EuahsKTg+Xm/X6DcvB/MKaOUzRm1hbyHeOx1mcNA1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggI0HCRA9TVsSAnZWagAAOM0P/0cSRlhMjspCFsTxlINw\ncOgWdA2O7oTsYZ7DTLs5jxGYF6JAeMn8HifoSDTQUYd1X9jA7g5ptCFgh2+F\niZu38VJ+AuUU46cJNp1fx076lz4b/WQqk7DbWBkeC7osQD1zAtmqNpzFbtJ+\nMaFkmtmTSFQk5wUjFlgNEv7Y0foBeuC4I9nFi9GfsS+5Qk9or/ZvrPqU9Siz\nxjzxU6OlhxKpOYv030pLC4uY7wvji4f0eZA0brqsHUyNB678UVC0GCTmLRc1\n71x3zS+sCya2WPNQ2zdAlT1UhbH1KAA0IC0GWz+oSTU4egyPyMgAspL5ccr5\ntSjsVIbg/rTQmjM/B0+29JC1UhxDKWdESwAt2I0EesT1RQ7CPHIezFZnb7Mw\nVZAHpcIUlgP5ytlFZhADVZgf6nm4EbQGXBZg7VXuGCJqBYdaZd2QYUGfn033\n9aKKILPWLi43dzkpvzU6hPJrv8XAQhspqubYsPmXPngj+6xjN68OzUuqa1Ni\n1ExgSQBtk8CrxvBPpvW6GhQbI5Zhqo5NWEozCT6FyTJN18Yp2yAfnTmW2edL\n/gl/Oz3/xXsmtprykd60NwDH2jkWHpFBuZNj/w0P9hzxF3P5/ojxcK/W/3eu\nD5XIQUm4bTxGRm0+tWDOuaXQPrHtWG97xP5uqdD7bXq8qp2W2kRx2Zju76pn\n22uV\r\n=CI64\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.8ace3b810.0","@material/theme":"12.0.0-canary.8ace3b810.0","@material/animation":"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-indicator_12.0.0-canary.8ace3b810.0_1619037447075_0.7333686015289456","host":"s3://npm-registry-packages"}},"12.0.0-canary.70beaf42d.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.70beaf42d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e5642be49243b70096406f39bfb30357607c190a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.70beaf42d.0.tgz","fileCount":38,"integrity":"sha512-Qb5FUiRhNWvsctigQCkoywkdUQ6SjAc3CQ/Ne8CuZzCcI5kmhd6E6nwDtF3qK/AebzXkdt/RRzHfG1EATZa4VQ==","signatures":[{"sig":"MEQCIGLvLObRchsXQ9yZPXpNAw7oltTJrs6jeWgJZLmsq6iMAiB++euoq12h7gNcAkpxPkjzo2ViTo5doV3UYnmrEuDPMw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggI/BCRA9TVsSAnZWagAAkK0P/11vSx04A7yVN8KIhtVS\nP/dKsxp7ngBinKqYLMyXISkNmwGtM3RYeJrZWMN8J5ipifrNSTSEgbeBm4Ya\n7R7I2kXYPQwj2oxBeSx/asvY2EiCTqsm+P3A+iVj9r7e1Hlj3/ABuOpEhRg6\nw/kh2f8pisv8S3r/QQQ31jL1gougs/Rwds/zpla+xDdOvVsi3mDpNSh9RTF+\nnD9v12Ex1hAu4s9vDphDjhFRodgZ6cWTamLO0QkBBDr7kO7DCTb451B1V3f6\nFF+l7+eJlreTf8ojVH65cqWvEEP32ucxfNrcdFYmZ6Wy8UHI+vVB3nlbY4gQ\nxYQWOtyQzkPYJ8emLf0Y6wk5yf4O0U4uFMDPJmGu5yHDRaeTFk0eqm6YC054\nkcNegKhwmUNJSU7jlK00KQyt5u/DpwLDCvwWqbYyJ8FdDy7eIfz5bb66PDyv\np9JheKTJUy7n62qPrV7Kz2DR28DxK4yoMsz0iAzt/eu74/CnRUG/7Mo/l9OW\nvWLtEmix70m343VTbbIJsaUruouC8jBFHo2kqE3wJd8ZjTjvAt4HhIFY1sZy\ndRy5RMRLokNsQUNOP3jRXwh9kHCvSB7kyKB+kHQ2dby9k1KO4NAcmAjTMQNP\nJHXZTxz7Ez8ILvNaREs5TzuoNx6WObHXY03rQDsJFOXMfmaq4O5MKFpacfX3\nxgt6\r\n=T1Ji\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.70beaf42d.0","@material/theme":"12.0.0-canary.70beaf42d.0","@material/animation":"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-indicator_12.0.0-canary.70beaf42d.0_1619038144505_0.5864944109697348","host":"s3://npm-registry-packages"}},"12.0.0-canary.cad489689.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.cad489689.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ec72e04f8e30621efceefbc3bd6c982068a2509f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.cad489689.0.tgz","fileCount":38,"integrity":"sha512-XILNnMHqonFKr3y7HpfPtJ9dlO7oPRfvLlw35X8xh63YxL7891Yc3wbGnPujP0vjtdVVR1jL5kj5lIMkeHawMA==","signatures":[{"sig":"MEYCIQCIlEB8CDtIIb8JTq074DrE/n9pJZTePoIm/o1i0Vl4RwIhAPcW7v/hn8Y5BJpV/ZbsO8yCs3Q4e1wZodP/llIWsZxs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggakCCRA9TVsSAnZWagAAgboP/0iBlMNmOKaxEmHSHYTM\nfgR2osCmKvk/tntATtRrKQf2TCTkZs1gtPA7YQw9MhxqFUW6KMJ6b01ncyCN\nJ+wt6muyaZRVktTDb9kbq5Qd/egcbdQiKlE43IVQfoiqLzul4XctA2sH7WiI\nTLRNPnTrM8xj/EB7o+J5/1aR3bcWDT+bX2tksjy6NCNa8Q2ZoKstvO8q0JrI\nerfE7d1dsj7vs4yP8lDq82pPlxH7QNCcGZmOAMpA9RdqGEpUqoqOrErSl6u7\n/Zq5F/pKdeYSY572Ss0UDW1iBgdDXkwiYpz+93uC6H6hBERJzAVJa8hD9J92\nm5dLzXfoRhTuASk/6hT8Bqq2/EP6oRXO0XWIRLrZObWdnJPOegoK4vsj9gHl\nSXr+qCmK+b9DJRwmOO7WRVwj+6clC2VP6lkKv68QdLLWEgKL8TkBX5SE1I2s\nwvNkkHgXsRrNW92huTL0X2Hv7m8Q6G9XixS7bv0486RXUh28lJhVn6ibI4Hu\noaKeLviFeamoKKrEqLH7xeACQghY5D9FDGH94k/UQbAtpZWWtsEsmRz3TS9T\n5L/kfT56xEFdzF1yRLevhJsGfKHgQ5pgDm9sGarlzorIOVCR68Qa+EDnCiEi\n1Q45YwatF3yMwol89wi0uCpxd1/SP/tYoY+EqtGbavyr1KONEzVU8+do5K0A\nGs3l\r\n=eeYT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.cad489689.0","@material/theme":"12.0.0-canary.cad489689.0","@material/animation":"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-indicator_12.0.0-canary.cad489689.0_1619110145945_0.2942516130219526","host":"s3://npm-registry-packages"}},"12.0.0-canary.d928692b5.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.d928692b5.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"76abfaa1a8d2229bf551e3e451b5ebc975e91bfd","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.d928692b5.0.tgz","fileCount":38,"integrity":"sha512-yFyRc0X/YjTGn5GXLlUAgASEb16jB6Vh/AVg58NdjMvz0sWMnTIC5tgIX2GcURGjLpoptJpIaDMWGuTTz3APhA==","signatures":[{"sig":"MEQCIBZlfSq9wXQdpBQAuaV6uFliz3CiSG0zlJ00JJA6u/7KAiAdZ8qyFVCq2GFclO2MnTuwgJg37wrwG000wNZtFt9cpA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggwUJCRA9TVsSAnZWagAA+00P/RN2QYiQpFMn4xcN3hIT\nvWdl2kArNqaIahIORf4Fwlv9T2945iuEAZXdpUkJU3hAgBQoPjx8gwNTbtTb\n4iopZuC9dCF2RJhu30DUpBwhM/squmjHArb2GNjG3oz63oyYrdLpywjONf53\nH1Z+qYKVCGw5Vrxfr12xxXDMIVYl+j7nF/zbvGdNhbUjXkIcnquElGkocHkA\nurPo849wJ4cvBN8wvWUSN7hIORZ4578P4eWN+RD1TIpgpwahVe4kOV1zhL+3\nzXs6r+EveMLAXqUiQGCAtSCNmuNFVoxqRAUWmGn/9PCMHC+We86qALzSD8Ah\nOYUTucBBF9fbnmkJKSkEHdTE4/pf7ZmfenwRLskXKq/VR2HaYx840cPEaCI7\nTbnFu28yZq+DePmO/gw+00YjJhyz5ZrBpVd+WRlADruOh18C1osMNQJtF80i\nAvXWjVYQKLYrQAGRs1le1dnY8k6CrgH6zH0nqprrcwiggV+XayuriUAQGkzB\nAJPXTYxeEKci03HngK/08WmFT0Z5DOYDRtsxSpq7g+3FEd4YMnEBek/60nS8\nAl/HRMAjNICqyuW7jjBGaI2zVcjqv54h6DjZ18Ee7W+VP1E7Qv3t9LZvQxtV\nPHLVUJ2AZdd9Cu84NwFGXjXaUMDToDefD1PuhF+CEiz/O+bz90eWFW+waQ9W\nqjID\r\n=Mzcy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.d928692b5.0","@material/theme":"12.0.0-canary.d928692b5.0","@material/animation":"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-indicator_12.0.0-canary.d928692b5.0_1619199241471_0.38523429550668364","host":"s3://npm-registry-packages"}},"12.0.0-canary.8f68de8f3.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.8f68de8f3.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"1a268ad36128075f183392ca2964a111e52722b7","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.8f68de8f3.0.tgz","fileCount":38,"integrity":"sha512-51bCrs2zAdAaPMAYc62jddMpfYbm8EpgcaGF+DE4TYizz9YPK8hj0tn6jo4lKxIGydGvxGvXRxmo4S0XBlZIKg==","signatures":[{"sig":"MEQCID1SIAIRiusN80NLJhdwvbtl2FAZyrGEMQ4fCYIG/7tqAiAz/+Mgoe2VVMM08zfm4/4uGAMZlnp4xSMSLGVk8I3tSw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggw4dCRA9TVsSAnZWagAA61sP/1ytp8GA4gJ9Y1ufL0kC\nSqKyXleY25+Z3r8nfPUphx1CNy84gLKJ/2/GEcxSH5XPCmx8pEPs6z8Lhp9Y\nHmWIcOHl/mv8uHonvF4RZTOyN4vJwzxT/JYe+k138O8kJGKs93wI0qHELRcw\nqjR6eG4zq8ZRckwoeQOlE0kUCAF9GQghO4SOoN+TnPxzjHs6Qu3votcBKSAo\nxmCU8jltRnSQ2R2LosQf7U0PCSX4JvPyZDqyivdzuZY1HraAVzWYo/Aja1df\nTJ4UW9h310k6UDnuHYnBA232r5COUVo0+CjNaW8NaJE9JHyYjonQhAXo2A5l\nm3xQyPVvhGgUx1bq0XeZeaCMcuq9FhkHFFMo26dmC2OD8VDzrMdjiCOJEeP5\neRfb56KvcV1l1uKtpZgdHpbAY2wbSIfCxpYBhvlCc8X8D30vsxGuSIAkH+b4\n6bJ2i7nvt5Uh2o2YK46LumVV7m3cb97ZIkE6ZflJ6T48Y4MZr8Mdv/iRXsJJ\no/oGV0M5606LfIfeKFBVTXbcjTg98JaHrR5gKcBU+BmNXW1FLKkCMpQwbL3H\n6M8NK19y8fqeEkA9P76VJK1dO0wF8yf1G8KDPGm1kRntrHunlQ96TdmYO021\nywZ3UFRZnvIQYbaqwGGOtGjcxtGhd3fWPOM75XFXM5fyXKsB+iizflC/i7LT\nFlOJ\r\n=h6ad\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.8f68de8f3.0","@material/theme":"12.0.0-canary.8f68de8f3.0","@material/animation":"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-indicator_12.0.0-canary.8f68de8f3.0_1619201565556_0.47453133146900406","host":"s3://npm-registry-packages"}},"12.0.0-canary.05753cf77.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.05753cf77.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"d8328a0e811c17fe83b729db153b46adabea1e10","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.05753cf77.0.tgz","fileCount":38,"integrity":"sha512-0zyQPsrrNzfvQp3hvbSUCeE6LE746CYnyhY0M0bkpTEWTej1NICITz77zJMFHwPV7kYzLIo5CF2jbPDibRjBtg==","signatures":[{"sig":"MEUCIQCfxCxKiCxtOVdyc3Ti1s6DOG8ZOo/+VF02gz2nx1CIjwIgDqSn7kIX+Hs66AkSBS6IBaQR/ok5/j80XBh/eRaZ5eQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgg1t2CRA9TVsSAnZWagAA3JMP/io/+NhPcLJSrqtr4iwN\nNdBBOmxWPb74S+FR+zpM020itiPDoUxxRM00mALAC4UV4Ok7GOqhTzN49Hb3\nLD4WzxHnw8vZo5GbDXIugSYa0vYVHkhvTxdtLnhg0SwW1aeokPPDiBrrYWgb\nJMowUXHx56HAvlc1ztk0bWBztge5WT3mKwZq+uxbxoYvyDo07DVNHn6f3roz\nCq/e3TAIZo8i4db9A6UMHCBxv6dnUrKdlzV0c8mjgP21MjNVyMAe/2gr/Kxk\nZL/8WzLndIhIhUFgXjN2d/15tXqidCW+URmxuJhU5UjLCFajkgSCr+Sr7wGZ\nr9TmmBa8CQLHufoJOvOFdTnD9M8I5Xa0P5UDOFIS3eEk1cXpfpD9nZ6HErYh\nLKI3sPMSf34gTn30qXHbKwWbPQpLiqJnd7Jn6F4PscuogJ4RO3kYnSYIpZxV\nWQYq3r1626p3KE0qrXjqKPnKvLHCDi7ejXBRedeEcbTkTKuITwfCu90gLdEO\n9eaxcSxsLQZdHHWW2eLaMbrSICmOs4pN+driWodzvME1UiOLQYXGFjXzralX\naz2sMJlFii7PqFJSSeEo+7r4RDBgR/7j2bXWthv+iQKSEdT1YYmnIUR8++RC\ngWNeXbDWvVQVpey0UsKSOFOA4gw0WAabjWJZfNGJAkNzWfDupM49KfkamNnD\n3zFe\r\n=0l0I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.05753cf77.0","@material/theme":"12.0.0-canary.05753cf77.0","@material/animation":"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-indicator_12.0.0-canary.05753cf77.0_1619221365824_0.6443607332337649","host":"s3://npm-registry-packages"}},"12.0.0-canary.ef43e6d96.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.ef43e6d96.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"6a84a05e4fc23f7c522fc641a9bcfd4ece6337c8","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.ef43e6d96.0.tgz","fileCount":38,"integrity":"sha512-fdGEmN/uqrkEDu506nDbCTp0FHuWFgAA8ozN1gbDxJLDeRbenyVC7sLuZxkWJeS90AJK17I3sGAFNQEDBuwyYA==","signatures":[{"sig":"MEQCIBTXM2i8T0MFomqLYAZhzBU/7ClmmaI3Mutj/mUKace0AiBmBoM4yLJXvGphzcfTP3kuGDVScM1BzUqYkmBFUvxDWA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgg1zwCRA9TVsSAnZWagAAbYcP/3/6im+1zL2fjvvboWjv\nF7eUY64Jj1LmOO+fxfGN8oGH7k6wpz+xNeRPplnsstekgl5L32WFJ1nXV010\noDYJ9tx3SlFtCZ4cXUVJgZ36kCTbFWjk43RMdbNUtCCFBxIhUOpvlrHs6u4T\ngQglZqfe69PduTW//eWkAK1Mli8bsLaVsgj6jx/vxaV24IshWtYKJeVHzHa0\ncURwYRLi6zkCJ2Ij39G17kZXksR2gVBE3uKapbPj78YjR3XG1lC5gn6/R/yf\nQxykj41/PCY3FvlBhMlC2y55ZX9RRh6FYoEKfGvUu9zQf1Ux5omStUi4s/VG\nr0lEhBs1LxvQADQwJmk2a8TWf/1XRuEV1VtVX20cOdLZAJ5t74bJBr/xCFLu\nfGclBwR5aTtUGv072ymCERluY3CSQmg3U/30MYfnxnPL/xMcKCjgLMo69bG/\nv0MyzjfnjRQWSPuNzIaRRaftS3r13NTDCHW1hcUM5xe2J1ixIcL4YSTE5CBf\nGHABvNdc/lOsTK3o+Vw3/sTWXDpSeCzwzY7aDYARtBvXw1aeb5rq4wWD9S8t\nnvEquOQq+u69JYvnQ5tH4GbzdNNWmsII1i4WTslaYif5nJi0eqETRdypwudl\noE0he6TZWmK59m9KYr2EjaMSGVsspQlCmglUmzYmtptUZa+ATAxx2+GlImPn\nKbGh\r\n=I1tb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.ef43e6d96.0","@material/theme":"12.0.0-canary.ef43e6d96.0","@material/animation":"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-indicator_12.0.0-canary.ef43e6d96.0_1619221743628_0.7980598329208826","host":"s3://npm-registry-packages"}},"12.0.0-canary.197f64fa2.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.197f64fa2.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c598d39037ced3a54213bb8fe193d23e09977f29","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.197f64fa2.0.tgz","fileCount":38,"integrity":"sha512-iCH/TQIR6zyQo21BgGSh4CnW+5SNh++mLy3c6UbpRk77KAcGlEn419JwIEWbXSxNs7YTtSqg5AFDgI3JH9bvog==","signatures":[{"sig":"MEQCIHRiReVnjhywb2Sppar3UAgRLOKyfrAp//Rl0yXlRIQnAiAVG5/rIkoU/wk998z/kYoP4muC8zMNtkllsLU9pjFOLw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghvO8CRA9TVsSAnZWagAAm9wP/0y5N60b4sK4IIARDLZF\nyWN4RTbRO0RsOj6dxTf6uUwJiumchr47zEyYZpQ+55it8/6Z7EruzezQvYDz\nCjSXMAxFIcJDPKO7pXZTmrFaQEtdEFo9CmddbJ3dLUqomsltv9kVfqNmxZzq\nyKF1wHV8+MmUiEusKkgA6QPM/Wjx9L0ETBvia5S4Okj390XzNJsH2Dutjo+l\nFa78se9Yuadxtkc5oNFCv+eyzBxsE650st/DF4o5eSVc9bmETW5uIjH8sTZ4\n5Oa76xWWzOfS88DLMEcs3W9hRURVImWYlmoTmVl5vE6yYP0ghycb7eMI1mPI\ndtLrRwji6X+/A0hkyDw8TBFlnfrjjRsDK0NFQ/qeFH/iLZvTSLYmeP/R0lI+\nQAhcaNHWq6MZAyiu+q95X/KJe7zPFAGCvhCOtYKFHdONugP9beE3+holkPep\n5YKxa/Hv3jBTi+9hT8ZBHD/qCL+AlGWDsihHeSiw5t5JWJzFp17JJxL5EcQQ\ngthm0Etv35XkQP6445zK6WHEHj07RrGpBdFiytbIAs7PkPviehrP2ewakWTm\n2jmmdvp4P8bB5mTIblhDYHI9/zAllbQJD1vAEw5OZuahGEVvlBESsS6TW6dF\nhkFjieuG6sOctgM64DKBeARr0cU08Afzk7viGdHUZ2FSOTbgB54eGYE9ZlaR\ngle6\r\n=Dqm+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.197f64fa2.0","@material/theme":"12.0.0-canary.197f64fa2.0","@material/animation":"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-indicator_12.0.0-canary.197f64fa2.0_1619456956125_0.6373476972272252","host":"s3://npm-registry-packages"}},"12.0.0-canary.55ad2d7d8.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.55ad2d7d8.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"9e1ba17f1a6041886c84f1c8bd8e19ab83f0d71d","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.55ad2d7d8.0.tgz","fileCount":38,"integrity":"sha512-wKLkTHz2ZF+tRhdZncuG1j+A3i6zgvjdHwSkZlyr2nEBP9rqhwHOMDkwmTER2H+c2bpG4F+XYYIZN9v4AqMNWg==","signatures":[{"sig":"MEUCIEZrKC1UbMvjQqpv/qK7hya8+lYZx2HJ6p4lr4kake4QAiEA5UFwKgeTsAfdd8SnJ6c7P7NkosrbCtDKxj0GQxYurvI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh2afCRA9TVsSAnZWagAApXQQAJewEibtQF6VxDBnPn+7\noCGXUenUIM1mgt6NY9qtH8HPDM4JvccDz2zwDmjKOaRbGPZXBQmy69S8Tpzw\ntp+qG2/gAIbOmxGmjNJvW4AmsA6KAOSZc3lB+k9cnHm6eLrUpPQwuDOsvwrW\nsqQSB4pWQCdaR3Umuh/1qOw1ZBVTsl9YG7+aee9xC+19KRI96kjGkTyNg7aX\n5Xz2Qib0InKR4WvSD2WpTdT5asTefQlBo/2PHJmDdaoZtap7mHoeCZpC5EJJ\nTT1cnLhcsd81kUDHxdlym5WTz7wLGCL+1rxReRjRmemLZJvVBR5ttQe3bTY9\ny0C/RuxYTOaGyDudGI4e2KD77CPDjXz+3OLJPa8HwAY1m0SWyUnmzabkuNCy\n0CsZ9vIbxBFl9YvGidPkSJ2Z1pIaUE/2mS8MvhI83c1kADcIMQCFFzg34cww\nK/D+CqWwyjuuNRsYy+O9zl9ug1CaUycKGmEfXzILOILcw/Pp830er8mm0Ne+\nooftkZRZhxPRrPqybjon6hLn83RHZ4NlO800wIiAqJPBn1nopQZv3dBZmpQ/\nKp+KTdlCJmLSr53AU950GBPydU4uxOFbrmCCOcaw94DgSEYKlntII531u4tG\nmyQjToN1hNtaLYYPAm9hrQyqMNAly7/aCv8/9WyORMCCtBZDCsY0Wd6ZK17t\nnlJ0\r\n=lk4w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.55ad2d7d8.0","@material/theme":"12.0.0-canary.55ad2d7d8.0","@material/animation":"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-indicator_12.0.0-canary.55ad2d7d8.0_1619486367173_0.2418135259283869","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec4ac5234.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.ec4ac5234.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"2b113e456a8fbe6b04de71ecc9d3acd58c171e0a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.ec4ac5234.0.tgz","fileCount":38,"integrity":"sha512-wyf4Y3en37BDtiTMJ9xe1W005zpEU9LNs9dCEAfRMWLEcQ6YlVyQaRcC118fGcMgN/h6Oo0s475cSWOOXRDJQA==","signatures":[{"sig":"MEQCIGrEHOtGcgGG0CZs1qnO1nrSNqIIH7qeEJUEijjDIeaNAiBaKE1PV+cGv42aCR0BW/N9s6eWJQ7ykVFHZSTlfRnp7g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh8QVCRA9TVsSAnZWagAAkwoP/30VqWIWlyxEUHyXZ2La\nET8Cp1saL7SC+2Ble87HIsV3Wgzv1IJr+et3lfFqECjNGhojdCAeNNdOuZsC\nmTSJLryBzw/yJFAh0tsBKYes5NLlFi46qezEuAiu9HqGRPgd73/YwxK/9+IF\n5csZQDropMcEOQp0ALpsL33kO7CNrkXxLxOKS2mQ4R4hDw3X8eEOw+ka1oiK\nKvL7pJTIeSDF+WABwPMHEjccuBsqcSOcYv+HutXd6qbHkes4U126tJiPT15F\nRedR47tDtOM6MRNRZFrNCVpkk46XLmYCv2k0tNEJglpH00CvkjnUUz1u6DvO\nnjZY1PzZJovk4+4p3k2B7JSgbGDTdLVKFMwZPz8lENR1/i9AzXdwz0lnlpzD\nN2ySTL9ZtSFSJl1e5KKHcDD0pLII5q4g6I3CG7jrbfMW55vvXM7Q2SY3NHro\n4BowCE4YqEjxed50LWFcny8SOB0E4gQetNHA4Oo5X7fMhQrRySzgPMTOG9Q7\nrvj2+aERJxU8KNzhZmL467PLyiH+nYi2xfULba3phIR3MYc17ixk/80dTMTv\nv6sp4I4d4oCMie7PUEF013CoKfElf7A7/CVWDhqELlAQ1penbXz4v6Hz32KU\ngWZosTp25ikDS3SQ2fZVyXvjf1e6P3yddVacOi4JiTJiDcftucHiZH8rs5Ng\ncWL+\r\n=xZMI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.ec4ac5234.0","@material/theme":"12.0.0-canary.ec4ac5234.0","@material/animation":"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-indicator_12.0.0-canary.ec4ac5234.0_1619510292777_0.9494983259226168","host":"s3://npm-registry-packages"}},"12.0.0-canary.b0579acdb.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.b0579acdb.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"1bf4630ecc98d2c0ff35397eab5f5d47b0c3e9da","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.b0579acdb.0.tgz","fileCount":38,"integrity":"sha512-OnvzwErKqB8XJQGqRy4dVOJSwOTgOL2LlB+SyGAbHUMzHJJqp/r+M2FkgLy7CyTgAzQOoymgvYjUU129C4wBVQ==","signatures":[{"sig":"MEUCIQCNUfWuv3pBiKfk4Y3qbWw3zuzNSkjUN59OOhDHtzfnXQIgK6YdEY8H6DGwnOAw0CeP05S3Kb/oJhp2uAoTTU+5Ij0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh8zpCRA9TVsSAnZWagAAgsAQAI0Bh2UUHZEU4Z26gyQm\nBk5zTTtzgWJs8CoJerI0mWP3YF8Bygn8b3zVYzY2CVC9vc6hp/nmwb7OUuGi\nJn56hWxfLab4aOdJr4UeOR4p3OgkprxmSeo6onHmKGJgJIAghDIMY5fyDHhT\nGjK4imPizpF0mUE2+sBrx5Z1TiA6igAgp4mnsLV8BE3/Epdej+aFfWg8vQik\n1ThE4DHRKhAy+s7pC/A7+0p3YxtmghDP/2us4Nzju1TXPZ2j69IGMwbr0tHi\nHbMo1zXOuD8RtHmMGhMjliE0EFHRBtbV0YvHvQor3mMACR2CawaikUKENmtw\nXP5l6KUDMYJZybCY3sTwGndXdjQBk84mIyCfaumUaKUQd6D3ZNnNUfmwl9nD\nJJ2kI+YxM6FZvsYtjcFEY8fw+oFHhwtfDleUg2wTRVXO4FBh2plTawwkEZCf\n5bYvsHhi/ZeONMxslfjS4MeLPJfUyOUfvLfXVS64CcAw6z69KHU/hndgRkDm\nEf77ysPIIusSkgsBT/BBIdzLpMiv1wlYMht77PijhyqGsufu1sEfn1xDPkAc\n65qWxgYDrjmoYjzXUUsd26ZBDjEoeZWDAWSkzabFVo52E2H/2yQ+cdEm8V6w\nEXww8VxqyIcHDM5aKfJg93tR5au2etaF+pYcjM7cZ4Mk3xhWtxY4riWrV9FN\nm8bG\r\n=qset\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.b0579acdb.0","@material/theme":"12.0.0-canary.b0579acdb.0","@material/animation":"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-indicator_12.0.0-canary.b0579acdb.0_1619512553484_0.3526228113967318","host":"s3://npm-registry-packages"}},"12.0.0-canary.81e2d4ff3.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.81e2d4ff3.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"6c62fa677c5d3029733551a2134a30bf5f6d5602","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.81e2d4ff3.0.tgz","fileCount":38,"integrity":"sha512-/YqZ7UgNDfYmxkaMIjZS2ykVu7HN+DD8GDLwj08ckiTMG9znZchvAWVxfvTakom5AO/PpotLmOEcF+dD4lK1ug==","signatures":[{"sig":"MEUCIQC6ARBYdZtPFciZlNgwHtvojHfsiE7PXnoi5BKpPQxT5wIgDu56d8PbOwr3J8tg1b/1jPtjlFkUMe9Raca9CiMCH8k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiHqwCRA9TVsSAnZWagAAmmsP/RisFHzm2lrXQTgfrWwL\n3Fw9e22K4nw+9/C6G0yj75+HfS72nQE1kGxy5Rc7xK8YmrDsmPMLHAkd3YPS\nP23VZe+Dw8qNpdgvscJMfIONGfXDeKcdaI/vmJfpFMXFR9toEEsiilACFYmY\nSWi62wjhtRCTgSYMJwLaiMX23gsQmgqPzZ1RH2Yy/NVL81pqPAPsAcR+mZ+0\nkiaCw/C4QXOeadQ5InlTjT6BPI6q1QvxlDmFAjTOs/PYgUx4y3Ok611SMYPt\n6ZqOQnJfUaO4mT8XIDQPx3xq8RnWMlaCTM+PSR4hhMHH+QWOmT0RwZvBWKLq\neIyCVisZFmuyfUqmk+TVl/WKtMF5QDBXAXOFs2UKJQZ+feVmlkWe/SFCq1fh\ntmCg5nGxAcrow3UDPZYPYexrmbZzGeq+gUHQ3ruUWo4Fd6q+tycAQtX93r0f\n0mRUFQT6hibUtla9Eg31T/4TALpKaPS7h5Enfqgs+K4zyhFPXHf3qNbEYDrG\n1dl0IapDjkGFAa5AC7j5kufHBFfBEsGeqbthsjjoOyuKIs1vI6LO34d3ITNR\nCh6Vhd39po0/VXQnzh1vI5cwK/8mF4ygZPUOvtdmoBtooIWZZK2U/Ee8oS59\nBlBZpY4G05bR2xg7bVl/2AutbIAbHtzLFXWQKELlXJuHspV9D/kIzkEb30hp\nXGUa\r\n=/u/2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.81e2d4ff3.0","@material/theme":"12.0.0-canary.81e2d4ff3.0","@material/animation":"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-indicator_12.0.0-canary.81e2d4ff3.0_1619557039799_0.5729799488135301","host":"s3://npm-registry-packages"}},"12.0.0-canary.c8edee52c.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.c8edee52c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"516b97c57ec79b8b6036ffed39fa5fdc2e594903","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.c8edee52c.0.tgz","fileCount":38,"integrity":"sha512-rd87vt3LZQDlj1ctL+VZbT79lI0beAgGRdRoHqM6MCMhg27QeMRfoPE5r3Jc5YQbYWBWcGVbEA/Na35Er9/dYw==","signatures":[{"sig":"MEUCIQCQXRA2z9OQ/0NwxMGalzhY9WGIlHYJbpcQ/NrzoIgB4gIgYm0gI3HXtORHdQk7Jc3dGC/E/PSDEY54P6FaMQtoMug=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiIYFCRA9TVsSAnZWagAA3JUP+wePn4IL+7sCnjS03fSh\n35M0gj+e7j/Qra/1Y7l4UZeeqLGWaPKXCwy9JrT/nnkOjv4E+UEdq4LuKPRV\nb5gOxKpKkUR9a5UPR34MYlp2/KVyhicg0VnC74rPBeNBifkmzygwobrFNjOX\nteqKmGvs0mDEQePj0bZE3Q7Fk3v+Tn1ShpSiQZOqPPVa2Lv0pA/+j/JdtEkj\nHjAbxMf+7nocixBl6VoGHUgI7NSzKjWPsPaU7lY0AWvwaFwAyJnTD4IyIQF0\nEsWK2/Vyv8LpLvlgvIXAaC/5eO24bAqE/Q7b2enC0c1bUDhi4oHteVdNqeO9\ne7WGYOiBEm+NYXbRCf5F5vlsWpM8DVKyrHqQsbF7tSoKL8c0XRImLBfiTOBL\nfVM1KtfPp2fr6Lf4zOYWt7z9lt7MOcVhac4yvhdzP9ZDqUROFgC3DOWfB4Pd\n5RePUABciJJ7KLiCyo4mBd6RsdnekI3tsRn0Ns6YhBhD1zrvLiT05Chvi6gS\nXOLoZwNOqGmffET20BtBkn/2Fxup6wY7ryEBSyQG8plrOchSxeaOjTwa5Pjd\nS6yvLrdsFG62PsEpKddefuZhV8uzDFb9ktkqmb5MDcXh43BeldXFKGKzIYL9\nY8lk+56MmyqMkZVWW6OIgGyHbloZeSVxzWC15wcR68A5cdxI11Ypp7gR7tDS\nU9qB\r\n=tz6z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.c8edee52c.0","@material/theme":"12.0.0-canary.c8edee52c.0","@material/animation":"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-indicator_12.0.0-canary.c8edee52c.0_1619559940893_0.5266162282809814","host":"s3://npm-registry-packages"}},"12.0.0-canary.f5b6110d6.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.f5b6110d6.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c3438a51f0f11337df3043f20e90ef64e59bb5d0","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.f5b6110d6.0.tgz","fileCount":38,"integrity":"sha512-94vINtr9K2A9hW1/dLxqfrcXTy203Cys6Tg5NF7vvAynKBMjltvGE0IWJ93muI+cJeu89bB1/d8Ru+ePZAcwbA==","signatures":[{"sig":"MEQCIDih0l4ZKP9Vx0RHPWlsHMsg78NRyZ2NmLshA/iGlFVsAiBBpe09Q1VAOdnIBvG67/0XSiITDki+n2ipG0w8J1kQ5A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiIsKCRA9TVsSAnZWagAAwH0P/RMIQjHxGVQfyh220wQe\nlzgkgnJSuyqUrczw5QWJCDKn/KxV0utXrRFZlkza7BqM2QRQgwDWFPDFQ6XP\niBpeqxCDaEKnpQZMWEQOaghHzzxUm9Cr0ruebdGYQgFC0wT6dsO7vpZ6P7VN\nD3n2QDhQ5eXEr4XaGTNortXGuoAvBTDv8wKSix7Qc10PVB17t/rTU4joA9Uw\ndELGqZj4gWF5AK0sTG536m9nwQWKMDAXF+WmimyUr4mgEKDPCR2HkYKa9q1E\nlD12X5wVdE4g0FAgbDfvgYKoaX9LwejEgulu6UbbMPbWVj2NQ8a7lmJu3Gbg\nC13VWYBlXH/gi1cPJMAYrtJ+g0Q5bWREG4sGKBkIJAGErTwe+k3OsBOsXl2D\nzOQ5Mqbp7v8rcnXyBlpgF1nPVPSJP4eyGZXLUX3FSb3v6JXON0GX3sRyG0oF\nqtG/1HvTyxHglA7CgxPHLbzD+ap6faiLiCmKNfiwo1K2Joxe6XH6FqceXuow\nL4AGqmxzlXIamHkWP0QXm313v06/zk2qq8a3n8q94VuwOTGr5wCkvqDmmbzT\nOh24Gr9CVD+0nJxLadPrqMCIvC2CH8wBCHmE6HNISnZQa59vOCNYV9bHc8Lh\n1QD+g3n8tbjzBlqbnMpuJE3UVryeKeyZ7B6X2T8DLbVsCEDqcq0WCsiJeWzF\nAD2m\r\n=hd1l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.f5b6110d6.0","@material/theme":"12.0.0-canary.f5b6110d6.0","@material/animation":"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-indicator_12.0.0-canary.f5b6110d6.0_1619561226462_0.48061480357668196","host":"s3://npm-registry-packages"}},"12.0.0-canary.cee9b9e22.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.cee9b9e22.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"195fd81aa89e4ca42cf0bb3e62d27e79f122570f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.cee9b9e22.0.tgz","fileCount":38,"integrity":"sha512-WkeLPOA2r+VV7zkc98YLWAalpi90vDzzAB5ntauURRxCpqMshN2tdJ1PxVoWKBsAwJMVogOVl7jUG7aV5kBIrw==","signatures":[{"sig":"MEQCIEYucMfSbBKPW+4GR9qt5O/J5D8Q3MUXMnxvXrhB38x3AiBmWaQSkw2inRqkcaxortrUKeMHcqLIX1Ez+YcrCZBnhQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiKhrCRA9TVsSAnZWagAA+n8P/3jFetik0mrsqoWrFbpb\nD/Xw6qdB+NdMLQmbyxfPAY9jHB/2uSg515EK8E64DXpk4EhhhKBaLL2uBgB2\ny6QPpQVbxEj/ol6+eIov0c7keO5cq9cE0B+xD0eC34zx8Jyb3Ffhi9UR7GB7\nYLU/kYiJYdzit/CSOKioqVUNHDDatm99ABDMkOPRK4v/Ony0p5At/W6Kc6RY\naN38yfx83w8NvqvmGsXlgjtr9uSxqZ0EnJUQhjmyhGTFAGHtvTcO+I7oPjav\nVk/b91FrmDF0UiGkAuruWD/UlTvDhE9Pb5yrpnIifrme0rZnfyuMzL+wFo4F\nu79REGI01UvqN2eUKBuNohowQp9lBYDJ0wyxd5Rr+ZT0eNk4xKNRxK2/ydNm\nTpDsqMaN1MX/+jMBq+arsZyNVT7ipsmOz7qCFkx9F/jBd8MqjgogfAzkqI4x\nnV8HZzfWdkCcIdSCd2WCnbh4enW8Di+Pj5ixqlS+oAWxBU52s8Xb/iYckDHL\nyWkcWYnNrGK4e87B/qR+zNPJ8IBu3LzirFlzsFVho1YHCLKXNSj2A1qpWQy/\ncF37Xp4wU6m29p3opjs5cv9TaoqxqICTNj7n/k/XG7puytuxp+pUD5gVHv5q\nELgUsLJ/NgrUY4rBeUD6cKiEGEX02yTB3X1PlxVa8GdVtMz+YF1UZ2O9X7qD\nPMrg\r\n=oZQd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.cee9b9e22.0","@material/theme":"12.0.0-canary.cee9b9e22.0","@material/animation":"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-indicator_12.0.0-canary.cee9b9e22.0_1619568746991_0.5102137270983349","host":"s3://npm-registry-packages"}},"12.0.0-canary.96e83fca7.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.96e83fca7.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"f731d3963e72d654911e00e0dcd02ac239396beb","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.96e83fca7.0.tgz","fileCount":38,"integrity":"sha512-kErXWMqy/jSK8Zt7Pzv73tafWliKMbxtYxWaOy6BdILqD8vYJyhtE3x8LnOV+Xl7E3e8TXRCu9ZvQ/qYZtff0A==","signatures":[{"sig":"MEYCIQDTJ8QqoBOmHvj4w1TDA32/9PMHcFvwLXhNslXbQmLYWwIhANwXOvEczKZlIYvKuck0GZnI+sgaTrZ2WvBusTQk68Jl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiMzDCRA9TVsSAnZWagAAfrUP/2iZsq3fWSrxM57a4qzK\nIcMeqnakCfT+nnewOpujvBSDDLEl+qGkRIaNLZMDtrHPDB3eOeOZgV/M797Q\nJg5SnkgPqTL5e39BX1FlQPB32Rq3WPsV8s8+predpqq7/ErCIh8+77j4JSYN\n6foTnDBnHc4Dt/unZhOP9x7kGKxEW16G7tyV9JhjNQc7DO2tLB2wUx38XtiU\nqOyhCn2IKbRynzHg2zkBWz7Ug59FJDDLLWL+KqzvP0MnfqK1Uzzkya+syC86\ndqFBIcKPehuR14Kt/xmn5IkR3fOdgsHJ8SgHBaem9XAFkHkOmtcUxcFxxEXW\nL9DQGz2JLtZ5D7WWZXuudTE9u+UCOzQL2TlqY+26c549oNKr6mNLG34D1m92\nNNPd9n+rc6JqPbiQ7PGA5Y1W0P1lKmxS5DEqHOzdeXlQc+vQUTWwwfcsMsh/\neDw4GN12H/HhuMSlCRLurqCeTN1UhsTPTlCvATaaRLK7a0iENnLE3OVER/Dz\ncktjfNsy40SQXBQXlUDPZ1TOwOx2lrzB3lD3QGbd4VB5XzhIL8qQLCmCF8vt\n0qOOUJa18ZSCGrcTAeqapv3RUQSr66+kYM+EHV30kWqCism4F+/CpN0BrfbQ\nd9CToG63dZ2H9RwRNDVj5K1fCpKfmVlBVGDbuj16v8kW8rH0Y10tM20KG0tE\n+Lfn\r\n=mRaa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.96e83fca7.0","@material/theme":"12.0.0-canary.96e83fca7.0","@material/animation":"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-indicator_12.0.0-canary.96e83fca7.0_1619578051343_0.7349839166995717","host":"s3://npm-registry-packages"}},"12.0.0-canary.4c497bd19.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.4c497bd19.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"d58099cf6b3f72992c1cc2da3e15d45570818990","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.4c497bd19.0.tgz","fileCount":38,"integrity":"sha512-SPKYl1nIaH3Owh6kwEqbPODu/6mTVbocGoy/15geCqwaEvj9W/Qi1PSNoC7ES5WKYmxvgdG//A/mqXX/UGPJpQ==","signatures":[{"sig":"MEYCIQDideLNC6iGUO5hRmDfjNk+A2Rn8S4m0vsWVLFEUz4gIAIhAKBlIF2doKm0n3PGLyaf3wYWw/UsduCEBV0AEZ6DCs+P","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiaEHCRA9TVsSAnZWagAA3eQP/jhDHWdwNdZh2AdMekKk\nb0HbhEpbdBQQCz6mMTFhbOa4mK37CbWS1wZD+A6TNJcom40smxzzfOI0kKOv\n0wCKHJoJ21KeM8kEeYhgK2s1zWqeqzidtJHIueu90WfUSJnRYgup3Pe9Mh+w\n4qqLg1KA1zU6xfYlmQ9ocVcqwliijpeK7esT+doAT5ocUFXW7guuhUC11xlJ\nzrrSpUcCKWrRHRbj3Xxd7LPF8jItzUH07f6RhRUMDwra8wWJbYz+I61+9mch\nW3APFWVKJuaywggmQXFATYuXOO8pjzLe3n7IOLYNHJzsPThZBjdWnCKpk2Rp\njbwZ99QJu3W/rIA+xe8qHpFY+QJ4X9ibV0eBJI5U2FrqrvIzFsfkwGNim4IP\nDjDYrIqwSieV6id8oqGOdcBDQ1BUKcTFnTjjU1wTNa+ldOar/KrjwiPupBvo\nmvyJ+fF5ecTc4oV8DaRMquIrLmxvz9njD4csCrouXHoSXbC0VanZF0Tg5+Fg\nPhw+11HnVYUhh1Tui3GLT75WWaxmMNmxFgQEeArnuA7rzIbDh1OKB4/g01ku\n/lUzfbv8LjaH6PSfTouj68Eh9G+8F19P13Ue7Hz82ea2HcL1S8QDemUv9r7K\nGqJ7SbP8y6cRpo0qmCpPHQ9dsmXK10USbRIG/SUSxBVxvHlnHHc1YDcLxOp4\n5zPy\r\n=pgJu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.4c497bd19.0","@material/theme":"12.0.0-canary.4c497bd19.0","@material/animation":"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-indicator_12.0.0-canary.4c497bd19.0_1619632391116_0.6208029161173829","host":"s3://npm-registry-packages"}},"12.0.0-canary.105b15b96.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.105b15b96.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"bed9ed20625b946bad9a06e8da58ec0100b1547a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.105b15b96.0.tgz","fileCount":38,"integrity":"sha512-nxCTkGAjBxqVelMucS2ZzEMnfEziRU5yPKRQ5CyEaVBAjcPh0kU3k90aY4lw8jezwGX2CODfYDWsHcbazrhOwA==","signatures":[{"sig":"MEUCIQCClYZDjO+gtzxublxjNiT1vKmjoguVuVEmE4ham4OJnAIgVxxB2IYKdqp1prEVMELWWG/lv4/JTBurLKzSfIz2Vh8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgidc3CRA9TVsSAnZWagAAyyYQAJJ6JIZ73WMCYUcMlZxm\novRzcmZxmhCzvRMisxiRzHQtGA/pvPFZZtuHKlky7T9ogZ7Ml6mOXMT2cQa/\n2qJHim3vjxdaQ4O/SkR7ump/HuEiMEdOnCLikmY97GWUIntkTk3fomeu7yE4\nmzj9pBdYwDdm8MRYvmnHdkTPYAI2uqeHvGGWuJIq8F80DcBOC1kXv8cOTN3l\niR4e7G/7fzRn/wkrL9Ix02Nkimd9+mbyBoT/U6bmksfiXvoTyrAfOS3Ft6il\n1iomsk099C+p2THGoY+KJ3SG8SGkvv9u4UFuDXitRa8h0QLwYh4sYIs5z6F2\ngiL2q1Sc0gqsredm5wKetlMMfBBRN3MynxojRUb6rQf6EByPPxUYUEGNe4GH\n+LjdO8IppQIBhZLiw6C4BfsEA+lZjdKj9c8Gs6yMlIMviGRBFhqcAMzHJd11\ndHiR859V+qVji6tw+nbMYI5JexfJOqyN6+517dvR+pXYso1wbYgFIovDGHJC\n5MgFXPDEt/eOB0iQ68xAUTnzKPkzRTHJO4su5jan8r4dJVTZ1aWK4Ae9+/E6\nEscUTf6k2nwLGwXiw7deSzOV6M+PVjqW8rLr7QbbwDp1YV7r2Js4pV8GJwmd\nk1hSmlcLi4WKM1uJbV9p9Cb1cI929W8/zJEG7Irq0ztSvmqJivd3p1Sq+IDJ\nkAKi\r\n=40Ip\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.105b15b96.0","@material/theme":"12.0.0-canary.105b15b96.0","@material/animation":"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-indicator_12.0.0-canary.105b15b96.0_1619646263068_0.3064782887345876","host":"s3://npm-registry-packages"}},"12.0.0-canary.6e20259e3.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.6e20259e3.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"a042ecb69164d2c8120a555abbdc089128b53272","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.6e20259e3.0.tgz","fileCount":38,"integrity":"sha512-QhotPRJsCSqFqEiycN38wXf6jPuzdIcbaTyfOauku0Ic08JXzic/zPExwjOzBd4AarqLWskr+34wik0M9AnIxw==","signatures":[{"sig":"MEYCIQCLDcEer5yvp74caSi5HZFHmM7MXxfhesxnrfx/bK3WggIhAMpZW+CWQI5dfrl+3w4yizdbtbCVuKkCZ4dzHTeopXIZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgidhFCRA9TVsSAnZWagAAHxUP/0o+r1AG6wRW6AZ3rHvq\nY68SmGsflwh5whUeltMeHfJW6YflnBCLvw6Cq5d/rTKoioNNYaYqbGU8G4MW\nKC6K0kO5n8ctrBAmV0SO5mnGG0cVBuLzKXK0X5Wi0OhsozeqtJQRm+rtzf3y\nY/19zAgFSuBZAml2nwnEqUhDUqC6Xpr5vpo/Sf2Ie8dULCzqloXovJKh0ejr\npn0FuasDUmvxdU/7apkVqg3iIYicFw2B7WpSoII/OHfW512CPe9+IYbToQYy\n387GiAYKPrfYVnkVrijCzX/JcwizVxkqQJ24AeiuoXEREopyFnOx2b8ugUyN\ngljY7uNHztWpxSGBkThYwZf2u3YxaQBh96JY6qPHdMr2xI5zbQjBgjnViJrp\nHJI5RbXLLj0KIZ56YmTgf04gZZZEm5MiQ2noA2HU4bSRme2x4Airs+I5IyjN\nQ1Q/R6YbiNkbZQKCVSoQ+LysE8CeY+b+z4c0taYjPUX9qIfHatPqoKkmYnCL\n/VDs7iux6wDIzAOcjw55ufHa33X3jFX9Mp1+9hSHX/5bSLGz6kO4CqsmnJ9h\nNe37R2Zl674zhKiTWo6lYeE6EzLRNWZN1Q5cVSKtC3m9rY9WTNJwxY4ARqD0\n/bB1PHYZ6CzgvXrrPIwKoIjUNnuGvlbvsSKR0KzaZJBM3hwV5XiSxZi0ISR3\nXrDL\r\n=GaNi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.6e20259e3.0","@material/theme":"12.0.0-canary.6e20259e3.0","@material/animation":"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-indicator_12.0.0-canary.6e20259e3.0_1619646533469_0.055677025985359174","host":"s3://npm-registry-packages"}},"12.0.0-canary.0f79a5d74.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.0f79a5d74.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"73a76be7840d9c963877a4f740e65e6b8d43fc02","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.0f79a5d74.0.tgz","fileCount":38,"integrity":"sha512-ic8mqprshiNkSJ3YcMmqVmC2PhComqipUrnz+uUr2J84sifasg45niXxDcl7xUeFOyZc/nuJAjV+BdDhgdIcng==","signatures":[{"sig":"MEUCIQDFXE1stjQpUKtFtIvWEy7a4p8sdXBYhmX3hbfRptKdowIgBa/jwvvXZhNb2SLzAZgX2Ih2zu79gnIuqhXhoP/dN14=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgieTfCRA9TVsSAnZWagAAII0P/iX77bKLMq67Ufjgvv7J\nFVIHGNucrSFEU0TkobWAwyakDH+XA+TsNs8hEbnpobbo2UYD7B6w7xDx6UWp\nMwsmX0Hq3VbSfnBepxq5MahpS8QzDSBqIfPhE0JD0yFJeGxevWySD33PXD8t\n5e4fDSjdr6Mki8wHjgRgB1Pca4+EqZexkEmmbPL40/xdgDn7UaTs8bsYCSN2\nNfs0K8JnDAOyJ+Y3aKyb8HE3Ffh6oMY0gur1s9GoA41tzrWsIh62vxjYGakX\ni5Z6Fm7oG9UFhfFthmSc7ZwpxDoa5ZXeeT3WxgHz06l+PgWOvUnqimII+oYo\nK7VSrl7wjVP0Nr7M8KK0gRUAk5BMH3wY3paY5fvc040IO7XT3nG/Ms2C35RV\nVxOt7NFqF9A+Raoo/5ZOwlGfWuD7aeaKsugQWPsxQz4nD0egeXnLbVPHZlJp\n8aoNxx4RhtefqWkrUJYnGjAaaBT+ERp9ZcgHNOqsyia0uNuPaffVNBH/WXmN\nZ9WuYSTfa5VTYRZoM64n+tpnjeHbhuRnWEMSlYNO5fg74Azu8LE+vMt4Dlpn\nJXsZPic4oKSPp/7rblHNtmCHpRHILmWkL4YWLAKfNOis2Yb6E6zWj1k8EjaR\n+DmhTqG3fwUn3hN5MeKoQXddUnbyBkepb7tZqgJpUThAqJzZBnIEt96ohKqd\nDoxx\r\n=RfMx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.0f79a5d74.0","@material/theme":"12.0.0-canary.0f79a5d74.0","@material/animation":"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-indicator_12.0.0-canary.0f79a5d74.0_1619649759098_0.8749327024924105","host":"s3://npm-registry-packages"}},"12.0.0-canary.84f3db9ed.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.84f3db9ed.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"5ab1b6b57aa41f8a719a1f7a81e23de78e0c05e4","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.84f3db9ed.0.tgz","fileCount":38,"integrity":"sha512-5RNaIJWhizAYOMtJKlNjZ8+Ok8NGNZXtPZqhIV5boUV3CtiWsl+wmCl5aW16iqz5xJ01tkC/7Kg//PoreE6D8w==","signatures":[{"sig":"MEUCIQCskxeFypCJjUZUEah7DtYzAvCLkA/MLFo6F3LyVcCXmQIgZYTg9R2fXyBLGDGrAigPRGnOwtFhlzdS4BgQCmvC6Xc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgir/7CRA9TVsSAnZWagAAuLUP/3PnRf2NZIYrBiHdXnfs\nlusjeXoJfWE/OV447ITVv/KSIHGwGYeUK5e26nNkMYi91K9UxIpimc3X8nsd\nIrTpRIYrfbxpMbK4zJiY5ShY5oC1S0MdUmrNfm6CSotRPQFSfPQNCxFCkNAN\nQiL7NQ2pzMkx+JrjlXsAzB4LfXIXY11FS0KWL2vnCBHtyCnwV79vpE2S/Qec\nFz7x9vbo5+wxL1cSN13IP9zrudUPs2L95jlf/sIJbmFAqyqPzjau4b773Oeo\nOgF97re8HLimtPfGoTOgpWojog9lcjTD/1rr0IsF/YmAorVHuiMly5arSNq0\ndjqWYEmVtdjlRV11WW9iI4cNdtkcxsbvDSyq8M9saltF3L/aLIw6b9WhIa7K\n/96xLXxpJhlNRIPVPQ1eFU9SGgsIbsj2HVKA6pe0V1oIsavTy7sLYh15DVEA\nVoZVA0lmORS2bxRCuPdKOTRhd7pY/GGev6yjWTXfIbhOTugA5xdSu2RLqBsk\nZVsyNcQobHtEy05Q3ZixuVvZlJOtebxgxSrSmCb/3DUJsxpeO8+rioySMW2K\nL5C/z416RCoYzGF+jklnvYaMXdR01INDY1c2KCuxIo+ixNc2Zvx1qdscEgvv\nEzkydalDeOLhO/pDYRTVl6IPZQG5IODouj0xGhZm9zCptdTJ643jL0oe43JR\nkxEa\r\n=H0E5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.84f3db9ed.0","@material/theme":"12.0.0-canary.84f3db9ed.0","@material/animation":"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-indicator_12.0.0-canary.84f3db9ed.0_1619705850949_0.9022851421742895","host":"s3://npm-registry-packages"}},"12.0.0-canary.8fc29273c.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.8fc29273c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"47e45c5fefa3f06de78f46ffd292d5281b9de110","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.8fc29273c.0.tgz","fileCount":38,"integrity":"sha512-nwyWcxXea1D3uAcfJ4sWTFRVulZSkOnsv1AmaMr49N3kJymCCnLlBaYwd5Y7mZMHxxKOq4DHo2D491TH6P9D9g==","signatures":[{"sig":"MEUCIQC30Szjh6+ewnjAtWRZlRm0+OIwikffbQ4VtrqbMIzdswIge5s6QywlyGC5iR4bmnbtcoSFLQUw9J6p9N8v0InKOuM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiyO/CRA9TVsSAnZWagAATT8P/2Pj70OTbSMBA3/fCEXr\nz3N/yneLGDGIY5idSuXCdE9P/ZuCCjBPyn7cG7pQoS/zlwH+YcoTXHzp9LXE\n4ToHECbmNs6oU+CUcr2sBmTika/KnpJ4aTZCn1QK2Xd19+ZChLw8mP6hmoxD\n0bn0i/yla8JH7fHakbABbwJFo/N9ZBLzwXnvDTrc1HVsDE9i4lBstJeacijZ\nKs9rXpy2T/6C1/H6395ow8pqCeiwFB46QZVIINNwFN7yNe7xzP0n0CnuA2PT\nuz4KRHAWGjxnFGfQLXmn24Z/z4ehA4jhunttRF6dw/piCzD3rr3OX/PYfFZ4\nNRANnDUhobKdoo+2Lgna5DyaHvfzWqok5I1QhYw9MlPJPAWi58590K1nfUi3\nrKi5UaLCeW40KFeoTY39o+cwdZmV8GFwfW5flIAZNR9MQrNCcBK+54ziHEoU\nyZjqop8bMkG//Zsh4ZfYVqldueA4Tk1AkMRvNZh5kFzundHyvQiQTQCN9Ijs\nDI4AEohqRDFhsXPv2jLdii+SJxYDvvJW7GAtSm2sCBwS1zkWGpsODegp2ciO\n7Vc2KtGQi8sUp9dv2vMaV2OhwYTwXP473UflCBo0DYXHsNsIUrG8Jig2a807\nvz+Fm1+IoadZRZJ6isP4GUthLarmKYTakPj+mkQBOd/i8YQelPnRkNyCpTq7\nDZYX\r\n=ZHV8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.8fc29273c.0","@material/theme":"12.0.0-canary.8fc29273c.0","@material/animation":"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-indicator_12.0.0-canary.8fc29273c.0_1619731390919_0.78448580084612","host":"s3://npm-registry-packages"}},"12.0.0-canary.c50d20bab.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.c50d20bab.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"556d5b94bb702155a85cf7300042172a4319e807","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.c50d20bab.0.tgz","fileCount":38,"integrity":"sha512-uzWaE+fBCtfSs8q79ze+dDTC55SkNx+fl2s/e2qLX4HjseyXdELJXTs62FjilCcjH9mdxd07UU+IxNosrJpixg==","signatures":[{"sig":"MEUCIFLxjwEUVKoYjme14rrT1YSY1R0xSZyevF+X9vKXL01HAiEAuKz1n+ZtWvPgcSqNNYRzGjQoBHq+2IUVrKwv+toh53I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179838,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgizrNCRA9TVsSAnZWagAAoTwP/RkRuq2mk3goTRhgCYwG\nkxgSPzggiQQGi1qhyFfjkBUklJD1PwziwEL07e6UGLTKv2KGXQaKKKS+mQax\nuKOiNsSd1ZUqvUeyFRyel39bMjssAh3UBB5m40ztnMzW6loBS0zNimT7UWeO\n3sRAi6BDxkT25Rp6lblqyvEXtWSTJwR5VVgJls+n11BgX60NYwEWdA2FVt5A\nKHrfKYXFtsvRwgBO7a0MlyZNPbK0Rw6bTAZH66js5eXbBbbPqLbQqXTXmHPi\nLT2N0VUSuFGX011QHxfleQ/eckzWv3cKuc+k5BuEYjU7/x1WKvsGeMxs0uQR\nCyr9vzUTOMTZ4IfzEuOZlemtZ3N6hVFeeGoRIfoEki4DOGqkRYTJkaOX+eu5\nZ3Mw0EEHjWy2fGZ//OyR0dLjb/X+YEGLCwwSVTzCrnNC8VhmM2GVl0dj4WUl\nSqO6QM/sWDH7lFrdN+65qfdDcyRRP/5ZFnHbINxkTRZmDmkiLXNb9N7eOXLm\nfc5bTx6JuX1M772OX9Zm5hc/eiKOCDeyNQ1YEE6oPZjDn1BIfex69zRH8NeP\nsz6vXDYn4U0rfa79x5Ur9Ty30QVKdp+SiBU9UL9ZftZ7tlnP5Y2E0Z9hXp4e\nB2cMpFF5Q5Bz+OSHt6l+l+De2a9TcMxgD0vQcxL3qceR8L6JkTksnzhdt9ha\n3+Q9\r\n=HXmy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.c50d20bab.0","@material/theme":"12.0.0-canary.c50d20bab.0","@material/animation":"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-indicator_12.0.0-canary.c50d20bab.0_1619737293229_0.7524937689577285","host":"s3://npm-registry-packages"}},"12.0.0-canary.474836ad0.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.474836ad0.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"2e323275bc906867bf541d51476f12816d224da9","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.474836ad0.0.tgz","fileCount":38,"integrity":"sha512-N+BLQ2gn45X6j1LeSgOjVt5PjyakrRf+sgERLpaHVEZrVn60+7vIWSiPDn3FOJIyd2i5pHxsXpsQVZ13k3cLJA==","signatures":[{"sig":"MEUCIQCT4dsPrmCWPsqBTMbRjNam5Bv/AOA39oB8FcDJdV2mwQIgVQWPUij5WUGm06H/5UjvadohM1LSKdGXv9w8K3vMVsY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179838,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjMzyCRA9TVsSAnZWagAAri8P/ifpCwdfudo9eNtqC8eO\n3HOWRirZoIZ7h6gtYHC1FzpTDkkplysnpNZ7zRKYFzre9ya+RC/hYObCj88O\nOlYi6ArNCo72g4310qK6h4rkT7vqL5DCy1yt+cUKVxx13rKw0esxfoD+NETX\npftT/i+WTEbne7ar4IheOczxbiHjUGCyILoS4CcNFyAGhovIZyw1qC3X3vxI\nKdg8X4JpvUnl/Ata4S9HlZrXzzzo2XlamNxbwQohAECuFA8tKpMGlDoaGyHF\nGxu2oU1MlixMer+AKNtn9AdLzJl7B502NcansVwjIBqcvqZQuU7wPlHy3KCC\n+Ui2ImJPG8vymO96mKDE+LQXqYCONAXtLrPrTNnYIwoKx1M59N6YWvy/eV2B\nM7heM+MjyeMtd0LFA/Wd390d6E2EboXR4rgD1zeFjk9RmqAp1+5tAWv40hKT\nQT7Z/YYQ9zuyaL/xWyXCPa3FugqLSJJJ8UmDXBIS99OawVF5R6W1cZ1jTYcp\nVlnzxy05/AjoXESMSMOJjYfLDIaaclpfrLSG3bR8G5+Xg7i/YfUqAPcWfgmU\n+E1JwV2iEd0kofY9rrZudSFsU9Ggg7NFP5XvT+21Th2VHFrQefl0hZBmNPuu\na2YYLeDKQDaTxUmZ3dlCu6aeMOD8viMuWq6hzgk5HPpstrNSCd6wiBEkivDo\nIhK8\r\n=GmTU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.474836ad0.0","@material/theme":"12.0.0-canary.474836ad0.0","@material/animation":"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-indicator_12.0.0-canary.474836ad0.0_1619840242021_0.5289086639259719","host":"s3://npm-registry-packages"}},"12.0.0-canary.f5ad92287.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.f5ad92287.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"dfbd729fe3a8c532f5df86d1e02f110405d9a42a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.f5ad92287.0.tgz","fileCount":38,"integrity":"sha512-5Wh1EXwNl8QgbZEZubyHrq8xpzDXlbOR9EAQMGpdkGd2LJ7xpqJEfzfNfPVhn8P8DKsodB8+cYCAkP1DU4PAbQ==","signatures":[{"sig":"MEUCIE7q/94DEHPYr0ouETW1X/juUvUn/JBSqAX6wvXLtxY7AiEA7zF+zZsNBQPzh50upaZY7F/L9qYLmS6i13Z+SHtGEaU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179838,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkD9FCRA9TVsSAnZWagAAeHoP/iWfoJemAVvsMwr9DjIL\nPQSVD0V4+rv6imf9HaFhpNgFfqk1Pp3rU0E0FZwlVzvvyJhkDYcIclIZdhZT\n4yQixFw2sV60Jnkd3rBufQ4gvuMr1z01mDLnSBZC2d/nOzRWpWYMN3jY/wnn\nulSGNPnQjMibvcN7ftL3XX6sOcyb8MyYSDHvssr8LXMolFdu86tfbtsZ2wWa\nhBtjTAe+r9Berxol2H3ZkBACR/U+RGi3BQfvx2g+UGN92k2A5uxElNzUg9LL\nqsRTQGOT0ZwIF0WM8a/ybdlYQQKY2woFMqmNaYvlhJq29ssb3U+eDnZJkzkO\n8FbS5RkOdzUc34Q/YgjoL/G57MluuLhjoJWHbnJ2u3VLGuhJPbXydd1rbhaK\nXS+YLIycoXHCKw/tyhC7c9zaV17saznQvupiljXVRGys+HRGOpcluvU6zB2j\ngoI4/4IRvDCNkD+Jlgmhk45UMQOvmiagG6hsJMw48z5stW9L+yv+8xXB9ZnU\nk9hoGYYyYvgBmkIGaXnKcZBRwX/BSdr+BmxZ7xvQx17OVrZqCLF2hKR5xFiz\nXqp6t9cwubppLuMPRMq8UFQIYVEoJTxQaVnke6ZGlUbt9j56C/tp+JgFc7t+\nBiKDA0pUZIfH9EWb1Q9b93GchHgProioFwQpb9R/aFU3ZHy1yeXmpOAbPtAG\nhYlj\r\n=ZEWL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.f5ad92287.0","@material/theme":"12.0.0-canary.f5ad92287.0","@material/animation":"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-indicator_12.0.0-canary.f5ad92287.0_1620066116706_0.4007071768517596","host":"s3://npm-registry-packages"}},"12.0.0-canary.af453daf8.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.af453daf8.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"cb8430d3ba2a7cb08f5e16bb5dc0b1d5118cd59d","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.af453daf8.0.tgz","fileCount":38,"integrity":"sha512-dRHJkfveb9/k45Q9We60736CDK0wZBYMvtEoJIdnWwb7FTv+VQOsMA2iFslM5l2iD96rcdvbE5FlKGixB2ejYA==","signatures":[{"sig":"MEMCHwvH718EY/07MBh87swwifsX9RHfZyIUH2heEM4JqkMCIE68mFL/9DvcXHayy8vZYS3fo34uf5F36CfKkkKaJm5E","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179838,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkEaSCRA9TVsSAnZWagAADfoP/R0sY7nx2/UFIdiZ/TCP\n23ChrxL794rb3VKc6W+I/9V9LHRcMAwNUZ7YLzf+Pjz10EJIDHz80hPf9K2B\n8pjHThjfMT/JFaKWUprEs4BeClpo5v91g7x5ZiEU/YQlH+FPu8F+rL/AEzTD\nkm2UixueJzfvGsB9c2pspIKz5CUGQ91hXx9FxTBfW4A87sxEiiehjN+OFQfo\nuiIQN02VdZnRCSWGTV9vk/wA2OdDb++AaaQz1mj/IfkXRYGfXXb8FiYYLuiV\nEuqgYJTPqqwqnGF2lcWwuVuEYbdMcRWihcue382n8BSPL8d7BERCw434hCpS\nk0P+RsZLYTgwVOiMBAybe3KEn0hOnppffDsa6jx3ihN0FxdVRtvrFXslbe35\np5TcXSwipi25v3GlF3kKAHPgliP3itI73wvi1W6GOBj/wa6FFIjeV1SgzRmr\noH2cdMCrw5DRgSmhaWTaGgPoRLt4FYWW+66+j8y1q+ZUlc4L4zvsGLm6xvHj\nnkcIkKR7i5NY7ZXM32+MLG4TfdOpHP3tlm3CqhLCgPk8av1tc5XeXdeG4PqK\nGqYsbdzC5PA/OgeifFMm8OPBy/59LUSxtkUnRFSHfX1/HpNVsjUlrxtay9St\n7TSckH/Qi/w3IIZoxEjxU716GWGJG+hCtPcI3f56eFpTKIq6StR0YzyVsD2d\nUzCy\r\n=M+9I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.af453daf8.0","@material/theme":"12.0.0-canary.af453daf8.0","@material/animation":"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-indicator_12.0.0-canary.af453daf8.0_1620067985792_0.8413269390612093","host":"s3://npm-registry-packages"}},"12.0.0-canary.1f1918c24.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.1f1918c24.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"018eed71a714a9be81d4703bce56f464ef71129d","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.1f1918c24.0.tgz","fileCount":38,"integrity":"sha512-SRsoIbv8BUjczJCcoZk+7l94CCqwdkuvIrQxPHWgizAZ90GXE/srT1usnJob55aRCIjYXD4DWUUwi2naLrN4iA==","signatures":[{"sig":"MEUCICDGpBP468A74jMnql3iF8jmW7C5A1vX7ro1kgQRhod8AiEA7OdU4HBFVQeoi8Q79cKmrpQXJaAZZDu7ZPRImHyCFGE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179838,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkE1kCRA9TVsSAnZWagAAquQP/iCuw9aDUnIXVXYc2//4\nlYNWpZxzwlJnyW4yj53auzNbdai3h5qOVqgjkeZGAzeexWEscEM63jrnzWq0\nfgzkaP83VCofceMRZj5SjYirWNE0yOc9MW2voD6LeZ0Pf+yPRoKXmZFTWfSK\ntO16KfEujq95yMDg/ZIHjpZsYneiqIPEHz5GCAuVnoWHviAhIbAEDq0vbiMm\nTAaun1m5o9U0HACcDCqdPE5sptr5wetbGjZGlut8wJGdFVz081AEMT+VDgxg\nuZ5EYlM1N2pL0rZgOIQHLwcKEcHkQjHGtt9xv26caXOYbcEKTuNPFDErHBKq\n8zgBypPY7kgLMoAF8bRv4ak0mJcDZOjUfs4hR31gll+He3cA1D2MSLlQwELi\n7LMcwkLK6IuAukcAXaU3QSd/PgRr92GGUHY525/isoVLrKs+WVd8wcIbdd0X\nEIiVCu1Ve/BK+DQjzn09f4TUllzk7L/Q5ZD2M0i3gwl5m9EAZjwgOF8xpQYv\nKJVDBqm/YjngVNR622MayqFjekqAxMhj5l5OOaZdv8TfCWW7FlcCzi2+/B+G\nmuW85g7+dSOu1gT7AHtrGXKsst48EetomqsEHtAjCvYB2znVpz002bPfRnmn\nukKWy92MfZvLbqAbc9NdZunVJcVo00hLstZtLtu6SPPS34/TanPM8YZTkk3M\n5q19\r\n=eekW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.1f1918c24.0","@material/theme":"12.0.0-canary.1f1918c24.0","@material/animation":"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-indicator_12.0.0-canary.1f1918c24.0_1620069731684_0.8196899329036413","host":"s3://npm-registry-packages"}},"12.0.0-canary.33148231f.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.33148231f.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"1ff4faff63ee639aab3c49479fc602439f5cec40","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.33148231f.0.tgz","fileCount":38,"integrity":"sha512-PKe/tlYprbIynZGpQA7fFfw3YR7dXavsFH9c2g32srMSKAzyzQ+y7M2TE86yAeZQItBLCD6gV6RYwjicVD1sKg==","signatures":[{"sig":"MEQCIHD5bgrvNR+LJrTp1VTvd2Dj4Fu+2+yon3KOxET2RKA+AiBzckF4iCATCGQx/kcnHu6UJqR1fUvH7vHwiipKZOyMRw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179838,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkFEzCRA9TVsSAnZWagAA1ggP/2ttcpPTCx/REedQxuNK\n4eV5HP5siPonWbLJAJln6BpIkVg7fOnqdzMKSl4uhRkHQeqGJ+y7kIMsbbJb\nfEt/aLHOfz35rbfTcf/eqI/5uwX+P+K0ZwEWw+VgiqoADESq8pWb/mebam1w\npju5ZhnWiafULJL8/PIpBf2jRTkpt9F5o92/E62j8kJwt4DAiwQpa4oockKB\nQGn93n6BU3me/ayB995+o59nmK/qbkArXhIfcMtVtUMg4sIzH0Vta8RSvvDz\nt0CTKsa+ayhkfuBxKRVAzV2rQUrTLVRlYEQoIvhaRnZiFn560mESJg0z+EXT\nR5/9lxc117SKRa46r5ck8gwJnGcH7L5WkJoB5Od8gnefNCSQ7RKF/lSscujJ\nbLfwzPqP6h/D5gZ3D+On3W5vA4/SGphdhDkeuslSs/UuIL9c7baXfjY+qwI3\nvUz3w/arjkOt/y7cmuENIciphWYgZ2Uv8uFES62rTEjMV8lIj83VPt8BiMtN\nbKOilXLmbhCxZsBxYAV707MIzqXCDjZTXccNV8g5eQH2RPLSe+eURonu3YwE\nhw+ukukrSdgqqqHlaSSpwH1kybJi9em/yst5sCwLrTlouKJ3hdFd44TqRYhc\nSjGNWceBH5xipYYrgQ+BvrpZ5vhZO60nIeWH2njIWP2Sg0SveP8LeTMJi4Dr\nXjRO\r\n=jZ5H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.33148231f.0","@material/theme":"12.0.0-canary.33148231f.0","@material/animation":"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-indicator_12.0.0-canary.33148231f.0_1620070706894_0.9678757130577578","host":"s3://npm-registry-packages"}},"12.0.0-canary.06b76fa74.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.06b76fa74.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0d9e9c822b438ab4775cc3461f5f40463cf049b7","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.06b76fa74.0.tgz","fileCount":38,"integrity":"sha512-EiOaXZAfBNmfNaze83DEDqziuJw84ADbUN6UPVIYUUdNK0d3hIZ68imytywT37jH8N/WllBLSxEjdzYczmZXJg==","signatures":[{"sig":"MEQCIE9qryX0OwFbtKL3KEXHrAGuAIVQWBfCPGXUjNNCFGnWAiB4TOr0W5h6VS9gPUiwvyFP6Y1TJpuqyRjjS0AQ04WCdQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179838,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkFLdCRA9TVsSAnZWagAAdQgQAI7h/MAH2XLMd3ixeV07\nT2vlDvQgowpjn03zMYTKLh1JferQbqAF2I2zccTtK5NlEIocdYaKBGt0aq5I\nrSsTLBHlnQ5NMms6uMGIzH+O53dZ353sB6upaqamAbZ9FSYliz8bUPYwaKTO\nXSek8gpnkNwWgiNCtUiIVU+j9hftPXvH6nqZC6GSQouqV3azMyWX1LJeT2HT\n4VPvSJDpq2WX5N4ZdtUyMz3GKseIEH2fN7a2MfMLlwwDmdyejVd+NzHq81NV\nJzIHnlXyDqZiRIWLRLQmdxLlzIzudATlKIdja4jgzjssqjGIKE6LIpR6GtUI\nIroaIXNibU1N7/esCoRBuWYNKfyo+48eu4DdWicSJM6+U2O9VoYyvxP5vuKq\nUmdhLTh7TbkmSvId3m5g7lqN7c+PM2aStJemq+I+vg00yNaTabqM91u6TOBo\n7vwol8W+Wuzaz2LqYuuF3mJDTaEyinab309uZR5p2YhKeJ3ChDQAsMHuPTsP\nliI1linvFKw0X46JsJyICAuTGi05PSge75BGLj/wXDYrDKrRotA+JbTiCowt\nmkLLLWEHElyYjfvQ7Rzwc6Yik1r7x73QODKvqKTEsL+oYDAu0YRKDSeNI18j\nNAfiaoKYFTY115kA0gB+BaUl+iuQC50zGabyKcEkTmQHrE8q6ZP2qVKcYqVS\nUL5G\r\n=ee13\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.06b76fa74.0","@material/theme":"12.0.0-canary.06b76fa74.0","@material/animation":"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-indicator_12.0.0-canary.06b76fa74.0_1620071132959_0.22276350811987622","host":"s3://npm-registry-packages"}},"12.0.0-canary.7c5000473.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.7c5000473.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"b0fbebaeac373cae60822d49623f0dcd7e4909ea","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.7c5000473.0.tgz","fileCount":38,"integrity":"sha512-kJVXQL7rrwWpwdfmpIZlnYAIoRoPIwF36WI1zJbltz5x6vlZCWC7OdXMjeOAj1H1VRGX74lAC5XCQAwGX+6QYw==","signatures":[{"sig":"MEUCIERuWKtQPQ8hXwkfK6iQM7XxACyB2BJn9FMXeBR0rYaZAiEApOx5KXYIsBQt9BczYJXcjU0UVfmzbnmXofsbNTRFx8I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179838,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkHwPCRA9TVsSAnZWagAA9tMQAIRf2nkfafgcAFQOzmYw\ncxIHtx/+vqiAbTOuIEcF/S8Cat+ECPrdQcRKBqllNPGRTlK0YlzuNiPiWW0U\nSHw9+Yz0j+zjbSDQF1PGaMVzFR6zUqVK7BvsBS1+1QuzNX5DZMZmXXNerOyV\nGm2XsS6ZiF3NDJ78iqBdMaWL7WdYFHZNin3h0b48yHWxhTawxcRNFSv8sufd\nxk/8LseXl7zwpipJmA/UiH/autd6PUZ0xhY9T6QmfoAWUmv+Jd2iHVKP5NBx\n+dJ1QLvThnzsMwSMaAiLfunwT3Yp98qF769IUKtHpmO2DVv38eVoruVBEBev\njjFYwQ2DZPxyzaCgb/IiDpJfiVz2jcbUJ8wf4uqrh00CW6msb3Gvslo1qgW2\n7hSE/vrzQDxyG+TKm64ZF34ZGqpywCHE6RBWVMsJx19yTZ4/mFP2F/gV+4H5\n8Us4DfnZ60XAB79cBsXms65UMtGQpmJeuGqkvTTkW3gvDNGBpq7wM9RAnIGJ\nJwddsl0zu8NNS42V0sHfEStY2Kxtxkfvm0Ff7dK25p43lN+n709WlKlWDmA/\nOUYzCxw8Ou/oozDe5kiLgDusZCGoo5Qnu0pTI5EKFoDL/4bUI2occrFgOpIs\nGvNdvra/HIr2mZMQfXOTja6q8vnlZceKOUQxCwK24ksmlKDw9mkyw3z+GbZ2\n392K\r\n=GqK4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.7c5000473.0","@material/theme":"12.0.0-canary.7c5000473.0","@material/animation":"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-indicator_12.0.0-canary.7c5000473.0_1620081679503_0.5421313544595057","host":"s3://npm-registry-packages"}},"12.0.0-canary.de997644b.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.de997644b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"69770ac757d49cd0c90d261fb01b12c0b13436b2","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.de997644b.0.tgz","fileCount":38,"integrity":"sha512-f+fTKIMxP+pZVY9PWH1K9KJMpVRZcrFyauulu4tNNa5zvH7aAfwyaw7Le5yd2vqZ9Eb+P50N9qG0eb2na7ilUQ==","signatures":[{"sig":"MEUCIQCUp+y1tA7JEzHFUs7EnZnagqGxsXAN5Vf5Pgq7pVUGfQIgRpSL5ZT4OweSaWGrxhcQcyP/mRogVfZaTF0hqDJ9xH0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179838,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYQYCRA9TVsSAnZWagAAlfwP/jDIlv4jaolMz7j1vt9q\nohjrip7nd7mEwMXQba6VHrSxVJKmNbUvQJ4O9dEUOrTi8prtJ33jSAZCfZ+b\n8PI8Rdydjxyf+xlunpJvL//hzjt7HtbZ9L2v0a6QNvbcBJ2dBodCxYSuts7c\nJormq6oBKD2pmPfMPrABl0/1k1m55obXZTOSDenMaHoDdStJ3VTnruUg47hc\n9I9rmDpc3gJjQuh5feZyS8VZkGI5m36SA4TFRkSCOQJPbVYkAbESK6OAdRK8\ncYz8jZMS00pk4wawZOppP2Bmo6wyDnv2yfuZWhJpWL8cXAHGp1EU8Jt1miPS\n6b9qvtQm8Es0uDntzVDyAlPJ1ALkoVGGeg6M4C8+3yFUu92ndWbyWHjFmB5B\nVcEsJO9894I/XQtIg+YSqkkr7Uqy+6WbB7g/UzZNC7PRD4gGnGUVlQVtn1PW\nc3RG+G4806WjbowKT0jjrIQhjezFG5LZ2eoLVVs5WfbhaUNsZ4QgNBIghtO8\nwco4E7x5lc2pGyBf6Fc5eNNHU/tZAA4xcq7eaJZlrOwXkrtaoSOnsCHY+xkv\nXX08cS3vJ55Bx2E8UXnDJbtCGmpYILKHdznE21djWnpNqdmLHVP9/Juk7veB\nFhpWIHWsIcKQ36fukU8AY5qlmd88vZZdwnLlNGBMtBJ/JyxXvuMzK2Cbdygx\np+1z\r\n=ghM3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.de997644b.0","@material/theme":"12.0.0-canary.de997644b.0","@material/animation":"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-indicator_12.0.0-canary.de997644b.0_1620149271790_0.2605791597322751","host":"s3://npm-registry-packages"}},"12.0.0-canary.d4d7f1cc2.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.d4d7f1cc2.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"d8ca9c255d6d7346b817bad140e2d646631d4632","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.d4d7f1cc2.0.tgz","fileCount":38,"integrity":"sha512-b5Wtx/MeSASXzFa8DvqS2KId+vdnHQJEjSbXak2+WLTFHMQ/00bCS3LlgrF9udE8bYByRuBbZ/g6BGs2fm7dEA==","signatures":[{"sig":"MEQCIEE9arqHTyupyJxLNExi3Ee7R9RSIjZQBytKEGpY3azKAiBIMAL8UzJialROKVF3NdTpD9GJuHFxtYN7BlbpdsAv/Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179838,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYpdCRA9TVsSAnZWagAAjT8P/jW1jIdayWAK878V6yAW\nmb09UIY7WRglMkeqFT9GX4OJJbX6Tvj9VXbBN2BX3HW/hI73Bu4NwnxsbJdT\nmasOwoqMopd7AWZDnIDqR/JGNCAPzNtGgUiiiOiKJYBV2fQSrwy0I7Sur2sb\ntQXHZ+e4ROwsn4Y0DFJq7ymBCsBOkLlpS1JQ9RXUTWgP7wB0XRdshtibM8Eq\nPuS/SF/Ms4SN2MAxt/NrYXbce83B7lbEpuuIE8NaDxam4iTydeFHmDVGhY8L\nPg5BbX6h+0XoVuJ2By7nDDxq8g0lIh5h7EtojlKfeK+vRKTzSAz1pYG/8Jyj\nwgiHjNWvHz+f65GhWh62RTilF8VqFC/05PkKleWJxg7s1RXXq++u3NJbGLV2\nd9ntcfj9yAE4pmbkoDnGRiiyonBw2rZ8QKzfD57F2ve+bNWi/16202aOKwLz\nM5+9cHXB0DUDzO+o7fBaJJUG3lu5ff+MUTcWFaU3SULin58RBTNUrh/Oq/Pu\nKvmBhdpuXj8SO3mSJIYSp1oudviKZWU74ZPLsL79FuXG6tyLYwDPCyQZiDHa\n0cZqjBNRMd72pIdZz+u1NkqL4I7msJDD/ucxkbuUBCmZ2U4CWX/TkPqqpt9m\nyzwt0TfAJr65XsEHoMOR4yYT35ooI8JtoU7l6ZI1iFBbF7yrDjqUzJXiaHYU\n97yX\r\n=4IkR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.d4d7f1cc2.0","@material/theme":"12.0.0-canary.d4d7f1cc2.0","@material/animation":"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-indicator_12.0.0-canary.d4d7f1cc2.0_1620150877396_0.9028142692871406","host":"s3://npm-registry-packages"}},"12.0.0-canary.be999eb08.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.be999eb08.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"3a6ac03a037394fb82b742bd25684a8a64f43359","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.be999eb08.0.tgz","fileCount":38,"integrity":"sha512-/1L1KEGT8+MxWnBjB7g2mzZiHlfL+aOCGu/HGHwcs1rX/j1Qn5mqaUkYFmlS+04wevs8paaKbNHKwcc5iOKJ1g==","signatures":[{"sig":"MEQCIBbgZ3lEmFuTfhtFK7Rh6dxRvpjWKy7LObfXg16zDMHqAiBTISoWpaw3OGrmc5yTRKgCX3s9HvCX0MIp3SyJyiRsDA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179838,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYuWCRA9TVsSAnZWagAA1eQP/2GeHEqSvMRp1XaawRbb\nzPHFt9VAZPCsfPJGOa/6Tb92girqG8b5/OjfOsKLE1FXthsl1t497lPRULqH\nGehYCXPDXmSOXWV2UILXTdHTXmoGIQCV2n9V1y1fYzhHemGJ+p+92TZtlDEo\nx+U3N7CdONSJo5/kzj1mXAH5ykslPQVx1WnDH9TvbKs5QgcjLu1N3T/bgabh\nnIiIjps1LO/ZHONnrNe5qMgpAfnlX64+Km/lz6AvA9+UYRKkoZM7RCcMasbR\np284Q5NDlp5esEXxP237n1tc+PUDT0MqkzlQGXX1U/rCS4VN+yacR5aJ1iS5\nTO+5po1kYKnMDRwc+781hcOcwpGsHxpZ1Bc3a5rKRQ4ZOd6gBX5Jg2Mxb5cO\nlp3pLMff57gvMBDNmH+9UXHw+fvMe+EGQfefVrAk6tpSIqt6QukLC/eWwx3C\nqs5FcjGLx36LXvj0+Nv3aG/Y0JLXO52eue5r83bX89I/e9GEiDEJ0Wfbmuzp\nhz6sOfvRmT/rgfMf3NMGhMk1zw+R0L8AN25iq7L/cHsJDUdKqw6hT+AWTXjW\nr8YvGtI6xmSjmhcimQkZTWPYayIXJM8uGVY48FzcFV/qVfXITeBUD2uIUbmt\nfef7rz/nLaOCxXf7HePC8vaB2tNIdzLdVebVOle+KuYgwEKOFINCSWLm1piv\nOGNC\r\n=uZ/a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.be999eb08.0","@material/theme":"12.0.0-canary.be999eb08.0","@material/animation":"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-indicator_12.0.0-canary.be999eb08.0_1620151190107_0.34792915723823303","host":"s3://npm-registry-packages"}},"12.0.0-canary.eda1705fc.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.eda1705fc.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"3056d08c56a13cb92c6e44c1659660852178188c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.eda1705fc.0.tgz","fileCount":38,"integrity":"sha512-OpvMYO8Fq27Dod047tgC08LiPNDwIDHCgsLPN9sxB7Yzw8kZ9S6DiTPE/WiT7LvAs/Z06lW1dYvQ9nJp0QHJ6Q==","signatures":[{"sig":"MEYCIQCLxeTBAkM2kFj4TRNCtPCBQQXb/TAzy1jiCU4H3woHnwIhAOVbJLitkrlzCHbkWnhUGbToZAFimlkRczlLt9srLhAG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179838,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkZwGCRA9TVsSAnZWagAAlwEP/2JVeebEpa6ENCexoO/9\nm4Pyq7x+hqUjC4NoPhRjGLyEWA173yAT98Zt3HKJw+puS3qpAxXYcFLJApk+\nzYyD7k4VByeOnTFwEW/wwCB5hgnGTEsB+C7cCdTExAergkkJ6DwJrIPHeeHQ\nRmNesyvPuRCGyxquLudUQs2q4MgbitxiV7qPRC1yC1GPhP7bARrOkKzyCBP2\nBJ614VwaYbaj3CURAG8MqK4Awy3CQcks36ITfpQiGkWFb9OpcxQpbQ1+W1hm\nhPe9/x1BnwXk9IhLvwoFQ1udkaai6bzHHhP6ps70L2LCqXk9bu0tP1ZsPLvc\nKxfC3CSCNbf3GP5LhdfMzmjMsOyWTJL0TGa27sSWSWz6EUyn/BNwcjV2anD8\nqDIM4G7c3Ses1BNm6TR7oDbKrH2dTjVQW9PGN5L6vVJaGQtwRgMNcBPeMvmS\ncOqrArzSb8PuxgUJuXEijucXBFFxJ4pUWCQnFEvKQC0TJy72eUKDKe9+Cxyg\ncuvqSjRvu9cEk5Fg4EN3LRk1zBxtW/CbBKAMY8XeSvNhL9Cbhgh2C4XPXHtD\nKTaznqrYEVINaxmEv/sk86E2e/A9RLG92+7OU/YsPmv6AoWwc2kZYIwMjt8a\nzH2i0z5FnuJ8s9566msPBtuGZLbNKOp2WwHU4dw9i6LEbIYBnms84bOZQa8R\nKR0H\r\n=SqwY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.eda1705fc.0","@material/theme":"12.0.0-canary.eda1705fc.0","@material/animation":"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-indicator_12.0.0-canary.eda1705fc.0_1620155397729_0.9703784512721421","host":"s3://npm-registry-packages"}},"12.0.0-canary.718c90178.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.718c90178.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"f6214e4e2a6630e8967a3c720ed92802a7ee43e9","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.718c90178.0.tgz","fileCount":38,"integrity":"sha512-etx4qkXIkJFMJ0ejkb2alZoLgCaoqBmwjejUZwSp3HQbPM1/EqlHpRamiIlKUHMT8nFDetKGFs7du98m52CpJQ==","signatures":[{"sig":"MEUCIBUt0KwrVHKrUR0SC1LsYzwjT15ls50VRVD6+lkBK7XoAiEAtr5VoIVzRFlOrp0m78IQvs9sRGHevj64sAePuEKSmfk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179838,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkaAbCRA9TVsSAnZWagAAymkQAKTZykx7XRgTHY28QorR\nSoJPiXGVIbNZuLvUzN6mJaX588FGVjS1BjLJf/JQpc/uPKrbtdyNwt9hmLSS\n8CnwQVnA/7Uknm2BFIKpRi4tIuj8P8IlkU78oj4w1bKE9cszQdC5z8JLH7QJ\n0yLDVgGVWve3P+OxlrO+lvb2nXrbdePv1OHaaGHzuUXLvi3NYSP8UtNNrSBl\nU1eKPECUpAdrpbfrHxU25XqBU200ktPg48kh3TBcmZONTDdpMYiImd5BN6Kz\nnuyWK5nVdzHfJH2kshte68b3G2vutClKah0loQTwB4+PC3tqTuNnaF4enRHK\nJ+jCcPm3parLWuR0IPmvUtt3zxKF3HX5a2WiduH6848B6eYjkX9NcH9H4krV\n68q8pswpjIyT61kPGVf21m7LqNwoBcpp7Y0TdkWpnwiudWDTlWCjWr9TdZj3\nvO/JkgYTg66zW9YlImOh4s/dWWPUApbDKrwdMNjFCHK2NhJp/16WrnE5H6K1\ntlY9CGRh0enppQQyB9bqQpMsdhnqJnXDbQPoQgwiBuBGNWgs84qF+3hG1QWv\n9yBPcOJ0CmVcYLS1lNN5NLmhxYcrtzP2FyasMcpYCx9PwoRTseMZSr1trcQV\npLUQlmBibDZlczbkBHYo8/qiAI7O1wp3lqg4/s8qdyclvItTmCCTz4vNMiev\nxis2\r\n=jtf3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.718c90178.0","@material/theme":"12.0.0-canary.718c90178.0","@material/animation":"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-indicator_12.0.0-canary.718c90178.0_1620156443315_0.569961645228362","host":"s3://npm-registry-packages"}},"12.0.0-canary.0e3917299.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.0e3917299.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e716e63a81913ec68485604fb22663f99fbc67b0","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.0e3917299.0.tgz","fileCount":38,"integrity":"sha512-0amtNdEtSBl4UqBBkZr3fVA45I9A7PD9eSVQs8kLZXu2dA87q+Qh5czDMghkX6MuhLis8lnitC3G5aUhVB/EGA==","signatures":[{"sig":"MEQCIANdkKSsToFBCPrFgJnC83veADpZlXqSc6aWM+chDDv2AiB/chec036RqDGEjYMjina2ZPiB97I6IL61LjQKfN0+aw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179838,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkaC8CRA9TVsSAnZWagAAmv8P/2ijbz7Ga7oq4ToDsCuM\nq/qtJmCpY3NYZSbYH22SY+iYKwyx3J5i5oiXAisrSDxB88eb3uvXo0aOL2Em\nmI8EYi83y5LV04+N56Tn2dRVDtHW692Buqg5RAGm0fc02XguGZ6Y7zewkMG2\nHTXAwB5XG6k/Ot3IhPIbjUuR4GvPrdCobEFJsx/KBaGS1zFIOKlAV6N4xu34\neNgjh61/ANqPhdCWy2Thz/cSYq6E6bf8e/ihNNThQ7W6jJH5/cpQ4WelnIac\nl3jIuaTITqoDR5tVbQxH3zbb7Qj5bdAOpvNrjdp0K3Y9OTck/srcL3+GAODa\nGSCs++EQ56KFLeJUpE/rPhYUTOfLFCxYcKaGpRuz1/nGC4xHe0hdIEtU9UIq\nrXPZSxgnokQyjFk8JCkrc+Hmicf9LT+dNJGJ9phcTVfcA2W/8EnYQA/nFu5H\nFJZJsaIv1S6rx6pSW//I6ILw+KQ/hYgXM8Bdb0RqdNABUDYbdpVfpliMxh/r\nmNJHcTPQZAlsc4BS1aDBl21Dqpr3Mhh7tSwdJYrS/mSMksNB0FIcBhf+xfX1\nOHxx7A3Yf15p6/QryhrQc5RHrD6X0kJ1GnfM8TWplwxCn4NUd9Rz9f5UGrEg\nyXVdSjOqCAkwiQZaM+8vHfE5iYagRqfTs5Hl5oQN3HmGE2Cw6dH4SktjLyjH\nhgd5\r\n=h+zl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.0e3917299.0","@material/theme":"12.0.0-canary.0e3917299.0","@material/animation":"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-indicator_12.0.0-canary.0e3917299.0_1620156603703_0.21377767289836203","host":"s3://npm-registry-packages"}},"12.0.0-canary.836b3c7db.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.836b3c7db.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"12284a40f533289d7de6522d9171fcccb6cf7f60","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.836b3c7db.0.tgz","fileCount":38,"integrity":"sha512-9KIGamCBsNHTDjaE/d6GC9rOa9s8nmUKDRZqAujcbYfx6bpVYeeNsBsgiL5DfydTSwhVe00r34z+BHKBkqyrlQ==","signatures":[{"sig":"MEUCIQCYS1Ji+FwL0N/uzWOVKlxt0cjWKTwvFi9CHxLkydu+4QIgK+BJGhEtlIBr1KvmGJwJU+xB/dpbCNtXN+/di+KbIK4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179838,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgka+ZCRA9TVsSAnZWagAAxa4QAJL5MPHl2wJzL8Ja105O\nVCbH5LX9M93oeZIGUiz+JACpRH7KoJj7VCptVrX6Tx2i3moQlFY9y7gQ4etH\n6DnpIVdG6M2Sbnb2VDpkWZ+wz32DSecrIPIa8KzKpKqV/3gLv5FMXPZloJOr\nWGVVzY2BsQ3aZEwnLjz/lk8kZA7zUBprRP7/O+MCp5QCrSKrlPGVe7AV7Sbz\nvLzME5PwODrkoRSEc5fJhhuMXtWsrP4kLcXDcAgzvL7PB8ZU5+ukg/jdsIJE\nKznLPb4o6prpE9YD8IGZejKvwKPP2htHF4ssicPVapF1Qc1Alk4ii8pE4KWI\nN/QMpbj3r6cIByB8DNudP4nou6f8cuDWukcLaNH5l1t1At7okqf+i1o85wcE\ngPC2SuznTI97JgQlLeGme0i+zP1Wqg0aZgs2FfMDYaUhBZ1Y6B+fBlh46pqM\nPzZXoZhwl75dGxTrzqKLIGFTemFx944uUwIId1YeBt/6M4MFWMtytNaUSIqp\nuAV04m2e0bDKodNeH8ndSL80XqqrSTfpZjHH4iDS31GhlfmEe7ukhEMQs+ai\nNHgwXBUN3E1msVoF5B7Z0ZuvtF5kj3a4qlSHd3dwVCOdHgERdK8A7IMSjCFt\nu5FcrerSbwCHvZtAjy4+i4HlD9iFjwkV+rtwEFl3NaAcV0keRzMb/kKa0elf\nutOz\r\n=YriL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.836b3c7db.0","@material/theme":"12.0.0-canary.836b3c7db.0","@material/animation":"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-indicator_12.0.0-canary.836b3c7db.0_1620160408773_0.22356841227179447","host":"s3://npm-registry-packages"}},"12.0.0-canary.53d4e6d59.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.53d4e6d59.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"7e311818d21762461752da62b84ba11b5573ea8d","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.53d4e6d59.0.tgz","fileCount":38,"integrity":"sha512-HyLzrq3W09nGGwbIkmzcEY67uG5QyXzby7U7KTpmeEzosqmcQp7tYzO0XQNJIdQsAA6TBoUAQODhVi5mWLSY1w==","signatures":[{"sig":"MEUCIBcam/DnVbmLFFdNOK8CAwKxXfsHhLHVHcULG4QF6yaUAiEAvgnuwW5j82qcJUzSj5XOJBzFcDBwsSNLVb6lKP76zmI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179838,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkbNJCRA9TVsSAnZWagAAACUQAI6DKCJ4E+V+2gGaU590\n7Wu7kzOSgiQ5KhamTaDy7kyVlmQW2uEKll9w8lNEVStGbT6Yzm+kHCoa+Qxa\nHtofSspRfmpPIiuQKn6y3OGQAOGSbJmagIt8xqFkbzRv5TLGL4GepqpiVHJS\n5SaiUR+lQ7UTQ0u8kdH+Xbm2vCOHuFHn4CO53zmj51BIlcK+xgwO8rs4bQ2n\nAvGij2tKElBfFhjBI1KAjvL/8ofR7R4HRDgMIxxcurwgH5LLRR3XaL9AA4I3\nbpfY4gSC+qtXraEATsuc6KNemN0vqSE8g9qqApOp0prBxkYdaro1AD4admeO\nCdVJPdI8TNwGt/JhCw2RqbKlpgIMf6lrxgaHHHjRFIxc8F/gcn27s59TxjLs\noITFQRwK219oWFa96YXTo8sH62XxBwe8McOFdVdTEuRxjm2WMN6uLbn2mp1f\nyW3PkcvMCHPFHdwh7dKjh6Z9WdXR+fwJvw8XIE8MUDK1cpoM8UAvndN81CB4\n+ZefOmIdU6RwIV/vDDY/L4frvT2GHmV9EFSMVvAooE4UO/QzDB6OX0oNStrg\n6eChV6vRI5YjrdIBQfnhQWlIFWPjF8tA8KvWoZIxDLB0z7dM9widUaSfn7QT\nFBIYYSIUpFiORkSpa9+eZo5fidz6QuQqlMlBft+yrCVfDmu0E8G5RGVYylj2\nb6PO\r\n=2xO5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.53d4e6d59.0","@material/theme":"12.0.0-canary.53d4e6d59.0","@material/animation":"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-indicator_12.0.0-canary.53d4e6d59.0_1620161352967_0.9038354860601403","host":"s3://npm-registry-packages"}},"12.0.0-canary.18d147e27.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.18d147e27.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"b312ae04d37f719e1c97b08ca50f6fe8b8720a9b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.18d147e27.0.tgz","fileCount":38,"integrity":"sha512-2aJnmS1r13ECbw2KkH2CHOrv0VZQ9ReiKEvr9y6PB4mQSRZM5DM50jtoMdyFxwIrO5DKLKH/iD1PUp3aoAWaUA==","signatures":[{"sig":"MEUCIC/ETrW2cotwvq/T8Ha5l+xqWKNH5PoTCf4yaeLykxCmAiEAtl7NMjWCwZE189Ip361kS2zRByC8qtqpTWeJWkaisd8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179838,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkbVICRA9TVsSAnZWagAAPscP/jSsdboxOLd0PT7UWoVn\nT/BfcixrwcnCaBDHqGF4QWgobQF/pqMqjb5EfnCUNf3X0qhQFZlvVwC0HtUq\nTO13LhXL6zwDQg/1I06NAdmRhre1qVAyi2y7hyDnjXi5W+be83oBfFseaWql\nkO5eaeo7V+1oen6EqtRgh+t1CJARWS8t7pO31M6OoJlxygooKgzPcvznCXWv\nZ4mHuQbZswp+2zWg75pmrbIPP/2Q41Y66ytPPhTUmiJwNUlT1pRI1Z09CR4y\nyBfD5ZXpbAXJbOvwX5GLBgasuUg2eNuGD6IdWSNgal6n/zkBXK7pkEYCDQSF\nnEHDUlZXysESNsyHEqxPdpiHDTXBPURGFS01+VZ/YHGRHnnRDyu7JbPs5eGJ\n3fU8ifL4fz5vQwnMHTtuRWCK0TxS1FSz7jg6ZT4cKAFMKduyorzsjfjGROg/\n8Ilwtny5+AHTuISdw9CtdaH2hkjL+5HJtZWKgUU9qHC1FkewoleDSohobZlk\nCMeKI1qYHw8eLjG+yUT0uAsEnrC7vRCauQk9b8hYrZ39bv99MYHH7oJZ3aSM\n4VD2LHF94qEY834HaerrStcEaBTsQD4RG0xqYTNggeZeSAvY8sCNxZYWZBkc\naPBu8jZqhz/hvLCt0d3BCWvIh7P14D5/muLeeQEt6S0O1/hKmjBZosXbydaG\nlKIw\r\n=Io81\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.18d147e27.0","@material/theme":"12.0.0-canary.18d147e27.0","@material/animation":"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-indicator_12.0.0-canary.18d147e27.0_1620161864427_0.6524723063915461","host":"s3://npm-registry-packages"}},"12.0.0-canary.b9984794e.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.b9984794e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0371938e4da4ce849b1914f66587e0b01084ce77","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.b9984794e.0.tgz","fileCount":38,"integrity":"sha512-FDIBZtkZPZYYEi1ELF1U6F3aCwp3uXlhrcnfbt6+fnJ4MBZYdY1wjaowtgczAXqEvpd/yC5fpMq3ZMY/qoZrww==","signatures":[{"sig":"MEYCIQCKktDTEm0/mBIA6nku69jehOq1mukO9jKeOEZKobMCLwIhAIFgjvq/issEy6mSWmajPufYr+toHUHK3Hgikh+kXofa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179838,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdKYCRA9TVsSAnZWagAArnIP/AmaVhMLDZpdMroQxcRy\n0TLbwFKwe2Sb/hrkUY/u0DMJR34bcptoPBLkb+xwm0eilQ0chIQsNrU/mxuK\nPvhW5qM4WtdTWgA/f647LE2zAui+hEvaTbwLwavBg8h1Ua4rMXXYKi8+Kuca\nevqA+8UVJAu6ZnBJUz0a+jib61sELUiOAsqvPFAfMQXjGgwYRN7+Pa0ekt4G\nu61ME2kRQrKzXoibpvepHghNQDoaNOx3eIvDyNt32d3wI6sd2JcoCppq3ERv\nPc/1KzJhHSZdA4xXZt+5QATUXUPqZDl3ybVAmu/agGpYMArQpNvHTZargeyq\nG5hRgooPk2IHD6fFe1gIL3lWRjkPY0iuSP5NHvHT05mx2K/WtMhcK6N+4E0Y\nHKLT2+d/7dvh/NzGBirA6nX65P2QxR0tZZYjmXZhPFhXFCWCbLBOQfXyqrXg\nWnbUSULP/f8CVBe9Nf09P0Zchasrhg2515imrNIHrkquyg9rW4Qn2dVkZ8FK\ncWlhXLw5sKxiCLYGdpMMoRJMYX1jLXiJiH8E/+6txdE2WyHSP462it0Zat/b\nC0BtHo5Q6CtfK/x6DGl5VIOiskL+HAzyhfhUFqTMYguBy22Q3XAddBdgZ1BY\n8Wq93ATrVl41G+GFmsgkeMtZWxORvWRDGRCEV9uAA3Fa2buPDKMScDOYbiuH\n5Khb\r\n=LRjK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.b9984794e.0","@material/theme":"12.0.0-canary.b9984794e.0","@material/animation":"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-indicator_12.0.0-canary.b9984794e.0_1620169368110_0.787437142868648","host":"s3://npm-registry-packages"}},"12.0.0-canary.b76f5fc9d.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.b76f5fc9d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"9f6b48a8c18926fb8a948cf3684bb128eca941a4","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.b76f5fc9d.0.tgz","fileCount":38,"integrity":"sha512-3Lh836qF9Sbfj1ZPRXd8VDNrw0CtLAn/GZ2mp+61wbvtaVEUjd/rnbM9B18p38djQQeqvx0H+IkTmjQBVkxllw==","signatures":[{"sig":"MEUCICjjKjnHUnPlS+xYYdfnrKyWo75ZMZUYQbJC+MDxlqBiAiEA6mDtIk2TIZnJxfxmWIPbsrAQJix3Ao4uv5UsnqoFGM8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179838,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdNkCRA9TVsSAnZWagAAJfUQAIlYXquHToXPmEJTQaFI\nhEok0r8huNN1782apF4gIraxANdMTf8JJ3nA6egS5T6VAFbDMtS58fWCFq1I\nIbdgbC01ZS1c+ZdS0+HtemHPWhTE19iCtE97a6fGax6NMtAkYyAtmgPwu4mo\no6hplzGbOlZ/cpuFooq7jx1tiEU87EHj5aplBplWJxywjYCvjp3zSlCBQOGF\nnbU5FTPma45n+f5byaPPNZbBMLLrezqKrs9WmOUealJ0ReUJ003O1Jl3OLWL\nZUjeERLutVM7gGtrulw35PbXlMYkjqNBkONCS/zoB3KrMMdh7nMak/pI9EHy\nbiPMYeHu+vsYIY5ynX05pQzco1AI4ZBirXqwrWrcQQXPzTWbP/dFcTJXGbzv\ndNKS3TiZlWCo1oVDcyw2NFbg8tEMgAVgSleqHUOnKl4lSJ8X9PI5BOMBhI0p\nLKoI6TMwTvH+zqakvUF73p14bW+JNJwdYBZYsfxD+3hxmmOe6uwH3dJ0ViRJ\n1hlhD0xIqw+ySMXY+oxay8zFkfUKsb0LCB3F1zEi10qlcWtb8jMXpECcewQH\n9EGa7/mNPak/0mds72sUH6ZlfgvIf0BtgQNly3gWSM0FRkHHEMn9VSuaynVM\nc5UMNaYj7HzJ6YPJ5BjF+osr03TxrMZLOZKnlVf62gTmsvM00UstVtf7YV3u\n286M\r\n=r9wc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.b76f5fc9d.0","@material/theme":"12.0.0-canary.b76f5fc9d.0","@material/animation":"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-indicator_12.0.0-canary.b76f5fc9d.0_1620169572023_0.35553310104127034","host":"s3://npm-registry-packages"}},"12.0.0-canary.055d4f10a.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.055d4f10a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0516e574486b83e27ec620b8d3b9f97d83acf8d1","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.055d4f10a.0.tgz","fileCount":38,"integrity":"sha512-LgCTBYw59CdkDO36J/yHaW0iyGHSTqgyFT0dZVqmjv5bh4G60YD5tT0oanFkHzU5hE/gxwc3lZanrHDVgsZ33g==","signatures":[{"sig":"MEUCIAlZpTLPl6l4IplFSlmIUncdF1wCyXSuIcdzf7qZ3XdrAiEA8ltTXPMW+g2tAl5ZgZtDsM/qp/tJK7BT4lUBHNJl0N0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179861,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdbuCRA9TVsSAnZWagAA9z4P+QFv2tgeQn8kHA48EM/a\nD05oRS84vleCk1NYFcIPKpw+okQAOwn3UZWbgi9FXHkEj6iH8/AvJ0QfRPjK\nq2u6NOwpLS0C4tMAhOOgSIFmeYS/uDFeoB6FkDGsz5VMYOaWHsxtP6y4QGFn\nJNLImK9f1fjfn3kgZKlStXU9UsXBd9I50iTJUW0P7cbR+oOZbH9yfECaQATw\nPPh5TEy27lq63IF+J2qk3+m8vW9tsfjsX1xBMyZ9R1hiAfg62X9bFU69y3QY\neFYUTjWLHg4dinVizLwhZthb+gSCX9KrQ6ve5A0fNpnuFa+CnH23wHWvBJw5\nMmBeJ7SJXCsB45WekZWDC6l5NHACx77dkOc08YLLOYAk2miJBZflh0jkteAP\nvEmWnQWr6YvWn7ioB5X9CY/DuOLiC9LPFjJ2eDyLtovMyqZ4VjM5eb38P+iY\nhWzrxMQYWReyPncpdinTFlMkPYOFtbHWfM2kitRiORYUxw8s6yP0+2YzF0e5\nR7nsC7oM9w3h1o0KALsEL/c9hku7uzz036wNfZKqD/+ty0We935DscaM+l3u\nLFv/ahyGpQbDSDIq17ElvvKDhC466ca/j+KdiXpYxe+nXzCGJ7jbtl0ROwYA\ndSHDZouiyhk66gGvIlVu2lVu6hcs86ejmCm7qTBv82dMoCGtASj9mfFA7UrY\niGjZ\r\n=A7Uk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.055d4f10a.0","@material/theme":"12.0.0-canary.055d4f10a.0","@material/animation":"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-indicator_12.0.0-canary.055d4f10a.0_1620170477695_0.7394324967745445","host":"s3://npm-registry-packages"}},"12.0.0-canary.5b6a46016.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.5b6a46016.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"a1276ef922dd2a0ba4ab1de63b65a9c00327eeb7","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.5b6a46016.0.tgz","fileCount":38,"integrity":"sha512-6g1/xFcRrzQ/iw/ENI9vDkq0rAbEHq9/ycEdgW2eHHPi/t7txkFdOoHyYIXdSZlx6yKm2y+STFw8Xi58ahkG5g==","signatures":[{"sig":"MEYCIQDhTMDb4iNpo4CHNIaf/X2U0bs2FJC6u0Y0YPkmsFp4uwIhALox1zNKzckUfImb56WxGGB0qRcdL8hkKk2hS+L2mX4B","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179861,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgksS9CRA9TVsSAnZWagAAnHoP/30VQqIVsn+zZaIQGrjF\n49kfRWdYlqaOtCACz6quAQjIcHZETbXo1PBhoSgDtBp9BZJBYcc4EhnhHYFx\neUN6s/Jgu6Qv5tcM+vOreNyQt3KAUW97N3m/1nE/lCnZjQZHKbY5iuU3IIfd\nZQ1lcoMBHZ7Khx/R3vnlo5pMQcUS30IS2Qbnyh8A+4rKOSSJ1Jan5kro9uU7\ny07+OU7KagKZX1GVAJcD2P9gLMQ7Rsam4Y0cLCDSh9Ku9c8zwnJNLuds9BRI\npsU+XGv11qvmuqiQ8/KPM/8rC3/50HX/2yLOLv5ZNa4NZcvi9hy8+SWKqSky\n9HRt+ULdzLVJFC/TE7Fh2a4/ySC+w0zXnQryrXErOXSxeQBRmFEHLmwD0Dq2\n+JhaQ/pyoGYjI67zHFKyzgHdqmPOu6v8cnp7kFxlR69+dZvALwMZDJhgaSdN\n1pY8+ygVETbXcam/YN1rha9M4muJVVuYeFxr73GfJLT8XLWpkx3kBnHUDs0D\nrrK3HFo1u1MpbRxiwiO+9uR2ZwmZj6CO90p598N3cywzQ1Rm9axNSuLAGFFo\nr8PW4z3ycUjBOm7r+SroTk2PgCrGe/FrMIvFUau5ZH03cLu1xo556xx7ryF/\n0p0eMSI4irX9lw/rxJz3tOU15Y37YvUCFN4zL46tgxIRBJy83UX8Q6ULvSwx\nDWTZ\r\n=31Vw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.5b6a46016.0","@material/theme":"12.0.0-canary.5b6a46016.0","@material/animation":"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-indicator_12.0.0-canary.5b6a46016.0_1620231357529_0.6955659444569404","host":"s3://npm-registry-packages"}},"12.0.0-canary.33c9a737a.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.33c9a737a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"403ca2b81a0c2dfe717c43972d69e32bf1e34927","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.33c9a737a.0.tgz","fileCount":38,"integrity":"sha512-wnzLqNCzmHDLwu93M4Ntv/VXFWaFFY6zBBjYSI4+GjbwdmyPWLQq3ozHroAtjLD1Wwp4RaQVPugQb4cUM/mDEw==","signatures":[{"sig":"MEUCIEVt5Du5DVPALSu0Qq4BTVftpo2RMaFXOdahYyZsM0b9AiEAlfGmIdfuYx/unMQuR4ZVxb3XGXXax5t0ultgujtuyjo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179861,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgktVaCRA9TVsSAnZWagAA234P/i6fn0UKgJ0jCUfGs9Ey\nlj6goQ2J1H+OlgmKp+U79NeTdiTCoPaYyHTMVnq07zCWIK5diJWsQKFNXAbL\nfIph1GBj1l++i7uq+pbD4zgKD4e6kzebqywR7BTaQlwcYF6cWYfSL5TlCsKz\nyKKSsn7pRlQJfs81cRt5zTMi4J6Q2aqRm5cRug7gQKblkywo1PgPj2TRPQcU\neqcWGySeIQX0tYIPGKKmK7YRYzmDR0Bg8Bj0c+OqRMVQghDd3zo0fc3kMYS+\nawQ/tC6IACzW9qKyVZ3ZYrgJQnEFpdMdqPlsV4ldSh0l7jsETaoFMDh7aP2K\nmU4yzVOQbWwyVEXDRgkpFNJMbfjLcYsKTREKQshFWPuT7j592mdKLT9IfYee\nobjKkNu5kU58fCZp6BKmR+arzE0mM9+Bk2/6WnKsDd/9Frw7tZv8iYhO0KVB\nE8PPbuXFw3rMyAQiPvRFxvljLGFRjSccYx++mueQvWzCxzowN8RFusYXPFqn\nosFIYYkEve5NiXgNNXGgdqCD/2U7rLQAL/nrWhcOwQzooMGuc5+D1b8GHtr7\ngQgCQRKSC599q5Fyjct3ltLSaXk0c1pnhpOOzt9TZtyYEy3abT3BQpRrVhbI\nR+397/gYd5L8A+Ywf6G+dMKHqiJOdi5I5vWBaSC/jXe8mivMCAy8uGaQWUKx\n4vgc\r\n=V7yS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.33c9a737a.0","@material/theme":"12.0.0-canary.33c9a737a.0","@material/animation":"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-indicator_12.0.0-canary.33c9a737a.0_1620235609569_0.10008232128209538","host":"s3://npm-registry-packages"}},"12.0.0-canary.9bc0effaf.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.9bc0effaf.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ea9723d6c5482c425d8358e8b1763488176ea2b2","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.9bc0effaf.0.tgz","fileCount":38,"integrity":"sha512-xZp6tA+d3ZZVzZ2d0xBjqjT3mwltwmGDmyR6fPiYAWjtLoZA1HY+BjE7MaPWjLsg9+2YtUsyDVzmqC8j5/izLw==","signatures":[{"sig":"MEYCIQDz6BHI4Y7qskHHm7CizI92fhNH/RzcQSbZG/8ubk3VNQIhAILlgENaFGOVfZnG8RnLax23n6k3dGyJjqC01bRUJ0uY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179861,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkwc9CRA9TVsSAnZWagAAOvwP/RzbALfbTl1aD+f/ET63\ny3KqQbZAQb/G7UgrTuNWoQd5OkvHTxeFTVrr3ZEqtev/b4BMVw+9wHnKcVX4\nexx1wZ9FN0RH8oxdO+p3GH7+ebTmX0IMpGXDyimL1rHX0FxrLTiOYKNCAXqm\nDq+dOOvjc4+NhKnnl6DRhpvFAu/G6C551zBPfKTbJ8MrGThoUG0dFtkgFwsO\nWaypChKE6m/uDATrH9mXcr+cr9gyjjpRMqgKCpHvPsJ8ErUYj04/5JUEXl9x\nOm515k0YOqxIxyYPxqqGLHKS80aMG4WgsDjqY18ycenYa5WeH5YxaM3ajfzG\nOAFLYL6IR/WbNIH0KxjA33vgY8hmsCGZdAiD3Idg1QfVrE6g+vdGYHewZZrG\n6v+8nOUe72eWwbqmzF5gmHvHQ+ogQsv0phRMcPrAqXkh57qGiiDCdZhrZvJ0\nNRBtjprulJHJ9aF3jLIHYrupbpz5ib1DZT427mtioym4JADvWue9X6uzLKuF\nGdFn/oPQ+/d88jV1OjRH0RuJiuVZ0bcNgrRZpH6IigSkBbzece7+eIpAvQY/\ngsjCViuGR7M7PyPXw/jqMHMNpYAKjsr92MlIuryNDIUYkUYqYLk7R4wu4qlo\nPPNogxBHGOeFj9cuXOqa1eS3zhlBbuthy8PT0e57Ne2JG85aEqypehqp/NkI\nMNlX\r\n=AFFE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.9bc0effaf.0","@material/theme":"12.0.0-canary.9bc0effaf.0","@material/animation":"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-indicator_12.0.0-canary.9bc0effaf.0_1620248381290_0.3508089696643193","host":"s3://npm-registry-packages"}},"12.0.0-canary.a1e0f2af5.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.a1e0f2af5.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"fce08d076eaf6738d5e63efbed4e186c8db9373a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.a1e0f2af5.0.tgz","fileCount":38,"integrity":"sha512-kI6pDDzZC8jg3CONoar37kzktcQjP8CZigBGw5sAfzFjZ0UQ6TEVF8sS+2bAb0aLDYN7tm1OWBsU/Yq6bKCNkw==","signatures":[{"sig":"MEUCIHrnvLV+rg8JBbKtwv6RGhGWx75F4LKAQIWuJxwwMat2AiEAmGJDPdXGnNSY2rFE6vkR1yINdenr0Hg6/04LvRpwmOs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179861,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkxDSCRA9TVsSAnZWagAA8hYP/16L8PQgoaOh74YXcw7m\nSbkR4CgRxte3LJ/lbgb4BDEEtkPyuErhmxzTrdNCm18F57TUGaLAegCuApku\n09I6NNr/1CliRcxXgUMfMatUSo+fDQsz55bnkb/d8aBTLseqzT08s4qkfrVQ\nksTSfqe5/6DnPntBD3bMBxrJT/5P1CnZmK5Te7gkH/QSdOw6LBMyvlOq68GD\nl0z9R5VHOK8hlTrUcooSX5rk0CQQjeD5MQoK18svywKi8CJSwPLD4WxcklbG\nqlJiM4+cjv4+CxM7qzBRl1hXff3yAHo+Ur4g35tqmo7j4JttLb3xtuFztPlJ\nA71ygW9C5J3s+gPE0ptW/jjGyWF/vueaW5lHTYXcHZVtiEMLtwRuO2UBTuVw\nvjBVXAspsMphIbOv5CogFjVHxU1g4u6L75cJ8L8a76uo0w+IM1enMU8fnuYW\n43zBrNnr8TJ0FzkwU8ot84RJrrIyZodkN4xVHN4Shslg3W9uBunXLu/0iy6P\nMYD48TwGVsk50QQPQtHDtPxNqyT/C/qoKOTd9izFjAbZN0Q5QtpzCcK/NBlf\nlI0QTgutGG9nkUTPNy211tOd82t78KoDVx1pCyZu0BQomEKWkBpOp9yVoKLU\n+6ueHzNNCkw7OCf7nH5eabVRJCwMDz68rPOmNKxItg8frkhSOA8UylHLdS4M\n6hpt\r\n=hqH3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.a1e0f2af5.0","@material/theme":"12.0.0-canary.a1e0f2af5.0","@material/animation":"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-indicator_12.0.0-canary.a1e0f2af5.0_1620250834248_0.2053229713988578","host":"s3://npm-registry-packages"}},"12.0.0-canary.06930c96b.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.06930c96b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"161e6301dfad407c9d5a360cb4d51c56134f6ff5","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.06930c96b.0.tgz","fileCount":38,"integrity":"sha512-wonzX8+rsLztRq4kb2oHCdPEIOKMyiV25hDum9QVyw6zZfz7ID4zVu56Bc5PHF1XDiA1nlgSBXLrjPH51kEeAw==","signatures":[{"sig":"MEUCIA3rBI5NoVMVV0pmGkngCT9Eph7r3peRLIZvnd1QfpyIAiEAsdMo4RDms0lIHYK5yIzZSv8y17Sn6/2y+tgenGT2VLM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179861,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkyyOCRA9TVsSAnZWagAAz8MQAI+qpFH9jFxvOvRrAqmg\nbt1D9NMbnmrBNQ8ivPmGtNzBMTFGZBcY1b9tAg7536eW5aoECac9Cld6KZZz\nhJsD9kq5vO0+JDwyAPBdKVFbLufTzpxqBNfbxDVb89bjET0cTVBZXP/yoDvZ\n9UoEDBvirrWcHrQdL1NmUYU1hDue952AA5eDdmGVV8gTc/rPpmzLM6DQ/D0z\n+kvBMISoA3vJ9xtBUWlJYMvpMzDGOBtNjL8LaKxSAHAVY9RDAYk8cO/TQw4J\npHS2C+tKPJ4DtnYuSh9Chribrez6M3L3JSsVjMOtTiahTdIcSb5eC9/0txrh\ny7J0h4o8ah0RkmK45aFTo0CTcg+p8ZeqIqQY33v36LRQv3MmnvZxJuM1tQsE\ne/JjYQ1TnqqXv1lWwCLM2gSxebhxNevojNzc4rsMhEib4bD5ho1PKfN8tsq3\nzcTUo21+dSBsPNqClrrTLgmMNnOnoyWSLtIJEkJjKPz0mmeNaiThTT3dKxM3\nPLt/egu9eGIbMJyvdPhVBMiftKzYJ2pXQ57CIoDQY9Z4KuhrJ0zAcXfMrTIK\nTvTDjYjDn37MGsQ8+kw6+JUw8ekG/3PTF6NauABOLP1Rr+GGYghC/YS7TXJZ\ngLNyKcvDp1/nuvsCtXG+gof84IvOz4cA+UgyWuatQddjOgDbpCXibbNNRNqp\nqLM2\r\n=W2f3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.06930c96b.0","@material/theme":"12.0.0-canary.06930c96b.0","@material/animation":"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-indicator_12.0.0-canary.06930c96b.0_1620257933864_0.9976981677499404","host":"s3://npm-registry-packages"}},"12.0.0-canary.03f525f9f.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.03f525f9f.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"3daec01cb0c5fbcce5f3175c5be3205db92ae33d","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.03f525f9f.0.tgz","fileCount":38,"integrity":"sha512-gci8BN0SHKgPUWemKsVeJ+0vesFznT448kkG5CJvtdTDKHhRQrz4+DI256mz3O/EdngetepP9qx0eUFRAce96w==","signatures":[{"sig":"MEYCIQDcRBZBLzovMhDRgnGhAoRIE3z9cGQv7axvjhO5tf27hgIhAJoHC3ey/FGMAig4okSYAf6CZrPrOQvKWfZuHnv4eJRr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179861,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkzhzCRA9TVsSAnZWagAAw/8QAKBPSi3Z1zw+V9oRFUEG\ni+EEGPqHDwvZ4TEg2XH94LSrzsnmU+DX1WWCcrHoYQprehvcD6NDCNU8zLSO\nNxwvyZulXOE0ZTVXgV7t4HdtdnUFtC0XewFFJ3ZNC9wjTWtrr0U+0ldWs3TI\n9w382vT78RHunhl+PFPTVKQGtuKyNr6NY+PhnKjOELwi5syOao19xVFuNfkT\nQlDMpc351ja7Us86z07Vc2iaOLWP11Okq64pEof47h0rQz74CI2ic/sIfpB6\nUqHjUBFTjM52cZ0ZBjQQKh+3amiINOd9k9Lr5/ObGobKVDVLyB0Wxx642Gcx\ndqaKSNla0kwB67w4tzDs17eiJIFCaLBXVTcH1437XZIwM6vExj0Bsne16xQ3\n/X9ATkcpmTfYhB9qYFKpHdnT4pibJjrAR8O2WrRbAqMdrFu3cm1+F9itH6iP\nI4+hz3C819SuJgCl83u057X82aBKaEmaIHS7d45MT6iKNVMMhCrJ74wZiaEF\nWAWNbzZR6zHTP9vG/t/Xf93n5MmeQXkphsQJW1Y590D7y+70KsPzVcuMr37I\niBn213J9eid0AgnYa9oqNIUeENNBBFM2kThHzp1XfUxJ1GxXi5/fQn5a8G+i\nW9LgiKw8O3WqE3qXtRfm3sVUmP8aT71wvCEChDstvs0fbaoUgCJ+O1Cg/MdM\n/V1f\r\n=AczO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.03f525f9f.0","@material/theme":"12.0.0-canary.03f525f9f.0","@material/animation":"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-indicator_12.0.0-canary.03f525f9f.0_1620260979441_0.047597662084892134","host":"s3://npm-registry-packages"}},"12.0.0-canary.e82ba2a26.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.e82ba2a26.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"98840a6013991a4c5abe248f0ebafdb5a3ce6fe7","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.e82ba2a26.0.tgz","fileCount":38,"integrity":"sha512-DwlCcm+bl0qVsAyE5v2za4ma1c4gPiEL3eH/VCFYea6SErMTNBiuWb1eAuT9f3FyVLn0U3aLqwZbw0O1s8lCPw==","signatures":[{"sig":"MEUCIQCf31fVU0aG2znbo21idQ3hz9FFBkh8be5VJpxFdqeIYAIgG+8/yuK2RedxhqmnxVqWXvesJBQlq1KR5j3rYUwqNBo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglBGRCRA9TVsSAnZWagAALGsP/jzHYWWJJljvop4DSjo5\nJSRU0ExrOEPwq6C9tIrMpkcAAyJN4CVERtyNWfnB402imyRsLlkebtYXO4YI\na6tRkotXrns5vgHTnIPMnKIZixgFbE3FcgDXupShOa9erIJ1CFSuPoxneCjL\nfmRa5gThDlYPCUE9xHzKeaU0Y61ymIrxOrSZFLdPDuih/S61eys9IcCa6Jsb\nRphdVi37BIj/tExqkyfvrg07YocikeYdGkO0w9N29SFUV5SHD95eYYNUMmCx\n+AM86iL5TMjPBaAIEIU4WPKHO/pyXzIpBQgP210qCp11WJdYBe6o9nS4XbYW\napzMSoYeOTlPklRnGNm98ChH1bsJGYZllPmydsEagX19wIjUslDN1kBbLcjY\nKi2kpOJEDePBJqdZRALnFgg1Ah4HrGjyJ2Ptdbpnzhui0o1s35SdRuYzpFoc\neFEpD0lISIVu2zYdyewg2Gv0tyhDEjUY2kjA+vgFA1I2YF/vnZ9sbMSknKdq\n8RKEBxi3H9Q4gznFidBDooDVVOJpcrnSEN3LDe/IHRbf6UvTphW3URpkZLw6\nLNv80gu5vf8SalnfuM5ikD24WVgpiZRh65cCLySk5UTX9mwkonysBEy3sHia\nYl90+bLoxM161xNMf12ACn41fBmD1nazyek296sUt1OAMKlBEqFfGdbtxTjy\n7rWZ\r\n=4chQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.e82ba2a26.0","@material/theme":"12.0.0-canary.e82ba2a26.0","@material/animation":"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-indicator_12.0.0-canary.e82ba2a26.0_1620316561045_0.5642921735319915","host":"s3://npm-registry-packages"}},"12.0.0-canary.fc7c4e5ce.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.fc7c4e5ce.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"3d3fac7d0e79292f38aff2d15b05512ee861177b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.fc7c4e5ce.0.tgz","fileCount":38,"integrity":"sha512-5hI9wrFA+niLssgMhlb5bUurD2o77Raug8iEDcJgiPd/cGXYZCdDxxQ1UxhCwsaLhuxW+evKDHxUjTfnf6Hy7g==","signatures":[{"sig":"MEQCICjPkJa8ggV4gV+gmTYJAARVm7CBKmvJ8qK1vWl56hadAiB0XnVF0GOg4hbGjQXV7Jw/di8R9Ic8k5DwpXyNYR6vFw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglCdYCRA9TVsSAnZWagAAoRUP/R9Ta6r60fwmZLlQY+KU\nk/7LiMEw1QJipXRZTdDIvg7lgYIo7bur4gJXm07GNZeXAOTxAqZJ4iKN5d3Z\nBN7k3J9IP7ywPVDMfraCWZ2ukr+2Yle/UlIzQvX4Hg3jY4ZDZ4rd9E0TdWaX\nlXsM86xddxDSJdFzU7xumoJn1slzI/TqlTTOS3GcqSBrOSofudMVcuIxqRzf\nOIOAdRXNVcbUsVUI2+jLaSHrdnFKyjraTftsNKQaBb+Khz+Wnq9+yNXTB9a7\nWCQXYeVgWBgprkTyfbdF3DElEE+pwzqB5g04NvneiZ6KcXY8Y8eCj3+y3Hf0\nIu2nZb6gIUtgvtx4+tM42CP+I7zblC4CyFkYyDc9+l9LlTHUe0gZy1Q5gzxL\nzONB4juU4yC07pkvmvxhmP7m7q9qPpfwbJLWMATfXemRAbW1mqqfJssiVIYi\nhv1a+IfJ+vicJh4BeW0x5EKIa4iwyMIH2oJWfOS4qdXPsmildKUidgBvhdoi\nWf/Akddi6qclPR6cPcjvnq9BmVKieJzMMd2eVlO8qtrwzjct3dkrz2C6ytZ7\n+M8ZjKE9VoTpZMVrZYWnHxPWfiCxq6q8tt4PmJZdc/Jq//XPvJ549gfW6Li4\n/E+2RmirtuZVJFrv7nu9CJQVj/OLTP5kIrfJcYXeamjFl/4AjTK2nL5rYwdE\n81nr\r\n=K1AO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.fc7c4e5ce.0","@material/theme":"12.0.0-canary.fc7c4e5ce.0","@material/animation":"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-indicator_12.0.0-canary.fc7c4e5ce.0_1620322136562_0.5667979269897965","host":"s3://npm-registry-packages"}},"12.0.0-canary.65c04514d.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.65c04514d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"f17bbeea49bb6964d44bc77837fc62c469921870","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.65c04514d.0.tgz","fileCount":38,"integrity":"sha512-10SJe5XS2NcXcLNi7GMHgMLIXxQl3R5xmd+WqfKQoWcPVaP0tiIi1BKVBexQDxg2VLky0Zjt0GQODcUuQefY4A==","signatures":[{"sig":"MEQCIHSTHlPf2DqHcggUg0s8qMoktTNlRMV8RnKjUsuANSxwAiAwuEysu80yInO9s0Qtf0uSiOpr78LUbE8PqSZD3BwaZA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglDi7CRA9TVsSAnZWagAA97MP/1JQWOcjI0mr/5jalxyc\nMzflORCmSCzMCWiuUi02lOu4PFlE7nKQO3W0nchg++C+ZgqyJ/fHSD1jFmck\nDhv7CWifuwMD5D/o5r/WuG4YgKfo8s5BAeYruhySZ6sVSB0/zD5jNYiO/mGU\ne3q2SW3Z48qgUfheFuEkn8z79xmznilD/0kevLb/JZqSGJXkZK7Brhblmd0Q\nILjE11AUZf5ki7n5NrrVVNOySFTL3L11E94e4s1xR2t+64EwK0hLhYOxvvzx\nV9KwOTML1G0vTFPtnj/ul9sV9rv+5BCe7h+oQJaQCHq1MTtk5LxKIGT8qVt5\nRMxligqIz9TQpmj2iCQblrEc5hVQMPMETVO+BE06MxmyzseDzQUPU9qO1Jrw\n3ua0qop+03tJ5aJwVG2gsT4264Om21XW/mXckVFYdLbkj9URZg3It4gXBTBk\nHkp/SAGDMEixTCLorMSAs8cKmCBQJU7cJXsyP9lLFmyCVUPWXwpxOgrRHXSJ\nIB7oBNxSv4Y32ThfyfwbenIhKx5Wq50+qgkPEtt3UdsWT5pPl3cEZBMv8muw\nucXY3XRYJBrVglRdJ6F4OrlJ09ggNKUh0+Mhl2lBPnAc3kH0rNYUgk8wGaFe\njsgIOU+XL5gRnTZjSJW5CRde4wiq/mEcIeROrbVgEnOyoK3iO9nxwYgglOcV\n6s6w\r\n=WO/M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.65c04514d.0","@material/theme":"12.0.0-canary.65c04514d.0","@material/animation":"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-indicator_12.0.0-canary.65c04514d.0_1620326586518_0.6456430753272271","host":"s3://npm-registry-packages"}},"12.0.0-canary.c97779ca6.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.c97779ca6.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e3a3f114c8e1cf1158e01018bc60bb35476fc339","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.c97779ca6.0.tgz","fileCount":38,"integrity":"sha512-I4MMelKMfK31kNf8WccC7hTHpEjbeYGfOJeHsY76o3GKP0q34sBodGgJ6luZAD0UEBF9sSVMRQcDP6FDMS+g1g==","signatures":[{"sig":"MEUCIQC6csCvpJ8CQLGQxN13k6z5M6cCwE1Mss/+B+3r26aekwIgdKj3InC26UVO6mkZDA4cCT8toou+Hd0Yekbsu5qKvaU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglGLKCRA9TVsSAnZWagAAMncQAIhsd2wt0C25zeDhI4dj\nId7MMxQ7gIreLCLB3S3eh+7puTi7GVDUfHXvZgpI3mrfOXYezYKfMAHIoIMP\nGC9d6EHDfEQWFab3L0nMOV9Ejw0zWXMWGv1UBMAPu+F6il2/PU1y7BV1WLMM\nB+ZYIrgcVVXtgA/HiQmvClp4E8ZGnSQExxckaSkqzbQUTCNSK5nqT+MecxN4\nwdq+zwlQ9OCGQZWMsCSXJtCr5zarCkJwXmgF2oiPb74jG3sBQkqJYHTM2bba\n+q6VLZDNTrloiyNGJsYFUqjbU7OsigV84Hnbm9210c78mmmgUO5+3CozaUfr\n0mPKjsa6kJqes6U+C3tZFJaXCGzmBJaH6Co7fNx+3noG5sZ6CBO+0J8lBs5F\n//66yKEGVgfKgK62CfYMPjiu5+D6Hu1oOXOZR/YCxJS5d3DTUKHKsphFeYmK\nCJrGVajSKS/ac7v4HNTPKOR6zYOI7oPL+23PaGMJc0HPNGcSHr3Wp+FaAmRD\neGLowBO65fNFOi/f63ANzr6uEJ5cX+yupwKxC9ZpcBjEiExeynKHMd3fuECc\n4O1M0KWrC8mlZF8N+WWSjuY++KKHdD2mt7h0asSDAIt6io9nH3qEjnb40fvB\nXBQlCDCV9gcoeSrrXwESU+nCk+/Ah92Bu4jpd3H3prlKjevWj7kvK5b+o6e6\nbqCM\r\n=5VLx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.c97779ca6.0","@material/theme":"12.0.0-canary.c97779ca6.0","@material/animation":"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-indicator_12.0.0-canary.c97779ca6.0_1620337353522_0.06448254634360384","host":"s3://npm-registry-packages"}},"12.0.0-canary.869d890d4.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.869d890d4.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"7e7a2732060b4fca992498a8c6eadb1eafb7bdc6","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.869d890d4.0.tgz","fileCount":38,"integrity":"sha512-EOq1XBxxVjU9aOLj59t2kPZ7b/b6y7fRvn1hdeA/a/uC0vDn0QPbUeuBEMxs1wEqEbqqeDTCplE2HZapTZXRVg==","signatures":[{"sig":"MEQCIC7eJ3xvk41OhbX28jxVBknfb68sw19lfMvFCAJt127cAiAQvPnEGtdll1Hz6Kw//WxcXyciOJEI3MDI1Kur1UsSCQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglVpBCRA9TVsSAnZWagAAo9wP/2RpnsNZ4/pKnPqhItqD\nAJWLjosdVAOhVpteFMWecvX2Z3foLPKpqQCYoopIsdPwzaJBF27tp0p4xCQI\nhVES94dmPDpRdWLff8rFtZr/zOzT1GPNUooHUVpYKUgnY1VQAamDsMw6WJdT\n+cJSQetuaV2PzeKLUav7fYjhvGtl6SxR6MjOsKzuFgptJMOmsX/MLSN2bavj\n9tCU/NO3VoRhP6+Xc2yrN4eiuBhRXMWCc0Xy3DBLroFaLtO9y/qGgdMm5U+4\nreyYFehEDqD2mJuLfQK7NveZkKXI0fqQMxiqS1a73Dr9IEcPTC2/BebOko0y\nyjRke593eqU5sI6QGqkFVAzFt3BXjP553WypUcYfISB4D0I8Ed7X4Ho0drbO\ni3XvKw/DKfJTkrwdT94coHuX30T5fSvdgau6QWDm5m0/a9lqJ/VD/3rIHD5a\npEM+oLhEWbCIpOSXh+hsizQMGgHIdghSxb18PIxXFxj4U9qvCDSS8yfrOQG1\nSPOQjVHRbDS8nDxWe/Ek+jC8Aao3YNwpbAAhh3PTijtD+W6GEAA0Pjd2Zq55\neGOqUPiQA6vIBsQJb9rVika2dqO+iEiWjDHZzH7L28FhkvK8A0GpGioajX4e\nL8gl3OyJl/H1BgFQ1tU+hXhj5lZU620HQBWd2A0gz1gXNnycHga27weofH2J\nu1T3\r\n=yccD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.869d890d4.0","@material/theme":"12.0.0-canary.869d890d4.0","@material/animation":"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-indicator_12.0.0-canary.869d890d4.0_1620400705254_0.010803976401633664","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec22e1da9.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.ec22e1da9.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"7234919e986802df632f2f3625b918583d1ee5a4","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.ec22e1da9.0.tgz","fileCount":38,"integrity":"sha512-Fu9V/E+6PGpQ9ziOTIJYpecK4A0to7qu0TWkH1ORGYG+mRp7D4F2cgTZnpdeUBsWpdiQ9QA5G7vCGwDc+Ms4Jw==","signatures":[{"sig":"MEUCIQDKyNa/JrnqZhc6cSKOglpAyaBOj2E7kPnqGrtiy0RFjAIge7tDiDaXTqM+5bVfokhp22Hjf+shqTiBFPHc1bRRzhw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmXoQCRA9TVsSAnZWagAAetsQAIdcOD/7bAwqqSYxIhiK\nh2brjwTRiAcm2PYw2w8bVbfv9nprMexxe+eyM9p++I/j8eJQ5eVn1zj9/9Jp\nJ7xC4bqX4cmjU/dDqXrLddMeWWjPeHSO+6IMPHxoEM9/yFTdiyxjCbmp3sT9\nwIrMow3Cin0SlG2YD9toVflzak1ekc3zNefFCs832aaPlr5CDbZe6XyOMacY\n+PTRg9rv5e1a5l6IBjBUb5M41NZXIR4du/ioUO4YJqmV9vQs2AWNry1QN21A\n/SYErV+BlpGozysaos1kfq0Qga5lii3EodP6G+dUGlIujFnRn8Ma3hfwOpxf\nQ35NIk8GkodaeiWTfwzCO0x+e5rlJeagK87iUqAEXsSambNA2CJPO9lbESlK\nS/HAhLwGrIdu5t+gW96tD2UZrSUAPNVLGKgXXOf+d4SPU8SAkUXo4cUauGWp\nJ9RBpw5pa81T9jHT3KVw7kwGlAkKVqBv4LPNtDoU+6PqtJlggebnGqeiD5FG\nHfDI8YcO6N5tmMbVdgPJPcXbESYrLzitQ4RNvXmdFOb31LZKtzRFgaKxFK5I\n9960ptva9laG5jW/HHl5fGl59XdHm1+IldDBlWtK7Lpn2Xy+c7B/4IIPPFwS\n866KQJauu7nGpmeQQ7lE7KkxzT1vTw2MW1He8opdXZzIxwH5tDgdTzOWLNHn\n6jUJ\r\n=R2Vf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.ec22e1da9.0","@material/theme":"12.0.0-canary.ec22e1da9.0","@material/animation":"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-indicator_12.0.0-canary.ec22e1da9.0_1620670991922_0.6302806365587448","host":"s3://npm-registry-packages"}},"12.0.0-nightly.7427449f0.0":{"name":"@material/tab-indicator","version":"12.0.0-nightly.7427449f0.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"220986966f96fbf34f8389ecc08f322c153ede1d","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-nightly.7427449f0.0.tgz","fileCount":38,"integrity":"sha512-vh5fUwkiEgqdnHLMrthKRPRmh8sSabAdihKrlIUlVqlOM6ZVLXxjXeF58c0ZllpMFzmxkJm2RXXZ9z4BySR1+Q==","signatures":[{"sig":"MEYCIQCENPgcRUxuZ6TijSvfxR7UtyWZC8RGAYquFihGBmo+BwIhAMlKY4Z8v6yvK1MErA9T9a4kQjptnUXXZ2LzFGeuAm2/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179815,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmX8nCRA9TVsSAnZWagAAsx8P/3GyEoBNMzzDhGlGX/fm\nL/x1pP+rQGM82/VcFb4+Jy7X+MaREXt6QWdX0tJNCmgUqe8WAWalM8y3uG+H\nKLxCV7aL5ZKxm2dpRMAxFvzV5TInkgQo6Ir5hii3CXhkqjsDZRjYM+HTJJCi\nh5a8XJaUpGrcVXGEd9ByEGPMYj3LYittHRxwWESHNOpTXSPHwT4cj2my143L\nYNiw8+iNSoOIkun3948WJNaeiygV4KpRxHkgg5xQO1xqK6/5xvrghMkvbZrP\nt74T/GHQYJEETPaXnANtGeQAA52Mxij+UMD++vTOxUw0RlEs+ffgEHs70PaI\nKWq4ptpAw8nWeSDfJAj6LV2PjOl0I59EOqzanS4Q0JAJ3J6JtpM2Mkdqx0rn\nt7ftIAajqLnnvk4UaxGGdn9feo4IMRQrTx8nGcHlOHnsm+sv/lBavz8CMTNO\nGvfVeu9GE7MxWQ5lfk6sKS11zQRShZrfU2YNsmis1nyS5DjpzvkHpPCLXzKi\naMuaXwPvbyAzvVL67omQl8UVBP+rBtF7OhMGcQT2DiL79AiyW+4Q1dgPcySh\ngUttDtLxrw2ew2Fy1Bomcu43w2a5GQE2yWGccjF7Cm1eTU2nWfY8Q/vVGHfw\nfcAc8CANCr8Hjt4HBtwPabVsNV7RZdpfmfUsjMH0D0ji/8BVdIhn0Pc3tTBQ\na2lY\r\n=UGwA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.17.0+x64 (darwin)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-nightly.7427449f0.0","@material/theme":"12.0.0-nightly.7427449f0.0","@material/animation":"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-indicator_12.0.0-nightly.7427449f0.0_1620672295053_0.5685916816535137","host":"s3://npm-registry-packages"}},"12.0.0-canary.957cc3bf5.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.957cc3bf5.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"87544cc155b711321275d29a590c332ebe943f20","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.957cc3bf5.0.tgz","fileCount":38,"integrity":"sha512-ndxpdM05FnNKEGXyOBbV02i8fW0DCVBXIUiZ5p214vt+nGWNBMKj4JbjPwXjyicXGaKe5u1yTLG7vwiCEhSbrQ==","signatures":[{"sig":"MEYCIQC+lHY1lBN21TM/FClc/6e7rMq2uHStuNLKq2PlgDuOPwIhAIe0sv4ZjltF2EJZ28tLG47Yndf1Ij+aVwoclKFKk52D","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmawKCRA9TVsSAnZWagAA0JoP/0DSC3CgZHuAXkOlae4w\nUJWBb2RatA5F1UhqYYJbEdFRe2s/pexPIbxCtRXD4MY6q4oVTCvK8pNum4SM\nhJpTVfOjF+eccCCIdHJaPZB3K4pZeuldVsawXJvcxK9Gg4PQj73qUINW6eXc\nq0W8Vm5NV2oYjjsTIvgbI+/bZ39C7mnNayG5sB51HPG4BNS6uPGnIZgvxBZr\n3w6I7+ficllBCnxepRPaBhyPAwgSGljRtKc7MX7+EpBOZ1w2f8CSdaX5WZoE\nZ0eA+7HaIQ+DZSVXipAJGJsGwOONsECZbBDR5wqs3BgJYvyL4tL+G08GBJ/u\nHqRDV81vg4NYN/XCb7wt4tUYwxvGf1s3B2ne4AxPmj/jFzndXcWoJBpbnaG+\nxWBg9X7xQTU1+pfLWh0imndsiA0xArnmfPuyrNFUOEi8JwD6qEUz2UfBMj0C\na5xhzOS3ITa2YYYq70Y0/DJwUwjGob4b/QKp5YALh8JYwTneitXsech75DUd\ngzjkm4xa4wr6ku+HilHKst9IEkOR+PEtxBYc3xLRJW792JAq4/KMV1uN8dgS\nQZIFz/5Ro4zomzOyl8l1kH6OnOz8cyaHeFWk8KR+LPLigsYm8R0R951JHg3k\nSWOABat1/mEZoSu9q6VbNLoq8dwy059a4wCeFlz4j82paVzPJP/EXusir2z9\nb8l4\r\n=taE3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.957cc3bf5.0","@material/theme":"12.0.0-canary.957cc3bf5.0","@material/animation":"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-indicator_12.0.0-canary.957cc3bf5.0_1620683786382_0.1304417475829882","host":"s3://npm-registry-packages"}},"12.0.0-canary.88a33cd70.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.88a33cd70.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"eb536394fbc90fdc3846794163cc4212f8778e92","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.88a33cd70.0.tgz","fileCount":38,"integrity":"sha512-eswr3/142HHKjY6KatqExhedmU+aQwy0E58CK+UEP+Q9rtqmEe3n43wWNxM0qq8HOiDHGJjD6lbL4fceNG3xBQ==","signatures":[{"sig":"MEUCIE9MoJ1zc9dp4X4cswCu6kWYQ/n71jEFM4sxat1B98POAiEA0jw9+QY+GyIteMJJWa5rMGYJXPsbvYvIgDmjo3T2K0U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmcsDCRA9TVsSAnZWagAAAP4P/0AsvFcVv7cVfkYk2Iko\nm0wGxKMxD02rfjc1pYdaK2OaqvLE87Zxh4IVHPNqpXHnRLfj9rWepYfycA0p\nX/z1E1CoHjAoQYmGaGOF3yXlKN7b8TMaw7Q5hn/yx8VE3iB4/olY2KsRLL+1\ndb6MD6IO2QFIE+mGR+NIJopt72jEZiTqVb1JHBnlcnsq5/R9ezz/kYL8qIwN\nmazLGNrR/1CZQZHQL1dt+S2ZvnnP+yPY6Sv2zfXOsa/OVz0E5gPfe6OiG7z+\nU2FCNJ0R03M7ioBnoQxx4Bwr3WxDTboHbdE1Cb3OywzeWYLwojvr6RaNrDdg\ndmPX5JIcNjIHItS5XJM/RS/TSJsYfdoHLF5Ft/22K1s0oM5XQdoZqjcq3m9m\nkuTDY/8nL+zeB4Oz98quQAxoaWA1JHis7UsXrv0tVssuZHGCmFu24AVdSuqv\njruA5khv99JxhZ3kPIAUFgkaPdHVyrvyWOOK8tTI5I4sOMe+Jt9HRqh1WPdO\n5dhXCuQ9HGzEdkiFJ0TqZQat9FEG9uu14asW6+1slCbxHNlKo5SZj0BCaHhr\nhz+bsPjBleCiv2Qdo4f//2x22o7Ab89Dtct4QIBnVVdTc269jX8lyKd1sn1V\nhc5GGDuZLlTHV5bKnyz8XZug90K9PTrX/+QGoCHQ7Tm+KoE5WIYziNimezPE\nBC6c\r\n=Rras\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.88a33cd70.0","@material/theme":"12.0.0-canary.88a33cd70.0","@material/animation":"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-indicator_12.0.0-canary.88a33cd70.0_1620691714604_0.39694271293269323","host":"s3://npm-registry-packages"}},"12.0.0-canary.d20dc6dba.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.d20dc6dba.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c27f70b0e8118bcafa5214d7e2dc9ff6d74dcd79","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.d20dc6dba.0.tgz","fileCount":38,"integrity":"sha512-nKFuaFA8Maxx3nQ8ZJfICddP8Lx/ygJkXGoqACaI44kQeZWAHAGHeHW75rzCiTYi2BKak+QYuTwSfMspQfZimw==","signatures":[{"sig":"MEQCIBUPmUgPjhZ8ftX1+zxZ+mcfEUn1IJiMtRZ5ZjpRGt3PAiA0KDhDbQDvSeD9iYx6/v8Q2T4NqaBXqm27a36ecGj4AQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmc63CRA9TVsSAnZWagAAVXQP/2dxT5gMS5oyxww8WYAO\nT+iFq1GDN8yoB+tAntFOx3gzI3RSSAeGDGKcqMLM1YkeP7aofdYxxlz/wBMD\n6p2J5DyNjgUVDFPdqgidFK0thagYtAhMCdKOE1l4yN48hyCDrp/ZrnRZK8wd\ntJ9mCFhSuyWOk1fh/pbV8vTXA2T+ny9A3Ddz0XoDO+SLb6L26dzMVgxK+7q6\nPHuE6qjeeh0e/w/s8uOl3eI0EeuX5rymeWDV16rL3pbZddLnbsQWgYqjKO8J\n3ZmQahW6X7Txuk6AoRB7CYwTURE+ZTnHySEHXA21qn/XxPPSy659dXVNVkoH\ncaycJYIf2KGZVRdN7SzWyvKa+yWETyIbDt5i0uKxiJT2VDYYhCalxI1g4bYp\nACXPrjmDZi/OTHCNRqenZkoBmJmhRIlhyTu7yCMRyXX9d8CHdpujYj/fciJX\n7tU7YK4kiINXkzLzsHpet0TYLiopEnt5IrR81ywCLsZJtdjLsY/f+9sheOau\nGHI2X2/wCWJzPcoPfVMj/BZqTkm9NdCpixc0BLLmsCwHp0siKe/IumiGXvI+\ndrJjkKCI12Ty4H1jE6yavza7HNbh0sLFGnDZ+y8UyZi6ziMRZj5mnSE1NqoR\nsGvD/ZGBdWuCaymjd5/66S5PU89geOMfWOZwHxlySZ62+biFEm7wjQtVGwlV\ni1YY\r\n=zYPG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.d20dc6dba.0","@material/theme":"12.0.0-canary.d20dc6dba.0","@material/animation":"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-indicator_12.0.0-canary.d20dc6dba.0_1620692662510_0.9905072377175712","host":"s3://npm-registry-packages"}},"12.0.0-canary.0ce2fdb02.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.0ce2fdb02.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"5b168f97cc80438648b292b8cf0db7a015cbbcf9","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.0ce2fdb02.0.tgz","fileCount":38,"integrity":"sha512-GtvzWBO7BAlhB8hrKCzAK7Eq7O01HnsxXqqnEtrkNJIsgJas3zSLQ6W3STTU5XkaAY2DEkSSdmcLR1r4IT4JlQ==","signatures":[{"sig":"MEYCIQCC9ejidxI6CXVqnrdfYW/ZZKbCPjKUZuHlnwzOR7+k4QIhAJ5FqPuA5Qe1X/I6fwK0QSqM4vjvkRqVhqwi9edkl73l","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmdanCRA9TVsSAnZWagAAZqAP/jp1lsrmIrYjam9xxPpy\nDkx34Lnj07l1gH+XvI4WKPQuRtI+VJc9hDKC7PoeVEWYeq4JIQZ/2ujba/H8\nfVq9jjVK97x0UcaqJnPJeTRKbOxoBWujJuLJLCcFMLLqypXOrmemGzqGf6Oj\ngkvH3Ckr0+0t2kk6dcpEZjXH1rIsBUnyaL8uA9U+FCBBBPOtLx5O4xYg34hu\nwHW29bu0RFQ76G76DSV2KC5sc5bz3d73/Sh3pMOw/JxFfXugskCs5eewx2Ta\nh5MSJp023fGMaxh/I3cJ3Uf3zdigtmO+Nfpw4Yql8B6Ch7yc8SRir18X1QFU\n+hTxnW+aPgcJelHMDqXqXd4pyAcfzW5n0v5L8ATNAc4p/q4VGuP2cUjdA389\n0tbVqNNqRM1nkb34EWWmofwj0qyHnUiiSjy2YSEZLBfrdBBptlvyw63+tdqf\nVs0FBh3e+tXZqxRJS/IL/gT/0X7ZgrQwhMZHTJUAb04Jw4ahXmGi+9ANUcAl\nPzKjrRU/CQZyzvqxTZu+hhN5zLw0+rZAULPMXW0brfj0pIlA/hARpQ9vg7S3\nvfOEANtK3IOUP4t9S+RTB+WTXX0awW1+UvmPTyRb95yeDwjbb0Q8Ld0HOsWA\nEeckkhJk45ZlE8E043eIbX3PCu1EWJY+T8e87AVE4jW+iyckmHZyy6WO4mvn\ni3eV\r\n=PY4V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.0ce2fdb02.0","@material/theme":"12.0.0-canary.0ce2fdb02.0","@material/animation":"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-indicator_12.0.0-canary.0ce2fdb02.0_1620694695024_0.9277177048462499","host":"s3://npm-registry-packages"}},"12.0.0-canary.cb162da37.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.cb162da37.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ebdb2e721cdf3846d31e44300866c5866b3ed95d","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.cb162da37.0.tgz","fileCount":38,"integrity":"sha512-hvWOC49UgSwiVPa7tHjCFzPmzYfU/PRDC+ArbzkEadVF25BikGRV/vjG3qYCAS+NmQeEWd2QhZf4hmIcnVE4Sw==","signatures":[{"sig":"MEQCIDkYtazZqFf465KUWrvfOlDhuYhEfsbD77THoN5jGR2wAiAyB5jHptFmKQS9s5WKyd56X7ORIdEAr9eCyQ0zqnQMnA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmeSvCRA9TVsSAnZWagAA/8oQAJo+lTAmZrG9aGa/RVCV\nWK/uNf8I0S1xSW7w0DxT80VtwEIDtMtnurpNHAegr4WdcgO7kUv0Uddx2Sij\ndzErMkT7my8rmUc7az5W2RmO5cLXxpY2w+6EADdIkD5dNCRpobxsUw9QxdGP\nNqJ/IL//xfPGjhGuWZPahd9Zy4uFYBtkiBmNAwOyjxxaElfwFkHfuic4dgSw\nxtxSDb5F/z55tw2Z0h8BrK8SbrO+342VgXppXgVlaVod9TMM+NwycP8+dGeX\nMJntsFwXO9GbKgQQP915p9InNFy/SCpnEJwcz99knntACEo5+NQWEwkOg8CH\nXLSHbp2AuxBzGOhFAvUr0KcHsmFWELu95Qty4hBAy1o7mStu/hEH0B2ns7/U\nXvt34n9EhikZh9/SJz3rmWILWTdfWUOKOLOgbM4P/nTpnXQe9VE1nMQXUjkt\nEaOy/WdEdN7p4ls0rcfDe1e8OZQrTeM9z1NQ6CI4dM+1SeXj7NlYmEKOQILD\nHzuLbyCSFXs2ZgHRFdy7gzaJ+5G6BjcrUhQLmFmLGbUXoLe9UY0FNDI6GXlK\nrhxcBCLb7GWlwppw2+kfJb5VgstcwpQiNlFoJ9OiNCFqI6jYMz1FYw3HdI1c\nIqxY/79Ta4fkqSOQry1T0HAJfMAfEcsr8gdz1GsBE/7X/b8coZ58ZDOUo7jI\ncGyq\r\n=TNBV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.cb162da37.0","@material/theme":"12.0.0-canary.cb162da37.0","@material/animation":"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-indicator_12.0.0-canary.cb162da37.0_1620698286554_0.02820629824551757","host":"s3://npm-registry-packages"}},"12.0.0-canary.573dc7ffd.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.573dc7ffd.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"f59a2ff4dfb877c54e333df36ec2bdec46eef5f5","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.573dc7ffd.0.tgz","fileCount":38,"integrity":"sha512-7l/hhrQ+jYY9MCkHTDZSjv1vXulGHxLDTu1Y+AY9Gt/CEtUSkZ4tPvPx0qrrsg8pIky59GK1jvTYV+QM/PA0PA==","signatures":[{"sig":"MEQCIBtX6DpqDui84r4dml9UQelaPi1tDqqRpnVHo1y1slgmAiAwjU+jM45cGmY80vW6rWB+ljvRculIPuVTNni+3WhMUQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmekaCRA9TVsSAnZWagAAgA8P/j3LXZdTj1Ni1i3cH8Pn\nwsU2nvIEKrzBvkCY9afJ7Fj11JN59VSOUXMfrLYfCf43FHkPPAo51c1bBy/t\n7JX83bhN7xVpSvXEI/Cefy9l8ykO8SdD4ocqxdd9OL+0zYuU2XA2TFMFWrCu\nhsbBYTPlzZChIHpQGoicW7XHTgUEkiPZr2zEm/fJHOnVO+S7yUfiVA19QdEO\nB4WyAz6gRMaprP2Vo1tQlSNI9Jygf3CtOBeN+RQh0B+GSKbN5542VHYJ7CZd\nnlcJtDFo2hFodkdBj/Nmq8p/AiZcZ9G9xmS8e+aS/l3S8RDMynyj61KA+X/U\nrgytZFrHE1+uPfivvLbViSaJZ5ZXLv0Vo+02XtVsPRicLGWKWlyi+7UU/mjF\nWkm92eDGsFG1LO+gomEMy3PUb1DIZ/I5CCkWUFsn63EULFB6NeoRV/dX/0Co\nbJPFUs5eh47FFKmgCv+cL2FTfvQY88zRZl77qDM5EzlAPe5/qdlsR1PZqiC2\n0rF+0HoE7J8xaTS3jtjoGpxXRvt1EVSjScj1y9eauHlUnrbDSiu0nu9v1FDy\n//klGgJqsiLWaSzXDMqZkSL5QceELPYIZ0BV0gPjtxT4A7Stlu03shfWEw1l\nyXnc1I27c4EAqs7k4KQbV2AYGUC6TbyYMEp0NmR4Ew+fm8qkYvOHXQvCxxlP\nuYJa\r\n=eJpE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.573dc7ffd.0","@material/theme":"12.0.0-canary.573dc7ffd.0","@material/animation":"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-indicator_12.0.0-canary.573dc7ffd.0_1620699417815_0.5740131703730755","host":"s3://npm-registry-packages"}},"12.0.0-canary.d5f6ad3fe.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.d5f6ad3fe.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"2fd95620a69c3ae3ca61263b76002a2ab75e6c4e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.d5f6ad3fe.0.tgz","fileCount":38,"integrity":"sha512-9GkcwubNdVxBGeCIt1wCAQZwi88ojo5qHe3mYOYM8JTijMP7tl4bkGJdT+Ux2crWpFoxmsIeqBVREGNW7P10WQ==","signatures":[{"sig":"MEUCIQD8J3gOqL+LWkla/leceNAWmK5TO9yM9ASB7l9i7JTdcQIgKTyGYkUnZDC2HhQRljfeaXCDHW7sqH/7NMRTyz9OgHw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmxGoCRA9TVsSAnZWagAAECQP/1TdZABr1fMCWY+IMKCd\nzKAvAAfNkcba13E3k1iWbZaTXxFwLWl0Z8Y72CWKsjxSdEM5547dHklQuCvf\nih8SuChqJnUoCK+oI2DEpSisyo1BH6keVE2HB604hVB2j7mN9742jIirxOu7\nNVwiJiqQ2QaV2E7LZ/XsXSQAcsFJ+Q7yHA0VVxPHaiBTjf3jWbb+23E/ZxDs\nk3TlNHo724vtAb+zQ1gi/GOKDbjx9YWY+C3u5S3iNmrYmW5qNxvhw4ldTSro\nlNh+VOpWb6QNJt5lJmiWHEAF2uXd16k5Qp9Db3HJ9PiOS4ooES4OFoWoNP4c\nSx7VjzCyue/dQ/sYrH8dixYQrJJMSVsb+VzVy2Vb8NPJYSL1le2QySn0guKJ\n0j4qcMhUGyqW2FHwIkB+O8vDW/Hu6I6UqGASXSKAyJCVkFhjGH+46bZZYz8h\nJm1cmWimA1AYWOlQhtAPDR/egChTHwRFyMrOEfQKu3fHfGfZU5GdAZof67eF\n1CK7yZZI9IyN2plh+YjCtKudcJhR5Ouhd7A1U3sO/Wju+irSJRrRwRzz6NPb\nqMY2K48rgZEqcA4b5UsJwOE/A57h5z644MafIgElcRAi5PF7YQ4S16TSm9ZE\nseuJC61blwID5QglbPaEVEajYZHIddaQ4OTrU2XcwL/S9bnAF2a2ePzxV2j8\nzDb8\r\n=Hku1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.d5f6ad3fe.0","@material/theme":"12.0.0-canary.d5f6ad3fe.0","@material/animation":"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-indicator_12.0.0-canary.d5f6ad3fe.0_1620775336369_0.5779235368472775","host":"s3://npm-registry-packages"}},"12.0.0-canary.25751d2ed.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.25751d2ed.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"88bd444b822f10f04d5a02e30e2f72175c1fea7c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.25751d2ed.0.tgz","fileCount":38,"integrity":"sha512-zBMgue6/0sjv+104AFsqG16fl0ObcJb6V9ZcRwghGJ3Cv0Xq5XEU5zWI4siEucwme9hp3qII6d/l9N6j9jRJ8Q==","signatures":[{"sig":"MEYCIQDJR4g98JEgAaNi+Iiglq7U5vDD9aGTmuRNNChDzLNLNwIhAOpf00iVLudwSUg47zHMsF9NI4LhV8VlNFsn4JW8HoJD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnAASCRA9TVsSAnZWagAAIukP/jgHUV5AjH6ZYc+hhn74\nFRmKFEx4r7IDvQranKuTS93wEhe4tMjWRpidjBfKqeUT3+xF9n1eFUIqEMvU\nytHMEk263DvxlEX1cEcD4yyK1ZpSrNfQHmccCb81fldL4AlPoojslNUt2lvk\nBu+rr2Nr80Y/lZ8kIfUmU8d7w4fSBX2YAV3vj+zgYLtErlqyzfpRNw/r2csI\nethsoFTosEnIpTW548oQE1YkZnKgT8DMqk236hN1wP/UCmemX3PCWpk6UNTT\nRKB7DtG9vU2QjxxB2MsPqtRO399HvzI5KdU/r54w6zlB46Pk3VOAam56vToQ\n2bxxZjhXkXVtxVCYps7obYrv5o1o5D0vONDyepe1t4zXV4Zojnxc5pEeasNd\nIf87e5YSSG2lmpUzbgDmMwwPloaemZCoGozeRQckVkwggQkR19DAh/QWKRut\ngsA6AP+Z9c4ddi8du2ZYcSrZWV1L1QAl5ZKTCbpJ404/W7VI0UZtpqe6VUN2\nRrsBFeW52udP3FayCV9yC7gP9cOtNyRCc75rb4Yh2/GBOUXh8uYP85CwCfZ7\nNAVLwNjgYWAqWz+u9AORq2IcYin4CNcq5WKYg9dNgahiI7GcJEzjWmzQIr+E\nOUVbn3eJGnSnta+n4rmm0uyhEYkyUsp8DrbWG073ZGPMfX6q/Ovw0P8+IyBJ\n2lq3\r\n=i/Aw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.25751d2ed.0","@material/theme":"12.0.0-canary.25751d2ed.0","@material/animation":"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-indicator_12.0.0-canary.25751d2ed.0_1620836369880_0.4592100153882259","host":"s3://npm-registry-packages"}},"12.0.0-canary.a23ecb682.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.a23ecb682.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0bdfc27abf415b6f49a5e1b2c9d0640b530e36e4","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.a23ecb682.0.tgz","fileCount":38,"integrity":"sha512-N6aEQ3GGzArTVWoq1Pc+kk1o9bsFmQ4M+hsKJxlgFWtcfANo0dDpAzTgSYYWS27K3oIu9oHbWtx+mZTzOSkxaA==","signatures":[{"sig":"MEQCIAxthZ5yIZFrLzzPRIom5FS1zLGOX7cDTbIGGXvPY2raAiBg8QXUitntLVNiGr47xhMMk8QtyXbg4momxmS4NYkLcw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnBz8CRA9TVsSAnZWagAAPtQP/jTAExGjAZdA5sp6yopU\n1LZyRXa7h0AjdgNe6K3+jLFg7CCOytiZjc4pzxCpAz60FnKFFQAsuHlAqgmJ\nM8ZNQgtan8wifPvhJY8H4ydjqpHa6dYXpmDBK9qm/tnnd4ON9Uk3RD0F894O\nlzZOr1TefS7kdBjguF2ORP4EJcTwMSSHxb3bf7KgTIiTWhr2mR6WAIeRgNO0\np3ad3mCkppkqITsJohgO+3sZspzr3yRi1J2krubugRWH8r4yTkTleuyONAHS\nKD3q4uCiaFQVWAhdObDMeUzeV2TcDgm+sdKHFAXWWIMTwZkLPoYr/EcRbvvl\noWYf9N0YsNslUPgNwiAqRbeZ52ldzia9XPTOa93nT9YXS1lk+bxs+5Almeg1\nM7/MhTxsmZ14wFlgsQD227hqLR89CZY2O9D5du5bnrbH8lt2wa3FK1v5saMg\nXgvquxhaLY9a3JcmA7TQGSaz0AJ+tPjy36gGFaJ7RgcM/HBe2fbNwL/oL963\nchz8RnyGbTfyLciqZkDOsKJw91AzmtzNJCTyAkdgOb9edwnJSw+7DJEqNOj5\ncT55coE9hAm5urgxH36ExO1n7gF+vJ3gFE/DsE0YyuPp69qwYFJ1cCZS+/ht\no5NhU8gu5XcO8cuQxznV9n8lC5ijMb42b0BUUgrYymNY3JPFJC1qU090uf68\nxOKz\r\n=uMih\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.a23ecb682.0","@material/theme":"12.0.0-canary.a23ecb682.0","@material/animation":"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-indicator_12.0.0-canary.a23ecb682.0_1620843772018_0.22147807479730153","host":"s3://npm-registry-packages"}},"12.0.0-canary.33a954852.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.33a954852.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c95c211540d14b59a890ed79d630939f9975a341","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.33a954852.0.tgz","fileCount":38,"integrity":"sha512-dGMEy2tF0QL6V11QpNEkJ2w+ia4OFCzXFCjsdypAzRao6BxE4Zm5wYAEVhtf+JuBUtz7O7g0FYcer+H030VgSw==","signatures":[{"sig":"MEYCIQD6dmTa2brXRqEoKMIksdqPhO3A0nHCXVLkI+Q+XRX7iAIhAPTYduLorSblxM5R2o0ossMLSbnoLsX3EH/Z3VNVsD2o","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnUCpCRA9TVsSAnZWagAACUAQAJgyoWW8cXkSRphoA00O\nfjasXs1SJ4Njf2YVAwFL33wfXNrsKX9Nk6/x/c0i2+/VvsY01114VbXVZhp2\nEIFVqGjlpz6mCczjhlX5zhzmHjXATwti9XJ1a40aJb/0SNTf0eaOU4/VcI8A\naPeHPnPssRNIBNMIOy8fwvMxXbqsb01HdUo9i5XcCEwkpi82XREnE0ZDFywX\no+7RVBdKl6susjUF/nI2h8YZJO9xA5wC/m6dliIQxRfhNarn6WAH4DTpAfKT\nwSAZjx0SYzRQkQQp8Xhof7LomcY65jCK+thY9AGiYnDsWENDW+tTv7xhwHrn\n3d7PSjvqe3R+8FuLLI4giC3oc87RWS2rpMOMmw4PfYQfmTXETEgDHvqV9XuM\nUJyF8iZIqSmjO98hHJVrMG5GAQKKZ+Oe3MnBbob41AWw8rEpQdgx9VBpORdO\nzFq+Znflek5+FkEYDnPqBKyWME9OZu0zpYBqFrAxPMavf8Dzp9RLrMc0EZxU\nmQCzhb3/0SXZbauiUc5/hYOyIDH6O1jWYUNHcNWlgpXhs1/k7CD4g25qTThm\nB/AheAjaCdKzDsXj++oexBlVA7XSzL4/bFdU5FYu5PUl8P8sudP8MdN1O4Ip\nqhQqiVLQBgnGNGTIuO2gUGD0Y29VB+ZcwzPIw5yqOsTiNx82NL3AuzLa90qL\nuvtN\r\n=jCZy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.33a954852.0","@material/theme":"12.0.0-canary.33a954852.0","@material/animation":"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-indicator_12.0.0-canary.33a954852.0_1620918440822_0.8715675715625726","host":"s3://npm-registry-packages"}},"12.0.0-canary.a4484849b.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.a4484849b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"b2bd938757cffd16b6f2e79f36c09ba690256398","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.a4484849b.0.tgz","fileCount":38,"integrity":"sha512-eqtnpsFqo25At91+56yC1g673NwY//2zBs4m/TEZgHfgl2j0utVX4BdEP5Uct6la5wdhRK7eep1FcBs/Oe/0Qw==","signatures":[{"sig":"MEQCIBQVCie8RriGVcXsUXHv2wZTDztkjMo8I8M+aFSSxOhcAiB3x5sOXyGf+4WLGChr6sufY1jtvgiOvPgo/JEVByJPaw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnUYeCRA9TVsSAnZWagAAk0EP/RZi4zKklPaoxI1p1elj\n+wFPqYfo2CxVuIWqHQKbNHPPyE/lYB+ymMkDcBGF+cT54Gi30lHrnE2/aZTx\nrelcdyIbQLHymEF87Zf+fzXdsmLRHYwKTpcP2QK4WUaqfdqpqUeaDm+917H4\nFX/UTmha5GCAe7Fn68vrk6yF7SjBmW88jmR3zEHt0hwPHy7yp4J0alZO9w0D\niTu0MMINPnZPdMFNsDc7wX5I6R2D5Up0t53NdOanbbtM3Yi2KfbjodyLZ5bV\nogp0tvm7mT/mNKyeqwzHTL5ObMPT3S6eoifqKaUmt6HNT0qSBf/edV2qXDPi\nXV3LmZ4gCs3LMMKyhuXdO1DYHQyVjm0CPXh4oowIfTFONY1sFlRuxKkLD9IP\nShuT7im8ovEz1tahbMg1tkudTyIIL3CEnXqy3gT7hmj/r78iqiPhVmTDgswh\n6wHvm3fq67/RHICkEWlnwVFVvEOKkGjRyWmwu/yLZ/fJ06zQNSwZvMdb+qIM\nVjlooYewxFchAMkO3UNnB0zsoWfpc2uT7sgKP9CKr8gjHHHKnbo2q7oOpU/2\npoLyPCoyKD85dm74BWlCD7RiN9zmSgXbQhrQ1W4+QBWj/IXUny37/BEOCcUP\na8tkQwEjayzkMwv3oUC7Hpz161kc4UKNHHSbyGpSvcrviue4V7hxH61C/Vw6\nYNvl\r\n=cW52\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.a4484849b.0","@material/theme":"12.0.0-canary.a4484849b.0","@material/animation":"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-indicator_12.0.0-canary.a4484849b.0_1620919837600_0.4902261171331719","host":"s3://npm-registry-packages"}},"12.0.0-canary.b4c3f513e.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.b4c3f513e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"eaef49d0af13450c945503d787d9069885ab9246","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.b4c3f513e.0.tgz","fileCount":38,"integrity":"sha512-EcO426CXK1qJldF2cfjZOSwCVta7sDLLSQBDov6KACWfhQWUhzHjqa6y3pQtbl1qz3AzEgUeVUU4/0TaUBzL4w==","signatures":[{"sig":"MEYCIQCTq2516uhW9+l0oQ1a6oMiheloiAh3MkEevCFrgJVb0AIhAJJcReLEdIBSXyw/SPVmRupLK4cahnd/PyiCL/4zdUzd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnU7PCRA9TVsSAnZWagAAT2IQAIA4S0B6VHIAB+V5PEU/\nTkDTfPfHjk6nro4apZd9lb1YGMbdUD9beY1vcrbSOzGgeQNiLTLRJirY9H1V\nNhVfaY7feZloclhoEjTBXTR7jTI4gZMAR3E6J0I32xCDNRKthvvApDmSe00N\nJvCKvcfjfH89kWgUbHT2CKZwFJ9leCAU7zgnBS0J2RrdOmZW5p+6m0K+fdGa\nbX/DOxJQOsz1FRsmPJXiLvfOEdyuwJnEYo4lKSVaA63DBxTRf+peUnq9V2g0\nlddGoEI22kEV3HQfnPUp1at0gb+vbo8DSHQi7z4N6m0zhke0zQ+lOWl6oU26\nf5n5uc8Mo9EKKJ6bGjM9xDCFaE6PFSpo+hsKKMuC2qdtDw6UDgP8D6KYe7vh\nK8ivWhAepkwMO23ZswNkym641VTdn9njMaYED5pJqg69kPXLDp44UFlhRW1c\nBDc+uYLhBKVV1JTLytosGmvOJHRDpsjObs2Cc5u7DQDMqtojH5p+Kq48GxO0\nkT0TPmwiMkGybFr8T53A8UXf1ixO/FhYjCyvbSVOhDtaBwjsbYNCrhqV1lo2\n9EbD7kIB4rkjypV5ky6jErk17eKBg4VeLHtvBuLqZRd7PB20waW+fL7f/UNL\nnzlhmnkLeoWM/HJMV2SwF6IkrR+TEAnDJUR5Rd/srHTwBqcvtWiN65BQrOWH\nPhS7\r\n=T+Fq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.b4c3f513e.0","@material/theme":"12.0.0-canary.b4c3f513e.0","@material/animation":"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-indicator_12.0.0-canary.b4c3f513e.0_1620922062821_0.697030603493394","host":"s3://npm-registry-packages"}},"12.0.0-canary.1a8d06483.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.1a8d06483.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"7765bf234f040b58a9022174c5f857657b1f4b9d","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.1a8d06483.0.tgz","fileCount":38,"integrity":"sha512-tGNP7DnPOiQ8R8Zc6E5DmRZONvhOZOyCo1vzt6uIA9noeFW0gDnNUyw1T7znA8FDJsNKu1R9HTcqym7WurcZFQ==","signatures":[{"sig":"MEUCIBmKp1tAZqmm2s40F9dmF2rhnWiNAk3UjmO/GuDcXc6WAiEAvYOjWmmZMcuYEK+v0kb7fpcN7NNSR7S3H4tS9C1gx6I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnVAiCRA9TVsSAnZWagAA8ckP/33v1fy+7GGQ0IcaHYLO\nkMa/XbNDyZdjuEPWSBUnxUBpS8WQW85TDmtbEWW+pZ0sBNd09xTEB+VutvJF\nl8MCeeWWPB7lUI6+3CCR5BcVbPxJqtG3C6j3JPVYJS8UBgB7arRTziHu9FDl\niqOSJWBsZ00o4c2n5MaaSoodjjJ/wODGp0x2MjkVbXDxTG/S2hx0RmBqJ95p\nYAfY3gq0O9hGd/PxRqXfI6kbEEGzjQof4Y3yvxMxhn26vBJwXs+4718IdqaN\nnPGf0scl5NQrizpjvpVQoje9uAWMh+psoyqYX0oK3wUGz+i+b7ehtRfHCrNb\nAfz1IhF7Bu7YPLNG6AQzTLKlraivWbRedCyMlDDnUrrRuSu21KNW/0co1Xx4\nx3rPXTfKERcSDCfPse1EpdLZNC2IgFmvLLk7Vi6mx2QPTSnag58JQhPq7zll\nnz4KhjLGKcJ/wiconbR14Jp8n983S0dniQp19vKWx18h6a2KJ5FEIUPUjRWn\nZ1+bViJZxgeMm7osJyKzZq8odiK+5a7mKz5e5L82+gAq3ehhN6ZicFVqfd+R\n7mB3Uz9sOiDghUW+EiKdqaXqoCgZfrMdg0gEqA52CBpNks7ElXDsjMJjCmsR\nYr6KElSK6Sn593UighrF9enustenGc7b7noaBk7dLWe9dsUJkMh+JngCf/zr\n/JRb\r\n=Z09U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.1a8d06483.0","@material/theme":"12.0.0-canary.1a8d06483.0","@material/animation":"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-indicator_12.0.0-canary.1a8d06483.0_1620922402125_0.4440222232649915","host":"s3://npm-registry-packages"}},"12.0.0-canary.8e6081836.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.8e6081836.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"132d6970a944aa424699606f2f1817e4a2ce2876","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.8e6081836.0.tgz","fileCount":38,"integrity":"sha512-Z1eXqCtpn4bwLonAJfIaIiwB9PxXetdoZwp6yyTkkle3uYy/DSqmfvSPu5TIbnJKmwglzsw4BidI9Tzheeb4gA==","signatures":[{"sig":"MEUCICqDM1OXU1dws8w/7qxEIgg9X4PemA8ct0zktu6Q+gFkAiEA6VrSntPgC5dj6suL5g3UCkpGOV4ruKYSkxM9BFCFbAw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnu5FCRA9TVsSAnZWagAA1ksP/jvYNjrVnIC8HTEGZdHB\naPENC6ZkQ1EfBeQTMg4ibCWHHDvGuAzHXNFgWkmErRLRQfeB4pc1Iy3w5+lV\nEqTkaLi9+pWTat3/9ySrjXCJW16rr+0h/Qu48/xlapwb+2DHKbRuZCVpbwiB\nU/IYyBEoEvK5Mos4V9arOPKo61sYU76Uv5D9FNTDdvOektc0i+Z4fo3d1o5E\nymQrJI8BvspZ7rWpZs6xDAEPxRmtKTusftHGN0gEtaNlVWip+i5OOn4rrnfH\nvR11QmjgR337X/oYiHxMIwPHFu6XJptVtlUv2ZQOSHNWbIG2gMhwZDr+ew54\nsUPuLjGTO2WjzpT47cwl/kXbf30Vqpo5fZ854M1MvuwBwF5LZLvcN9CXr3/s\nEbfojoixjbgm5KU9ira4WhRX0l63CaHehmsQwQqmGApYScZoBF7yRS7UY57E\ndEdV4sGSfZp0kfmYIk3FN458/TaRmfmxWWDw5f8DW7gMU5u0QWQavtIbsPWM\nuaPSXHeETPKJ4JlzCjupX9NMPK4nRnHMzu6l2aPOYdeYlGULSy6E1pw6g8dI\nFPyuw0cJjgJCOJFd0+AcMPnPmsA05++jMyjjZfGyPcweg2NryfYBU0o2J+ya\nNhDmcl/b/S8uRtKEvMD/zFtJYr3vYWrpgUYouO4XIprFFyNU6tCs4fTCfe4A\nWQoL\r\n=thDT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.8e6081836.0","@material/theme":"12.0.0-canary.8e6081836.0","@material/animation":"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-indicator_12.0.0-canary.8e6081836.0_1621028420814_0.22630587799270607","host":"s3://npm-registry-packages"}},"12.0.0-canary.a2b0f4cee.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.a2b0f4cee.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"bf26bfb88f5fa4fdfff55ab36f5a0f5adcd7ecb0","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.a2b0f4cee.0.tgz","fileCount":38,"integrity":"sha512-LAeDgDvL/5qzkBC2aFEIosamJVqGHSp8YzIGomTHsSunv689p120msDBMiJCHYNeKFfmYor0kHlnDCquoQOY4A==","signatures":[{"sig":"MEUCIQCi2vybdSn+9NRTkbzD1dmnCRszW4yyLg0RB3BsKt0EVAIgQmCzaHyggvz1nOkW37IJYDhYsFW4B0jkmcGWQw10Quc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnvFcCRA9TVsSAnZWagAAgAIQAJOBWi0cTP+8oI4nyoGl\n3fOB7f448lXK6IkWcAi+dsLEXhAGXQ4FaldlLZVygloBTKDVP2tq/ei4/nCl\ndfDb0nYFp1g/PJMOn5OmI0IOA7wREOjnTngGX6Du5MbwVjwgKAnxqTN9XwJo\ntgBK7XWsE2QLx1Kk79Uphuw0BqJ7YXZveeugNEYD1hFa+lPIKHjQYbyG6Ku5\njFL5jlGnhIg8UFMwGeXYp2zJF0Pj2pOq33qa8mH+Af9EczuFr9ZYTu0kQesw\nhuOmsEfvgMmoccD5WfvVRDHqnVZE3gMaCoWL4w6MOv1SpCAl9H9h/bYz85ed\nyibKdmY4qOYR5G7A3MCpmHJyAMTv7c2jMLA5IClblhlQKqHFSUSDAQ2Eu7X9\nNOXfozHrxaL1aC8E+LbRFGr66BxBljhfDogvbkDwv2PU7BZqKZdrkbf8W8cH\nITn52BP9+N6CZe/kQnuVqG9ctBQBUnZnLorjhjPNBNCqG6GpchXfjeDkOX9w\nJCLllV04GivscyEMmr8KmQmUaQ8eLxrV+HuKvVBzh9yBqAcVAJ7W7xUjaPA2\nPJPhXj/TjfOaZK+kvqDJ1/useMZlGgO8kjO0Ymzw1CbtwFnnIXtOaMdGsimc\nB2LUXh8/+U0o/DLBnVbxkiBxX0l01IbnmsDx6XiBfpYLimVzcyPnioQeOGMt\nHa89\r\n=8dGp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.a2b0f4cee.0","@material/theme":"12.0.0-canary.a2b0f4cee.0","@material/animation":"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-indicator_12.0.0-canary.a2b0f4cee.0_1621029211504_0.03648801348663788","host":"s3://npm-registry-packages"}},"12.0.0-canary.e8e39ad19.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.e8e39ad19.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"2f3efdfe0363254387a0f889ee817f81af3f7fb0","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.e8e39ad19.0.tgz","fileCount":38,"integrity":"sha512-xP2HWhRkkDS7Pr/jPooY7rCpOKEovhCgsplpsoxdVipo4s9vepq3kmWgYObDGj7oomVJTKNz+el9LM69ctSTjg==","signatures":[{"sig":"MEUCIQCLH2gBSY0tAaJ68JWnSmlZrY8kYuLIeRUlBQlbQmvCcAIgTgjCwDjJ2wlUvja2M8i0qhfH4tsEbCKSRI+r+fveg1o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpB/DCRA9TVsSAnZWagAAbcwP/iOXxPZQhqsqw4quEWra\nzntjAvKFqzWsSau4EkxPJRooe4e6OVQfgUuj49OGAw6brXffVrrDmGUtSV5y\niIYDZNyecfZCrHzBPfbKEWsJ16JkU/w0abWPvvhrbgZ2LMST2BtQBAYM5buo\nt2yFUVEPVKuTbOty4bD3LdX3jQKlmSWwSAFJiLoviLvNKigytYSKHjXzR/jX\nSWKjbq5NML1pzQ8gGsbTAGTYf6QxDp0v+PHlDAfylGFLl2ZVAhIi07viSdiw\niIpsPI69gYysRr07zZxUFLSpJk1TphXwT7tqOHlByTs0qUwseiHn8QQEvdA+\nu9nswcLyxfBbzdgzId/31uQxHCJHt4VzOxc+mzboWpMNigNQCXluIxhebuxD\n7LDY46qFYgIvjBwCyv5dzjn2y/4RMB2Oplk0iI7pwx+tF2/GAfuQv9obQekE\nG+0pp5hkTgdisl6VHep2+OKzoU/sGQzRUMP+cBWxs3i9HWr6amJ46UEuxdxV\nrsdKyaJ6fbpsglezWJ4SSpR5Jg5ooLd+u5tAJwVqhTvpTVaEaEMRNoSWyC9f\n90qfkerG/In1+nJKQWU650DDtOypInQ4apcaKTTXJZHwAuh9uhi/rBEXX+g6\nBuIxPAqmD21rJFbZvMdLm53NLW2p84rTeuWMixOJnJ0jhKaQxlmo7IQGjQSK\nMYpA\r\n=c3bW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.e8e39ad19.0","@material/theme":"12.0.0-canary.e8e39ad19.0","@material/animation":"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-indicator_12.0.0-canary.e8e39ad19.0_1621368770765_0.2216048766726546","host":"s3://npm-registry-packages"}},"12.0.0-canary.4bb5eea2b.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.4bb5eea2b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"98a9e7226d1321846f45bf120ea6012aeff92f4e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.4bb5eea2b.0.tgz","fileCount":38,"integrity":"sha512-qBJyXvGALaiXFTLbsJhUZ/PigtftUCW5HHWDtQgxo7M6m98Bq1frMVFoBIO86Spi5UtwfxxQZhVfHz0klzUCHg==","signatures":[{"sig":"MEQCIHU5rxVqG/G+yPUzX5Hg/Gw4Tm3neIHNZiS8AMTu0SKBAiADJVrBf3M3/By5e5me0cmDk4zQonzPn5zgQwq2VGKhLw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpS6ACRA9TVsSAnZWagAASRwQAJ+eWHlugo8kdnPb1Rgx\n1TWOVUhJKT8qvedwTft1HlFIRv8eXb7rhO+tEjpThNQc5a8N9Afn4Vmu7337\nSjZSkUZl932yXhlfEHH5NIBKW3OLSoPEMoB6l+Usw6rr9zZG1oAIUVYCaPe+\nLjotPCl6EISLSw9K1N4yY69cZ70cbqNB4D7PrMGGikiVaIYYIgWAs2F2RNWX\ne23pvlpxHG98WFQleUCuDUkZBNbfJjmzLh48umO17Cpv6xg0Kvo/WCqaJMNL\nyy7YWdyLkRSclgCgEuOtcAJNa/fLXdC3hQ9vLt3lwJidcKHJhgJDqgK2tRt/\nUFan4mlJU4OeZFWD0UOLnEuUDNU5iVPWNZehNZHTzFS3KCwULN7F/ofckqgS\ney6gilnWlIg3UqY1FSIg5e4fGq4yXRnnPLkHXcHc+Oz71sAlU3unKYeL30Al\n5wDX8KeNvRn10tGb+sY7tvlp0A7J9mkbGe3GMGzgPlURAUEPOCBAKwH3I0l9\n7gfpVuWr475pVOdbfJTLPfEdYCV7OpzRaTAl/XCpVaoGF8GTVaArXguVnf9/\nQM2xdCmjkEuK3bx7I77JX0KHVN6unAbAphJoTeyWARzFOzrcne1D5JrdXdNb\njBU16xKxSodfZvMwGi5RQwIMuzI+01KYPgPb2QiONDXvDNeuZqbKAArgFGNC\naj73\r\n=GupA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.4bb5eea2b.0","@material/theme":"12.0.0-canary.4bb5eea2b.0","@material/animation":"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-indicator_12.0.0-canary.4bb5eea2b.0_1621438079873_0.8237339490972428","host":"s3://npm-registry-packages"}},"12.0.0-canary.ccce99cd6.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.ccce99cd6.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"38a119dbe68717206ae9dee4991e585eb0dca5f8","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.ccce99cd6.0.tgz","fileCount":38,"integrity":"sha512-PnUuDn9CIGOF4Iz7AfqmpQPy+ylJTtXqtzAhShXI+pg7VHV9Yv3YH/M5eouFzkaRvHVSIoVmW5u0uSwKbYlmFA==","signatures":[{"sig":"MEUCIQCqmJhB/mTlBWxtHv5ps7DstrnXddHr26ltEVfbEKQ7xwIgIgyimOJys/wZCqJ8xPxDlEuDGkRPIJ3LeLvUNkkFzEo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpbO/CRA9TVsSAnZWagAABC8P/ibQfKzC+U2O39UUmupL\n9v7a0jcothKyktiVROdfMaY3JIKiXg6Eb8a5IRMA+VDvzldFtN/CYMCWyxc1\nWVOc3Kvmodrtpx6xHf7gm9fw86oPVfurj/xYKcTGV+RQoJW8OIn3KQUEFITv\neBtGuCjwWwC4L8XvY11prT9IKKfTPm70CkiSRyuyscyRn5C3o94Rx/u4Nt6g\n/iydIKl4vVDi4zPo2KGLuZtc4lz6UjYAo0o/cr8SsahA6bIrJxEVaa6Z0v/m\nKyrlA47Bk5sayCbZ5Ok/pYfr26V5i5soG/KpoiOF9a04jVZc3P/BtDpb2lkq\nh2ie3Keef066NFjJbg0ysivVWxaZZrpql80a5vEQ2R2TqPQuerGLGxJ+3qjb\n25AqUjBELcJnI8yst22c2rO+yqjNA1O6XadIEVYV3Ilm9BGsn+r5V+Y7Lvsf\n5bzg3Nxaigheeir2Bbj1Q7u2D3qwljt6mEUPS+hFHhkifJhsypmtgi0zzNnM\nFPJMUuADUXawvXdAGQ1NoeOCbGG2/Skg2OU4rgYvxVuLt06+4MXxmAiKTu1c\nbRxmCiiy4KM5WkthF3pOoey7A3oeBNfzwXNGVzHxzTlVB/jgfHYq1Wnt+BW8\n26TwkLQfBZP9IeM9JikCRZEOYUgxT4E6tnVs8H2BirDki733fIghWqulFNLG\nEGg8\r\n=2flj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.ccce99cd6.0","@material/theme":"12.0.0-canary.ccce99cd6.0","@material/animation":"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-indicator_12.0.0-canary.ccce99cd6.0_1621472191388_0.4383451848089037","host":"s3://npm-registry-packages"}},"12.0.0-canary.14767a8db.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.14767a8db.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"8dd43c97905560943a1bc88e006dc653ca51f1fe","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.14767a8db.0.tgz","fileCount":38,"integrity":"sha512-AUAVLN2st0PXrojjwTnaLRN7jmtAymmsDT6zwCIP0D+Uirb3X2J6/b3tnFq0zwryMSYGNWwSp+Wh2BH75BxJqA==","signatures":[{"sig":"MEQCICD8KEyj0vmTzIoncLcGn3LdbI86cuWKY5SL4S72XV/JAiA5I1PBBNd4utc7UzV4D6TtSmVuFPm9zqvJ6EqwPURn1Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpsuhCRA9TVsSAnZWagAAGn0P/RYU70ZfZISi856GTVtA\n6xj2jQPFOKOrH6TrERmPHKqPZ8uKfGWk1WtsvOst104YI2pA+AubjvsrjgLg\nA5Mva0b/wBOvJYyhoBSRO+N+88CMbfPYzKNj/9BZK2E9xSJvAP/pvbbFCv3e\nJblzvOmV5k4qp6ZIWLzl8odV9RhYNBwdyscjigit4hbCjPHo+OWFkQ1THXM+\nzr9ZfF1JL41oukDASEncLQamI+mUp9oMEobwngZY+jpD4s1O4fHYy01bb6tM\n5BaLJj3+/MiB0tHhamJPlCZkzPD9b5r/vE2QeuRT6nUp6uSy+TE3NqVbzx0E\nxFfYvlMsomPKfJr3Y16hsOVYnNFYjb/0n4Mj5kUVTjS9kJDJ7axaxliWeaB0\nJJBKMWN1f9Mg8cQfu8e16IeKV84WyhPfgVEL0hXXvRDEIc9s6h2+GvTojU0h\nXGq3hNHtiWuPFNa6UJdPPDrejKt3D4NL64scbpmnT6kSXvg8XfzBDX+pGRMx\n1YRyP2vTfqlaVe+luFeDfJnYvk8ZFJPweTqMtdVL4a8cA0/ATFwANPz6mkqw\nuuZizIssQO+f1hjA07pW84iQFCSW7Z4ClvVgCz2TMRNHgYTMMAl8C8VGqflA\nI8RM518QZlchmt1lg3qUdlQ0ZvPFA4vUOV+L/yxrRyy7NCFDPV8yPfXWpTml\nNNyt\r\n=lJCq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.14767a8db.0","@material/theme":"12.0.0-canary.14767a8db.0","@material/animation":"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-indicator_12.0.0-canary.14767a8db.0_1621543841434_0.2549861636405135","host":"s3://npm-registry-packages"}},"12.0.0-canary.22c6dcff9.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.22c6dcff9.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"b7100a41b06aec3cee4ca5ab482b898cfb9efc81","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.22c6dcff9.0.tgz","fileCount":38,"integrity":"sha512-UUFu+CwsZelQF/Akuj6tS5hcMeIrpmzYD4nbZ5jDa+cBPwFRApZdUSSo239anLMG3CVbKRt8ba/GCzHullPjTQ==","signatures":[{"sig":"MEUCICb2Gfkmwbaj5fLF66C9fFdvXD2ZjSVVqTdOYdW0djIpAiEA5j9091DPiK1uHOG+j5tZ4r4vCSPd4y0TSSk6J0h6TDc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq8O4CRA9TVsSAnZWagAAjcsP/2zQUBngQ63r+EJRHr5K\nPhrdBkVDJaCWpBpbd6Ow7yKqtm13XP9pLaZChi1DFBLYeLrypBPSvMJZl6+k\n9gMTxsV1eg2cx2CBxQRfMBZg994Ls0YJO2O1sVcy2gK/9PAIrMhgrhq+MnVv\n6tEn2VI8vg5JjX/0TL8RFSR3bdV3rHIeOk1OLGQ+URCQAYtQ1/LUZGTsnjAz\nR6UAKOzRRnq03fK/cWWpHKMTv5zJ+Vx9O3mWyh7j6iBt4bCAQX3I9bJrs7Fm\nd2PLkj3fsygRiPeLRCIGlC7WSRcM6UzFo+HjDHhOAMtRAysyJT3E8T9kaHeb\n3a8eXUl8tzdXCi37sEhT6AbkrWFvWMdkLlUeLjCwZX4wHTd2VZTIlsLq6yij\nUTLF6OA7aGgo3K27dg3wav6X+G2ayzlJ8R/KdvX8g2X+f0yI7G7rZhiAiQqA\napaIyRoFJWCU6BQiSUVQpSaP8xlLSxpNMm1wUyRAQfRqjKwyGAIDJn70hl75\n/+pDrL+bL2s5KQkf8VzU9v71g3Z7LlJA5BluE83utFszvCd1ZC0pZGj3kLcB\ni9Gdjy4J0nzDGwCOjMmv5TCBwIQ8luLH0RQVFO3eWM8JxRBl0UYsHSYJ21hO\nCgBRAHRaZhVsFI36ogyTDst3kJ6aS4aE4mK1S1Dk11G/HP+05LQCWckg6xMG\nSEdz\r\n=8+In\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.22c6dcff9.0","@material/theme":"12.0.0-canary.22c6dcff9.0","@material/animation":"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-indicator_12.0.0-canary.22c6dcff9.0_1621869496265_0.948197337682954","host":"s3://npm-registry-packages"}},"12.0.0-canary.fadab3372.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.fadab3372.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ec6a57650d1c75151e8c9a77cb41453456e71762","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.fadab3372.0.tgz","fileCount":38,"integrity":"sha512-p9xOR7Xj3oSHTQZ1NdxFROjJE5S5hbHBU7tbO8Vx9ZMhA1CRTKDVCFEGvOTnyFZFUEIgnAcPnZca9gAYPdbeDQ==","signatures":[{"sig":"MEUCIQCNsedrLSfaNnzD/RejHwbdODOgO6hPhPwFzyAj6n7MRQIgPn7zKsTjcK82xRQvGChOPElfJAhDPm9QSIyLSdR+p0A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq87GCRA9TVsSAnZWagAALLwP/ieHkXAxy2YSXkslYGMH\nJW0wBkRrhjtxTgPFWV+s3tOtKcupNuu3ShbckROKPkmQR/ADWFZ4hTUgpok3\nH1S4nDKHNy0uNH2ECazxmtkvkpWZ+JLpA5ADW9sEMPahG3XwHCwLu483NzcK\nJRQPLJ+5yIHeBcUlFRJbMLHlNdrdEYVz+/dNlE9jr3rUszLz07ej6myBHASJ\n8afqMp6pmtNIYLQk4Oajzd3cG0W8Jwgq2qdqtYCPQPcWmrd0aRzhHpmKBlX5\nOizPWRw7YAPfLRkcgKs2VWmYu9cDC8G9y7+pfhsvxxsXVXcQlmYjjC5M0eOW\nHT58UyU2Wn+QX6waQ56xEGIs1Txa7NvYd5X9oPyESvLulfnzhyUcOl3MJjzs\n8jcs5R+bEvPeg6S7vzOSmC6vUCm4IGKYJZlUF5Tc70q5iYdFzM3fVfjiMNSs\nt2w/rCiWSYdKQXlYic6ykpMW8oAa0ZLVOTFfB1nA8WbwxtCkLSCLHwZnyg5y\nBpUqV4fAosJqp/MLHaUmtu2LaTv0t3HO2pkG9gLIyAD3smfRUffjnG1ECZVm\nn+ZVmy0R2jSrpccrfnpyd/+CVyRWhHoCOX45diUCw4hj0QfrjFgcQfs2Oqd3\nFMg3AFN9BrS4AwMbl4Ducc97lpzmDTwbfoEuyM3GF5F9nM+lT8KferLuJ45Q\neURm\r\n=m8Dn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.fadab3372.0","@material/theme":"12.0.0-canary.fadab3372.0","@material/animation":"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-indicator_12.0.0-canary.fadab3372.0_1621872326120_0.11006068611602093","host":"s3://npm-registry-packages"}},"12.0.0-canary.caa73aeee.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.caa73aeee.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"40a9fa1f3adc1bd4306f2acab8989fbb123829ef","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.caa73aeee.0.tgz","fileCount":38,"integrity":"sha512-thXrB0gx66q3pDIkpLkvzrBLGbSZL5hfrceBbj04z/911NXT7DpwPT2f5zAi8keK0T0+vHWm/5NddhSE0NsKbA==","signatures":[{"sig":"MEQCIDeDSCJCyD43mC9SWSooyOZIp89EXD94FU+DRQ3IjFlUAiBTpU25wmcFjdbT5Sgd9kDij1riPAA4dyIYxja/DiBhKQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrQYvCRA9TVsSAnZWagAAp9IP/3l2dHY+zibx81TXOqqh\ns+g8JwO9MWraVrT9vHgafRXNsIHlfATHDUr0DiIomG923nsk1+c0LslPGaNd\nmjH+eUdhr1lrI1hmL+2uq2TtQsAt91mnNk0OyhVt8wtSIgCFNJURKNq3GK/r\nQS9+OnrZr9R7b+IO5dZW/D0xsQEg6FD16LMXpRpHuHu9G+cppZJGl13WcaBB\ns/tGAMgklr9/FbDy8RilBmG+6Ah80wya+VWIf78ZzGikMuVcpcJGjG1nO1TV\nEzNeZAYJUKkU/E7WL0c7KdDiZXp1RoQ6wQXuOe2G8Cq+QdkmtIGpy+LAP5l0\nOgGfvsUrOPciGCkJdh03cZ/56wHEW5A0Do1Ku7V/4Z8EVfK4CKnsG2w19Qdl\nm7gUiR9VWuznuEJWIWKc2Qkh8wswC9M/rZ0A22WadR6RqWxk3URh3PDVqa1o\njbIo9iTlT4NIMU2xhqPTHGZEU5F8Gp6Tv4g7iqyAn6ZZJaGshR+zijNLg/vu\nt9oLV55vZY9/dN1Yyen9Ev1Ffwl1xKK5032JNfX1E3YXoEq6JlHqM6qkdBhw\npbJKS5LoFTUV28bMWMK63qynEsaWMbeXWWJtxsqA+yRlV4N5f1LMhtNgHkKj\nNqtKgM/9r224jrnJrzgp0BMbMHUc4xNQPNegdG9uaDeiO3/AhJmm5jBKQk2J\n0n0v\r\n=2K1w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.caa73aeee.0","@material/theme":"12.0.0-canary.caa73aeee.0","@material/animation":"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-indicator_12.0.0-canary.caa73aeee.0_1621952046874_0.6623767572960195","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec31ae1ed.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.ec31ae1ed.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"f0ab2743b1f8d95d898fd1d38237ce1bbc3f63e7","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.ec31ae1ed.0.tgz","fileCount":38,"integrity":"sha512-kiw9oyUs+0oSCGfG4COXA+bUIo4hdC5Ls6d3J04A/JxBCgFFLnyIWDk+GXYtNuBZ3yNesZvUowXBLBMtdUjDSQ==","signatures":[{"sig":"MEUCIGNH2pyZejpCOo2izyoKwtQyjIl8AYHpsEq6sa3GTFIaAiEAkpmJ6hIcC+8dDNqbBcDpJNqb7D/SmKa0tt+l0hR6uo8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrV96CRA9TVsSAnZWagAAQSIQAI3mKF4ZjVNkUfeBap1/\na9ReROGpJj8BmemMo6fwC2JYVcbNSZwWk4BR5zDDoufekPlDynh2hIc9X/77\nU5blugVHlS+rEVQaiaBlQmzDpUM8jZXRW6l3QT2jH+bST+EHLtmjH5JIt1qn\nE862uduKKdrFhoKv5ybBZ95wj4t4L+aBUVrkIPCuZSU3vDnqGTEu+4Uq6v8f\nCCPz/94180MaLkJtyfyNXdDo2+BV34u2BGbNyhLDynEV2yCuraCOV4MXbpTJ\nJmmbNctvL3HduK7Xqc72yIGX2VI1Tjp2kTtWndxh55jDK841IVHTn+Z0nTED\nDWVTKnzd1lJshtTCxl1p/r+orX/pErATzcituXQeKcJowk+n0VvjyFtbRkBA\nR4285lY53o5rmX1VCCzFAFtKTRw1Qou+Rhb1em8ht3rV7P+toXa/zB0c6P0T\n3SxHcmOyuJmnLrFXc6G/PRkUwCGXDis6oTBqC0XiPXl3eVgB2c74WXpXpeVH\nPUykMCRFag/JkVJZTphcAszmwNYQS4jjxz6Bc9Cw5aG4SOHvNl2KOwrn66tK\nzy7J+ARp74NzkO4TL4wi2jKa4bEPkMcleW5L9SHoaQsXHssBIUI/60yeySbo\nQTHjpd6XN1N+Kd7dSTiDiWiA9QtSXjbCtYSFHIl1OgHyDUpYctr3KVC1Kg7Q\nlFvV\r\n=rZxn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.ec31ae1ed.0","@material/theme":"12.0.0-canary.ec31ae1ed.0","@material/animation":"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-indicator_12.0.0-canary.ec31ae1ed.0_1621974905939_0.9025891801252071","host":"s3://npm-registry-packages"}},"12.0.0-canary.8530d3514.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.8530d3514.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"7451e257805aa4054a2db0ad4995df9eedf281b4","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.8530d3514.0.tgz","fileCount":38,"integrity":"sha512-Dc/IwFekjW++g+fWLoOqfMhBvT/nUuFelsVrvCD9ocXpIC/ML/f1wNtGsPa9ChS+1HJMzj89mbbLDJ+a+yr5jA==","signatures":[{"sig":"MEQCIHA6/HEqMlBrShACvgMP9fzZdJhtTAX2zVOsb+IaZzGEAiAh3FJ2PN4ZCD71IhP0vdgCorKZ95qYlZiQy9aXxOZu4g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr8MQCRA9TVsSAnZWagAAHzcP/3VJvQ3XoNE8kM/qSPmM\nzLROJiexvHtLsncDj8Qu1nQZJ8MYEMky8V2xi6WnqQFJF2LQAD7A3DdRzICt\nJPF+4WNjBTU6Fi0KLVbon55/CyvAu/6VUawZcIzw9ukqitUERRnzFRo5XxJs\nxFmSyC7fhwVomQXU4wiroZJuE3C7HB16bN/qAiw6uE3B2WAkAm8tukaCAPA5\n8nwOi09jB2gg6CjFO5wJJLo92dQda5wbkoCnH9SNdEr7QNZPhAkXP246PhnP\nSqNaXLHj8mL3x6rUq3k8L0ng660UM2+aReAjMi3U12ouncNZCDJpIb8yAoAM\n9I6Zj/34T3quxdMTStXYskSicHRIHMN+9QfyihdCK1+hK0WWPf5LDxPSM003\n4z/UV669KdQ7j8Cgo1TD8okd6OpeDpV688XUImEqKG4ViPeqKEds5UltsXi/\nGVRdtUFQm5brj21sPOlq1ITZ7MAb8vZBGwRpsN66LzGS3vJvaQKLKctr1SVB\nFFMIaLaGgRMuGBKFZp/vCWeiTwidDUXa6uWMpl5auro/3e/Oku0ISVmhsMhN\nykGL1tH0ja/Bi6ZzK5NPDmWHRCTXurTDYTUBrD0WnwKlJegpDHsMI1q2oFpe\n7jjqUKutMcXWAIuDzM16ceNxwuSWpxJHj9Sz+JacWRXWa7Ysg+pYtHkdLEWc\nt75p\r\n=Ro5m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.8530d3514.0","@material/theme":"12.0.0-canary.8530d3514.0","@material/animation":"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-indicator_12.0.0-canary.8530d3514.0_1622131471816_0.27864900102979284","host":"s3://npm-registry-packages"}},"12.0.0-canary.00b5899dc.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.00b5899dc.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"99fa8f38e1b4647aa40ea43aca51a3df306f7c1c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.00b5899dc.0.tgz","fileCount":38,"integrity":"sha512-o1r4H7MLHM9KbM6DK3nftIKE+KvO7HmtH6TCFLGzg5YDFuA/7i0oxaUel+Fql3ozmfQt+hM+e1AQD8e1m38UCw==","signatures":[{"sig":"MEUCIQDdn0nC0A8jEVRsuK3hd8BfpWEllyIl2YovyHQVco+e/gIgJbeJNAAdvLDBSkyHvJATETK/oGhrr3XZ7nvoDEpfFPg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtrh+CRA9TVsSAnZWagAA2RYP/3cNKUYlN47sga/Xtu/o\n3SMTONv546OTYXsgNloC3VCFDzBSnN9BZcjk3beNG9BIjXG7GxScxKyn9yB8\ntfxWee0FtbTn2fC4IcCjo3uK0HxyGJEJEI2+nS+B68tIhZDs5TvjyvCcrYZi\nh3IatDkFW8Imive6xwnQlwOZkOFiFOEssSEFP5NCbCsMsypY3AQ5He+6z2Bo\ncyMbI0z6uxCHFrbBSAwSwI5XZyvoOGz6j0qIZs1MWUAFN0ier/RE9dx7W2eH\n3uYPYSePXggNsbmIM35I4oLDp+ehtikhexBglCUxx5cg6iup5G/GGODGSFET\nTQpbkQT+aa/51zIDXszBAfJ8Xkjln7qM05tpi6Q4EfcWfVmlhenGz/GwWzm8\noIza4f0RyNFWfTxFL/IemzmpJ1tjrkO6VBwpPF5U9upre+wmjwiUXWAyvlmK\nO194EikbqDmlw8tZWgGYppqEOjOzy/GuAQOBBtFEIvlBe3UkH/v6906hX92f\nznbKFNnoy5z1nlYlHWtPhdMG0OTs5BNePDbjwXn4W5wMrIqSLVzytuFXwTk3\nxDTmdAkl36tk12BIDqs3sTE1b6RCOptXZ9BhKaZdXGm7ufM92fYa5/Szg0KG\n1OozW8Zg8+3ybOLei9uMcvY/xFcQDOAhqrySwPBgJ7XVsN3EJegm9iD2dVyS\nz2gD\r\n=dWTc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.00b5899dc.0","@material/theme":"12.0.0-canary.00b5899dc.0","@material/animation":"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-indicator_12.0.0-canary.00b5899dc.0_1622587518099_0.8291867528074388","host":"s3://npm-registry-packages"}},"12.0.0-canary.f1525ea3e.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.f1525ea3e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"71e14c96eec91eaa4fcbb218b621e4679c35e992","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.f1525ea3e.0.tgz","fileCount":38,"integrity":"sha512-4iYSh2g0eD5EkcrnjX7Xsq4VuYG9ji/Gu3OfMlp9G07PKSJyTrdPHGMs2Uwi8mSZVkW1CNidOewL6lq+cqxQCg==","signatures":[{"sig":"MEYCIQCAR0a2rKyyD1jhwwFULbCgbqKjdSuymH3CKiiUFIriewIhAJXMuEqn/XVT6yBUtC6GPhah0d9A5CLqXg/V4rWXoga3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguN7/CRA9TVsSAnZWagAA+OsQAJ/yVSlAXpNMcLY6mTIn\nt6Uq3cbJBBMJEn9+VrYRXETEsSqmKqXcQVJgDaifWNwU0xjfAnxQVZcE2P5k\nXCUOp8oJ4Qr+UXTvj+JYWwxETx4F4jLLMgYNpMiAi32mpJ4dqr/PS8Ynsd42\nM8c3x7jsuvFqA1hkxv5rjOwr4GucyzJ+BzVnWuIckxDFy1b9FQorwcAFmQLq\nmElxotIBVuqBxjfZIvqlLusXO7Ebis///K65x6iBDavpBldqn+0csU+U6sfO\nADro1dajdTbQuYAud9FmbRUIKp7vlvIGiAfHHQNbeVy5rQSVljUFA6dWf32y\nLrd1qn7Ve9ItS97fwVEpeWsMwphTz9IVAo0XvKy6q6KbgZt2udP5W+rLEDKX\np+tnPIzt4vjiYy8ongk1h2PAkMP0uv5fDJxQcqI88eIowOq6rSsh8vieY+7I\nFgyrMdvYuHPpnFMLvrZ8RZ7RYDJNBZ4OxVS7vTLxZdM3c0YeIw94vxD6IoZF\nS3t312ra+fsNnSlX3lDC9wre1qz2n1YmAEUYD5ogTV2l5oHjLzOu1yrJ3JEz\ntByWuoU9Z02OAhfBMZFULGV24tL26CplodnGwOHtQStCWm0oh9t74jlcxXvS\nTXpiLrKgov1G+sr2b6NlJ7Jzj1BPFD13CogxzJbo9cxGaaX6/zF64g/VtbzP\ncu6a\r\n=7UdB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.f1525ea3e.0","@material/theme":"12.0.0-canary.f1525ea3e.0","@material/animation":"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-indicator_12.0.0-canary.f1525ea3e.0_1622728447233_0.03324267074745468","host":"s3://npm-registry-packages"}},"12.0.0-canary.464a00286.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.464a00286.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0158148f88c9db477a2ee6ffb927d6e705b13fbb","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.464a00286.0.tgz","fileCount":38,"integrity":"sha512-strJ3ZzUrFu6Svl6066uAaST7Zmm8B0IAxGtO3T7pea6pW2/+wiNkJXi+sDQZVu44F5+t3b+/6pYcTUzj51xMA==","signatures":[{"sig":"MEYCIQCm+ZZQhcu0+Z0n+YPM7tY+FPVgotL630iwyYQmeQ8PeQIhAPL9VrifevNg6QzzhO9GHGB7QBiIMC+wLlSVAh+gQPk6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguOsMCRA9TVsSAnZWagAAhbEP/1eUewyoTtuk2ayEn8Fy\nzkWkmntfrMiaBKgzMT6cricz8dKu5fQj+i8gkWjUXitDJ873TlkVfz8gBn1U\nD3IEj3+yctcc8FMzzsx4hNTZPDPdyOVm2hHzBAVtgrqFia4NXWFg2qcbA9JK\nejxo3lJlsrtp8oRsAnJi152kJZiB6UqjRLBUeP1aDdkpi8T3i0LuvSotJhOF\nnS9Yuw6stsWqOYx6czjqmiX/djKRy+BWj8K5JkRUZIoTkxoNwq0Os/LFIfmN\n6McP5ezfs7WuHjzUYxED/ZsexWE6E2KGUxF42nrR5Rf58EKM73z2KDYGMkIX\nu4wcr17qsYbJNqEEBLhNZf1ZbmcQ6PdTLZyihOUM2vhLtEjO8aRIxozKSi+2\n3qnOLFZl7tebEmdKNeQZRlCdoI55UJNRKyIfjPKLypXI6IVwmiTOJ7Y7Lutr\ncmb2WyVXUJEuxRZWYwRuZVibowsDsLZRPGOgUu64s56yq24lRBprMzdvv6x8\nSIqn6tHlWHqe4zUCWXgbw+9nF5DrYMz+LS+JEnGGC7HCYAePy3w2NvHNl4x2\nvWPLQ/Yb/d3AXoNHPrgYIx9ElEm3lPRJmuf8reoy2S+2+KvqrsBummhW8Ye5\nWgT8dRw4HdSiYVXNxutqyxyZIzNehfw7Ch67Nt+1RKuKW61pcfYN49EW3lQ1\nyVFv\r\n=ZOH2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.464a00286.0","@material/theme":"12.0.0-canary.464a00286.0","@material/animation":"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-indicator_12.0.0-canary.464a00286.0_1622731532780_0.03057151564863947","host":"s3://npm-registry-packages"}},"12.0.0-canary.474de7878.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.474de7878.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c2f76cc4d65e25f2585c8242342b7d1847edbaea","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.474de7878.0.tgz","fileCount":38,"integrity":"sha512-fb5ZtS1tuM32ubaoOuNCMQKkGhTK2xb9IHW8PeG0W7HFsWQfpoH7k1DUZlPtL65MtOiXbKFvkemfR+podpB9Lw==","signatures":[{"sig":"MEQCIFR8KMr+7HS4z7EkN33HyVkBbnd/J0JlMpt4WVeFarFEAiB1WTzS3hs5W1zAvxudPL4N6fzuVpTmclW2Hb1RkVZiMA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguPG2CRA9TVsSAnZWagAAEF8QAI9Tqni9h8lvAWRGKTAr\nu/I9PfRl0Jo/JluBmtVZFnIvWpfqhMBdusaUBv0Sch82Oc9LmWn2bcxEbnBu\nK82GeKrVMSS08iMbAZtUbG2ngThvyf9dKQBa67Nqy9zljtR/kOIoFmSG0rjL\nA0HGnjzBhcvYzaOXAzyXmVxbWvgk2K3/Udkj8ufBYzYHmn3013B0KiP+3N/Y\nAroi/JQopZypTLsT01FRjk8M3Hp7kUrK0G5eaCdZ4Syi4wYBsRsMh0IjZwL1\nzCBTtUlVTqi8ZWmbTeMKfIUJj5CpwPdl9TQTMK+OJSz6SDLLKfFlsKKq0Mb2\nc1QoYLEPhtnB56Il3tI7yJUzRoooY+d8COLhTy9sftctL2ZCj6Rq8uzyWUxA\nApgYL0dPu0VYI8XwlY8RqQWkI2heXEhcbk0uUyEVfoL8E2n76gQHagnuyRKV\n4Bi+KQzDPX1XsaNyy2a7qOoW0MV9RyQTymXuyFH8n+HSwPuvgkFLsO7KWyCB\nDOsZdFiWB/1cjaLzBoP0R4oX2pr7oxQrr3ZlfMPGKZgJY4L1rpT9cOiRUGpB\n2jqcpKCfbgOxY7jNKLFtRCkOEvQXFiaPrwWVPJY6xcfyap3nnzHdYldDe6F0\neQMxzJGy+tHbLvcgmiTzdYlqlUTxznDmo2LhA+TNTeSYU8/cJAeeF875IDss\njHzJ\r\n=ULLA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.474de7878.0","@material/theme":"12.0.0-canary.474de7878.0","@material/animation":"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-indicator_12.0.0-canary.474de7878.0_1622733237886_0.17028080862302564","host":"s3://npm-registry-packages"}},"12.0.0-canary.b87ebf74d.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.b87ebf74d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"5bccb299bb489c151edce7da35ef4e64f99f924c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.b87ebf74d.0.tgz","fileCount":38,"integrity":"sha512-4MWsZZrk8fXvTUcRoClLHPM+TYwSLGEHRCA87BHRNb0V+CxsH9/hxkydoc49HqFCqHvYAaVbuvn8vZ5roKcC4w==","signatures":[{"sig":"MEUCIQDrREyfdYgVirmnBIcQm4f2pd9S7AqhMauaYl/3H1ixpQIgYGbEPeMotQt/677gBcB6kz6Org+RyYIZjLn6ey3PPQM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguRVaCRA9TVsSAnZWagAAA0IP/RfgxOfdF/J5r6ghcUBA\n+yZtBCaxZNXG/Y+obdwIajxGJggmIFhSlK5eAmQ7z8htH8bisG6C6FrK+75g\n2XnIy6j4sDKyAE6/463E8O/WW0UXJzrv6an8Ibh0o3zbSMZeT1qpqoUNLIxz\nILgqfuGJv1x5CgarlBziyr26Bj/VQEi0D4lozeSD/oNTG1hraAIodGAYtyF2\n1yxJ5DaCRtQT1BidrDNcp9flmXLOYRFcGFYUDSvEjPhvNTzMBuxyiJO8l5RX\ndDsuXcaZ9kUCmCv6kLdikDqxHK6t9roP2XZS1PWiibAIzDeh01u+bGfNly7M\nsGOz17skT8XSOEF/iq0kxmiBOCMuhCG9hc1hr25sn1BANTD33lrejEe7uA+4\n1wQSUyow4kFiGa4kc4lzxhii2LnvojGyXdL1vesg+79zPMW64BIgChk8/tiA\n3DmB/JS7siXVHTQOI8Yr8FleB4779AlNLn+MZ/y82zQSvl9RDsiTDszPQPOy\ncX57/N+tTPi0WktXsND1i3CQs3iRU20sZusO79JqPKjlee2zWE56GSpJ5IBK\nOoICCss4m4Wptpy+Jh6ukCAc0kBtRmLEsN4xyDv+WY1SOGeCYi5F2W8Eq43C\nDkA9MkCjFUG0WKcyDb3DLfV6ZEN0P2xxoVaJFQ8kl+RTg8MEgjpbofYdwz1N\nLa9k\r\n=Czig\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.b87ebf74d.0","@material/theme":"12.0.0-canary.b87ebf74d.0","@material/animation":"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-indicator_12.0.0-canary.b87ebf74d.0_1622742361927_0.5252799547219968","host":"s3://npm-registry-packages"}},"12.0.0-canary.2daa49b35.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.2daa49b35.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ede5290a4e80b906f2857524387654c1ff2b03af","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.2daa49b35.0.tgz","fileCount":38,"integrity":"sha512-ZGkj+lmuaXNjMLdNCI9BbTtCLhu3IrVwbXFwg9lsnPaKYSWf/GqrCyffcDkD63sx2cASgaeS5qqJrXqSJC215w==","signatures":[{"sig":"MEQCIAxkAk9ZryWNs3bWLNfzix263OCkAq48Ny7qhqpizHstAiBKdfmozcz5VTc9goqSkVfvqPEZaKPzAYnqK2lzkVqUMQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgulE+CRA9TVsSAnZWagAAQWYP/0MWz5auRbxwtUh74BNP\nsQVbFEm9EPXiAi3KJagV2nYUVEU2yXctympff1TnDkSx5MW7qWAccoqHwtCf\n69qhN9R8vg/2kSxXJ56oP7LBaFde6CjYgsBtpY/xsVc79vC8JL+9hx0athzX\nT4QKtZUgb35LR1ptZnEItPEA8jFGwFIn6jSqKGKftxSZU5FRvKi1UIYPZuNO\nWtqYMA2P0uWQLL/J5aLCm/M+EqRnxNbg+JH3wqtAXGe3pPehsm6Y9itUP0Rp\neVDrs9RTPgCZ6IAb3w+X9yFcJAe1FK0q6y9HIGPJVzzbhFraMwlrd7PW798C\nNqtRY6uVdRVVzCDMIdww0D5HGFTO7nVlq/EVya/JauGG2iCil3CDT4emqzmq\nNnusmGekJwZ3mBNwicWhVmVRRgcE869iNzhYziu/zlKx0a3+sOLqEbpAY+2M\n8VXMI/pxe15uSwKisOsUnWZXalnQ0sfrbeQ/PP0n5QZKMoLcoNYfF3ip+ecE\nXN0BiAJFTHUjwvc9sSpqWGaC5KKBggYYphhspcm2VP/gJYWPJjKsZyaCpzYe\nVDgQck6LhJKS2icjmgI5mxYNjDnGHkH9HgLtn/g0FTTn2Vbn5pozXslv3uZq\nq04/dDBi4Pi7RNsYW9MWHCp6aOXDKIqEa/yLsOGI4D31Vz7ec1euQkiS9GBO\ny3Qg\r\n=WTSA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.2daa49b35.0","@material/theme":"12.0.0-canary.2daa49b35.0","@material/animation":"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-indicator_12.0.0-canary.2daa49b35.0_1622823230752_0.6090775940088551","host":"s3://npm-registry-packages"}},"12.0.0-canary.08db3d737.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.08db3d737.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"72c36bd1c0274a02e510029f015b3ba6056d0f56","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.08db3d737.0.tgz","fileCount":38,"integrity":"sha512-SYifQyBnLajZdUgMgfMVKYNQ1aaY3Qe25lm/c1kd1zCl5J2ifBpYcjTXJXXisc4EJBPkDGfredk0hvZBjSeAWA==","signatures":[{"sig":"MEUCIQDicZMvLqk1decwclhVkMqjYHNbaRifs895OacYhFqUigIgcqN4Jg1XbwKOGuSXfYCEmN6qZpYk22IWbvgt8/6M34M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguoHkCRA9TVsSAnZWagAAtzcP/RMzI7LyOA0Ow7CtufSj\nhQHiNw5CCFoZuzGvkHs5V+k5P9bSlNIBoDORbwE9E1K7eUUXjlz3V3bSEKbo\nWL2xkYC2so2ZaEsqAoJThv3wDQ/NfPH+C+Yb7ELf/xvHHoDnNkMqki60FsnR\nFS8UeBAIvuEtsSeugyBtZGctmRIsqxxh8lYrc371dD99i8Xsxbp9JIMKMnHh\nNEe5AputhJDFeHGhBM/y9V/Dk9fnchXSE+EFMITkfel+KxifQl9QauMjjqTZ\naoBOmeogX/m1Lam9/S3FOuFVArt3pCRl6oBmafxlIb8NPjzWe/018e/cGpDR\n+swYuDoQqv3I1lQqwp+l6IWxMPrC/npsdWe+VCcljq5gR8heNcm7r8cUqZB5\nz12tPEQs/S/NN/qBF9o4aqHBNugtzT/kFOnMK2lyCOt+Tgo0D5lvvA3WrIyU\n1rL/xHI1zUwOJ0T5NAOnzcqv5ms+DiLa8zCe0f8KJFj4zTnDgOBRbAVAplro\n8jd9hFWza0mnZpAdGGWr/YOtOsN+yGbrsfamK+YNK5nAG0V4eF7RNsViL4pt\nLHMx5WdvHgQ7NA4XDAqhJ+i0frGq3ADPXip8pZTwyuShDMa+19hSEcCt0iee\n39PsbLhG5889aGsulrdbqmo+OYQLF0qGsOi48aQOOYexIbEa3JxXWVZldOso\nLs8h\r\n=449Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.08db3d737.0","@material/theme":"12.0.0-canary.08db3d737.0","@material/animation":"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-indicator_12.0.0-canary.08db3d737.0_1622835684744_0.4748344594703142","host":"s3://npm-registry-packages"}},"12.0.0-canary.5823407a7.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.5823407a7.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"30b10b7798a0f43f361fc8023ba9b1b95dd014a1","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.5823407a7.0.tgz","fileCount":38,"integrity":"sha512-eYSIpRcMbFcFqe54AC2Cbca5sK+UvhAIW+WEFZMewqiDm0CHE9V8d9vkikk9SCYWl1ZRnNawFvgw3g5BhQ7aTA==","signatures":[{"sig":"MEQCIDnhOIoB0Lk9QrkbksMLcLPq87WW4o5sBxN6IpIpp9eYAiAMJy1Zilyyr7tpV/lbN4jIaQkI33DfTcmfGpPdQRsYjw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvr5ACRA9TVsSAnZWagAA5g8P/iBqRH15UhyISlC5TsRo\nHlARGchYg0qweU2kBKVAF4eAeBXn8CYjuBpj1aAOx0fje4NwU/tIkC6y9nv8\nUdXO8Kn/AnoofObJ4BUQuXODbCAMmIR8cSY8Qo0cNlmhsrZBMLUAyMYQ5YlL\nDv+72VV4kztuam6wc2buxRbZ9vK87Jm3usETQhSijQGpcwTZgmn0CHozhKvZ\n4XzKi1d3yJEov62tRZDOHjoQGuHoHKvyPHt/WEQvO9TV7ayQpn0d84VEKpYx\nfpgL7LFDaGwfVpyFaiWZWq7VoGfAt1BArL/0J8ohMt+ufM/RqiwuSZfuPSo8\nJN1NMEmgPAnVW43BdW89TJLlM88DifKEsYCZBH7IzEJnsLfRdwKKbv99j6bx\nTdKto/PhUPMaCLml5vwizWCrMltTuKLo4zZRShzpAuNZDliV9sOma2cN2faz\n5bYceg31RQJo3FnokmF2quKwGLJ+yG64PL9lNwQOGeB9oD6tJ58xjCtqHaPH\nQjjyJ2fpF03g4QV8JaDVp25lVjgbdWJtpY95XSlEbpm8NF/1xaTmoo0P0N7R\nO4ZPQ+xanEubBgocVDuC2POkiLzAvUYmDMiIMe6VugUGCrqBwX+V5kd0JkCd\nW/Vx5b2ohggFnRVzUWiEd1+E6DtexFOVYKVi3sBzTtP+Bm0X2Ri8sowY4Imc\nCMJs\r\n=h+ir\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.5823407a7.0","@material/theme":"12.0.0-canary.5823407a7.0","@material/animation":"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-indicator_12.0.0-canary.5823407a7.0_1623113280252_0.7486959664747939","host":"s3://npm-registry-packages"}},"12.0.0-canary.23b0c5e22.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.23b0c5e22.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"045f1723796a7fadadfb6afedbd0e8cc28816299","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.23b0c5e22.0.tgz","fileCount":38,"integrity":"sha512-RhdotAgaXZKWkaVo9UScotX+YAcTXNPohIzLfiOaLkzbTAH76BtcYq4NiXRxbP85I9o+WMiSefzxtRBNMSbivg==","signatures":[{"sig":"MEYCIQCM57nWgC4CQ1a24Tv+ciTp6mfLm2MV35+wwZcDkUuUCQIhALDTN0jUuz1a5urf8gVWBK3QHYZYAFeZ1JYWchel/PUA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv5kiCRA9TVsSAnZWagAAFFgP/0S5kHWk5Vk2IZ4xHWJ5\nanBOA9f4Vkzx7//W31v7TbnReCU9s/HB6N7QVAyihpR1klJWmPYWvKrFdBrS\nO+2yAzQtjlosHDcNw2W3VnnTx7tlGr0jeqLoGer1oxojTZqhcNHamD2NimhW\nqBmbvzUQYzeXA4K5OE1kGrIRCxdZJLs/ObXhZsk+jwPtbf5b+j4aBgJp+2wG\nK4QxtgRm+k/OtK35hn5IsoZlNQm80pHvOl+h7KwkmkzSs9Q5h0x2YtAw0CcM\nGc8FsqZx8Gl0/5SLPpLsx/ixRLgfCHpt65rFjJJZ2LqcQTIVHkGKt/tI+SlC\nwEzF9uZ0N6kh5TuIXkezp9fuXXIbBynpoGiaTXnrzUXq8xLBwzcZglc4UjAK\nkkhamZQz4UUd4tvCUoz3atnoHIj368HdoZwtml/Vm5IXdH1sZCUEx6SI7bAA\n97Ot0W49w874ygDLYsBhmThokRVBFSvuHsmKsjV6pyrNqDNbeU780tUr87Vd\nF2pAXZBAjf4bgPbOCp2O9TQ1ois4aMyjlY9IjhjJm1RkeGOWShTmnlz8WHDp\nlxZPuPPw5FjMmBrkxzaDxBgL4LlZSddDrhu+TMG5B5dTlFEyGP6LX5ATU7FI\nPIVzRlYNbS0ITQPD6gBuYfXfwikE4iQBXKqIdUB+vgVsVLy/vwRjx8FD/2Z0\nGJxO\r\n=P2z9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.23b0c5e22.0","@material/theme":"12.0.0-canary.23b0c5e22.0","@material/animation":"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-indicator_12.0.0-canary.23b0c5e22.0_1623169314177_0.7398801014757399","host":"s3://npm-registry-packages"}},"12.0.0-canary.2952c6a76.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.2952c6a76.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"99e97d08bb08cb7795075ef13556f4f47a5fff62","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.2952c6a76.0.tgz","fileCount":38,"integrity":"sha512-nfAyuamMvoG0uvpS1k/E97cnOFM+E0rhem6VYCECXm6sU62S92tkGLBZZ9KU5yNSDnO1IceSjtzScSwqlDWNmA==","signatures":[{"sig":"MEQCID0xNNvPoSSxbsbk7Z4+HKbb7+zcvTC/ajdgjtlmGGm3AiAsvU3IENcWxadKi+6Y+h/rPgaugCi3/MgnrtHqfpqLDQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv6uOCRA9TVsSAnZWagAAR7AP/A8f5ZezdHXz8HpnSS6f\n9v3oxIuYvRxSbEUoHcY9gecOm30AjtCpItLMioICo/Gb4mh9PikHGYfaSirS\nSyFubWdGGDneh9nm7/HPGFKuNZ6SY8zfi2GtDOkQum6fa5QY0/tu/cFm39t0\n+WCtLFG/1jtHQ47Dl8HsAde71YTHh9kLgCxcG0rzPkNszxdWzwWt+nfsfo+x\nv6Q3qwDMVSKLimkiq7x8nPsxltqxeSXetetwK8Wt/L0nlJfZxB2mtWRIa6H7\nE4dEg/s2oNAJxsl3XGtCp7gFQxFqS0hffLCapQ8GS1YIwBzbr49N4XQgLlvL\nL2t+UgFycUy2bE72+V/jkjfyYFFK1q6LfcBQihxzOmD2YXK8n8BlKVeb50UC\nLULWp5MCKqNbE94EC1968+jHtrU9A0ccAasbYaMc0PI7mDJEjfk4dvvdNYUJ\n/mqOpM2Jea5iI/noFXeWm/zg8XvuLt7+54PdNdryWrkSwE0gNZwm6I5jxWIE\nuSmdlgCwoPKd3cbN7tFIWaixcIk//vSqCvQRa+rE5WSmQp92A1eTdhwxMFlX\n4m8YXyNkkr1mDN45w+8k6FOYIi/0VtHNsrCNO0TBvdidC6LOtg0h+bp96U2G\n/r96hB2izqi8ngIGJJWc1f9WQd9yBMKlNgDU2mV5ehWzaCT6jMXamAudJQJJ\nJF5z\r\n=V7HM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.2952c6a76.0","@material/theme":"12.0.0-canary.2952c6a76.0","@material/animation":"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-indicator_12.0.0-canary.2952c6a76.0_1623174030215_0.8042053649282839","host":"s3://npm-registry-packages"}},"12.0.0-canary.f12425f88.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.f12425f88.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"dd4e92d89d5875e3771e26b52defeef1471a8d65","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.f12425f88.0.tgz","fileCount":38,"integrity":"sha512-djCwE+U8239qHmWF6vprH8gVN9/m93SAGX1Gg/4LHj5wAXbhtzHNDTd6Qhg2LxPFOYfsk4UguG3+oL9YUBMlkg==","signatures":[{"sig":"MEUCIHjM7WAQ+Z3rIKznlMxIPLKJKcDtwiyYZtsR4NqDEpjNAiEA6WZluEKKeU9+6ALazBHKma5bG2B4/xoHXuNARJzsGPU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwWVkCRA9TVsSAnZWagAAojkP/0v80PjAq6bi5uFxm59s\nCmkWUV745H7CbiWeAQDyPvp7NX6mwHo7Tx1Fu1H6jK2MjKnyKjwbhfmpDoe/\nbI72lDrSGeexyNO72FD2rnrGD5n6C7+9Fwn/6MZI5enDGb+5FcsWReNU/a+J\nKHUkIfLNRVdPLQVEuaFHMAOBS3KqDPxMdjjFcuaG9U70OskKwc1J6J3iyzeU\n4G3bpYjbrJogtbuEIO4+bzWjirr+RDCZtzs37X5g4o61zTsGkg532FmEJPov\nm4vgioTzoD/FweCtIbQRSEcbk5IcVdl+z8T+cGhOW0+E5HrbGVctX1rJZvSh\nxpRnm1gm97SpeL6/LUh+OTcE8oZvQK6dHTlDGrGY4xWSntdl5GXx2W4T2OYW\n38hILnxxMNGoYJ3ZSe50raLfsofHVXkeClVwjQtjVcJCJXrj5b4aJH9Q2XOd\n9ZIb98p9LgA5baLbIny6RQ10bdX4bYr7zlbVV6AS+EQ2HVzxxecKMDbcMuzg\nXsGqYrdcKys6E9BsgDLrWONIgk5Z9RnQ+oaJu3OCP1xgf2BTqw61lIYqqP3r\nj5s09AiTVf8A1v8nGPkZZ1tKRyd8YDVFIW5Tcil/Wi3FHcBuSZMTsr79inTh\n8YlIMcbqFDEtqQglptcbVSyTYnOhz71HU+z0aegIDOP3MDj9iRtnIqBYv+lp\nZz/G\r\n=Qd4r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.f12425f88.0","@material/theme":"12.0.0-canary.f12425f88.0","@material/animation":"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-indicator_12.0.0-canary.f12425f88.0_1623287140642_0.045972276212206786","host":"s3://npm-registry-packages"}},"12.0.0-canary.e543628c3.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.e543628c3.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"02c6b481ca5db8dde6b2672d9d7b99d27d225b38","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.e543628c3.0.tgz","fileCount":38,"integrity":"sha512-Q4IOPq7c91Wp/ytcteX4/YYcDXHh6H7zf+kTvEQmmHCU72ewXOcI8H+ZgxvWNVUgmDleWTOqdlO7SLn4XL9b1w==","signatures":[{"sig":"MEUCIQCZzAtkMcMu/72VNVuajKhUqOQkcvNfhLlCN6FRxoHIkwIgYfvWAUjFjrAGrG1odDEVSdpiZD/zn+CU4BQzruFB/yE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwWWkCRA9TVsSAnZWagAAtvkP/iwGTp89tIsKOD0ta/tX\n69LlmsHMoBlsmNsugugtj8VbvAXbClSm+2hg00SNTVdTultiWWG2SAdncSV8\n4asK5z4IpoIqnAP6dWUbbFM8TBx2Xuc8sOP2Dfu1RfDtg/QOfs86tml0IPWF\nvfyFUtMgtTc3I5veFDBef1dcSdCDengzGodWMKpszKNYPtBH+1ycabSLJEMe\n3okqvwSpSZrXV9/bQw5ffZH1PCJXiAqtbcr8UXtIrjwF7jqBUtSaUz1mQ9Dh\nYVcKPZl7US3JqgR07eT3uWNBq3b0rTju3g9Nm+kVBtaoKHO6qU3QPN0M38nN\n6qW0XaMjmAMqvekA1koP8tPK523QVloBNy74QxctmhVaSNt8bfddLixsoadQ\nIvd48KkAT/l7hxFOMZXC5WNQ8wHrkUWWWGzu1ctSolWDHEwMi+NDJD0JIbZ7\n1Luj+9rKTsDdzzIbspu/hbWeW0K4Sg90sqxv13f6BjunWu50OJfE2WoECzz1\nDhWdg/6WtFQL2gpaE3KUz+PK4uZiTcO/eVhU0+UJcrdUsnFbr5OUvft15rOj\n+zlUtEAtjE30zTuQt9eXU+FQoWrYDJWoQ/Z8U7HIRImVmDbLTquQS6NK0ByA\n8s27LpMIH8aL452fycDGvw5O/SUVmXPsTyIU0EmtKYNlXd/H5zkLhouT9oLp\nmLGN\r\n=OYZz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.e543628c3.0","@material/theme":"12.0.0-canary.e543628c3.0","@material/animation":"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-indicator_12.0.0-canary.e543628c3.0_1623287204802_0.019935210511279555","host":"s3://npm-registry-packages"}},"12.0.0-canary.e0c346286.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.e0c346286.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"8b505310f9a43d41502478f1cd6e990de4672989","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.e0c346286.0.tgz","fileCount":38,"integrity":"sha512-74ncjezpTqP/ENrQp2/nuc1hK1TzyNmlgm60azFlmARndvGhYpHYVnv5U99QAoYOZV1/sqmICnLrKd8XESb3+w==","signatures":[{"sig":"MEYCIQCkO0CEnoilhwDQnGJqoj/r52wWbIYb+zqbS2y15pggkwIhAP9SncHjCkYy0KGCbqyBMlGhG0sncHY0ll8fEcTHwJVc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwj9UCRA9TVsSAnZWagAAzTYP/1HOno6zxrYyFam0DUQO\n5W6uN9guhXyv506xZuog0/+SY2KG0oQl1D9Bgz1Ey08ztnmYa8+E3nPe6WvM\n3heo5qUD8vhrGxrmkLWPzeKJ1QgiUete64xNjNCxiJtNX1kryElUo9Z744M+\nlV1Nm7W8wYYgWROUo7VpqIh10I0IwdZ7hr3uTfaxsQFjkpbkJn0ehEN/T/gI\nCv6/4CVtyTXvQT7ZAEHMrCcG7FXJPqyIypyd17mndOVyjNJCY7MRzlpug+rN\n82rZ2ORWj330isHOydG+RowWe4Cxu2JvWchy6LeT3pwMJnURhZ6lR8CrHmC0\nuOOBsFPrOARLYXSwQ/WEGsaqJROgKC/U94xEDwtFtsBxo4lVwIUraqwsJQ67\n0vw6ZtjGoEvxfEZp3sCFCfnJXBI/O8w1PgaUDH/sODvBEhGBaU7azJA7P0BP\nXHHz+pCp7l6jgQDuQRC1gAdGN30GyajWPZolk5qGMii6CwWwqHyGwXMsxpKs\n9um0LLtUQQVNyVKy+HkT/uUSEGMpjduZgSf5It5QGb7vFpkjQda1BNbZJZtC\nF7GrX5vNUE074cURgj/UNkPyLXBUScJTsJOuzICbY4m1XSAAAiaNAHm0InNx\nNzkIOvBY5Jy82cevf535/nbQOd3srbGY1lWxLdZRqw8iYlye/32MRdCPxcxF\nr7y+\r\n=aBoe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.e0c346286.0","@material/theme":"12.0.0-canary.e0c346286.0","@material/animation":"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-indicator_12.0.0-canary.e0c346286.0_1623342932524_0.657020232283767","host":"s3://npm-registry-packages"}},"12.0.0-canary.f43af5633.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.f43af5633.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"6764efb0793cb295e9c69f0abf4a9ad4f8e8d078","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.f43af5633.0.tgz","fileCount":38,"integrity":"sha512-JYhazSq35Oug6LhtWAAwrCJU+yS42XsYiEKc9du67jny5sYqpxQRIv/4zVL1bzLg79JUr+smWDvgeEX0FHID9Q==","signatures":[{"sig":"MEYCIQC6o5Jz54/GEciXjMKvI+zlOkWAZmg6fNxUXEJ8BPRPEwIhAKhBpFg+sTtBLW23BnRN3QFhSwrf4zDvWLni1VEknfG9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwneSCRA9TVsSAnZWagAA6RgP/ibEuWlwjrEWJLT/Tyii\ncgg/KAm7P7/wKlporECzL+Wj5DpC/k+oM23q8EGCI8px3gMlzbwRvy3Ahvae\ny+Awy2fQkCMeOTPgmv2CFWQ2uVlnKk1FcFIn6iEekR3ete53Eqr05iPsr9TE\nyaliq7e0wHseSWn4FNKt0vrUii5Q0kF4+4SyPSy4RNsNHL5caOOhAPUVquqq\ne2GHmoXqf7Ki4LQjOFu66FJ9x4XRZ7Riu1d2PlSHpeIMavxgNwIS8lp1gNLu\n2dBv2BtcwNgfxsJ+Sukujvn05/tsOPnIdJbT8K0Z4H7Cxj1aLZwiSgMTRkul\nNpJBqzevQy1MwdXGlQoWMEhYIGKenviZdoV7qaCQNax5cL49lOugFWXQIaiD\n/hoMWdDxCaoD1APw15hsF38kN88furT/MPgI6a4qszxiiRgnj03kLcOXCBfN\nCP9K7piAubi9bkQPq4ox1rOwWnml0mVP9cb8x7RKXp9qtP6xNg9fDo8ecqXu\nezUb0mVvk+Fv4aEtu4BXCSwrPWCp5DNIVxfiqmFDLJjIMJXWvV5/nu4hK7g/\n8p/4hM1HvPkxdCAWox1rBcBEUSAwFosTy5OP1Z8clUGok6iZJVO7v07w2qcZ\ne1kigBmpBbLA/o+UiibLi85JalnSzUhZMWNLNE703aIaoDuBIGLINcIUYUQg\nSfqG\r\n=NpL8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.f43af5633.0","@material/theme":"12.0.0-canary.f43af5633.0","@material/animation":"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-indicator_12.0.0-canary.f43af5633.0_1623357329860_0.13937234261818965","host":"s3://npm-registry-packages"}},"12.0.0-canary.8415ae585.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.8415ae585.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"09ded98fa82cd55897d72fe66c075ed89665f5d3","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.8415ae585.0.tgz","fileCount":38,"integrity":"sha512-AtnnAi7bvnuYklZ3g3LBMxsjCP6KNcasigSNQaOiMNcqrApnobedYVzGeDg6Ok8hepBgDNkH9cyDEL6mFY3Rig==","signatures":[{"sig":"MEUCIQCQX7Hh5lXPESNMeCsdyogsrlOSvpmk8R7dX8h7sO8SbwIgEShD+0pvp0QE04KqNIIWH+C2lpLEHwjucShcyus9eeM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw4nKCRA9TVsSAnZWagAA0pEP/3tOjlzpbUU+9yYu6Mm6\ncbwYw7kDnt8OchIY74DkJtVGiKuIIpBTXNek6bzgqiO63NH7YvblBpuOIhcw\n4fAMp//8ItMZ8f8GOsvV2289NLXzcmIoICnHmw7HRoWIGH9NXqH6DySQHwd3\ni2++N5vgE5AH9QrEjfOgzZ/iiGdwDAsY2tRa7pCjig9DYOho3TpiRZL7JrBk\ntWrjnryz5mFTXglzkb6mMAweBclJRnA/QB2o/AKjJ+fYTLWcWJd1cd6ZgygU\nCO5D15CobLa2AynVzhloaHBCLTGer3cqWtclcrteXuTJGE7gRJBMFvgawwgI\nrrkBgFDqfvnE35whfM01gtYpcYm7H9FeydkWenZc/0yoAqm+jA/r3nNdBQvV\npg9lXmpPoa1gGNxUHilwlvGV4AMBu/ZYi4a1BMdzxKfboJJretDdpHQIxSzg\nJud1Ke/u7Dndjj1Z6Wv0JdB8sq3Y+SCf5Ivj1fGtt3gbsnM06ZyjYQQxJNvA\nWYPyP9DWJYTt4nmhkgvqnKLSajP/OOc8BwCQ3Sgz+hNymYqremDUrbqcEBYZ\nLfi0CGg6jpY5L3eJ4xce+ChqAb/is1LW8Std3/1/0hsUQzv5Yn0G5OtJG3C7\n16Gtj7k9o6Yfz2cpHUu3SBJx9sANAN9midHHorCguPS07rkx0pffSVHo70Yk\na0TB\r\n=GZ8u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.8415ae585.0","@material/theme":"12.0.0-canary.8415ae585.0","@material/animation":"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-indicator_12.0.0-canary.8415ae585.0_1623427529843_0.35446940975967367","host":"s3://npm-registry-packages"}},"12.0.0-canary.598fcccc8.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.598fcccc8.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"7d2e29133abf875e54073971bd700a3f0c80b377","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.598fcccc8.0.tgz","fileCount":38,"integrity":"sha512-1YxFt5c6GH4E4MVxHuoZtbquPjg5A/rxFuEygdkFBapppV2TuJB9Pl5zHwkH7ztx1xcSOkjRCyDKSFZO9EPekA==","signatures":[{"sig":"MEYCIQDonxzXifUm1uOzxa2SPgUW2H57oGzQIHdreMc+VRWc0QIhALbYoDuOnYhiGA3vhHGhnXQBmITCWMePUiW4F/an7QUZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw9mgCRA9TVsSAnZWagAAy98P/R0eQLEBjKMolj7DC8ZO\n0zLz+T+FuB/MzbQlx7yjge0OBKjy0hjgP0FiUhiIwzbTYdBeE/Rosc02WFjc\nxaz4r6lmh6lo8G59qH3xvLN14nWPH0nC4to6qJiSQK8PGiPvO9t/W9bJaTvM\nifU4qAQIWAU7i01WTtLHPPy2RhDJGfVi5ouGuqR0DpN63+S1qytYYBrPPstY\npiYtujSccBghU5FxpOmjDv0xh/CtQcutELHyvztYzkKPoKsdiES0FW/BmitK\nhVMS8sQdvbYZ9PyNdoG0voqAm7AmhOqSECC2kzzZLWlUcQu+Es6Vh77guyts\nBHM7kxI7x/CovDdOYIwK4hDbX+N63SCiNw7wBj/toUiz9cBXrf1AGDtcb9Wo\n7bUvhXj/CL95doalJDVbjA0MORCYhkX5gFmoOOHpWxoSVJR4wl+TR2UPsF3p\nbcwMRMp5G5fVxFYBPsPdqSKMnUjnLaABNdQpTby5urvSwrmShLUzQCg0Sete\n48CYEgfjO9NcxRUQ3dVPO7LWTmLwqautFYB16vCKzChDBD78/ctpq45oiutN\nACTeUgyRWjWNC5N64/XuGpMftk7nc6A0JOsLR/r1dsc/XGJJGtmSRdqr2YdE\nR6qSoXZOeceiLHhWgVTzDLsDmNVA7npEr0jzC3BQwrAmb8kJkOmGu6wmnlbz\nO+jx\r\n=nVtL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.598fcccc8.0","@material/theme":"12.0.0-canary.598fcccc8.0","@material/animation":"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-indicator_12.0.0-canary.598fcccc8.0_1623447968133_0.8512033707600368","host":"s3://npm-registry-packages"}},"12.0.0-canary.5d0605188.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.5d0605188.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0077b17281fe9b8a3832524252614b152729fc19","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.5d0605188.0.tgz","fileCount":38,"integrity":"sha512-rSmoeYrv3yM4OR3TCadnCTU6Up+7I6WFRkBZxfscwFreVg25ZicvQmG59MbYf9oHrdn46/iF2HB4g5ZUeo96iQ==","signatures":[{"sig":"MEUCIQCySbhRDsFy2nTihveC8AkJNmnNdoO1e7ZLbTTGESUhbwIgf8M1PQYwsCF/0qMrHlHqY3aOb4jnnrAkUdPWdLOKbbU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx5QqCRA9TVsSAnZWagAAH6sQAJ4MNc8Z2N3ROhHKF1gC\nFxrfH9g/7mXpw0vdMljXxsWFl575PX9rHMe8AVaKb9RNUUn65qK5kl71WQqo\nmubnV9BU2tt9hKN2+Fjz36TpAgT1UNeMoTyuB3aSpoVoPLS9rGrQJxJvHCnF\nQPPl8Qn/Qq1yQX2pdEmr+/s5OGAFazm5RzoLnYbHZcK4hX04EXnc2k+ptFU1\njEGJt3TyS/2XVLDxCtZA97j3iA0wG6tDyADAD8jUgUytNaLMAhQqdFkQg3hV\nrwxpu36PCuXvb1yz6QcuG0cbHfgTLw3LLoe2+Evr+CtQQ+9r4a9GzUTdrPWA\nbNTCreAle0/SbpEoqmNO2MYbOrw3xqZR+E0w6BYLAgaV9ejarJr93YmkS3cW\ndevReDsVQtn2u7MFjZjJ/qtKqGPeJUmhmvlz2uzcpPgn6qBkTYZgRUVwkeh7\nXEBFx+5SaYqr4uiV7C/th0F7erm8k74HxyhsJFgt9KItf5235xJfB5Lrk5YE\noiVevAFqSj1GPwNvsgE06OZHHeTqmdEKhO2DwT4ApRISjvstgBevDnkPFGtp\nno/Ovkm7LBgDJ1aL6THoU8lPYHxWEcXQtxc/kiiw58cjDqi27aUAesv5/5om\nWQIlCuK0dvWH0cn+ARN0h8yTgkSbGzXI3W3eEOI/z6qS2vjCp+TnbXREuXdM\ngcSE\r\n=1DiL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.5d0605188.0","@material/theme":"12.0.0-canary.5d0605188.0","@material/animation":"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-indicator_12.0.0-canary.5d0605188.0_1623692330365_0.9614385173163031","host":"s3://npm-registry-packages"}},"12.0.0-canary.f147a2271.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.f147a2271.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0e7fadd17d042f62cb1111008fe7acc5f0670c3f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.f147a2271.0.tgz","fileCount":38,"integrity":"sha512-t5jigM8oPA5z0nQHEwknhcqN+vDATWGL1peEQG79pPJbccb8yZNuufhZkiJXiC3Tr3SmFeTIBCvRdeYlNbZSgA==","signatures":[{"sig":"MEUCIEs6CuCHGqfMS7KwCpA0zWRcKs12K42vbf/0rQfKZ5T2AiEA8+Tb759bHLQMO9gEf8L+f0oI2HGWavvjLgQDer5wzuI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx6taCRA9TVsSAnZWagAAFZYP/is1OyYH2VPBufl+VLej\nUCZPsucjoRt6ZxM4ks6mgqoj2USJDZ2jeW46XwJzrVcbBP3Hax9grO+iODAI\nbw9o0UgGMZA5pEXuQu5FAG31fI15m5gh+C+Tird0k17lAgj4RhX74xiuan+Q\natj59j9rFMUzIHhROj2589UkiE4omEczomgVs8UY9p1zZYBOfUAOkQRgSpgB\n8GLALmnPaspek+BIOXeg6dU80h6ZE1CCe6x0CgczS7oHGHk0VdUjSDj/53Go\n8cHcaXwTYgc1KH1W97mTBpN8Hv0khl0dvr58dtxBXfo7/xK3YNRt3txkwLBa\npH9J/WlzF7c82D3xQgwrdkjf2wtWGBfASC8SrzfUpbIj1rMR46rYcWrJ936K\n4wEq4AUr0VXjbBzPLZx1u1Oe+H/ay9qiWTZpWkVi79knpPn/U3s7sSq8eEKx\n23VuHqzkTF/DJy0p+ukBUJ+8vj/PQghMOuD67GuJS1uzD/AZcKsUAJDYsYSs\nC3+T3ajTvboX/CROf+3Q4MajNoFF9QYjr4aC+jLW7WuzJROuMle5HGJiBIQ1\nENI0It91gIM4mbXLtgtoJDBXtuBOVwYvevRyZ1E1WfLw8kLek7gxwKpMO4Vu\nr4tP42J4jNEVoT1MCukvIvy9lOHhfAdslzDQM47wJBF6lL20DkToy37KVnCD\n6oro\r\n=GER3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.f147a2271.0","@material/theme":"12.0.0-canary.f147a2271.0","@material/animation":"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-indicator_12.0.0-canary.f147a2271.0_1623698266558_0.7604528664318988","host":"s3://npm-registry-packages"}},"12.0.0-canary.33579e00b.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.33579e00b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"61fcdc72d74b47a0af94d8c84c64689dbfa43e9a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.33579e00b.0.tgz","fileCount":38,"integrity":"sha512-sKpmoIhvGE8yszxHX3ML1tp42DcKC+iGbHzthXarwzG17dUTsTkUWBjAfOIBtNngH9QMNTonywDQIoevatB03A==","signatures":[{"sig":"MEYCIQCQlM+ticPV1F462NhfKNDrId7jgnJvD9aT7ip9l+TXxAIhAOYg6SXw0aKjJ0Nu+lwKjRTeoBb5w6uiyCxN9TWG/thV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx/KSCRA9TVsSAnZWagAACcEP+QD1KUu2KfStiR8r/d2b\n3leK5bIu1hvtMMFkyn49W+YwrPokONWt0dyYSWXraV4qB0zLQlr0VrySfJMg\nLfhsO3WI0jCo6fPuo24mFhTfGw9IgZk5V4FX7Q0FvC1JFsSCraqIv4DWPuoo\nbsGLkkPAylDsR3UeFRIwmN79qeD9UHse8kc3JYLtB6AwFdimLJ6+D2g2nJg+\nCwvwlKyxgsP5jTk7uh4EO0hr5RcG0ef2HaGN/ycMR0yKbor5uy2JsHwkjTtW\neLAtdIzcPJvoClvXvSCYob8zQjsPHePoTbZ19QMDRZea7Jzj8YepNv/bVPoi\n6AktzY7hJxivyaGSypal/6LMc8s02BT3o+y6G8mimQ25Cb26X43QZFhf+zza\nc9lXKQnfYX7QwZfNLiLXk7YD8dv/j3rqoWrICqKvEdNwlnxp/Ehcmz31Gy8E\nAYKQ0wHhd8wR43ItJNJguLyu3zXLbu6XGaYb48ru+gNZqciroyHxQnclehhL\nq++H+T112f3xVtJR/DYKE4aRDZMREs45N+xEU1bzZiH8JxziBNqs6BvREtXE\nGhh7nmDK+LdOXdOckljvtKYQ2YY93jFwFH6mceD5DNptGSDOicnOQwIX4XCn\nKWQIz5hOMEQlgG7ZhGiPliV3wE6Ke3ViAf6AksU9WLIQhRG2VyjH2aJJJ4Ou\ndoZ/\r\n=drq/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.33579e00b.0","@material/theme":"12.0.0-canary.33579e00b.0","@material/animation":"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-indicator_12.0.0-canary.33579e00b.0_1623716498702_0.7037209164559477","host":"s3://npm-registry-packages"}},"12.0.0-canary.a6909c0e6.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.a6909c0e6.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"fa1088d797743556a6e1a42f892563c58c48af15","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.a6909c0e6.0.tgz","fileCount":38,"integrity":"sha512-z/AASdX/AXrs4V2b/4Rx7XSRkq0KtyFNswMGupMEUxX6YDC6V2eMd6DFA3Ui/5EG7fGrbADvEP6w1c6f2AclRQ==","signatures":[{"sig":"MEQCIAWROj/QhEvqMNS/4CI5ufxwGmrWMdgN4WPiu1uZvUZnAiBDQL/Zq9WzIyjms9nCCKt4BP9c9JRqeh7KPqHQ2N8cOw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyPGeCRA9TVsSAnZWagAApKYQAId8sQXu3s7JI/Ldsbx2\nkLBbu2c4V+7d660eHCfrDJP07d7i9LlZI00rKiLjafSrxbfbeHWPJBmqifam\nc+Tdfm2o69VL8VIy95PkB4/wgfx79KZn/q+rkAbijBsvLWKsXpylflK98FbY\nx1jWh+6vj4p0aNqdk1kcR3r7RPD/7DanNuyRTVa5fEpHwlln7la2XkyOFj7H\nkpF3zecZuBtVVoLWJ7kSMN3CeLAaFNb9vPBw98nwIHWoD81btLZrEl69Qz2M\nkiG9iCKv+galpXAafh6Q+qFmNrkp1tbbnHpRZuZgzu98R9N4Ia7eGLlCRqG7\nshJmgVtK2zgP/++NtaXByuCS7gv53WecRQQYqFga8PEICVORAABoZTRPH5WC\nVmRCwR3vXeBW9bGSxO3tcBa1U2eYsQWME5+2ZqOpyAqfeVh5/UiWUN5oxW3x\nU+wxuRnkWGjgrSQT877jVkE+RA+tSYdg8WYjWTCAe3sfJ0bFsFnh/NAFClr4\njyNrdglbGoW2ozn0KMKqlTh2KREdTnzACBldpcSw1pwkX0o2tXjdD7qIFYH6\nCtgaOEoObpN2T7NqaXo/y+HjnWhynQtL3ftr7Ed1zjhUZDjjFq7I/KlV5AeZ\n7fZzukbV4m0+uD09jyrqrnmx5Bqb7CDIhaZBejLiIWQpi30oO2FO6TX6ZLxr\n2+Vr\r\n=cmtU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.a6909c0e6.0","@material/theme":"12.0.0-canary.a6909c0e6.0","@material/animation":"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-indicator_12.0.0-canary.a6909c0e6.0_1623781790365_0.3527335087771808","host":"s3://npm-registry-packages"}},"12.0.0-canary.c18b5925b.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.c18b5925b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"4ea385b67b249f74cbca34a2fdcd84100da0e1a6","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.c18b5925b.0.tgz","fileCount":38,"integrity":"sha512-+fTyc0gTSwHrxpkBG1Qy55lQp/sUVgFG6isdusVAobXjo+7p5yRhnsJk1WkpWevPyeBdA6V9YCrMJwLsGUAuqg==","signatures":[{"sig":"MEUCIQDoLcF7uc8sw6y0V+PMv5A83DCwzHCyNT51MCbRHepK+AIgbJTZ49EXaq8oTJL22j5El5r7IBn2pw5d5fqLlfXL+Pg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyRWSCRA9TVsSAnZWagAAUckP/3m8C7MzP2EpyuSIMtYD\nhc/BfcMIa4I45jkZWHK540/lqlux1QsBMX9pX6DKo6R4iZ7yGBpFRwGsnlhM\ndB7g7IsFYutOtqnteuhJ/MOyI2gHCvosCEmtA+WwRvm0vo5MeLrSGmKdheaA\nz6jhcHJX9Q4MdLmfQDktlmyFU4e1ORY5TdSG+gtiTPYX1i6qSi6J/R6XzzAK\nMn6qSOE7op9Jh36pofs0B2+fSnRb0MYbiKJHPZTAEyXivXsu+ljBuWRG2F1Y\nf3W2easVHARE06DJekuNkyOn99/Z1PhVAbUb7ynBIsC/NJeT+BJm980jZn4Z\nvLNrSSncb4fpJNJ5pYFTSN11vwAe34OM6LTLfhqRBuvPwYQDgUmjLsP64i49\nbKOdsexENVd2nA+rMisXssKtYiUezxL6OQShY7gO4myi7eUlAsS7g7JHH63g\nHO4VUeM7yxKoqPoVpl6JB/sDjwWYA7QvUOkqCuAA3oosasHR38EY6GAK8uUt\n6mgNWDQaasECbdFmWMRk3NX/465YncR5ffK3WmLlyb+kGR5YoE5DndH9mmop\n8BzuEPX3jgZ8mWAjPcWubDWu+KdV5D7hsrqGWCgT+YAiRRbndpm07L0n5gLQ\nhepkRRf3tOIp0xjzUl92IfpupUUuMrKTkaVX/9L+DgQu1poQKY0J9poevG6q\nBUA1\r\n=jOpI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.c18b5925b.0","@material/theme":"12.0.0-canary.c18b5925b.0","@material/animation":"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-indicator_12.0.0-canary.c18b5925b.0_1623790993840_0.302066811814075","host":"s3://npm-registry-packages"}},"12.0.0-canary.7ea2e830d.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.7ea2e830d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0a29df9cf3f4410a3a0dfdcfb44038d801d85835","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.7ea2e830d.0.tgz","fileCount":38,"integrity":"sha512-JtLbbyjGynst3OLe93NyZVdh0gjotJJmXsfq1bBFcz317z4IoZqPCdRV2CBSOJadNEKtMmed1by9C6M6RNLaqg==","signatures":[{"sig":"MEQCICDQzx9jgTQqi4DsMOmPohkVDY5AHVWblE+IpKdPzCnvAiAKAS8AMoHvowHTmbQAda3+r2ZKg25PE8taL/57/HUNZg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182496,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyS6vCRA9TVsSAnZWagAAzCkP/0IzfNcuOkK54DXNGQGV\n3TydXg8wp34B8hXt/Re1NGoS2NqRbsAtBlnO/7g/hvfg1ImYtV9Qu8fKoF3m\nrXYCYBQD4IL1tuI9O7/3gZM7S7Mr3DyvUc/ZGh/xxW0AX4mle+6USNebI8LW\n3i4HpEmaIOU5ZrOlGWUjBw5f60b8ofkLHHFL5KyQf0f7wpbH95w26V55Cg3y\nKSOGtLuZ3rstbqp6usVImyrGY4mJZPP6Dd7mOjU+Tofav9d9pcsITZtU+vis\nJ/zNrD3wQXL2hxDwOQlAJwo2G5qKqusT60AZFhGPNMBZAKrjviWeTP/+eaoI\n1nFdZB+DocD0h0aXYqJ/MBTi+Fr1yWZ0ks3wTB/svgCAbyxdlh0v9VInC0JL\nFxVxpkja7ZyS353/t0egaAQE+62i93LBbSk6/OZkXoD2og/6qHEohTDqurtW\nMr4GiMrWv9YLhMIDd0H1gz8mdPmhq/CCB+ueva9eaapOpZqB+qgeEdYw438t\ngaTp7phbBCg4gOEZtGYN5zkoS138axkbIhYDgNgdB2sm6YpmrjUhFuTQC5mc\nRZU8QkKwjarFw3XohS3XGK+qRV51L2/Px/ZDwwG7GF5ZntUm6v/QOFQaaiD+\noOomWkjNXU7+0lzzPHoHHjMVFXgJOCGSwvHP0Wzysl+eUfS0iTv9nMPSxNYe\nZ0X6\r\n=k3yf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.7ea2e830d.0","@material/theme":"12.0.0-canary.7ea2e830d.0","@material/animation":"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-indicator_12.0.0-canary.7ea2e830d.0_1623797423839_0.0280800961740586","host":"s3://npm-registry-packages"}},"12.0.0-canary.271fff902.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.271fff902.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"1689568beefb9f7b75254126e74de4ecf2d388a8","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.271fff902.0.tgz","fileCount":38,"integrity":"sha512-nKmDfdUqnKLfQu/Zvxmfiz+Ymtqiu2pgAsxnG2pOi05+yY//6ZeZFSPbTNVeBPzs5G702SGeUj91QfA285Vw2A==","signatures":[{"sig":"MEUCIQDVUxlylzMAP+f1mfc0nSLvFI7DyEAxQycXbBroo6j+1AIgZwkt3D15gPS6Tb/dU39QCEYqkXBhm2RuZNL3Bm7SwqM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182496,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyS7GCRA9TVsSAnZWagAAMtMP/jell8F0y/DBJr9Oz1nh\noqHrJ5lz4OsyPiU+cI0Xic4ty8Z1B8SLMXWN9ZpadORnS0X/L4JqXVXTRDkT\n22axKtFxoNd/TbEKujli+XIJRDxJ0fd2wuPT3BkszFLZDi9Nz0foP88rv504\nU6meN3yPqcKMypdDt0qvzNnJLD4dqfPz6gssqQl6cFcUkLtMGQSjyd8VlBYF\ng/2eDhm3ItaE7f0Sy5sCp/fLS3YiA/h/zONJd+HlkCdjSif3cv38FGEFreLV\nEam86utjiFP+IQghte2NP7MOvL/4G8Ntd63pZcDPSjBZzPqmFFVY6DC0T3Es\n8s4VCPjvZ9aRkbNchBMQ2rKcFmq+cSS02yVxqFYcm2mmWkXPKQ/0ArNrSOrG\nC8cszBGNmLhP42mfNaRU4LpuNSvLGpb9TjXmYAOxaudfh2epMxUMQvEOl2Rv\nx+JfDsgjCsjoCra/xZURoAChZzeMx5CcT+V/dfJ/5U84XHf3b3lhvZhUGJY0\noQg4p7Y6sE2k+cGUNB0w4cSCm81kyC6vM1DFbxn/RVfYJjsFHFO3CF8SvflR\nAqXJaAhHmsUTlAHHhOs0I2thhKlfmsG40dMvO1RH7h3BXN+wEgBFB/AYCoMf\nPI6ri0frUC/G5bbGGggXtff/6ShzNw0uaYIDIAwGJvCkjntBJiZt30+32A2v\nIGrh\r\n=2ttg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.271fff902.0","@material/theme":"12.0.0-canary.271fff902.0","@material/animation":"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-indicator_12.0.0-canary.271fff902.0_1623797446708_0.3408420502392042","host":"s3://npm-registry-packages"}},"12.0.0-canary.d96f0a1e0.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.d96f0a1e0.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e2728333d7bed0a167584fd57d8df45ad6619839","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.d96f0a1e0.0.tgz","fileCount":38,"integrity":"sha512-m/gYqRw0Tq5eoeHOKyCfJDTVHWuxcNXewaY28+88bEuKz4N9qY1fwc22qjpjbP0OBddJQpiJeLb4BjSA980a3g==","signatures":[{"sig":"MEUCIQDpPGmUg69i5hplu3k0GYsYm8Bp7yTL8KBU8oWlxdOrLQIgbNDtrcPYYSa2IZkDPmq0SjN8kEdom0TxU7N3vUY6OdA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":183397,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgymevCRA9TVsSAnZWagAApEMP/25Aqhv4CYvoKzn/CE9x\nG9F/TQOfAyT1FIl4Edcf9ILmCes8ZUKglWm6kuPQ/z9tz9ojRGv3Ea0TXRCo\nURaozqGeXNHvMtebEXcsddqbZ/OcSH47hUfqm9YZORDd16YHYV9fVXW/vyRx\nFRbwbkYn4OvQX9OEzJzDWzWS7NAgnt77yfd/z8Ch8cOTEt+sSbXqyWXSf92k\njyAHr/bv7TS4An0UraoNIXqQKUSr55NjoifebUptl7phBCYHXjUbIIcyoUUU\n41ml8/tM9pPm9c1NUh4nFoG075N474UjbAsM/Wo+4nexXSySO3RWri8EA5Aa\nlhbGQK4IxquqP66P1OHuSQyQobFoqqhQ3Qq149RjeBczObHQhuo2NBWMaEfI\na1q6Cp3xyE9gKktnUK0YHL8Rd7A41tnWsExEPivAv9DTqECasHway6iMrvTe\nG3kwhVzC/vQ8G1AdBF4J8byyN5AeKv5795c3iLnizsUKUn+fHybMnc+7RpHO\noK53rkRXsRlGLbVjBWApUp/vQtbHKt6DTIgLtikByqA7QCoctEhHoKQZIClR\nkDENu5Q54cDzk00+mQw4mrCHsa9fOXspaJp6rvnWQ0Fbgqj3KtvPSSOHs73/\nBYLacVtkEzEgD5CDBXaoMbxFJB8wH6XHgqNYMt1b4/jflYY/iOUgTk3hjq1X\n8wFJ\r\n=Q0N7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.d96f0a1e0.0","@material/theme":"12.0.0-canary.d96f0a1e0.0","@material/animation":"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-indicator_12.0.0-canary.d96f0a1e0.0_1623877550666_0.7560506520374302","host":"s3://npm-registry-packages"}},"12.0.0-canary.a6183801a.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.a6183801a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"1390c871dfe9e93c0d4354256e90b807ac6f26e9","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.a6183801a.0.tgz","fileCount":38,"integrity":"sha512-/gdwh31HjEy1Pjfpwzn/ZA/CTTI7CuhTVpqqsFiXBy8M3xEPoosR8JTlzhiwZLrF5UNvG4M0TquHpiu8ujfdVg==","signatures":[{"sig":"MEUCIQDI3JwYJdP8zzhyS96iU0WNNSsucER8qGZUlqF0w1qafAIgO+ItTlbTbTsHJ1xyd77qAiTSSHeWl0V/MyG5ilwQ7f0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":183397,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgynWQCRA9TVsSAnZWagAAENIP/0qj5v3Hty8v/7q8ThS4\nehndhHvDbeJEjBqLRP6n/sQEWUsc5bb8VCvQ3Cgt2njBsmOoo4vC8O4maPxQ\n75v/rxJioMBecbfRduMLQQsdZUgJa633nvnK0abW3f0dJ8vy7K0ww9a1DCr7\n3+xHgXZKqtLWy4fdgp9tHWQ0UOKirRD9aZ5dNGL/ZTMPwKm0292DwxI67rLU\nUBQG4cIkx2Uc4105hiJLC20OWIpmR2iKrvhLcPt792fa0y71b0l33fNofMAK\nr4nQsGJm8c4XCWp+FyGQG7ZFtu+jDBFVENCHcFhKDgz5FdOyNQ7OpojXSqx0\n7DNElDtmACvppRbK6boN4Xf1bmOdz6ovIPN5oSwRnd5kb9imGHGCbv7BH41W\nbSgXyC7Envhzw4judqNuKshKgNTQvCG+UZ3srL6rAUPg430xTwfrHxVlx+Yj\nuH4aBpTdOHiFPibSTJS8z94rTupCS21KYBBMmdMpHvtCCHRQ0mMRoKSty96C\nYZHHiIf27YS/Th6vOTSFNvTagM6DqqxXUxRXS1hjw6DvzQ/+4katGBCm40pc\nyNqffE2C3foCnsyZlNiQxzyN/T5rgpB8TwhqR4vXOo374PLZyeLJoqv9H/rh\nqOZiiWZUO6ncBhDisqAVnsOusU7MekUjcWk+wFxufQEUEo2PGFu8eQfvYYbV\nUU1o\r\n=wlbS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.a6183801a.0","@material/theme":"12.0.0-canary.a6183801a.0","@material/animation":"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-indicator_12.0.0-canary.a6183801a.0_1623881104141_0.20518197296487584","host":"s3://npm-registry-packages"}},"12.0.0-canary.940550232.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.940550232.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"49ac34ccacef2b01ecb016727e22b86181d9e96b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.940550232.0.tgz","fileCount":38,"integrity":"sha512-J6o+NbhEeaW2X0bxzgzs9L17QXO1bSALrj8AZu+1njpRA1TrSbxcQdRwQcpoeRq07MUtYnE9pf9woJnnpcVVFA==","signatures":[{"sig":"MEYCIQCPasNIEyZiMqWk53vKvZMEf9MOauK4wXt5nzhJuRFTOwIhANkwLuZksVQzgIPtXYRwZVDyNrGhy1tbLI2nB71dyPf2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":183397,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgy6UFCRA9TVsSAnZWagAAw6kP/27eSKPb3b7mu7JDQ1DZ\nQuPYOWG6Hn+qqbpILeSlwLEh9MwsQ0yyuiXkcVIWwdNR//FyPyvwijPdqHtA\nc/bRVcGerBS6t737hPEtSKHl+CySFvcM2K3adK+HJG7I+qGdGJxLZAKAeD45\nE6E2r2fIJ5tnz+5ldFJHm3FXt3qqvgv9IbtvgAgJvhH7UJcWQFMdABg/bpJF\nGfpGUcWiueWch1VE+ReKqCmaZrvMVSLQm2kPy4fA3IVsqMo6fmBtd6ROlc14\nxq/5N5i72Ee8IaGSIYP/uN0xpdOt6lQ3Ws6a9iMG/i7ptY08QwXvzu6FWekF\nIs3oB6Ypv2VXk07MD5NxYyGRyqnf+uC6aHX2vR0EIRTJ5TT8J+kh8LGcoswc\n2Tik13UW2EinsKyGZ4hIce9EmmnUQ8Xavyv8dQMSzGbvQjS/jNpLvDMl8f7l\n53xXozj3jtO0pDmLRoSa8/sQkPAb3SbvoiPxGgRp2bFlT9GpByxA3SCojsIs\n+CushP0JlpxKA4ljuehpBfO8p/T1eaQpfgJG62sLGLy4PRLWNfc0n3AuXyPW\nSDB+y3cVI+bRjgSBGmuHHLaSqIwWJMulbyX9FLdGb516XqA49IP24oiy5P2R\nC2bs/cJX74NzMwlXIikOin3sVKg/2m+Q1uRYTRxvLO/Pcfo1xo7kdm9cm7Gq\n8/iU\r\n=iAbk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.940550232.0","@material/theme":"12.0.0-canary.940550232.0","@material/animation":"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-indicator_12.0.0-canary.940550232.0_1623958789327_0.020819725083242924","host":"s3://npm-registry-packages"}},"12.0.0-canary.f705e8048.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.f705e8048.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ab1471b680113b04a077515dedc5dd21935e6249","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.f705e8048.0.tgz","fileCount":38,"integrity":"sha512-/zFcP317KeNrdRncTUkUdrQHd55xemrirgFG57iaMkwSu+IpWmDyBD+wFw8q+arHnmzTQLxFqUsyAqEm1xunlQ==","signatures":[{"sig":"MEUCIHZUZW6cjuUTzbJNMV44EQbtTKZ3jhPhdO7o6D1vpmNDAiEA1KUTp06TB0LoRhkctuWcplCuknXMet2RWMmHK4PgZqw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":183397,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzLqXCRA9TVsSAnZWagAAFwEP/ApbVvi8KTlfQiZwXgAL\nbhrG/1Vr89Dpmg1CmHUxBjXxsWxG4VpbJiX4KcYOJAnYpr9AC1MC+swL+BNp\nsfnFocyALJCyZYL2wTtXNjLAHOFERlo0JLNJV/fczvVQpFrU6p6KXp03BsYp\ne9Hop8QEKZJbl+CBfux6EzL6Y02l9lD3TgSStJCiaCaCCd3+Wa0KzpGNDBVO\nWc7DtMN9zaX8FiJgoN4vJpxIiboBQjUCim6Qp6FHT+qrGIqWepbLbLtgYbfz\n555VlaD3hE6pC3jOBd+I0g5rCpmT6PuCrVzYC9gAR9fJRxQ9ZSLd4383NGs3\n1ydpq7Epbzz3TnPS4y6pFLfeXtoo5hFlhLgOCdFlzNrZbOhl0rX2Zvsd1pQ+\nY5iE15WCqMrx4pheJDB0gXtqQgiM4xCq2/2h0d55xLiTdkWM/Nbaiz6wz7oz\n9Jr5rVAktmSSbi8B4qFsRHBb654kXsconHrV0788ucUOx/V0zOtLIA81DvGn\nCcWETfBnk2hDAcHBiy4sZalHw+QUjpV7no0QC5czIJalfICx7IMQEsBzKTcI\nvgAT8rL3uZfOGyWYij+XjHRPOIm6z8MEqzOcI55Kl8z6WwrcuqVbgtsShNqX\nYdChGRkb4sRIm0PqGg3dcIWn5JyDKgrak1mVIUEqsiqePjNh6vFr7SOzoy+d\nN34V\r\n=+jOb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.f705e8048.0","@material/theme":"12.0.0-canary.f705e8048.0","@material/animation":"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-indicator_12.0.0-canary.f705e8048.0_1624029846904_0.8226327963789217","host":"s3://npm-registry-packages"}},"12.0.0-canary.08d791f37.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.08d791f37.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"f6a347c688a33b97fc66dbf1194088b484e141c8","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.08d791f37.0.tgz","fileCount":38,"integrity":"sha512-b1aY30p1Jwo58h07K20UKLTjoRSYCDM14aZcNtSuvBWS9TGaDam11MzQuhGpHL9ytgI1qOZN16SVL/Wt0Wwrtg==","signatures":[{"sig":"MEUCIQCPd1daHNwEXPsguX9VErH/qhxLw26LUFKD70otDdHkBAIgNcsARJD544bNr7f/B30Lo6UKiJbNhVspTuIm7zNIl1M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":183397,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzQv6CRA9TVsSAnZWagAAykUP+wf9GVBfDCWQevC7j/qT\nT6dy/M0S0k/0Go5B69JsvlgSsVdfkOm43/SpDjRXz/vNIWxdMzme8Wio5Fq6\nFAsy7uMFZNMttgKJQ+/QcemGpBdPDKQWr47TpFhVBvQ0znIni6znlxuiGOT3\nokyTcVuawN5fJDqi3fSvnZe02Fob8BmH3DOOps8csY0hy7PSvL7fDSVWQvuB\nj/2JNRjQ2TENadc4B6MLHYbA22YrV6reU6vONMAnaMVSBDviCk7dAPiTqzN8\nwSTVOotk79dKUmo6HBBBPVqQpItkjjAGspmQfw9vVWpjK2HCl4qA4DmEAH43\nsP0LjdpSBarPBWTEhtxibXQbkxKuYth19kVqHR+eLexYooc/rTWQfR/1DHdt\nqHI7H1aHoKWBKS04r5R5Euo/OMWU99ykHxF0Fm+MBFscCYXa58Yqsjx75AFl\nxL6d1K9vbtzttYZT/f2EItRs+MO2WGMxPBELrSbj1r9kBi2BTl2JQOkILYLH\n55m83UXmBFBOiIWBleZcERyr18X6/9okX3xsqFcDa4nKcWvu7sKC77zu4Fb/\nrypQe5m1TS/k7AbT3mjR7vkn97UnWfmS4kkfYRMjkQ3EAc7A2OjXQWJFQ13r\nJBM1F5XJ7UX7RYFjqMwI02qSq5kD75iurbqjvRu6feeqAksR+EqQMhYXkRTz\nYkER\r\n=nD6e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.08d791f37.0","@material/theme":"12.0.0-canary.08d791f37.0","@material/animation":"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-indicator_12.0.0-canary.08d791f37.0_1624050681297_0.13575012176350465","host":"s3://npm-registry-packages"}},"12.0.0-canary.e38d7440f.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.e38d7440f.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"1326e8362e992e0804a2fec4968787d93e371459","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.e38d7440f.0.tgz","fileCount":39,"integrity":"sha512-QzwQhQhh4omOIwnlXMXePjT/Gz52H8KGGgVDAIea1Y5eR0dIXEDhtEfx/BCuujou3H3yPzemL3ELXH0xiX6zVQ==","signatures":[{"sig":"MEUCIERr5kj6Z/qYquZzmTFWgAQlDuNf/qgf76O+9wCjByGoAiEAnxpB+aGoa1PlB7Aryvsw1WR8o0CoL14m5jTBWdbRrJs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0M71CRA9TVsSAnZWagAAHLEP/0BXNznriJiSTmdTEt/K\nkkXgTIjJIy4Z03b8GXP2ERCq9j/OXHcUy+ltYjuD2f0Hi2snKJwMKiqroezQ\nGlRiOHVOwsDWcn/QwxH8+kR33wJ3bCHJdNr4h5RrNCfdAf/P8Uv77kKF6r+J\n+cR+VQh0+SJtwqVdz8n7P2mx8Zv7EHESwv9fe6b7+1pf4yc4xqJ0wsAA+YPB\nwZGLbnG4w7wV1mwVnOxZu0wlltMXFr3G+xjNo3vJ6Ix+8tY6XMdQKGFWFAaJ\nbQx9zUjwUPzshanrcfAmqwMk/qRi9+D1Gwk53KkNriYc2eas8Bk17cam/ISL\nFwY+W8ge9Atpea7HlzQ06FXcFtr+H8Md+Pyg7X7NvpntbLuSgQjrl2AQnvQG\nuu2LS6xS6vbQS3oC5b/0+KB+SQ14oUCFiPCiaCDt5OjvdoEBS9FhuQzFwZg9\n6+lsCg8HJrAv4hXD81zXZeGhgSL/HsC7Ekj4E3uWoHVCctcNPAHxN/UGIWbd\nVojez2ImY6gLhx92U3E4Lg6BMZ7raLqOeADbx3rn4d6Cqn3bsfM/towxQeg6\n5sXuxjg1dJQc+Js+vOGCC80CxELe4We75BJfylluf++sUBuX37UF/QUYg7qz\neAe+RAFd5e2yYia80N795cqgxmO1BOodKdYzFQ2iZ9cHab7bDnEancrIDQ+H\n0AU3\r\n=GYI6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.e38d7440f.0","@material/theme":"12.0.0-canary.e38d7440f.0","@material/animation":"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-indicator_12.0.0-canary.e38d7440f.0_1624297205381_0.5452489037258808","host":"s3://npm-registry-packages"}},"12.0.0-canary.75900a5a9.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.75900a5a9.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"237717fd346762f621287b055403caff570610cf","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.75900a5a9.0.tgz","fileCount":39,"integrity":"sha512-8pXInzCPL4X9BUtHYuweIMXPskT1K80hNscDNxWfQPYqFGo+Zph9ewkEzDE38WhgI+sO5NWzRLUJLj05LIH5zQ==","signatures":[{"sig":"MEYCIQC4kbd/tSqLt0fnBZvzBfBjjdjle3szGfxCoxOQ7Wi91gIhAJdBLpPDL16Ld/4FkbIMAVhaox3X7ZZCI3huZF8ZCl6Y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0NwvCRA9TVsSAnZWagAAVhgQAJDt/JBrNjlwM6Vd1i1M\nFyqLbbeQ42zTGmMeHZeRKKEtG4M7i8Gio16Y57eVVX5jt8bTtR4mMA5cWTX/\nlr9LcLUGHFix7VXqnGf521PDNX1eEmk4Chh5u1ohjbM47qqEefG9kTAT0zzR\nTPlWyx1tWpgmDzLorJ3ghBixlAXEYOfie57nbdtN/Slp8yFPD63010ZyRLpj\nBrEsPL2Ya/8oEXVK0qLE+wILJRVR91qroARYoM58qTb1NIyzXx2HVc4MZ8tU\nH24h4bvdVJnfPhqzTGcuK8DvXvnpMG8plKiW7rAMQQaKrgcSqSLWFjUeoe0o\nYSPyDhYixu9O036GI3vJxQhunJsJTEuzhNwjZJM/UqtvmjA9OxLazG8aFocv\nntrwkjyCBFZDW5uVEncx+2rrDIFlgya0M8F/EtsXJSnxrHhq2hHkCVQZwww2\nTiIBV/hAAmIVo1HvYJn4lxBFFx7FsSB/2wRZHMw/lXP7SbQoaDSMyZnqueNq\nzjhtYWlRZ5TPThmjIgO7MRTh4C3ufPgZqeDkp5WnTABr98Rdo3DkRCrard0K\n5/zRbpKjGVFciPbIK0sk39cm3JXYJ9NYbzbcypsrzOkF82aWd8jwPrO6pax4\nju30atZBH7+oX1nteMDbgmJyfgUBoZA/hRzwkLOgQGpjLnpPM9kKYwdjE8hB\n+nBr\r\n=xUOk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.75900a5a9.0","@material/theme":"12.0.0-canary.75900a5a9.0","@material/animation":"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-indicator_12.0.0-canary.75900a5a9.0_1624300591455_0.3935201016609988","host":"s3://npm-registry-packages"}},"12.0.0-canary.33e6f50e9.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.33e6f50e9.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"956babf92c8a3c2cedd1225b7bf1eea6458bf6f2","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.33e6f50e9.0.tgz","fileCount":39,"integrity":"sha512-sWb9o5ZRa7xqmbj8X7tJ5n2Emh+iSyFq4i942AjWySoxEWWFnRNz7vl663NYJFTqhEAXh+pFiEn+sa7TOtEdIA==","signatures":[{"sig":"MEUCIQDAmRLVX3tY2lOel1y4xKCPcv0pfU6dT/NgEnsk/0SiLQIgGJTgv1P8sUS8KmkqbXVqZkdbeLDXaIWIXk77y/L0ONg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0nw/CRA9TVsSAnZWagAAl7sP/1nqP8x1sbHXQ1Q5j4vg\n6usFteeR7CuG21Mo/Ih1j29J3ivPMNaLrORnCIVlf2c1ImxskUsux+F+Pev4\nw6UgVZb/xR8E6/QZvIk37w/tY2lMpHLJ4+Tnh65sQe6meLEp+Og7rSOlauoY\nUojp6i6yiVd7UmhQG9Rxa9kJOeqCA/TF5VQFde9z7jY53ejvKqgCBGvGYs5W\nlUZI+plEhIGiNszVlK+4vKkA4W3bRnFV28Kv7z3DQyFumLQcbXkpv01EoXZ7\nE1XaO2AwUf8yJIvtk9UzRHNgxV9UAG1I3Ig0+Azlk4x2AppNNAN8mtdougPw\nQq97mQLJ9p7oiqTN7S80eTs3F3xwM7pn6nSWeR8ATdiYuUdp2wFgSys7rdFK\nJTIitYsKdXRLqIQ3yAKrYKIzL84Aunnv14zn2fUEa5EPD2gdiahTKehlISDg\npfzJvP6/JX9R2cbM2KsQyIrNrMZIVHX2gQWjjLzAJubHkyDxeLJWe9NczyNo\nmlzXuzUIXL+j/FeLSAaS/VJknmMxrwYQFIhRC66OPwl3URbPANpSmscire9Q\nYQw9HQiOKr6UkHswk4GfZjnEWnfmYJnGS33P1py12IwvUi2jVF05RpWWQtSX\n31A9VkBYR37zGnx7VTM6i2h7lg4W8vMtpSdk095sAllsupVCn+Lgl73SlEnf\nyT6S\r\n=LQAz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.33e6f50e9.0","@material/theme":"12.0.0-canary.33e6f50e9.0","@material/animation":"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-indicator_12.0.0-canary.33e6f50e9.0_1624407102817_0.5110340785264007","host":"s3://npm-registry-packages"}},"12.0.0-canary.8c685301d.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.8c685301d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"15313eb84109d4b1be604a08c47787d8a6fab241","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.8c685301d.0.tgz","fileCount":39,"integrity":"sha512-7g5mrhitJyKzfekdIJr4UuV6j+pWuBsyv676bJ/j/WHRehXaS2yUmYUgEt2Ts44aBAQ2MRu2a5SYA0jHV0o5MQ==","signatures":[{"sig":"MEUCIQDgalm5ThYkF364bhMHxCOlN/ZGurfF/DS/vAJYozxfKgIgZ4kOznsOsmh1EGDx2qFkcJBRwlRpYKPKt6utuAhTENA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg03xPCRA9TVsSAnZWagAAGSEP/in+lFO+eYOv34xXCNiC\nbTRa/x6pYNhvKMAF3SWxGTRPrphtakC4Lgj8BPN/4MW36AmRK22wX62ErmES\noftxzXE3HndC8rAeUmH8HEfgEvYzjaL3xYbvL4kVwI6TlXdReOszirksvGyK\nyKHZIoBySKa3MCeFGrF+vKUXe0yV0O5diZSpdWuhJVwLPuULyPGsiaPbFltl\nqEDDD05hkb++P40FNPhwmtT+YBYgBp2OlSSIXMvpUVchu0bqQQldMBNKCk4A\neUP8+Q2N0L7vLW9oY6YRZJww8ybIon4G2ZzlNtir5aX1F5OxVC2v4z3Tsnb1\nsQ12thyvnAsgfTn3pqfmzOGhTxilsoq7cqdDk8kDsghB+ROvS6sykIl5t0B+\nlvoAyfI3131xeMLD8G+LkmKkWezu/c3pLI7Nx+CECVwvNpfQ/nZ1XFTlreEi\nlN1WNnyyUvaPQCAgmsmHEa9xCWbaqIjtuw+6R17syRb3hpSU55Xg/89BxLgE\nYNLt75hFsjSiR9kyGAquVMyPSpJTmSodUclaWGkOOYnOLO5I4LQuxVSrZMkI\nhk42ziIlpyH+smLHw1R4DVkZfHUMLYW5snk52sKcOv+Evh2zmzaRXdEjjddi\nnMClj0a2b2WfwMUFrklQOEFzRlJaKrt0oQueJ0e7aLxtAC24+MtfhJOWXIip\ns8Sd\r\n=7Wsh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.8c685301d.0","@material/theme":"12.0.0-canary.8c685301d.0","@material/animation":"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-indicator_12.0.0-canary.8c685301d.0_1624472654623_0.7277432953553613","host":"s3://npm-registry-packages"}},"12.0.0-canary.8c7d994ae.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.8c7d994ae.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ea5e1545b0531f5f986ff80c195b8bd70c02c5b7","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.8c7d994ae.0.tgz","fileCount":39,"integrity":"sha512-HjQeTSlhQPTjYnftQTryp16Fa55S/OwCyGkjtTex6vWNotBp++u5MXIWbjnFTDJDL63cotyiSTd6g1etNp27bg==","signatures":[{"sig":"MEQCIGC62okIqQigvNbOvx/4eb4OF5vS2hzZwjof2cTHaXR5AiAAke1klSV14OiF5wD7GokzKBp7nujMnJ1s8lwZeeM1Hg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg04sICRA9TVsSAnZWagAAl4YQAIwB3PLVckPONWmWbaJU\n5zU4KScQyybXH3O2ZFFDdjrkcjT7iMYUIkU2MeIP6WYIN/CS8qqwhMwtpM1d\nE3eitPTVMImYoEEu1N90wa8qv7H9iXGOGMg4EIq7slpZsYpKXmCqJDaUY4J2\nns0mrcVYBq7JKEIyU6O0Qh1Rdt5pxn2gQGIrqNkB7k557GUoXg7tpv3ADWrd\nfm2BYsL+wpGM2iVsxfA/NF+gRoT4MEio+AF4auk1FXwMnQkDcnWYMlEfxvjY\nLSSpLimtc856CGvd9FRtdxGKC2F6p/9I3HF/wLuZx8tUEPq6QugAZqdcoLFi\nWnJtz9gJZx88fQwd1fHhFb7AnXxe+Auqyo5Yttg9Tx4gVIV6eB5etp7tAZYX\n2Pq0v0PMmYLoIIipSOLWQkIcrMlRTi8/A8KXZk2AHAzYiGsCYmI9+Za2k6RN\n2ZSIeum5C3LVopdV7cCObITcqQF/7lTBGTgAiJLpyFSSZ/RiEdG8T2gsRlD4\n3qHKFQmULyUJYv+/Lybdpa9FrXAUp2xCMw452+58RedqVW1R/n3u7co+vSRK\nid5KspXRsU5IAU8ojHP55fSwnRNS5u65QPTgS3V7G46XvEQLZV7ByayxSCgF\nW84BS1iW0w5hZEHj4vpUafbbH66dfkeCSytSOCXvCefRkIAxbWT7oC6ykpwV\nVexd\r\n=O2bB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.8c7d994ae.0","@material/theme":"12.0.0-canary.8c7d994ae.0","@material/animation":"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-indicator_12.0.0-canary.8c7d994ae.0_1624476424013_0.7373011467326482","host":"s3://npm-registry-packages"}},"12.0.0-canary.4ccd39bdd.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.4ccd39bdd.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"fe7562b5f43627d14b6b8472dbc1ec615ad09900","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.4ccd39bdd.0.tgz","fileCount":39,"integrity":"sha512-iFSHCijNYw6mDj+N7e9RKwU5uQ8EjLS79ezOpBZz8p3MvqULwX2KriyhY6zCG3jqTZ5Jx+tNgYh9g8fk0eeXZA==","signatures":[{"sig":"MEQCIG09O2kJvsJMoop4rUJJEThIhkOhVO0AuVy/jQMzfWZZAiAf8xVyS+2Rz1wfsyAX/qKGA6IJRa4VjWXwNeOyR6E3GA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1K9pCRA9TVsSAnZWagAAtn0P/2hw4FNm6oNJ8UyUUBL3\nSS2pxA4HgFZqkVeq7zw4l+YR6iL5qz7UXWcejt/CVGBiyDPni4j0fzbGrHTq\npChj0LkM2JhnpMSDW7W/aKrMuGtQq8kG6d8LQ+QcEWovSEOR4ceemgGzDBk2\nZpkVA6ZTCdvFoY1nVcvnhA1mjNjECdLK3FrlGc8p6drKlbUGsFmlgTvYEk+R\nqK3GXVh03rbqDP/PFcDijvmTVbVxMFrdZjhIo9Uh1U88oz69H4OKiK6a5Doa\nsEgUW5162Q0uN0JDH6/y0f1qvycJfEFa0icHgzNfXPCJpakl2qt4stTJBOOh\nrNkphWZC4hN6POViF5StBCVc/DE6DI3tSy/VcM2rrGX3OMLlLTlZGyQzXhZc\nOgDgLCaKvIHSQ4AAa1xUrgTS3ZQJn2yPEA/hObk5IvEgioU6xUR3viwIIKgn\nMIZwGwDpkSE5ET2dUsZwla3Rlf5+p+HpQYL9BXPOAhyyVEdcFQA6hzSPnr0f\ntpcEyteYHcMJN6HftUvumTnhyIa+eySitgedL+nTp6Z8VbTKMhgRPdrUp4er\nVSn8L0TP3oRvHF5DIili2qVNAgoQeScO6vuQ76fpRFSpiBjrn9igIR0YO8Y+\nF/O0R1rmVliUADvbEVzf3tDkrpQH8eeOA9oN609E9qXFZdXWIeeAOKYfD9/I\nIfYX\r\n=1FKG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.4ccd39bdd.0","@material/theme":"12.0.0-canary.4ccd39bdd.0","@material/animation":"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-indicator_12.0.0-canary.4ccd39bdd.0_1624551272992_0.20109838947811687","host":"s3://npm-registry-packages"}},"12.0.0-canary.17553e9f8.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.17553e9f8.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"2f761d3bd84eafc78d644483eb90f2a83fcffbce","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.17553e9f8.0.tgz","fileCount":39,"integrity":"sha512-0bXK3XANUzGSZxini6Pqjjhes6FJKda40Fe9AJ4GFODhEhvCAtaRh0B5onEGPSBeuWUqSNlD71paPSVZQofuRA==","signatures":[{"sig":"MEUCIQDeAKSHIywxd3Mhv55bTuvKjjyHrK5myniHGMWmz9TyRAIgZP6CqQakbQ4NLWJ5iYjdZJuYo/qB8KROB+k3dYiFp3A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg2lKZCRA9TVsSAnZWagAAQCsQAJuyMluFxl9HK6wHeM48\nllbv3b4vrMErdclulBbL+AFoFQergwUzC22zPn+2Tf1cE1Ov+6X2zQqyeF7T\nLw6Gda45SYqKBNEwe6uQhUp1186zBn920tP2xW+P52MKvLR38j3J+8BvUWCg\nZPkPepnEfNp80n6E396riPIiRqqkN2gO6T72CQQEDnQlWjDfuN7znt1T1bo7\nMkrBGs7M7OZGWdxh8iswiSjGuaO3aqEhGdEu3fAJg0SommlfIZAvOr967NHc\n2AKYkDslOaWNbHaB8SL4my5BjbxoPTAqwYBBUVs7iCcGPT2DnNUOznZRjhHm\n8uHR8VpsOKvdRd/I90vOY42UqbEJYUJ9d8JCpOT+E17I+C1QmeF8SMC73L6i\notDICrYdVJReGEzZ+qIMKI/32jBK1pd1ObALv6Zvb50mKgDwXGNcFKhAQzJe\neH3l1ORNF/O+S+8oh+Jf4dQWu3gizVOHCPY8J0+hVIjQtDlTbazv2PS+hedg\nfhLVxuynocRgTH/Adq5PMb30KQWJ14f2IZNd/0l4QtJMV9amKSo0TggxHLqr\n6vGe8Nj3Ra8L4myjR6O+C+Vsfyfc7husiM+fFGO8RE0E9mKuG+4f6++Mc7nb\n/gHu5dPllasRdAMDk7WxwtUUQuH7zCAdq/cv6dpspHjNPLmfsHle8FWOK9fr\nLoHL\r\n=lnhI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.17553e9f8.0","@material/theme":"12.0.0-canary.17553e9f8.0","@material/animation":"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-indicator_12.0.0-canary.17553e9f8.0_1624920728631_0.846063018094561","host":"s3://npm-registry-packages"}},"12.0.0-canary.4c80072fd.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.4c80072fd.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"7d16905b8f39908922f09da478cb87a147a0ab59","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.4c80072fd.0.tgz","fileCount":39,"integrity":"sha512-0ptHE2VGr54vIOxTMlRL0INhF1jyF5kGkHxV6Wj6k0QSFGGhr79l1bM5wSJZhnmEsmJf1V3yfo2Aqd3xcLaSVA==","signatures":[{"sig":"MEUCIQC0/yU3lGficlVvDrmMZEXu47eOK+R4Dbo6RYRO2a0JzwIgRa5MPMEBW388NFdIKzODZg8eTeO/cN2JPuhU2fnqxaE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg22khCRA9TVsSAnZWagAAklgP/jpwELiBL1NPPmw1Gefz\nycN3xb65T26qQGRWKjpdB4K0nkF1hdWg2UD8QJIncjDRy3BbS5Tq2gI+FIAD\nSrzVYDEurpg6EkMaB46swu9LUZmijSMobrgqrU+IWYeG7O7w6LyxF33xL8ZB\nVte91Rt3xjNFB6IS1SYRKwkzOTgdBRvwh4KeagGbN2i7fWM1/8XSFW/azLLr\nyhPSMIdSoGEwvruoxhBOfQfc7jyFsDNfOAj/JNFZ0VJI8nfSl6tNPV7zOZWP\nUI5HmvBXgZWZQul69sH/BIDSeTsYxZCTC11v/FCS5Enk1DF07btw6Kq0B/Un\na0/vg+1A57aQx2TjqvZz6h8Of8BPBHP4emEWd1h1kdGg+RcR2arxuOgTQqpj\nEX3asUbj17oJwrUKep1ehjW6dtESLil5eymatiwDtrLMSvI5I35uA6rSpsUS\nr922d4JE5ed0E4ckNdiCv0w5FlUO1ypOGp/f6XRow3CrXzxdMZLyCGaDiJUE\nx69sEsr9ptHqBI0onBakSu4AHAuU1PfCPQiBgjtg58iots0yiuZELPdJiJhj\nHFmYLPUpCKERv2OVNLwEdItizBKzqdQKvPPviWWDcvNV9HO7vOop2ZiR9VDt\n3NaH73TvKjX1ENfUgLC1ew1i7CRLLNQTKYS+f8D3Dck4mZ47lTUUaf8iuyVu\n7D3j\r\n=tkBS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.4c80072fd.0","@material/theme":"12.0.0-canary.4c80072fd.0","@material/animation":"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-indicator_12.0.0-canary.4c80072fd.0_1624992032622_0.27395529310592837","host":"s3://npm-registry-packages"}},"12.0.0-canary.796811db7.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.796811db7.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"f9fb5b198378bff509f1ff400191f5152d715df3","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.796811db7.0.tgz","fileCount":39,"integrity":"sha512-+9zvKH7bzq+NppgpMhSPI3L5a9ysCJOtAKzdQY7gDxGwEQRDHaDOlybPyNhxb3ZzNdm+CAW5JXmNkPQGkeuwCw==","signatures":[{"sig":"MEUCIH14yBt85i5dHryktZ2ioHUAhY5nniR7+XR7qwxENFIHAiEAo7sly7pL7aIzBKvDpo91ZsTcRC/3t8i9yN2fnDJzJAU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3QY3CRA9TVsSAnZWagAA5fYP/1Q6hZxx76leEQNnYNtt\nPxNi6R3zNyB6HYsavPrDiRjk0wDOf1SQ8kaqsbLXw3IJz4eKFs1fgpd6D4Uk\nsQbweFcJUHYqD93UKGMYOcrKT+toXuAfwQddkDVSYnBhU7Tu1+AFVN8+Hr4G\nCOavR781cVvL9Is+KPZpe4UwxVzQ8MsIBRR8RjZZ4RX9C8Fkd39rubuzWR81\n3FR8EmCcjYfJhJEd6pDqeEkk6aOoJl3kZ74hA75GyxrnIyAt79TFMsPm0AHy\n9j6F7QDI4HHmJekWePLuHDRIi8ERCJdyLGWHKX5UIaJ3HeswU2n63AYnTwyG\nQ1aSkQaoot44267Wnn5WZxka/rgl6U4ecqHpWjJvr9gtvQG/yZqHdEum/s5z\nqCSQzzE9WKBq5uBlSu5im4i8kLNhO7kkPW4nmYrZPQaiGx7/AC4b2Vj+PHvf\nXARF9zhOjbgqCTH1wil8lyTE/zhuEsRriVE54mXDV1a+tZ6NcNwhKkQL5t9p\nrpZZgdZHsgp8Ut+LG+EmpsGeGZtx4shiXjkIOBX0FoYQNuVnL1EXFFqy6YGF\nPS3//KCL7Gl4WpmdIQAIYSVqbMc6kr3HjFVSHz+gQAsR2MwqGNbTYQRTk7AR\nDVJwO9GSsAtzv5UnL1WCy9RlvC0MnomkTzzBgaRO+KNPLHsRMNMvWgU3T7N/\nWYR1\r\n=UUFW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.796811db7.0","@material/theme":"12.0.0-canary.796811db7.0","@material/animation":"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-indicator_12.0.0-canary.796811db7.0_1625097783381_0.14591808226534053","host":"s3://npm-registry-packages"}},"12.0.0-canary.70e1efdca.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.70e1efdca.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"decd41c6948cbbef268afcf467a224209807a1d0","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.70e1efdca.0.tgz","fileCount":39,"integrity":"sha512-qKRXvZ8HCYkomhhaGbtb+pzBzxAFZq+FWbxX5MwFw/6UGvttYa3BJuGUlxDKUoZ8sF6ZBu0wx2fpxylc5Xa0HQ==","signatures":[{"sig":"MEQCIEWb0pDpWSbJ9fGQ+ftxZDTxdz7YZUS8rjh4ic8nj4XMAiBbY7gn5bS5XRL5KeP4ITbBy6Q1wrlip6x8hcJO2Br+hw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3fYACRA9TVsSAnZWagAAxHgQAIgLW/XowNUjXOHJ+D24\nyFHOPVxGdV4qpCA1HdC5l+ijTKVZqG95iqgc1ExOXQD1qxkSvKGum1WCpTNf\nnO4yj2hC1ti/kirLaonfbNZfoHESefLwHTxQDV/An7oDKvgk/cGAfRzqXmdt\nOgeAvB+8yAGSr8M28nT/w7Pv0typsYamzty4nrpK6LkFAW9lOVmbUsKkGj3n\n60oUum7t1tLgmBLJOUW1X0VHqYc8AcEOQSDU4gfLhmdb9mqlvDsA6IEQ9p8t\nMl543nIxgu8YxcPn06oAH3nCttTvVk8Pka5xwttuWIiRRv25XyFptb+QcwDg\nzyJQU3veEnLkdOiMtAoelDYAJ8CojWX1sYjyk8nQ9ZwE8FTgq3VjVVhXq1kK\nWVb2QvdylFxQhiw602sknG/XV6KUWN9+wYUKbkFRVzvLQe42zs5sfuA4AoXS\n4pYiINx1JycPVkDfY8pKjEgFYPmen+5urHAYP2iu6Uaw2gtCyqsS3RRZrhrO\nkEzxePu4Lyp8PmTWlMRRC6Li7m/arenZNB/zcJFfoFS3WCXR0hfzFoyCKPL+\nA7pQ1/VxCJtx41EUMR0u+vVjNfVuZ0+EmN62ytjIz27Y6VkrSyre4Tjfb5FQ\n/O3v9w4uutEwjLj2N8oBbrVkIWZtqhMb3X6NJiMSpDuH/m0hdBmelO4qp3Ev\naMKq\r\n=Sf7T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.70e1efdca.0","@material/theme":"12.0.0-canary.70e1efdca.0","@material/animation":"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-indicator_12.0.0-canary.70e1efdca.0_1625159168152_0.4662233580092059","host":"s3://npm-registry-packages"}},"12.0.0-canary.435866d32.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.435866d32.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"46b636942b5124e9c4feb5cb5781c94f0def5caa","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.435866d32.0.tgz","fileCount":39,"integrity":"sha512-04yYrnLbyL4RmitBij8AHD9pblxPbpp+ITM5a26TXm+DRYwVE2OtfzDJd/MgzKlO+MvVi7kp0AkWzehCyVZyyA==","signatures":[{"sig":"MEYCIQCMw42tn8X8CX8/apbm0zv4ZH0Tch4ai/98aqRbKBikNQIhANTsPZwpNi8BQwgbmEcD0WE6M3Ypob/goiP4OhepWLxv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg31kFCRA9TVsSAnZWagAAwRAP/3xt9tkztg6HRLLyG0HL\niCtrHuG7eGQamfrmrFWRrr08BrnaNum5rtXxS2WwqnaZ9r1NSmAlUv5/a9RM\nJ/KJAKEy1f/thMdheoRPbCirQiOBucwgGmT9RaaodN0TcWm6poOG7vqWOivk\n6w+g2ZfGX72LLphzpjudIFLlxZ2Fh6HvddWY3Y0BZOxlNovxi0YY50VTX/42\n+graZlBA2B1GXszDJdno6L9JxAk1yTTAFPsGuYqRx69Q2kwbXyptfzKeHJ66\nq5oWjqSwfsjvO36GzEkSxk5DHBjKxEqnfS7taDUf2zb73R/FR+D4lZyrtSq8\nu9gyXKHb7b275korsKFZzuup3t5nzu2lTxCV0A+xPW8cguUEiIvsR8lZzFL5\ntRQpiSXcnuav7rq8WxlrEKIIllVz6A0dD+ZwHpW+wTvenVq4JFYBtzp5WZj0\nrMItcVFueqio22WTZRTmW1qSaiG7CEETWfj9tTP3Mxgqw0kwVmOO10390uyh\n/vXDIWJ4MTe4isaZPUFu/SV/xzWrtFiYsJIOA8j1VGjBT+3QojpkbFjjbHSa\nunjM5jfT8IA0z48cNNx5/5ywF5tzESI8bxokptbxGux3eacqbilPM+FSGAXj\nBgTtvmKsk1ZDiK/E4I0LlnEBjGhV3icyrWWhJf+qMOOR/tItt+T7jjjUDB52\nP1/U\r\n=P7ec\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.435866d32.0","@material/theme":"12.0.0-canary.435866d32.0","@material/animation":"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-indicator_12.0.0-canary.435866d32.0_1625250053116_0.37480108559152514","host":"s3://npm-registry-packages"}},"12.0.0-canary.d0f9f3f2e.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.d0f9f3f2e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"68be240d4fe906f9110022e80651ff7bcc2358d4","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.d0f9f3f2e.0.tgz","fileCount":39,"integrity":"sha512-RdbSmEeMkSN0pmV6RMnxYqz2fnfus9aZhZgGNUsYKttm6IC2Sk+doLciY2ldfsRXv5GxojZsFkkqMRW1MYVWrg==","signatures":[{"sig":"MEUCIEbgU5SDLwKK1EY2hAiPv23asfKZjKnoVh5CfIH3A6GjAiEA8WQflLoJ7lML2oS6W46dxMQZfOKKN1byJxtF41qapAI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg36htCRA9TVsSAnZWagAAwloP+gKa9jPTjGmoEFedYSDd\nEKL7Ik6UClh7wDdXegyTqF/4Dyto+qEcTQzI2SmzDRNgkT2OiAsSFNHwn7aC\nLnFwvm25tAaTYBK5euNk7bGGckugVV+6J7BI7zyZRWUZ3TS7RVtTNtGdlxC+\naR0T6rtlefEIRNvYIUAbrqX9rPJId6A41a/33w+A8tZn88N6Dnz7wv6Pk/Uw\nYuX1EgKwD6xzAPfxETeQV2DkspFosb5swUEzeboCIaWZKCXKfNXweOoi58Wh\nPWfY/e17R6JTOafPdwxbknnoEGN8gUOiUqQT/0WugDBK91/JNvi+O/UibpY/\nIAQ1ZleGrlmzud0sElAGaIWOaYNSbEt/Khyu4zvsoMeOuD7C6CIpySDVQNq5\n47+PrLZ2uIf5/m2S6/3CHcBpH8cey1yfu5yzv7KsETzPNiSoVmxY1HCLelfd\nqBTDEVnkNZuz4tWDGQEU1wia/eUW2xNMcv5jJwtmPCBpDDCA3chemOUNY4+U\nwbT0B7YrWCD2YsTGmgogyjJsr53y/cX4ifUY99v36sXBMTl4DOFj8ZG2c6JG\nljIDp59ojjm+E/+RjjNxeDb1PWqGGPvBklRv3h9qjcW4U5/4hfooVt4eKb4Y\nUfW1Cuc1X0nRGzC/01r37Nborbif3vDa6bh5r2q5ysbypR+VbYVj6bysyVLS\nUmt5\r\n=fJNv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.d0f9f3f2e.0","@material/theme":"12.0.0-canary.d0f9f3f2e.0","@material/animation":"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-indicator_12.0.0-canary.d0f9f3f2e.0_1625270381206_0.456238012431587","host":"s3://npm-registry-packages"}},"12.0.0-canary.adeac0549.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.adeac0549.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"9fb5d03fc5e180e6809c2c2eb9aacd1ccb14768f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.adeac0549.0.tgz","fileCount":39,"integrity":"sha512-Ta6Dz5NjhyAjgaiSXVXvQhj2x5Gu6WbX0UGVPd1VFTIsq8p360PGMG1GlORsJtZjSfZQhzXTqbRBm0ZQyW1fSw==","signatures":[{"sig":"MEUCIQDR6le5O3MtzG0SZ+hTPsz7iF6+lvoyrGKvx3m6kGYFywIgbsIWZXskrHAP0msRmN9DeftyXS/8VyDsds3ZZCMeeKs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5xUHCRA9TVsSAnZWagAAiowP/jAHDXtq3iLLMBRoxXCW\n1U0tTjtvdWCQaY4O/sTDu/35ISTWP+zlnde9fsFLp1AV75wm++I74BJEOvx5\nua6HFG/+b0r0UAocAET3KwIuI1j8w3aAaSZ3xEVus4jaYLCasAxnB1XCnh4E\n4jMyPlMlq2trfuVKkZYfKLdJnxT0aPgf4c+5UJJc1G82z4zwcbMfDyR+nQ7/\nKHkbFgtUIKMjI6U/TJT3y/DBI8XNVOrWbZtqllpSFCOnr3bL7r+Fy5ik2aPn\neUtN/o7RRSB/fMoENPlLa+iaCCAMjrkH7jy0w0SESuZTnTt0Z2VJdAcBGXNu\nHKR4Vkj6ow8MEAYA172ZdEM8nRjSy9xbgPRycDOt7aVabLrGoSDadfAm5L1+\n3FZuPZ1vXvgp3Y9Nx1zvRP85mNGkdRr/Mnz5EDmz0J9v9pVOFpClKWgYa0SF\n03AY36SJkyTDXrPxsOdPe9vleLQu8/XheDGKSSMWYmL60sMl4A0g9dU6kTF0\nZvyjIw8RK5i6p8uiHP+IEvLrUVUxhH2jVlzG9QqHQUPv9/EsMotfH2bYpudy\nyGSDvUDJQgxN/W7rj2tmtyHPqYStX0Gr+1WQkzWSVpXf/ZqR59GQPXALCvTh\nQcZexlSwxkqon822eDFUfuleobq3qON1e8HJJFQmC+SeFUDDEmrzfuRPHCet\nXZMl\r\n=r47Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.adeac0549.0","@material/theme":"12.0.0-canary.adeac0549.0","@material/animation":"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-indicator_12.0.0-canary.adeac0549.0_1625756935308_0.175468652121197","host":"s3://npm-registry-packages"}},"12.0.0-canary.068fd5028.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.068fd5028.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"9364d4e471d100c372a9bed37129655fff7b661c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.068fd5028.0.tgz","fileCount":39,"integrity":"sha512-Lj1v1YfPa+G0TSEMoMELwdmsHN8zFCd3tLjMOO0k2D5zZ+LYuaZN9u48Y+U4UuDVvGbaa1smypGEtRpp3Ipo3A==","signatures":[{"sig":"MEUCIQCK52eEyH0ZNme7to8c+F8lWOuCu+hbu5O/bBsfFhLr7gIgTcvGtt9vqsTrgONsW5b6tE/aUhEwRVM2i2abA9DpZ5M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg50v0CRA9TVsSAnZWagAA0A4QAIXys4d2iGb8x1amPXo0\n6YdSAnVmXWMoB7S+cQw862xrzglBSR19miEOiwDGgTormoy2qhY0+TIHqn1O\nd8U+isFxMxYlojYeAgh3FdelJhfgocDWc3HB1KbpVfjWGZHkNE8G61Ue2NFt\nlu04qfTWXZXNQyEUi+4su+EdkMUpfOPsXdoVjpe26XFBTiaETmNpyMSvgAMl\nbEFJ/sxCxRPHlbnu2QmNIBhaDNPcgG+XwSS/AB3X78DbnMuZTvpSJrx5mJby\nOOZNzCq01f3rNoCzm2RPee5kZdSMFoZ/5HtRqSdgvAamlx/uTL6BgK4zKlv2\nnGy6pvygAc4fZbthH8NJfmXpDqhICGDjUayq4/mPiKAq53js2IXT5eFqgKoR\n52cNM+GZftYmReUorDqWhAiKkOPNn3FgY7IsTLY/mgVomJ7sMNErdpTSBOdF\nxhZFuIx6HiwjC/A+Ym0y77MERf7MmuXCTtoCl6gL9EuThQsAB8sQKxpxDXSC\n4Z58DARwyTD4VvB3tDaNGTicdYEuNp3eVBck8KgYHyRFgzfnvuzfsw+djYSw\nC62SMzX829SKvMnaWyhDZt0K2CMsFNo1T1unkFKoiPeOkgcmPicvVCxnZTBX\ncDhEvu40R4H4vt9JMtC+FrrKfZF+nZtGeH9O1uFddHY88egs23G9RBrBylV7\nvUFr\r\n=pDdV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.068fd5028.0","@material/theme":"12.0.0-canary.068fd5028.0","@material/animation":"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-indicator_12.0.0-canary.068fd5028.0_1625770995897_0.9480935983832799","host":"s3://npm-registry-packages"}},"12.0.0-canary.5dfec7a14.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.5dfec7a14.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"410fa28fe5545d1fc9f0d9a4f25503e32971f5ad","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.5dfec7a14.0.tgz","fileCount":39,"integrity":"sha512-IAHaNardECXC08LY1ZGvR+tHy15brWG8+F4rpOjU52BheBbdrBpInfWAPS5R1h58D77mCg7c2/82PiM7+eSvYA==","signatures":[{"sig":"MEQCIF1XQ9ot1Dby0o6C4rPU2i5owAf6amEbNZxcaJ7xufy+AiA4zQjnCdn6VfcWyEKkfeGLu4aeRchoWWTnuMw9gP2WIg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7KApCRA9TVsSAnZWagAA85AP/Rmv3DaRcTdRnM/7n4Wm\n9QhTUPwbbFAVYKeczwchsDAUU5xLbWTYw3+Idh9upf/5ZBnyfD9ysJD+BT0/\nIAnBIKjNjGl0GGSM1zbmoelap2zQHOi+F5Hp4I7wtNKErEK6TZUVSatYAcuj\nq7zrKYehb5IbAlTgsiBUa1aDnTpScpkwVIOzACjV6d32T12ECwdHUEwg6/zs\nHzF1V/wsZI/depe7Ebc8uU5BH39qBJQSsG9yyRj8K4Wy7CpPzfVg8GEDjjq6\n+v8enbNamN8w0i5EWsw5+uwpgvYk75abjYZX06936iH/QwL/Mjj7CBo71Hbb\nb9PnZoxUWnrfAR6D0YRO85/IlA9fGtbv3J1D+9B6dN6bB1v0EX53h2KPfefb\nE6T6zdPPt3c9wB9FkgG16FvidbvMHeFUIxIgSun9J49A1STUvwqGLy6CKMIt\nUgPmf6oEp52biNa7LVdh0ojPnWDet8uBf/RtaT1BzDNi+zZdmKvaANGNE2Xn\nUL7fj+TdmqfMW4+wffvNB0fHIoocf8hRMK/7vQVpIQ8C803lJ0YRJJZU66SF\ncaw4btQaRVU0VHyAcSifg6JUFdiX0H3gEciLxwl6M2VgASSWLrJY//Qq/RC8\nUCY3iyijbteOLNDAz1SoNksstnbQIifFLpT9Yvu+aCLIDBZa0Ea5jSgLGpHs\nJcqo\r\n=XqDy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.5dfec7a14.0","@material/theme":"12.0.0-canary.5dfec7a14.0","@material/animation":"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-indicator_12.0.0-canary.5dfec7a14.0_1626120233386_0.9164783249140358","host":"s3://npm-registry-packages"}},"12.0.0-canary.07a73750c.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.07a73750c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"9dcfc4016f3472f9f22675167a2bbc43f8417054","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.07a73750c.0.tgz","fileCount":39,"integrity":"sha512-LcY+fskFVRlHcv+wk+zee0aVNNHly6pByNUXYPQ339y7H66nw2Jqvv25s64qd04L0obLcb7esURgrQpFPOUOQQ==","signatures":[{"sig":"MEYCIQCZW2dGKbcrn1j88W+VfBXgAQ3Nj+tpF7S+RYU/tkDr0QIhAIvlBWmngRWF78das93nomFr5MDnRbUEaBWRQdNmS8s3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7KUkCRA9TVsSAnZWagAApJ8P+QHfZTbvoJHzU94QKO1S\nL4TvnxSH6k8XADS0ypJracETMR6IBs/GXoCgzEZSfHD6MvVpeMCrs0f0Vq4e\nVqD2vMRbjETifvz6ZwflrABscw/vgWdMB9jBqBEtvAhg8kY0I3aYn/45/jSc\nR/RjN7wmiHuS1K3ROaWms0RBHrI5GJl7dWx+vI/RBB/gb1cMruFZGL6GdtLY\ngCnHIOxZ9EjdSONxocQivE6ZkiElgq6/To2MG1Ei1HM/cUpiqsm9OHmEAdXp\nB+VeJkzBbydFp9SH77gV6vPEYkGzyxokwxLiyCtrCwQ59kdZUuB22xbgN4ZM\nc262xuhU7w3O3DMr2bAIeQBJ7wbZzTkUecWJeSMxUCzZ84dIXWjTAxIOFQEM\nMrzqoxqoN7bVVq/TP8L44PWCw/r7yjopBjxACY6dKxHKSsq7X8FAjkeyIJHK\ntTGTUW8Db0kXWVCcwtVwnHsFCxJ7N4UpkjVwSD4DdKv12WfmnG0+o5Qh/asU\n0JyQ9VPGeRIx3Ze1aw4sK0ENY3fizkpKp5me54NUO+z7qr9w1FqRCrbwCEEi\nNXn2b64ppmYPaAkJ+tMAVV3L8v4OHzmi0t0pKW3ZZHaRYLCzuo74iZhm1n18\nGSzl94WbvAXBT6xMPzx81RChlNybalPSJSn3o2Xb9NsEucZz30q6/9XcD9XF\nZ1p2\r\n=NcZf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.07a73750c.0","@material/theme":"12.0.0-canary.07a73750c.0","@material/animation":"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-indicator_12.0.0-canary.07a73750c.0_1626121508008_0.9665377854728983","host":"s3://npm-registry-packages"}},"12.0.0-canary.3e4c6dca1.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.3e4c6dca1.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"865c942e74d540ad36a5dad9a274ec457629bcba","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.3e4c6dca1.0.tgz","fileCount":39,"integrity":"sha512-LaFt6883+8ko5W7mIKwKMTN8FCOh8P034iJrVBBrYr0aL2yp8/VZ5sm30Ho2uh579j8f4bdOTI1yM1YTGk3aOA==","signatures":[{"sig":"MEYCIQDqIDgbhGNtI4iPFB65LaB1dGglyUOim6Bt4O3zjZ/HzgIhANfomgzWOztnmEq4WWY3zVgj6631D5PUvXhZD61QbYru","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7PGACRA9TVsSAnZWagAAc3gP/RAENPehIejIuWUptSP0\n0Bc3z//thoUI/x+k2K/q/nWPYyAOPRxlZFBQPo+5ecO1uVLPMwKTPP+TVmzW\ns8QCYkoFpz2EqfpFl+L6M/3ToFbvWGKrd9hk31DjrqEQKoI5VS82WQ7Jiy1q\nvYxzumrmO7dzKA3q4F/lcDUUnSuS6vDpQkF+tKgAn57Ez7wfhuAkUKDli3KO\nN5qk59e62NGmLSMuJoHJabzwWbuwh27cw9bnW0IHIifxOdFL6w9+wvIvBpZw\nJjVJjZ8HFUS/gMBD5qFpy8vpqainMJ1v0uRZacR6hO9sDFaHZ2pE1+eLMfRM\nCeZvODUXA8xfdruHWFyTtxNGir7irMOyLOohxYKoiGWyJtTnZcYWeAt/PDsl\nPhQA3l/sgKfRXuChC3YVfXgqGk+augzv7J28EehOt4IX+/ZE1vI6Pr1OqRkR\nW7yRgOoPau/egvVOfmj0T5BRw82YjWTOfz+tZg/SB5iBp6qy5IwOU8rL/HDx\nNO+UkjrZHRmLK4g9VqSkqPR5k4R3fPi1ddjlf3vNMGvM2SCCtBpcMHT0kGFT\nkQhpZISIyYJsflUf+pIninsRYRi1wMou3gEkC/92CmfoDzM8sgPGpZhvW+5s\nGppP5+fcoP29rhka4fpxfCHUaQUCM1u/3l/nXhIN9PQWgZQtDNQw4RjWgtP4\nOXwN\r\n=w69j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.3e4c6dca1.0","@material/theme":"12.0.0-canary.3e4c6dca1.0","@material/animation":"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-indicator_12.0.0-canary.3e4c6dca1.0_1626141055591_0.25415497974223755","host":"s3://npm-registry-packages"}},"12.0.0-canary.ea77795b1.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.ea77795b1.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"b0457a01001aa7e5070483d9c3890d241b1d6ac4","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.ea77795b1.0.tgz","fileCount":39,"integrity":"sha512-zGGpRMM1q1ohFDWxKio6D9kFdow9k8HORykX6ZmLUTQWqtkqwhwUR1njVyAG1GpnlzQxybR+CoZ7M/zMF02mPA==","signatures":[{"sig":"MEYCIQC9LJCSRKJjShT16FeG4pHzlEoMXhuIdusec+YIkQzEDAIhALxpHmWR1AZinQ2c92yd4DSVIT18ezeyzP5NjdAnNhnl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7bXrCRA9TVsSAnZWagAABmQQAIPAzEZXjKtEsNx3HCOU\nof2f0gC5eSBEUUP4hyHEuwnzyofKn4Y9/RasYj45Vn2xSqyXNqrrOkGKSlAL\nDknNnwFKNgSW95yFjStvT+Q53YkyiDSw2Zk0/QDasbNMaNwTx9fIi8wIdFDq\nKPq2omLPNSkw1uMWedAW9Tj6bWvkqq3cFyj/N/YCsPIaoFdjBblX1wxgC4H0\n8if5mgQxcZH8pXSzh/Soxa2KH0FvxeY7DOk19Kn/U9m6c6lNygh1e70qEGxG\nEI5uWUUiC2XyUVP6Kzb5YTDIfBPWiz8OOUzhlAHRRzzzq08hmna8xwfMI/zc\nRjwV8IY/Sy/VYbs1LlW3fSei9sbpdP/QN2VAN0Eaw1x7mDKw0lwZSLZnb3hj\nsPghlvVYqj2i5R9fUDVHhImeOPhByFAIB8M7htaV0XETr5ddMTqq8ZEHsJjY\ndbl3a+rPSZ4kIN2eegtn5MOT+aG/j31FVTT3eWRwMQQ04Zl5CJ/vhjHBLyTi\n5dSpb4UYqFhN0VENvgLk6q7TwmLPVQYlTFet+Nf2ABB/Dw2q1ghagzXG1ooU\nci1UybUg9fMcaQv8A+bqBvG4RvpHWShC9lUFJ3WgZ9XZqzwtnsmsL2aSPsNM\nAccLHgutHrRx8dObype7uZhVJdYslzzfPywNf2QLA0BJhWIcgwec4uUOcauy\ngXtU\r\n=3tGw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.ea77795b1.0","@material/theme":"12.0.0-canary.ea77795b1.0","@material/animation":"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-indicator_12.0.0-canary.ea77795b1.0_1626191339251_0.2180000796694448","host":"s3://npm-registry-packages"}},"12.0.0-canary.15a179fad.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.15a179fad.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"66320768654735a9e31804560c32651d733e0892","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.15a179fad.0.tgz","fileCount":39,"integrity":"sha512-5Coo06hMzYa/TaI0FtklYE8g6YQHOGA/Y07B8UcaFg6v1csTP1ZCbkSZlWM6FgEimmUJhaoQqhpV9b0qL5aiaw==","signatures":[{"sig":"MEQCICLI3I4Y309xJ413pcRwMyYW7IryCijF0UBW3XPke8tZAiAGhOunu07y2mYqvwrGYov6H367y09Z4Z1SbdJq0i18Dw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7da3CRA9TVsSAnZWagAATa8P+wfdqcXGhgXU2RRNYa1H\naZHyrvz/ATBD3hnerBjQSkwaUKccmtw4zuEWv1DA6mcgNzMzKUtJwk/sB/NO\n4zd8/8onYhyL7y+mur12nL1fBjOjI5FwvRNNY1Q8muHufqdQg09iGVPRgkdV\nZSC4Po9tL/2hTdTj+LOIHZX1x983dW22CqyOw8vrxxu2/SSj9Nk2/Lbdl2EP\nneTKoyrxQKzkDx/xfSder3BRir0L0HB2ICEX4zlYUMhvak4MBMipUuNeVR2Z\n/K7QI9pF1xuPGP13m0G0+ZK2v5tPwwM78cGwH43LXtl2cZTPS2gQe0aXKnVL\naoxcEZ+0bp5/9G3tURtkAOgoHbBW+t6gHEL59IB662vZZbTOIhSDKgNz+IsU\nANIe/ot3BMwBruJRSQ4bduJMrsi7wuEEEMXJGppdNJL6ZOza1c5c6jPVvzEt\nJPhFzQhpkXsnetDIntxAoA32PFVZ7+DMyDMLoNCiLQdPDN8J+v/DRz+aNQd0\nS1yrVxuboK3AVbwO/UNR66CzBu/9znTruSaIjRUTYxFUavYSy3qvmJ8PLwlS\nRmwAUSGM8AoUqFaR3UxNd9o8g7jr5YmIvHvrpUwtIBHdmhJ/mdYwVQ8OESvK\no5XEHYw/TcWRxfTHIB6n7/o5hzJgDDw60VmhXRYrrurA7noTyYZLDzxVjbfn\nZeCz\r\n=QrRa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.15a179fad.0","@material/theme":"12.0.0-canary.15a179fad.0","@material/animation":"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-indicator_12.0.0-canary.15a179fad.0_1626199735098_0.1487497916158418","host":"s3://npm-registry-packages"}},"12.0.0-canary.c73142a1b.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.c73142a1b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"f0cea79efcd57ad3e625d9578fbbe03d5d654cea","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.c73142a1b.0.tgz","fileCount":39,"integrity":"sha512-JA8tVvc/cXOFyHlGswWJAiVPyM9+N4IzHcL2a/t0qDpKs1wP7zzzg1iLJAVAIo7gLnKKCPh+bhjDZWk+/MtkXA==","signatures":[{"sig":"MEQCIClnbGZiRfKocc2YdOjLurqPSc9CJdnMRbpPMcrauY6PAiBvm6u/VoD3T+pu9ScH7thJG1flAXCjTDcDwPlOQZ308g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7d7pCRA9TVsSAnZWagAAcdQP/RZexD09MtlE1l23r4Nt\nvhx92bIwhIdvCXgniUPRBBD27GAcQzq118aingTQNDdQuPC9CZh6yvafmdiV\nzbY/g6ngbYQgV+Mx06PFfD2vo91IrKutWPYHqWxpT3UspbMT+EBlbw1RIpS5\n4qwadVtKOB560DvePCkH7NrFNveGidYFcUBSutYNBsjs1iNRh61wHEWEmuD0\nbLKWZL8YmA2V7VHEhy0tfcSSAjGt40CsLbNgqwwuP+ZX0M8MRMgXhXmGOuaD\nknXIHVlIZ5dVcFnnGzTj4JJpa1MFWUQqQSeWoj0mC7ME0bx7Rm58gbAb+DtD\nyzEJsS9H72ra9eXalhvEC4M3mBSWG1pAQLlWeJSOS+WvWzYUiY9tKhmysQl7\n3L66qXT1ml8n26WNRt9QsYBF+7uw27FXpfDDlCnPRr0Eyq8cX/rvTa/Cjmt9\nK3EGhrmOicWtH3r2G6aDyhuIUtJUFlLUU+D8mmz5ejzgJqVPIVu+6YBCAXPu\nwqrQrika5kCn5kbLeIhjcIADaEg1oVo7GHNxevFcKvXPZYTWuvhVilOCqVtA\nw+gQDeSidMfYE5Z763VW3EF9gIb5ff3ygKeEOEE8kORyVlR0of+yvVYigYZL\nCmMswoAXl4GGSQfBX0YUFr6UGJoZk54ExnksgvO/fP85IUhSnJ5ZnDH7B5Ga\nhNQC\r\n=R94n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.c73142a1b.0","@material/theme":"12.0.0-canary.c73142a1b.0","@material/animation":"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-indicator_12.0.0-canary.c73142a1b.0_1626201833051_0.023278201096064155","host":"s3://npm-registry-packages"}},"12.0.0-canary.d923db73a.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.d923db73a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"4140a8a7feef9f341ef8a66680209d40c00527b4","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.d923db73a.0.tgz","fileCount":39,"integrity":"sha512-GeY6N09Pl3rwQ0SC+BortYcp3iC89tSLRUZS+fveGIHPXmtoYF7wi/0hYoMU9Gk4uIP02qwpFYwlh5owlfRjyg==","signatures":[{"sig":"MEUCIQC5xIxChkgwNBwtK77HqPBcWdlItxeUYMX5vx3I1sKmfQIgJg7t3h/O7pS7A+O2jrw9QFtI/WOSXCgaGrnuvumD3nM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7f1RCRA9TVsSAnZWagAA/cUP/jBbnXIEKey7y41OlzCc\nOnDrWAVpATbVDRfcANlRWxu4ViYLB1FVvO+8xlat+CazQM4DgxXCF7UCTY/6\nSNB7dJyA5eSlr1lOzTzXfZJ10YhcNBeTEIBrjfIU+UdYjML62RVOTRS54C/H\nkB44cBRmW/17dNF3b1XDCbmvyII13lrk50Z5PSCWrcbukx+oXK4jN4+/+17B\n0+R5Vp0bN/T439zOBUC+voThAEjRO4FsCJ2hcMg1Vk74LHqEYqPxqMudyriU\nT6xcHrh6GaTciRq7soi4pGyAYf/35H5HxI604rPTuG9pVhkLSs4e1XyPb9hy\nAhakIq3MHnUIEi8DKwbqF0NxCowrE3/lebWVebafjvee024jWX2GbdZPsiLs\nfaY7rlp06QPDwe6N8dyf5LBCncg13ZrIf5Rew0Z+gJsgiFyiPNOHQ1gytAsT\nByZCw89sovlwkiYV1BuXfSmiHeM1tVnAhSUprlkzZQggp3GgXzzyhIMzwzj/\ntlkSwWTTkJysrPyFEm4xXNfe1Xbr2lZT1OpPVqMF+EyNoDCr7lO3FgUc7hZN\n4vZZ/eahPmS+ap0mIfkysExFsZ8u85U3GRY3wSQcxHu0pSQovmRW3p38d+Jt\nyH1Vsx+gWKYWozK6Zi27dypOEiyAI4HKgrHQN4RI3FntgWCjmYO9/FMwoVRq\nzja4\r\n=BLA7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.d923db73a.0","@material/theme":"12.0.0-canary.d923db73a.0","@material/animation":"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-indicator_12.0.0-canary.d923db73a.0_1626209617367_0.48261957385511156","host":"s3://npm-registry-packages"}},"12.0.0-canary.22d29cbb4.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.22d29cbb4.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"a068a64f5ebc4fa7b4fb036aec0a24b47b7c406d","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.22d29cbb4.0.tgz","fileCount":39,"integrity":"sha512-7MeJG5bN7WCyNsjT+7iGci2XuIkwUXA3QRz3La2zKPBxnPkRiz7GUwkpr1b5h6wPpYfCWKyCbixQD9Ufgq3kKA==","signatures":[{"sig":"MEQCIAvB5rHrNL/R42mwLxxAP+MyVlbufSTdUjBUgS3EJQNaAiAFrKPJ3jwSw00rWTFpqyizg6klMKbEPTruMdEqNtXHTA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7higCRA9TVsSAnZWagAAaG8P/3bznjxZ0IMpLrR5IlJW\nnBmCzNDTcUoCzuwFqYKsEbeU27QgOshtA+92pkeHF170LRmEMvL5nBMRd26l\n7dPER0deRdv7QOuyhizeW+0TVcZhw3yv55KvsBFAikFQfQL02AUvC5K5VtSk\ntrwMWqOt5hZlYNOGVZ6fyd9sJaYwtHcTqXEiDuIASj2zTS5s1NOTvmkiXVt2\nwy5JvQVrn4hFECsvyKWvCy9KHPhZ/Tgyr4FvDBn1FoLxCF6lTfMj9XRKHnWZ\nH64qgrL7myAqB2eQQ4mXheGs+C+FjMcQWKZyOQyjLTyA6MTL0a6azC/fvTvQ\nE3d9gccuA8j55vgUnKVNCG7f14ojV6UBN4niRyTM74VVdxh9an3lTUIRWlGj\n+KiQXA9KPWK7LbnfMHEODasJSreQkiBZQsmcSYm5uZ0FPadOJKl7EU24ngRv\nzYpOnsqV47ZalYUOyfKYeuX7iwQqQ7TiNqq1d1KSaMBG7YPL3G2Mm2vNOPck\no+RZcbsGa/WFabsHWl+PbDJe28WvlRNdBB5+it3YE300Y+cQSo0ne8CHVBCM\nlBbsSRhbszR3OWavx4TsoKE5M/ad3VxYmjBWUXtMYksKOTfWxYxhsUlV9/Uz\nLjHPr3AGtgbJXI/20u79UR+lbxJ4RkQThCJIjZ9yTzdapSUH2/oNpRaEaBuK\nFQBb\r\n=27Ib\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.22d29cbb4.0","@material/theme":"12.0.0-canary.22d29cbb4.0","@material/animation":"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-indicator_12.0.0-canary.22d29cbb4.0_1626216608563_0.6431302734271394","host":"s3://npm-registry-packages"}},"12.0.0-canary.2749604bc.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.2749604bc.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"92ea11d7a82e035443038a9492dc16cf51f19bd8","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.2749604bc.0.tgz","fileCount":39,"integrity":"sha512-T1YqwWmNk2ka+KUJvjqqx57jy7SD5uivi4/JSre3b2IDrmu1DxfnQ2Slnx7HIUX94iG5Fv6TkHmxzuB0WIXQ2Q==","signatures":[{"sig":"MEUCIQD3CmU3MDfVRzhT/98z6pcg/jhN8dTmvfL6qaQj8ZENuAIgFxSmxE4k96gMkJOG0gKxsKIJdRw4k3EHWKedzVDV4cg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7w8oCRA9TVsSAnZWagAANRIP/3VdPoQWpL6T9oHzKF29\nqFIuS4hdpC0s7ra3zNm7+WfKDsLDBL9HkBWv7apU82ZVPve1AsR98JCZGie0\nnn60Q6rvaTp+AyQP2wDxswF5XTzQIXYCCDH2TWcICRgUWyX5AEd3bAH6h0bJ\namd6DzrT6x0a3/+MFOHYYuRM1yAOXCaRCSYpNYIxliMfNHAwgQd4QCjWXtNp\nY3GGDh9b2CgIqU+R+tzs1eVd8psTE6A3tyFCA2CgUPgn8jxhk0Njle2c3kRJ\n7Anh4wltYNRYFbudMF0s4jEE3QEm13dxyzuUq/94PY3q5Gm7rv+Yu5WHsfhD\nAnf0RxNben5KQlIaoyPdUQzGtietyqXFWisSAPgQ3OapVWu3E95PdacCzNFK\n0NW4IF9vwQkGIJAz9yJYbDBEiW/2pfYKXsyknf1wmWhciEw1vtp15NglLmJh\noxM0bjRq5NkbEW8Q8yAHGsRQYrTxpLJSOBYwQq1v/CPyfsIiGprkcGfi9vsB\nwjqKW7Fj8K05dz6MxhtJu8slqJ+kDlKy9NoHzkb7W/V90Ndxj14FgdmaJkzW\nK0jxwWPumTzZ4i3FZSux+c1A6l+bmi22tln5KMBZzkLGt+VSedeWwL4glgtH\nKTfSUEP24NH04rI5VwSJvNHqY2Otv5hqy7Zqzh4hbzPuRtNGGH5iAMJxaN5Y\nc8Zd\r\n=vTPU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.2749604bc.0","@material/theme":"12.0.0-canary.2749604bc.0","@material/animation":"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-indicator_12.0.0-canary.2749604bc.0_1626279720220_0.4859449508595326","host":"s3://npm-registry-packages"}},"12.0.0-canary.e1703bed9.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.e1703bed9.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"6588f86c5eef7588ff62d191386b6dab8fc4dc24","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.e1703bed9.0.tgz","fileCount":39,"integrity":"sha512-iHUT1iKjUqOUQuSv4PXWyIAIutv7Xb0qLzpeEXqcNNZ73Qcpz3oHd4c3GZ5pLg8Z4c0TgC2On/VeadelFkSsIA==","signatures":[{"sig":"MEQCIBgyUq/y86LzJMSu8js/smzmnX5FDStmfsHr344oWFLZAiARxTxO5rnvlbLPi8UrZg7rjor0DTRUwFmHUE2JUU1yPg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg71uCCRA9TVsSAnZWagAAJ5MQAJes7pBqmpwZ4n3xCMlr\nqXSO591tjWGkzqDvrYNAYRZj9ka6wnglJuvumWHQaECSwhn6b505KcgvSjZO\nFGl51213b18qsZOgVThWXq7v1ZD6GcW54NoxYuSBtrLoCO1TcrIRWhoEkz1A\nT8iZZPZsCR7pQuQReXdAGPrrIKqXCDF9ilUHv4rApJm8fSwRWb0+9BUM03As\nNom223ly02a8TStpZjsRfWkG538TUpg3arnyBKSmxqxQN/kZxl7QQTl5uYnt\nS1SpzpehqRGDM/FzucIy5K6NV2z0NNYpKnKtEf98QHd368arrkRl6pJWT6rd\nii3IfKwNvNYh32sTkVR4FtqjOL9pLnRlF5yUirHoMJIzGo6Av4xjsWfUrc/f\np91jhBxpDY7xQO601HXsJnE/7xTTa9esJ2/3jiM2BDwY42xAMyd0TM0/QgQ2\n5MGaN+w4Wkv5VvO5IlGM2NOGruQUAoQOiKCzMF1TmCOaUYbB6NKdPSeUBXeh\n2f2ptAR6m43zMmec1ClTIC1hsVoO1vxvVKct+9qbUpsKNaCFIYd0/sGCRs42\n5TR616RSmmbAd9vs9U3NDtUEtz1SYrui5AWKMkqtp9lrGRkz3i5mElyItxLJ\nAlECk1Wg05yzwhcti31q3YC3p7oD2avZRG72bPfC04ztvGnAXfWmQgmlDgGq\nVQzY\r\n=/9Gi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.e1703bed9.0","@material/theme":"12.0.0-canary.e1703bed9.0","@material/animation":"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-indicator_12.0.0-canary.e1703bed9.0_1626299266196_0.4541711161220301","host":"s3://npm-registry-packages"}},"12.0.0-canary.de48eff0d.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.de48eff0d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"faa295c97a8d9039c00ff1088ce38b889ef53d14","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.de48eff0d.0.tgz","fileCount":39,"integrity":"sha512-g5lEh0rN4vjP/XUckjdJ0KWK3fX2UPIt1vva30RktFcWXCA8ccJicz8H9C8cLUaq2EBvJBti56NUFsx16gJ0RQ==","signatures":[{"sig":"MEUCIHImIQYwIsewVE2jKlk1oV4ZLygGuuaBV4GpbEhU6DzsAiEAxViyv4VxGBK3emRapa0F0p0r2BIewfi3rAoCMU5zLq4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8GtkCRA9TVsSAnZWagAABDEP/0sKCw9ZwpZNLIPmzoa9\niCxxuT0Vuvjr0aEIY5Q6S5OV4Sy1lTG0kWNPg1M3hq1m3zZ2MYfgEKnIVpNn\nQ77Bwg3DgWyynNSgf9mAYy9L4+jZhNys6gwHznVgVL1XfCki4JO6PUPQlLFI\nwllogNyGx3jm2uFCHavilG4DD1wGTcO5f5elnb9n7gZKM3UQDWvazLVLJ3cY\nT7NlypbPNUWy/GxCh3aW2qbmCa/ZSpolQeXdgEiIovVP9yzbGaFo3vjIJSvW\nNmskco9tIpVyl9fT4fz6p0QCBYGZvKCJPNwgmJJFIlTr8lK+0DBDccDWZTf9\nwLApRNZXrgod/R33+SLcFVO/FP7pnVAnWaq9czz1vVqo+SOq6Nh2VlVkbmsJ\nIS2/T061GoaoeZaRP12gWoHP0WS3L3/X/XZOwZYQGv0RHnWvmsmO8Aydq9SN\nyNnF1vNqUx4LblHub9xoPznxuaptjPOS44uzwn1krPntDBEprsd8nN/BVTts\nJv0uomFq1boGo82ZG1MEzfHrk3qE3/mKopZqBdrjA7x6xaXmors9fpC5JR77\nSTNI/2Q6hi0vBRMNAw/+4q07GGYylZrhsQfyn/V7heKtOpVhitvH8o7IyOT5\nivtJqFk5JywxlObjVdTXk2lGkFvqyhvZsfF1HzQPGOG0ekRIaQIqHVU0daF1\nADax\r\n=ua6z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.de48eff0d.0","@material/theme":"12.0.0-canary.de48eff0d.0","@material/animation":"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-indicator_12.0.0-canary.de48eff0d.0_1626368867949_0.09085505940323602","host":"s3://npm-registry-packages"}},"12.0.0-canary.4f060adc5.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.4f060adc5.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"6d27c64178bf1118de7f3822c7fea246c2711b6f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.4f060adc5.0.tgz","fileCount":39,"integrity":"sha512-bFpDdOHmh715CIgd7glS6PmFy+PGsu6fHrGCSHNx1QzDevQ0cinjXGUHOduLEa1naLFvopjFCBcQxbm27783hw==","signatures":[{"sig":"MEYCIQCcZ44eulDjTPu9QQlCpm958toykoL03293jNfDXbsK/QIhAIIKYwjDri92ugwndXau3MMoIV/V6ODGSwPXrgMeZuzc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8IrBCRA9TVsSAnZWagAArFIQAJItc9WCGi/sVZWZ9kcz\naCYkdyqryfIaxJ6fvjXiIbqZqeS6n9mJbqDkoREy/YND5H2hLQ8zPAFZqUKk\nGlPgZjXyyxjO4gPIuV3h9sP0LXZ23OROa2JBJgY3ozhYeIBZSL0ncpskHbjd\no3aL/XSb4R5jYFdo+5g1VTKXGHkwt67cCVR5DMU1rPmKUNQo5q9ws0Utuz2Z\nSfNwudbTI0g+eMhercQrcU6VRWAc0u9xgJ8UFy9J49cYFTsqiT8cxIMelkCk\n3/vOXOBAcJvH49tZv9/49fruE4uenQGQnVsfTHnZpOl69Hh9Drn07soGZQ1v\nsWLzB42pnl1hkL/drxX2mUK21Y4cG1PnkCEK2ufiiBwPOygzO1XGVtnXyeVh\n7EOmHyrEfH0RFgRq9qYkg/PS+S6yxiTT5Nd0WZC9lxnrYnx2HlutuUK0Afc4\n8ZpXNB2O8JDmMn8eKuWwq3I+GH7jkZkFxgr6QN6MDKi7WbwmQiXXlMO7yjpZ\nymWS2dWBHHFO3wtEapc/SXHyqzwOVotuazh70yjaUzXgWgZR1fXORjr2c14t\nBOC25zQn1Bi8bGaoyePWiArIj0HsUTICmvvTA5RW0UKMvGohDy9OAfunQaBO\nFiKD9Re2FC1hrjaEecFH9bvLNTV0X7Bh1Mx6FbGWKTtQeLjp1hnInkYPZm5z\nk1nf\r\n=fJ0U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.4f060adc5.0","@material/theme":"12.0.0-canary.4f060adc5.0","@material/animation":"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-indicator_12.0.0-canary.4f060adc5.0_1626376897260_0.46214676298708923","host":"s3://npm-registry-packages"}},"12.0.0-canary.bd25779b2.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.bd25779b2.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"64ce4df6ddd148f528f565f2e8a6bd894e5574b3","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.bd25779b2.0.tgz","fileCount":39,"integrity":"sha512-Oh/nWA2XC+owCd34RruLHrevTBIFNszUP0IyJ4fbdTAS1F1L1V99nRucU7t7M11SWidsA2pcErIsil0ReWoyfA==","signatures":[{"sig":"MEUCIDKthoZSqEc+jmTgBGYXbIbESi7iSSglsOtNm5nZT/cgAiEAskpQ/OliS7OkWpS0AjLDmlJwBxtWrAnBihu/15bbUeM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186418,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8J2aCRA9TVsSAnZWagAAuxkQAIgV5BI2+xTHXk/MJGWD\nXU2eHz6fVKezkEQjT3kgoV6wlc+bamADMErZsN4YO4SRyAzDPgJYvE7LQG5m\nQyCot/PlmCm/SWmhSgi9NVA1kzHIgnO1bQIclf0PUAO5wX+Iv3tTdFFia2nS\nkU0RMptE2tWJWpf795H4B8l28mpGlrbGWH1nL0xSWtphu4xM8NjEP8XvUSiw\nq/tYCgRCq7RukVMXTgpYdJaKz448LBH0yNjgWiAkDvrDHd7EfFEHmsGJvqfU\nmFxJZ3d6HY/yYuDD/yyDEWSpbyP7JlY9QWbq+HmugjlvUNlwXAP3iSO92DmN\nzr6eTOsNa9jmDW8abMx2dj8S72O/bYlMwU/7mDhXVFNbf2H3SgodL1UTEkhD\nktvkxIoTqK7p+UiUuWHIl9gbZGtf1KRBiC7zYbOn+ykb7dlm24tSO4MQ9O/7\nDxj46mVW8xZt9bF/lsQxsreRSXTkCqFcell08qQOjfi/zB5wNU5mDsto6K42\nDah1isCKkImx27OVn0NwQVEgN8o2qPzm7kP2olHWZ+jVYEle5iysNykHf5CI\nWf3jTFYEEa4mD7/JF7SmHCifmFYH8CY7XmxqTSUp6ital0WcoVjAMoTwfb8K\nzaWYngxnqyrl5KoUBtRbtlkthi7mdVHE4S2gUTY83/Jy6+c5sfXORm3QLNAw\niJmf\r\n=lCj/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.bd25779b2.0","@material/theme":"12.0.0-canary.bd25779b2.0","@material/animation":"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-indicator_12.0.0-canary.bd25779b2.0_1626381722118_0.5048980650644037","host":"s3://npm-registry-packages"}},"12.0.0-canary.9f68a932e.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.9f68a932e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"911520da6a397cece20557bd0a7a4949c60f1b38","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.9f68a932e.0.tgz","fileCount":39,"integrity":"sha512-9+oEJWGA+XnEe+Tbm3nymD/cvTimlZI+UlJu6B/NclglMdcM2TSDXLSt+LABy9XWO71pFiU8Rrx3Lp11Nw+xqA==","signatures":[{"sig":"MEQCIBR4M1ybzYkXvpL241I+GHH9ZKK4lPVtpnf63DKPow/rAiB0KAimQO6qOuUaHy0QMjsg2uT0sWgegjKFtuYYze53rg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186418,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8LF7CRA9TVsSAnZWagAAxrwQAJcZ6cg3ykhWxw9LlxAv\nCK3VoOgsqqiS0WGOPUB4wc/9lJMaIVPl99CYk/BB31XK5ajIR3PmQX5iJZy1\nvaXU5Opjd2gp/h4gn7pqXQvufRNGhaMp6GqCgJvBW7uauLqUff5ZHz6rw2Tf\n7BHfYh61/wqRHnXXTwy2+2p+718+E/EHCw6/GZnmY1PUwVYq9W0me51ZVfWV\n+pag3AJ4DyVOdftZf91ebCoes57sT4L+hfkhPQO27h0KYDoFRZRf8Oat52iX\nVInAw39BDn4jFlyuhCTM6+VOo8MgxF0bICO1eoSzikaCbOcLs9sLjKIbPOdQ\nPp7weymz99ScZNnd6SSaVGT0KnsiQfBpLwUznFRmzM82vpydLyAgYrYZCHak\nXDtkpTRRlfoy7PavxzNnZ791NTKd+IFU6YKvn9V6y0d51SlOIR4yokH3ZC79\n+Sd4KdFQvUSZJq+u475NXf6a17l3JCY2nxs22CRf9M07ihp/5HnzVIspA53j\nOTyANRF5FnHO+ilm4Ql3Rq3UcFHFf58xPI0iODkblHQkvp9E4WBuiRw88+m4\nGoGilRyJiATgjC+ubhKrGa8m+a+T0OzonJFHukLTe+qf263+Z+GNvw+9yn9N\nUBKZHE+sPYJozm/ykQTu+VRah2VgKz09FTH2Xp+qoIccpH5LznkMuQudNEAc\np7GS\r\n=pc/t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.9f68a932e.0","@material/theme":"12.0.0-canary.9f68a932e.0","@material/animation":"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-indicator_12.0.0-canary.9f68a932e.0_1626386811515_0.7930983473918551","host":"s3://npm-registry-packages"}},"12.0.0-canary.4eecdeaf0.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.4eecdeaf0.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"36bc0b03afa1d3fe16cc7a100ebfa2ba6fcd416b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.4eecdeaf0.0.tgz","fileCount":39,"integrity":"sha512-8hfJI0g/0vqkMBGu36uIS9C5IIcwkk+wkdSlyu19ZSsBqYVxATrep7h/uT5uiaz8bDABnOhEp/+G8lOkCtTAbA==","signatures":[{"sig":"MEUCIBII0P1p/58+iWi+2SK37zEFxU2lUi88QH4y8CHHhCFaAiEA8/WNtpWsssJAsc19t+eKWiTKlqBbnROK2j20dAncSDU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186418,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8Z5gCRA9TVsSAnZWagAArmIP/1zpyu6KsZDYwD8lGDkF\nRpSk7g4/FNJ9RxekheNesCqOzsmGTvP6jGAfHTPbDtZOX6QB8Osmpbn9TR4s\nSw7gY8WWvpiBWpoNEWe8GUuINJkfzv5ndxbNFxdjKbfCkwfIU2l00bBC/Z2M\nh+4BdxEETQFalT258q4riHyFF8wuxWqOjpfE6P4Jjhi26sfLI5K/V9sBfTub\n2mRUmhmKyy5IDHlwC9JpUIbvItIzr/LmsuvL/A7lXqxUTu6eDcHbT5eBTM9N\nncumSEcVskJzcBL+J99RsaN7zq/Ca2WZJsqS+poWiTb9EiIsOMIbOfhobwZN\nrALTYDnmUKECdL8fopZ2An5jQE3TsT9CkYsx/+LAyCdLlx9duMHDoy2CRV76\n/OL0KnU67RM1ljfPPvBkDP+D59YVYqHomnGCEiISr4xGw2w/lwMecxb/R8Xb\n9szV01W5Wwz09sRGDE+J7y5eXdijcoI+xPqQ+l82XYdZp8VGbv3Ik5ObaKGd\n926cvgiWo0pf9PELH4gtqqEEB8SBTDunttfUQ/CnzhFnR0Gq1mPC81GKu68A\nA29RufzDgoj4z23HPG16J6kGgRHFci1qMDBTz2Cm9/LmcBTQySE2ZzJd56Y5\n2jpV10rwzSjZKneZCiKX9Jia6v1D68wjvWrZ1qah+pysfik8xmfWwImn3lFh\n29AX\r\n=/p4n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.4eecdeaf0.0","@material/theme":"12.0.0-canary.4eecdeaf0.0","@material/animation":"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-indicator_12.0.0-canary.4eecdeaf0.0_1626447456409_0.44932901573483175","host":"s3://npm-registry-packages"}},"12.0.0-canary.7239684d4.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.7239684d4.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ad91ed1d87732a6491bb3aca36905d9f68671c69","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.7239684d4.0.tgz","fileCount":39,"integrity":"sha512-LI2l+K3Ts5GajLM1yKEy5BH61NHL2f+7rgOcyV0HIREYbfqK7w0dzyPDmak8sI32C/3FWrU5P9rDEdNvpyTT/w==","signatures":[{"sig":"MEYCIQCoSikMXOHQXn01WisfBCCD/2YIeP7BZ3cjliswGsI3kgIhANcaYpB3RkHPKRLBlqA85lqcsBa3508NTPrSgLXbPyIU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186418,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8ay3CRA9TVsSAnZWagAARFwP/2PJXHMVMrFeT16Ku2Jc\n4rEaWeS1zHf5NmnD8KYiRbjCTRPpJk4jwqY3+hMasOUIlZFY9fixFWRp4Vya\nHQEf9iaTLQLvbJu4Rnux/H9Ts6IiVR+FmHI6nOdAjnnu+RcRLLyvj1Z/PLBl\nr/9BABTJl55xIh3RLVPCiIa1GDS7wBo3Q8w/W3RPj8Ekxfq2LkJB3NJc1GNR\n1VJuEHVxoOrldRj+soF6wzLrz/TYV8pJFHZwKetnYk5kb7jB31zKts9EKxB1\na3K3anRrC9Rxj7TD55mr9eoOZwvenp62lk+swYKNFPDgqT3QVONsbD/2qDBF\nNGsZgqHQczM1pIvEex1NNwRohOboKjXGi+toFGkEUPWSsxhbDRK+FPhsBqDP\nqcguLlV2/OV9eGsMIL2algwJY7ze2CkA2+ffV5qOIRoJ4QMHNfU+8dbQY7fc\n6g2HzHP9wI9ZPqYGCdeb2mxd0IjBeAGiAFvwisIA0RcYcgUJtVDIaBcg8p1N\n+BoljsMUvly/cX//l9NE9SIiPkxCIDj4he+qIw9HkxtKZ/BDnoatMXv4ADaO\nKcerkOg5xe2jNT86Q74PFMQBtVIELJmyS7+Ah7295287DFTBl9EegcpzVH46\n1M7bDKR/4lYSmTiDrud4ezib+HE4wZ9SQSjkdcWq+Jiy/KFIs9qWKdvGaUnt\nNV6F\r\n=dz1c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.7239684d4.0","@material/theme":"12.0.0-canary.7239684d4.0","@material/animation":"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-indicator_12.0.0-canary.7239684d4.0_1626451127728_0.17582977753232343","host":"s3://npm-registry-packages"}},"12.0.0-canary.d5f1f7c72.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.d5f1f7c72.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"9e03d85f6531fde3a9a29d484ed9c2e67ebf6c48","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.d5f1f7c72.0.tgz","fileCount":39,"integrity":"sha512-G3Q7eYMjLqUYxb9u+19RqpP2aKSgdth04O+5Qdm0Nmfk7MaB/6L7hqKlp/JqjrdvKNwAzD8ba8docy9Q6I2xtQ==","signatures":[{"sig":"MEUCIQCIrL/O2P3K3L0bJ9v3lOKEm7EN//b2XsLlUpHP2R4CKQIgSf9t4b6HwtmwlvlHQ9sjdERTL6BIS8eHja1+t2oks3U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186418,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8bA1CRA9TVsSAnZWagAAM0oP/2A3yE6c5ZLmbr2EAF6+\nvp4ciBEf+pnOByiv/4aX8HkTVxRZeywuj2rxLW7AIvtMjMmwOBNECNHYhE1g\ndFsALzwFQIagkz/KL/yT7ZbpP9QTNv9yDLK/ZcDMO838Rn7emX0rc4JnzFnS\nnEu6DIXuakLHf2DNKAvhLQTEIxmWJYIb9uKmI1TRY/eov4c2sZvlKZFpRPF8\ncUzJgEyvWeyI8O90N9xgsvde8MC3JqXm+GW1Ic7APoGDxZPYi4YGLkWHg0Pi\nwZVArdfOr7ItNyF2JDk1MN0Kosl1YyhHHd++egi7aZ87lHZwu97fgAXRe0or\nj9CTeZCqL8uxqeRY7C53WGkr8hvHeTEQyyYffMqY5Smc/HOJj7OWp1RWLmPo\nCj+1VtpfdRhmESc08bFBRQ7W4K0TLtheM3Ay6xoaiMah+fOk5fHzctvcpnrw\no6QCJREP7QrBgFEUW8jCzjDuA14EPBb5CCZ8r3R8UO8gKRzCZl0To7E/pxXl\nUgMJ4LWKdcK1J33YTnMY9KUGVhUi0zXXhyGv1HaWdEMJoa0HXoeDsAy/GTT1\ndZCJClx3PLFSzoGgNmrA5egyBrQlyPDhtR4IannSLsnsiHS45U9u7N12WgPR\ny0Es6UVui3ypdkt8gdo8BVxEGqTixuaxqz1fd1YObrN9OSREvgAazeS6WcZ/\nSC3u\r\n=dqT2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.d5f1f7c72.0","@material/theme":"12.0.0-canary.d5f1f7c72.0","@material/animation":"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-indicator_12.0.0-canary.d5f1f7c72.0_1626452021120_0.39265723165000166","host":"s3://npm-registry-packages"}},"12.0.0-canary.4d95812f9.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.4d95812f9.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"d64ebf059f383a10e7a1e3d03427ce0944e6102f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.4d95812f9.0.tgz","fileCount":39,"integrity":"sha512-kWY/GoNTW2s0bNx/4Pg+QC4sfOCZlpn1kfbIDWHie+fmY82UMnc1Xswp4v0G0xLEkqfKmNJXrpsZTRUykUtFzA==","signatures":[{"sig":"MEYCIQDt5HchUTf2MeCyEl5o4hmOYbNBU0/FbQt1jGvRkC3hzAIhAI035zC/op54JUAxsdu0ZePMHvo0pZ6pK35a0LRjwgNu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186418,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8eE6CRA9TVsSAnZWagAA4nkQAI5Ys11rdV82rpEdpoZw\nokNAMXsML+tMm8sBj00Hv98+WDGmhzk5/ThYZRSSgu5XFCTKJGQW/yaONnsd\nrqGL4h47AB2HXMV+kS43U7srfAm0wbhLkMRcD6qhxzIJu0XBOldUIUmlaJjU\n7o9FNJyRsu1DmSkoqy7RDRyfrTWcm98zxV4AId9I4ZQ5EWWSN/JpGo9VvE1M\nw9Pg/n3XdWEUS6C5/r+k0HQIhR092cajsGE+/6TWD3PQu3cTer8qTDHiH841\nRc4PYMOl0P8ssLiOJA2jxLfDP7bKTeT5D/3YjrW9NGvuNoD2Hrip6+r1a4b5\nBGt9gYwLW+7aKoSpc+BOIsNOFIqw6ZHaz+9jg2SjiFSR9rnonsrEaG4JYlpP\nbq1sACVJ7Cs8bkzf8wF/NvmijfMpPSLANdWRGJT3cEfc4lBAdjQi/CSpkYJN\nEL4JTZIbZvTBcpFhGRIDi5SDMC6uMAWYHzlgtMVfCHUjV32Zk/iNCDMFtojd\n3FpJZ8/wt1SrUvbSHALhDFlD88QenagBvUgpbzrjUy34bc8u1W/kSVFiZcBA\nqdxR9A+OHffNVAgzKTF9dnkVUdohkF7ixyQWTA0RgozIeUuyBQzD5/LE0uvo\n44pCRgm+4MiJNCd9lJoBz7Xa/+ilkhfQsDis6+wYRbaWQnOpYc9ygV55TY1P\nz2sF\r\n=B1D+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.4d95812f9.0","@material/theme":"12.0.0-canary.4d95812f9.0","@material/animation":"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-indicator_12.0.0-canary.4d95812f9.0_1626464570648_0.7461681783563983","host":"s3://npm-registry-packages"}},"12.0.0-canary.38d1846cc.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.38d1846cc.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"3bdfd1039f496e33d151198092fd9360e2ea16d9","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.38d1846cc.0.tgz","fileCount":39,"integrity":"sha512-x+c0+YBnHI1YuIvovcEh2WPnPG3pWAQ3vDD3NjhoLsBUUYZT9p4OsNCNixHLL0TmHuAo1QYb1Ey9bUJoPvyN4A==","signatures":[{"sig":"MEQCIFGkutPhFB4pWJLyl4GqmnIPcIgW5tFNVkZ5DqED5G/LAiAuv8zPphb5/IATDQfkpTa+f3Vszl/zdnKYZt+y74Im4w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186418,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9cdlCRA9TVsSAnZWagAA2rkP/2ZS3VxGy0jn2M49WWeo\nVdQTF9Mkv4bguCbJI5sjrG+B97T/uGnXLUcJLSlqwG+emVuD6WsjmlGis1Om\ngfdlyGmRSjT8OtCTZBWf/gq4aKzOCklz5Yq9ry+NIL3ul+PZ0bAZlsXaFOx+\nQ31Z+sExDA7c8qgTlY7w3vCVYqdkwUXC4T0p+0kjTP7IX6QIz1x75YIup8Kf\nNbx/HSQi+cHzK4L1LRtqBmPVhpn29zHZ45zv7ZoDGO0mKGup4wdEljVxCrY0\nnlo8t0HjxKdvp/IObq4LOeKOH/eYszDtKoC1qgYDWwg/P6vvc86MYT+pJeUC\nUJTq+n57IvErZimh+a6+8+e60jAoq9zbH8VOaV26zhBVGhyf9l7WVpn0u3AP\n6kPLwJyq8WvJFF9N5I/Q4Ytz/ad2UF34S50jqxARb/cLnyjc7dwJylwGiPoB\ne+3Whs8bGvTKPUZTGOsG7BLQ/OF7a0f94tUjQQbr82SXm8pR/l5f7A983Ejq\nj9ug80HHJUS9kAzmT4kvqAfMcwlLSMLdXtsNk/AHzt9QJKeMWip7sL4vmXcS\nbOnNY4DZdSgfp0qBUUEME5HiqMHTn9xK/1vF3+DWRxKSUsOShWSc+ZbVvBNX\n+mkaMAswKK02TyD7SLKZ3mZpWh0M+et/XB3/Suq6PIRMIP2nDi0/m+SdhKVw\n4Cfo\r\n=g0Bd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.38d1846cc.0","@material/theme":"12.0.0-canary.38d1846cc.0","@material/animation":"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-indicator_12.0.0-canary.38d1846cc.0_1626720101195_0.2790131802616429","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f691eccf.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.3f691eccf.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"5859fff65e0bdc02efd27c4e20e104b79522345f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.3f691eccf.0.tgz","fileCount":39,"integrity":"sha512-Fqc+wh3kqHGeQ6JWOXjr4jieNSaW9ctqGaDymzmHngjgYhHPxglHynKuYMPM8Zgy/45OQR5gd1Tn1efoO8IXBA==","signatures":[{"sig":"MEUCIB3Mxt/HoLu8YPA1mQ3CXwqYFF+O5MG+X+Lyaymw2E2HAiEAi1OI3idUSwnbnZoXjwfKPsfh0byQZbo+aaiman9Kn24=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186418,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9vT5CRA9TVsSAnZWagAAv3gQAJeOjjOPhUQeI1BeAS0n\nrJr14ry6RTlrHk6g9rrJafhdOIs12g5/i6ATtUyg72hO42fykZWgQYkwhAnJ\nUhBMAanWf8qlUCJH3pf6exL09sq5xcz0EAxz/2O01UKhxTAlkWbGlVLt4TFR\nsNrfNv6kdnIX4bDyWsS3BgMnon9VOt48O5ZO0fqnNaj/HMiFtpIO0qcUX2u5\nMHvGaKvdjX3PSFV3KC7acaA7UuI2K0cUY0jpZvK85B0MBAmUSsd2J9O+7Vds\nGqAhuOxshLc6t5xWXjNoWC6yBbTVatmQi2PE7ekJeLgggqACpFDmtnCH0tXW\nrYFUyAJ75h4VZ1romAaePkCRRXP7Z707sOlPnGHAlPCaZ7tiEwzRo4ZkudVd\nzyca52icc9Elcspi9sTAZjR58KKtlmOHd0Da7gITb8gk0aGBPU5K/xX0dbOt\ntG4JeM1MDFGBzWO1WyqLNBxv6nSbCxtErY1RY84t9ZK2qh03lOi8/jHT8phx\nUuIJL1S2sFZOMHa1gub0BJ6JZ3sNaUSJLtBuYcefFuGQ0sal9eyRxYz+eHVp\n3W8ZBWKgIU0V7UZvmDvWsbqgltIepD/6t+qU+H4jnW1RVLdzn3HYYzup+L/C\n+E7Fodc2zpajWcGwMDsvte4y25xtog5Gsms16j0ms/36Udac4BtsOCC07FfR\nQzyc\r\n=LNSF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.3f691eccf.0","@material/theme":"12.0.0-canary.3f691eccf.0","@material/animation":"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-indicator_12.0.0-canary.3f691eccf.0_1626797305558_0.7850493304019512","host":"s3://npm-registry-packages"}},"12.0.0-canary.ebb5c73bb.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.ebb5c73bb.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"6295fb8ad7a839ab5bfe3f71f2c154ab6d8804d3","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.ebb5c73bb.0.tgz","fileCount":39,"integrity":"sha512-ajidtzf79zQC6NHXMAt/t1GXI3VjnTrkAt3YrEAAAdvWDpYRuEPTx2+O/gFUVwllKdo1xkgPIXp5waxO5acuwQ==","signatures":[{"sig":"MEUCIQDzTHqhY+706bSd4exK+1ESEsWhhhvShdQv6ouwtjd83wIgaoKMgTvmEF1BOp6gzHaUn5zoeZRKtjjQ8dT4lu43Wa0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186418,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9wBACRA9TVsSAnZWagAALPUP/1SNb0H6cSa9g3PmwpvT\nJvOwYVNZ8CYbkeVGrMLJnSsHjS9j1kIXYjfsVsN3/WGFHreMgSr/0y7cQ+5j\nhzfNiithhK84UBBEoLEM+NM2QVlTsInB81F/8wVPcaDCEL0xlG4+WT9rLpC6\nVsFbWwrnRUL0oqqly/y9UAIhjTWpxTTIJByHblTIpgZULHLeKhcIIJ0Ufwoz\nK42PzttcNwQp1u0pxa9c9Nn8lJ2RX5vB0NNKkXirMR96rmShssOKtgWBTs7L\n13wVtR+H+2EleFvsdlJeNhi8TI9rKH8sA4VB0vUd/I3ew1zjEY+5s+3rpNuQ\nRRkhFA3eS5+9zuBaAWiErgc51JKKEle2iLTae5FrNEPxFbgiwUxeL9tHMMB0\n+uBX2Wr/U+F5keqN/SkalUgL9jHJXW8oJq+uxxGk1mNDioDrtehhUYzwK0gR\nymwir9E4OuEFjO8bO15mMobbN/GO7QEvllwS+oVZAEOOY5Rc+QA1FAMviWNg\nH4J8FNKq7GX160P47cMiNLE8B/u6xaOSB6X3VKqsp+It3+Po8xLtEwmu6VBb\nS0AlyZBSiWTrA9nAFFGT6vIhyH8MdXMePlbFSXaDPl1SMV51gt6xv5dsaZfP\nyxsq2cFc8tPw2N3UsRrPCkDJ7P/oXCS1fRLgqjJ5JxXQgog3No2ATJhKrP2Z\nuIqS\r\n=Z8C2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.ebb5c73bb.0","@material/theme":"12.0.0-canary.ebb5c73bb.0","@material/animation":"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-indicator_12.0.0-canary.ebb5c73bb.0_1626800191900_0.7993628172694152","host":"s3://npm-registry-packages"}},"12.0.0-nightly.778a0e8a.0":{"name":"@material/tab-indicator","version":"12.0.0-nightly.778a0e8a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"1eee5e7372e29a32a39b55250119ae7d70ce7e1a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-nightly.778a0e8a.0.tgz","fileCount":39,"integrity":"sha512-3GfncUFk0gXSRMrPqPqpPN8V1sxzXSmb9p5wfN6MWjscx9XnmfGGs9/rg3vHjJXSiMLnTV2Hr5WqawO7Fv/0DA==","signatures":[{"sig":"MEYCIQCq5XvyPolhdHss52qaSAxMH7zUI9Zu5P37K4Zfq7iXOgIhAKxVJL3KJjjRtwfKYCp86u713JiBJ3n1fw9aJD4ztprU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9zqGCRA9TVsSAnZWagAAQ1AQAJ79uRYlUv2sh1jmHLaB\nL6P/VunX5ArynG2n6cnaE9i3goC1LB+tX7YkAOd7dBoxII+33wros8BETJcZ\n4ecFtQWKxPgr4LcTJ1tleU9aBoQDwKbhEodVJdWado9FQEBb43GgPbuhVRGa\nJrAZ4kBTtoBXgHewQ03EcMcWYtL8qaDVcjt3VOnkZClTSBXpIuJuJe0CjI/L\n/TC2SAsDQ0YNoa7tKa91AeLn6cCfqy7Cw7JxdSDLAEcqE2ZZb364qHgNJ8mV\nVNZz3/DaJ4MW7qRKzKlYWEeYyUm/ZYo8+cst0kLfONildpHwVjGuBAGzHr36\nmnkvrMEKDG/9Mp21+IAlY8Pwp4SH8unQzBfkwKRFmuaqViISJhZJlI2vAMsr\n+vzV3tHnGC/d9WxLoXXiGBH7jqsWwJeeLXqEKMeuOFvruQzmU6XVeKhywJEC\nwxGkhkAxbu2260fxZ7nVXGx8AHJdRMhIQXJkWh47s7J7lmS64n/SofZZM0Qv\nsGlDoKPuA+cZWW7ywJepmxCUCDnix86Dzp03Lh4SLLRZC2UHhKoFavD/hfYu\nMWP1XOeQRxfRsV6JTYKbgA6n0ZhptcPKKMfRyjjFd6Yswels4gBxvsn7CGj5\nBa2F/0Ri2mmkT00vy3FsPltu0hvbJgtCnJjVrDdYNh22G+0QwoKFch8Rdjjr\nlXtx\r\n=4gc4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-nightly.778a0e8a.0","@material/theme":"12.0.0-nightly.778a0e8a.0","@material/animation":"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-indicator_12.0.0-nightly.778a0e8a.0_1626815110398_0.702966704857769","host":"s3://npm-registry-packages"}},"12.0.0-canary.791311bba.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.791311bba.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"2dcca32fb982bb0c2a3066d729a098d6051d142e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.791311bba.0.tgz","fileCount":39,"integrity":"sha512-0jjT55Q5BApVxN/2jUo5DbbS5wpcjtwyV2Ty8ACI6ixOcQ9/+H86Uz6XIyCN9CXcT8MHuz+Rnx15sqlg6YzlXA==","signatures":[{"sig":"MEYCIQCO3hnljuSHrijbYj5yrcIK1179yT/Qj0i5qhrEiT9SCQIhAK/gDC+L8huzZLERbVCbcyjx0OBDhbLduKGxbWmv3Vtb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186418,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg90kRCRA9TVsSAnZWagAAa10QAJdwBcVfC7vk1KBnK9as\nWIS5l6mAUltY+v/+T7uPXe6JE0Edct5xjRQ6VoMaRf9KXEsNt5GI+zL30R3p\nTg8FHQe0L/fRczUxL7hDNM97+tQxIswWvviFQhY1WytB8lOWU8kHMxhk5kDO\nNebXGR1iegNjL2nxPdDmXsMBH9xEOoKhpLCNv75rGTnARePk1sOPmVQm+ku/\n6ogm9snTq3INJvFZQAjXQ//Uykzv6p22pE5qQdUccUXtjZXXolBx+jTv6Q0U\n0cBrLDk+8jviz1gUwq6/jFAX8MmJ3OjOW6Gxiu7kBCYcqMGmM4uJPL+pkq9m\nwRjqhlLWhysKDVHDwWML8EdO8Gtu6qf6uCP4eOCKCqloz3f+Pk1HVL5byXNF\nCMT9S5+3DgiC4lorQNik89QbbXoIZy2EKxZeaXbLOlZ70jlyhhlPwLlEnMPO\ndGt13YhZZ1IkiznolL1ow3xO3wVMFlw0vK11k+H56h/OStDDxniQMku9KdwG\nxWEtkPyTsJlMixsqrBQbfiYsFOH4OIDE+tPP09f3VPkhKutR9saSQL0Vi0IV\nk6TEhSQxrKKE6lwtSaurfNvchccOrFG6gxMh4RqJZ5mSDd7+fF6v7iLOQANd\nAY+el79BNtiMqcqhCn9aR9EnsjFHQ1h0xyziQ3BL6KIZWLDVKwWPJTPNFioH\nRrhi\r\n=v4Ga\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.791311bba.0","@material/theme":"12.0.0-canary.791311bba.0","@material/animation":"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-indicator_12.0.0-canary.791311bba.0_1626818833163_0.186481463952475","host":"s3://npm-registry-packages"}},"12.0.0-canary.85e9a6ac3.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.85e9a6ac3.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"197fbe82870d3b7bca60452b8001b974f7eb1d41","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.85e9a6ac3.0.tgz","fileCount":39,"integrity":"sha512-5j2ldRj9cg60zUmTczdtFHHNfr1uh30PKuHmDOZ0DQ/jxbizo4c7PiJ3ahqfZoeipvQGhpPNvTkgrIuHOc5T6g==","signatures":[{"sig":"MEYCIQDpdPAQsBK6GaDjebed0mUH3nTigJ0rS+SL8Q5/1ZJdAAIhAMaytMgdO77LyY59v7YlDcAFNYx+vYshCyfCIM2tyTJM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186418,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+D7LCRA9TVsSAnZWagAAwQAP/2rrLY5dmbfNdvDTuUtH\n1W0PDI+LLGPKPLF1HA2bEV/gf+O+kLfejar1gqGbO/CV9o9r1hSbuKClOPkV\n194sCIfHNd9aUQrS6ZZWeFgfkv4oxw65UNw7098+yH0XHWliZccrK1yMtK1k\nU9DB+k8c7Amoq5xk3tkagsqM60TjVLJrn3GfP0PM5M7/zBlxUyanMV76e0xB\nJ+RpzQtojgNCYu/jPqDVmAS/cEWR5qlKKu5FVJyy307FCJnNa19WX4wks5fe\ninwsNtzjN581/H2FUvbvQxAXW2pkmCM5geDawAwYG/78bfjiuTyw7CaxNTPd\nJGVl8BaTT4u62Lm8MpONNUtBCOftysaK18yaXlY6W9aOzBkKY9kQ3VC2yXYI\nel38LFgaXwj07CngyJAcRNy1GMi2io67C9zGEftjNej7EJ9hM6jYqlAI8RfF\nQcr24AjJBb76CVzwFBx5SN85n047UMZkhQ8t09mdgbITvgpD/h+tMcFHyQ4L\nmyel8DDFJFIxKtJkD3fU1vTo+1kiVSYDCneTIzKn4N7L3/PCa+W+ZtiWyg6Z\nIGZsP57n4SRCaX8uh4asXfdJUW3Ouy5sbRFA3N1f6CRKfHGzLNKjUWn0abJH\n/PsnDPodrktW5Zqmb9/0a89yGKquuby09IIMZRMMHIjy4AsPLDO8YE7u533Q\n7pnM\r\n=BDsH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.85e9a6ac3.0","@material/theme":"12.0.0-canary.85e9a6ac3.0","@material/animation":"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-indicator_12.0.0-canary.85e9a6ac3.0_1626881739155_0.02554568456823203","host":"s3://npm-registry-packages"}},"12.0.0-canary.6b0442278.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.6b0442278.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"d468d1f06cf9dccbc6b2c7cc8083297d25864701","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.6b0442278.0.tgz","fileCount":39,"integrity":"sha512-hSpfNqxZYOB7+L1eJFQyKI62YfaQM5WPmjN6s1JChHtWmyqdMpcR4Jx9LJJHbg7If2UdOzpu/zltzgfhwWQFZg==","signatures":[{"sig":"MEUCIQDdYmwuW2NE3ViIFu9bhYvd35JAQ3JzA1nZd+ufMg2HrAIgN2pgEljTFz1WXHAIfh3JeL5X0CvnFB+WHgIufhnB9Vs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186418,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+Gw8CRA9TVsSAnZWagAAkuAP/jAqMp2jeUTgcctYHpZL\nB+ihncr5DJYvyqHw8dzUfEx9lH6kUuvJLIY4XBAy9r2I2q1wNsb7P2qKWRaB\n0KNSYfDJw96bG6jnH0g1m6p/BV4oMJvrU9J/ChELo3dNymH0XSLtIa71Jwdn\nzCV6T1di7aWnOHYQnSo5yzVUSN/9VO8SBkM7+H0fW0aCJnoOjddaOtyB+7v/\nHhYmtmERBF/XlVY8UlCVG4DIl1fheqA5Gx9KCGZqQSdeNflCYaCDqA9dRzht\nVl8LCkcxucRNR7lJpLlrITLVnE2m5/3xhXOEnl3Zm/OvrfIBRCHOJeLnzQSz\nYlERWNGf80iq8Byasy6op6HRFpeFMZh3lDgj0ukEZmPz0hIUQkvjes9d8XLA\nTpkV8SXqJ0A1nRAmJw72V29c7Z44xF6HZg5KbYYBKWNHLRRozMsaFuPQIKs6\nPz6RJtgnFS6vmZETEO3C9TBuyf0nu1JEwoIudNFcI1Z7BGxgLlDo5A6QqCjg\nidvfWsOwpVE/b44GX/sSZM+uHQnS5JiOnUgZ49awC2I/HLPmtx4pjgLn7qHD\n2Ur3D/pj7uSemvITyX1Mx7TIWZcP9cSS5JkuOWSsuRi2GVGxU72ytg5ZBs8E\nFwg7fwyT7P19mpZ3KaGZvbVDdAbrwbZVgA9sdatca3g8kqkNfgwNAN2ybfE3\njt8d\r\n=1wME\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.6b0442278.0","@material/theme":"12.0.0-canary.6b0442278.0","@material/animation":"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-indicator_12.0.0-canary.6b0442278.0_1626893372327_0.025752063019598426","host":"s3://npm-registry-packages"}},"12.0.0-canary.5f00e454a.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.5f00e454a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e33cd4ff8c5fbe90ba5ec88e10ca790e4a713e00","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.5f00e454a.0.tgz","fileCount":39,"integrity":"sha512-1y2bTJVtrUN+ua3xh0PHAxFXKEIFJEVGNAGp1AHCFQyhC9dsQ+mw27R+ZoEjcsg2ZxwIebbaDql1ZY/QwJewhg==","signatures":[{"sig":"MEQCICh60l50DkAvU0yZROjkEi692WZDDUVQ8y8uRrMaTRcIAiB3HKBz3hZ1AqeuOPAjvpQ+bYCGvLqzrwzq9zhPM4NS+A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+aV+CRA9TVsSAnZWagAAkCQQAJtjZdw0r+O1aDEWokf2\nyTssmFtvGHXoVzjrrcMAtt1O/fndhECPlwD6QAiYv386k/lDJzRO7B8dT630\nTsDmZrYLcMfJb9ua6l1gMywPyAHZd3RQUvteB++YkYUF7SrqcKEDgKiJKMKH\nlRTt+hi5/ZhUma2xhAZLOQ8ZpAf2jVk3OvGMjvr4rJw5FCTOrTxpwaTq53mc\ndx5i5gHN3TdgvEcd/m5tK7biDIjRUa1216JXS1bfTdYjfxGo7MbQjQAwd6xL\n6WtBJCutrY367ofmYDwjzh1z2nJSShNeJcecvMLnuebjeBEn9qouiXP9O26C\nZMNupGigr+LEkKIGpMWXyVN4Ye2p94Y3MZdF7WjJepbQDs6Sjn8INqvu9gNy\nqMXqwONgdHcg2ZBWN1Usl0ZEI4E529TCSOgFQNqYh16LhTYKvlD6Y08Dc1Nl\nR3A+iDMkHBJlG8xLOfcPu2hIV7r5ZPCk7bwHHZMtE5z10JGhVaFGKXmbUM6O\niqtL1HYerFG7BLRyeFU8C91RTxCArtyXb/uucQl7y5SJQYUuhxKtnqNJBuFm\nzrJSpuIVdHYPbtvUca3M8r3gB1L+cWqbrVMEp0uDhHu01Rkmsfx8u50vjKyh\n1ZCmqniSbCI69uSJhxiUouBzUw9YnPQgHBS+yc8C1orSeS6CI1xuuS/VjBas\nmr0p\r\n=dqcS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.5f00e454a.0","@material/theme":"12.0.0-canary.5f00e454a.0","@material/animation":"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-indicator_12.0.0-canary.5f00e454a.0_1626973566553_0.691054786862674","host":"s3://npm-registry-packages"}},"12.0.0-canary.90e08fc6b.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.90e08fc6b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"4668e12bcc4a206064b3efb93cd60c7792dcf6c1","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.90e08fc6b.0.tgz","fileCount":39,"integrity":"sha512-tKON+wUTEJSCwcMUwDUSNka89zm/OstYOvrKTJicUMYOCLAbXYxE8QBFAP18pNm7AylGSmK/+ezoINzo/zWmIg==","signatures":[{"sig":"MEUCIEf+vX8hhwtJaK65nKRjEWLO4jIZ5wQiIk89292Z1ZZuAiEAulMOWIQStJOn9CAyoFreM0dEPCn34Y0UChHFLxwprJY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+gFbCRA9TVsSAnZWagAAee8P/RPWfh3QaLGwEMNkK6rx\nRFDUBgsDRUzXvJC/0bDFnOspe+/jNdqy1XjilNhmrUA3FIdLZDxo4WTvhcFx\nHKALBzH7OzWdvvTGBWq+3zgTUzDvqzA3w+8dlMU8aX2ANpz/pb07mfBpN2QV\neoOuhLoqqhjPBrUNyUX057m+nzbSJKnQqEN4VobJq2yde3Ms3T7T91RvBMpT\nbJY5WGk3KJZS+voMCeLh0GgOCeunR7FgbWvyJfKKQgd9TJFZrRJh501pueK2\nkjzbAdfkWw/NR2WIpZXVFsNecnQUkx05joWYSSgwTZakzzsZ/kRgwtnwA324\nWv9NQbQ1pvfMP+Z4zxEln0gtiOY7pFRpp0Tuvk37aNCC3tetFtjWhpgMdMnW\ncl/dN50Nnq2wrzzU2rVs4vejmEozi1fJcM4ATI/YZRX6u80+QnMRmKZ42rSK\nJddyYtjJPOtzmkBePNdKuH2xN2NsO43frvat1nFYK/2SXlS+MUzhQLIWxWI7\nwXZ2R01CCWMhGXCafjqLq9Jg6yIB0n5R7BE+oXE9Go7PH/Wwuf2GLjrJGbfV\nkiJzfNdyfkFgseMHH/+t+JPQJdJ+fhNGA/m8/4/lJcvwbbceUwNn86olDGQr\n2/1HmF/+qcKCdEiVMMz4DT4Ssmmj/Ft5t1rRk+mrmMPjsYLMgcwq4uMzoPP7\np0UQ\r\n=woHc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.90e08fc6b.0","@material/theme":"12.0.0-canary.90e08fc6b.0","@material/animation":"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-indicator_12.0.0-canary.90e08fc6b.0_1626997083716_0.2842760874794066","host":"s3://npm-registry-packages"}},"12.0.0-canary.cf5b9eb86.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.cf5b9eb86.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"6e1567286b892422c21dc3e237cd3df6fa433da2","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.cf5b9eb86.0.tgz","fileCount":39,"integrity":"sha512-F4LPTDK6C3Ir+o9jd6452HN88lrnxNjHIHbPmOSVnR0wHxBerrTMNWnCkkinJhKeLQT2+i4Aro4Tb3iAnVqTcA==","signatures":[{"sig":"MEUCIQCZSp0jAfkcFIoH8dyhYP2G3PM2y/dATidMxTIfmzlYkAIgdqEahx5JeE2wbRua7WS2uoC4865Ni4STZwU93hbyDyo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+wZuCRA9TVsSAnZWagAAoCEP/j2efyIuVh9+Mu45Xkbc\n83h9PKEJIL8LLmmWgdQ3Ha4KBvs1RmRPAY/K1WuOhppLj7x35779OfSgKmsV\nFQOgPGDr37Y8WIH+rRX8N322eTEqB2wUiKztcNCO15G3MCYl5CqrrJmA0Nq7\nNqU+zqJS1rvSQ6ZyfSm9UjsbkC3lOamgX7DOAe6Gsqlz/t279iAir1AjnLlc\nmEw6gem6rDxLebnjy5QDZj/ZhjyhyHXZcO4+3jiJwk94bfDoCFwttayztINx\n12qyhKkfJ0jusKFVy11mj45zkSPMtPFTpTVJf2nL2bw68kRpEjBfK7gS0092\nnZJ+wk1jrybJivmZ9m/5p0K3BMjg8qYli/njQLNP+s1Qa3xXdPJ7BUdoLXN2\n11dG80vEe1ubgui6iQ0SWqckZOK6H+BX4ArMCLgZhDlaL17qJHk9a7SVqUeE\nAkigOzD3DG5KmAO1B4bj/wpKIui/MBlrtmfzdrpW6VnV1EHI8J8+IXRyvSd1\nlgQuvcEhDKwSTJqYT/fhd4PvsekkpX8pgfBIFarak1mpIUpjhvHS7/J3jVn8\n5LOV8kdnXxa6GLdlp6Qfo8TTe9wgii8/p+G8YkVijZkcxpMHniw9EN4hAAmr\nWI49DtXadELspxdrEU5ZaCWAkFv9CSz85eqR6/QpPn0BaM4naApYM/iInEg8\n3KuE\r\n=B2hf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.cf5b9eb86.0","@material/theme":"12.0.0-canary.cf5b9eb86.0","@material/animation":"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-indicator_12.0.0-canary.cf5b9eb86.0_1627063918200_0.05066771679852411","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f36ac75c.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.3f36ac75c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ccbe9689198a01b73f030b806fe10f314e06c223","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.3f36ac75c.0.tgz","fileCount":39,"integrity":"sha512-aT5WPfqTDPlYuqFmbknsVj+2vhkIlnZGBceHgE4gYfYKu1Qk0qyPD7RE4PyVDX7zSLEYI5+Meb0uUQXg67GrqQ==","signatures":[{"sig":"MEQCIHnVFVgGcZhPx6vIrfOIs9yTD1tbVlfpuKR3WHnuiF6BAiAoQFnv4PBy/qN6HRr7YjRmydKn7XkuwVn8TgDI/SO2mg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+wscCRA9TVsSAnZWagAA6CgP/AuOIxvtDe2PXHPBAij8\n1Tay/iFoIsyLEEWl1w6FWj/hMlNikY1gNeqEWO1KZLs4bMtlg3wh9ZVZe+Ct\nhn99W0yaDudRResyD3heWtnf+WukDl/In3KXSmtYHVmM38cexmZ2xjKIHgVn\nLEHr8lGv5c0Ie7/zsC/TcygbqmqyemojAoCzBVRcqi9X0tJNhFmt151ymTB8\ntb6mckjIlHRxBBU1Bf7RMHk5jfmJiErelBHXNg7fbDPoBs/cG3cZPkFWjTFq\nRTA2vfwY0/RRHgrA2IjYaG6ul/DxLe8yGGzBungOKMavMTxXPN/mephJJYGp\n6s4SiuFS/NkS/UxbIpUf3imZ/s7jwYx0HEjYJfTHzeRI/wcdPpdjDI7kpx5F\nfNcLLMJvvzlfvGBy0umn6VpYtDzSMqQblI6M9Q0a344aZTGFZNfkdFUn0yJ2\nWV9gowW+unQGaAXjKwr0tCSm2KR+u+/BRtG6FuwHA8pnrzKim7xrNA5J2Hx6\n7x2el/t8Z0azykS9Zb0G70/D7fQynVi5WH04Pagy1aiRg7P2+bIKMz6HfYyZ\ndS/DuF5PinG2o025hbopSaDE+DD8HIe2MqdfIshHk3LSVzhsTcG08nEp0kKj\n52b3C24D7wZelqT37Q780MrQO5ASIHBetow6mGaBjLsBOKYKsg9SJJ1irScq\nt5i7\r\n=hpbJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.3f36ac75c.0","@material/theme":"12.0.0-canary.3f36ac75c.0","@material/animation":"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-indicator_12.0.0-canary.3f36ac75c.0_1627065116633_0.3852844997302938","host":"s3://npm-registry-packages"}},"12.0.0-canary.ea1e1b850.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.ea1e1b850.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"506342c9c49739a0371c94e9cebe6800202b06a5","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.ea1e1b850.0.tgz","fileCount":39,"integrity":"sha512-fsvdEEU3erIkxqgxs9pyirc3CkAbja+j/s6iYqXbc+cYOIRKIYH+cgV993juZeNqw6ffDQz1TgN9hV24iLkC7g==","signatures":[{"sig":"MEUCIQCnWgZJzhW7MqGzzlPZmnb8Jly0zUbZwG92/mcYwKw0wwIgD/IFnhmmLZjDh5CcYX6puf6QvUXZbbO1jhLZ93RgK0c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/H5CCRA9TVsSAnZWagAAidEQAKRAr7bm9dBw+7OWvk3i\n4fYnCKP088rQ5f60loaE1NdN1cf5uK1up/PrhQ3/GL8+J/ryLhf4k9GSYgUm\nXbVSGCNqtDr9mY12D5oq1dinNuEbFXcRsXeKihQJpSkBPyy2uTHu3J705vtb\nG/0+9o0OyjEJFTfLYKQ1bAhCscP1iW6D55F7SNkMzLCN8VcRgyHUmLNqLk5x\n9ug0LIEQbKfMU6U2ItYdXduRzrA8hh4wvSndY/Jl3+y14igF1GKpmnkE7bty\ny0HUUze85Rf32zGRRZ2AnyUd9d0qCiQjCh8/vHnyLlHJRF0ESQyQPZUr+/mO\nYf/PynNs3Q/b6QrqTv4NW7HtZB3TakaYnLu/R+bTrHaIO+b0uixeKgaTzvIO\njT51zjAxNIiu7RgYSOvStBCugVtv6GrAnO7s/HbdP9SjgSdQZq5BkrjIbDGT\nb9tS3MtPOxLX9++7uPrBFXcvLdIZHvGLtpw5lSerWf72GHju7ID34S70biTS\nAyjpgl752l1mCdCsV5w4js0N9/L6KLrMQosroGT4P/1/6kTLTb1pWBF8im6J\nj66JEDkp2sFEo+IdyanvX0iMv2GmSxasaD/VhJUXEANKb3h+z8F/S4/ggkGZ\nftXnYBmUcLaFR9MUpKKASqHtaS02TgR5zPcsB8rHuL11nUEJYoIR2L4H4b+1\nFe5z\r\n=beYq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.ea1e1b850.0","@material/theme":"12.0.0-canary.ea1e1b850.0","@material/animation":"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-indicator_12.0.0-canary.ea1e1b850.0_1627160130023_0.23766102709683334","host":"s3://npm-registry-packages"}},"12.0.0-canary.22f390c43.0":{"name":"@material/tab-indicator","version":"12.0.0-canary.22f390c43.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"f845019a608a84835a38e240c94af16cc26aaf29","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0-canary.22f390c43.0.tgz","fileCount":39,"integrity":"sha512-87L9Nz1VvRj4IPTVfesT3Tq4daogySCUWHk/PwzpOdsXWtdrDj8vSuKTf8bl8KyMtS0gH4kG4U2oTPpkwKvlMw==","signatures":[{"sig":"MEYCIQCKo44raacUPfKdYAl073LZ/Kbi2HLJUNmZjwQlJqVY8AIhAPQb7nUmGHsOs+OHCILkqipb6aWTRChJ3GjPcyHIBR/A","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAFeYCRA9TVsSAnZWagAAlVIQAKBrfcIRSI5PP8kGYbRd\nyGsi/Zx6ELU1zEoOl3cyfRgiUnd5at6VLXSt+e7/YUjFV+SiAYbubYsH1qrw\nSIOb3Bf8rlulCcM515gQv8X0j8/6z0DFjdgwYl4FL9fvyfZNpuCA4cuaJ0/x\nh9VJtdx5kF9SWJxectDFa6ipPqV7AiFNlefWgHqN1oPyaRbl3W6YZr4zLCg5\nRVCy0332o6PnhHsYR58r07RRgGON4S5gF3InXVwQFoTuX+oLHI0Dp74HeAvm\n5WsKXa2NMqHvtITReO6QWr6p7lWV3lf6dbAXOChlC8gdjjyG6qZQRhEMaXN9\nYRHzzdNWGSWE1CcCBU8XLseyTSury2nfmxexMqrJ4kGEcClv7VjXFD5Mj+wj\nWylFbyIgdn7aiJiKn63jb52+rk0DKmaAfFKqt50nzXtSx6FaZGsPcE+w40US\n/Yn4GmAOnwZwd4pSuSvcYhGAxHUihPuvV0RO4x4Bw8vPTiGcFK5Utjs8IDEG\nfEyX8JMtv38Qfmi8ScxmXsDbTdVvdfVr5coishS691Cuwxjb6rU6HPstcra6\nqq1J+H1ZnxHRC94MokIKRUrV5JDE0pwuYakdBHK9NQCTZQhXaXpW24RVTfBf\nJwWUQF0k1unp5PCBLBCQ7IPMsbVo0S9YBOvmT10STe0zS+Pb1X+iw02kdISw\ncIHy\r\n=f9iW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.22f390c43.0","@material/theme":"12.0.0-canary.22f390c43.0","@material/animation":"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-indicator_12.0.0-canary.22f390c43.0_1627412376572_0.8376886355917383","host":"s3://npm-registry-packages"}},"12.0.0":{"name":"@material/tab-indicator","version":"12.0.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"b80ee5fa49a15c4af64814c943fb0e9426aa9625","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-12.0.0.tgz","fileCount":38,"integrity":"sha512-PAW2n8d1JOUn0OpUAZx8KkH7Oiv1EaZq1fOapk9t4shPruzmrvzDrJ4omN82FhCf5z873EPNzgPa6fD+Rg5pjg==","signatures":[{"sig":"MEUCIBCCUj4oaBYSPTr4AfadlVJOuMzDYQxZSdNdyW17j/wCAiEA/X+a4eyrQKJGVpDRYsZa+hH+Xz/2pl/4vxzvc2fGuns=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185755,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAGNNCRA9TVsSAnZWagAAcHIP/Rst35Mo4I4BxY0lDgTb\nAXPi/lT4NwUWpio/xuZ6rUHke+RDPZ1B6Lk1Kk4PE6vezs2LV+TNOUIyVeTq\nnO+qzOgoVTCmjJlyNl+3hnDw9C0P6eaE/od6JJjjAJ61omNDn1+HkZK3RXtT\nMYur0ILLo7kRfswHGpMH1uRoG9SsgUssb38OwmU6oUSnrKsye74hk/QLIXT9\nOG2bfpreUpTDLJEJ3ftaIVgEQoO8TDJUgGN5JGecikzMDmqBjBfMKCBYSbVy\n7ylnz0rlBTpcoUBrvlOy6F5EXWOkQ7CsfWAuDsqyPckdcCulhQzbPxUbGfb3\nl/1WN+mUVxufxyfSN5NP6N9rB7WiPZ29H5kLZIvfKivecKaZYCMUtr24ygVT\nINcvdQA3ZvfnGsV9aqWXVvr4be/+Gx3sAB1TaxOg8i4T9w/tnoQVb8dT4U8K\nYuH++HjCi2ZoK79Lcx0hkQeYNiAuMnYa00zVrQmXObMsyn6YadsGm0nyGpMC\ncdNJn8sToqx+HJOumQsH5S+5YPnv5z/ETEZgfeSNnNm6tXdlIf3wz8/PF7Qy\nJ9C5etTCui0ViR6MWxVbOjpqifUegQZ1KDdPXxl6KGA8wuagRiYFwsM6+puq\n6OohGX5YVfo7xR4dEHF3qKWcyznBfy6kt0Uz55Z006Nrdbk+e/os92XXc5Qp\n1R92\r\n=+wjg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"^12.0.0","@material/theme":"^12.0.0","@material/animation":"^12.0.0","@material/feature-targeting":"^12.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-indicator_12.0.0_1627415373067_0.1837856062385781","host":"s3://npm-registry-packages"}},"13.0.0-canary.ae85f7eba.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.ae85f7eba.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"29f6a746a867d1fb235590359697c99defe80d1a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.ae85f7eba.0.tgz","fileCount":39,"integrity":"sha512-KTRjgRD5q/CJmuCSrKfAm5Kd+GpOdiWAosyMAT0uR/4TYR3Wf8KPN/Xvs8EE1B0mYxGM7bJ1AOl/Sj+PWmkQ4A==","signatures":[{"sig":"MEQCIGeitES+T27ER0lJcAqbHOxPYATRTcSrr69xAu023oPvAiB2N9z0g0jPLUQys72yqYI84AxvmfXAe+vzhXO2/WVqoQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAGOrCRA9TVsSAnZWagAA0OYP/2D4UoRhEVd4togGUfuN\nazORsWjwjOIfRvJsO3Tl9rQViGSBP1tpn0UybZu8fKYwt6q4ofbrbOpETknP\n1Xu/qhH7hp/I1nNKTvqfqaKPoC8otuTsZe7AbdvRt/ZyjBg1V9dS+wsvmDna\nsv56gevT72kTlPGv0WmFXkXluGcYDDT04r6EJwGu4reaNAydJtcZ9r6k/QKF\njGN/0LZLzcWnU2HXbgVulZenTg9+FCKftATyk/aXMu/jGYf0hx4Y7/1H5YFO\nzltxBSGPlpCVAWC0w1QK8WcyZypiEqfjsun8rckOTRZ/2WMM9ikO5vDF8X8Q\nqXDRrRcYYJwdLiRzq+HC6B8SPzMhkojlUUfk36HD8xsLE330FtUZIPN8KR/M\neacqnJHaS+XdUnRzwP/dpToR3WNYsxyxrPg8lmTDMZXejobgEjWniMCx8wmX\n2GZsnKj9xcb31cMN02I6IWYUa50cHTubjQbI3VaAPf7d+84LVubJm2AH1LJw\nRuLpbETaPSIKZ3hu116rS0AImh8rxVzehVmAikf22JP3R9SoMlwJYGCpMKzs\nve44wOyiXusoqkdsyWlmnd9cAKf14ZrCpojEZWDb1i+52/plVDBVTRXVTQZ0\nfrQ1C/auIQgfCqzDRR4oJF713d/Bj7OZCzOD3yxttwHpSqXjmHv5Up8QUHvu\nGEqf\r\n=1nMM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.ae85f7eba.0","@material/theme":"13.0.0-canary.ae85f7eba.0","@material/animation":"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-indicator_13.0.0-canary.ae85f7eba.0_1627415467097_0.7313207643127817","host":"s3://npm-registry-packages"}},"13.0.0-canary.5981207f7.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.5981207f7.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"7d845bb2b4d183adc4c3f94e47cf1e2d9914fb8e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.5981207f7.0.tgz","fileCount":39,"integrity":"sha512-uWqzQpP1TBRlcLuI5YhidaPHe1wpVumxLclgNfuOV1PMqYYQQh1BrF72EWDSi81xbIDsBG8gaCcgI7xxQdKK/w==","signatures":[{"sig":"MEUCIQDWDPDyo7WcOdFH13mc35LmTyJeOeOWru9jVdaV99Q6cgIgLZfbGfktBauEn/gVVOISo5nMoXPNlVWyA7E8AQksKOg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAJQgCRA9TVsSAnZWagAAV4wP/j4YgKXnEh4CdJzWOomg\nNqNQxL14zbExenbiDuwPRrrF0Dbo7eimkHrLMRhvHVtduJL3df98k7C8Apoj\nmGbHHl05usrXH9tQXh8USlpanVW1eudiy0cMuatDDmunTekSkbQ51c9d8H01\nT72kktNkGaAoBI7Aa7YR7cvSTWVyKCmPJGfcNuqmcmmAz8dj5xY/KiP1g04S\nzpgE8o74dPAkb6Lp4CuOJQeIB8oLU/+ytrg5KTSs6CRXakpJPNoJy/Kwd516\ntvTghA+g6cGnWNmsF/U99KSA3dqZ9hTRyqCw6sQoM26LBohD3XU9iQajMWEQ\nYR1npMB5crR0vyHNntrwyXSf/8KkipbUFYpq8HyLdP1xeMTqrGAJW9DBmsF6\nk7wgr9foSUeBo89WjHgvHUuw4g1KEtlf2MbRzGWyaDj0YIJJRarek0SctvFJ\nhDoOsDodfEzkPRQbS0dCFWMzg9ctZTV2e+c6McpHVabFjs1C6e9CiHQbahxl\no007LVP+UW6vBbCfzUG3cO6zVSzxbnxH1qYdzbPRALQPmEyO0001Dd7qzTu2\nvDDqV3wzIlb3vMaHoqnDmt3Xo4vVJ5GD5KtyDpjthJYmTnARD81V2+YiOeTZ\nxJY7RXlZF0/8jAAuvDcjlfpifWmyeE8LJ6t1oKaPbwaqS6K23ws4SQBl2B38\noeoZ\r\n=1b2F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.5981207f7.0","@material/theme":"13.0.0-canary.5981207f7.0","@material/animation":"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-indicator_13.0.0-canary.5981207f7.0_1627427872466_0.0931391160495405","host":"s3://npm-registry-packages"}},"13.0.0-canary.83bdd0222.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.83bdd0222.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"99618f3f622a6b3a3fb77064f2125398d39cfe70","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.83bdd0222.0.tgz","fileCount":39,"integrity":"sha512-WLX2eBzUhRb+8z/D00TdhFZJkucJu6uX3U7b7Sof9XNapdeS3uG4KdJ8TXEmGrd2+wsoWVo4LFSaawoIETgraw==","signatures":[{"sig":"MEYCIQD+2n1ZcZPDpmrwpZy1yZDxeaQfRIRAnzy9jID+deZmJAIhAOjYfQTOw4YGM/Xn3cv+yqkzZ2AbtNRL8/W53Y6MeMyS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAZMKCRA9TVsSAnZWagAAlzMP/3jBA0YpKjKImKTWk8RZ\nCRFZbyB0nay8IodoJuDPF2t9JFdgSwsskrAWpDKMY8bkOz4HADat2tNXFKxq\nAz00Puayb9ZdPqLIu7na2Ex+joFFeaIoG+Xna+EEsmvLA/q53oT0HbfMfiBe\n2HmH3jtaTx5u5vpNaK+dORqc26HbyIe4z3P0tidxs4xeSGicRZ9HoK++pMpt\n0t+BSKEaAkTBhWbnmlmfxKHv+2/c6ccSnpECtQkxk3XqFPdyjll12zkiGOuE\nXBw6rSdhauQS6KYj2M4IZbDjAsIPv5OsrZsk25NM4lNHMMDHDrKOyhaMFrGH\nBwdYT6gniWyyaSnHD2NEruDqA/9i2Ky8a4v6OYDlu3NzaGoyviXGnbnjaAlK\n1qFNxOKXreJOGHpTp2zYOmE2xvNWwtRAHFZkhlzVZTdvNbsKIA6JE4CMg7+g\n7Y4bUWnKXKjZHW/4pqrAeuU7qGLRV52UNGxRkzn+pA1j9tckY1nM0oFSfegh\nXJn58uj/t9sh+DHLI9CuWrliZ9g3B9piQXNOvpk4JF+46MHktFD8DF8A5rmw\n80mvPzR7E1NTsdVz1PtA6VBdr4cAyVf2rKOPy1smcg/DRRf4N7aw/e0OFn0E\ncBaafC9dfqKCjzFxj8JjixwfHmG58p52wjVzYx9GJ6V6U5tn+L/5JhyKquPL\njq72\r\n=Bq0o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.83bdd0222.0","@material/theme":"13.0.0-canary.83bdd0222.0","@material/animation":"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-indicator_13.0.0-canary.83bdd0222.0_1627493130121_0.4624417799978615","host":"s3://npm-registry-packages"}},"13.0.0-canary.28656298a.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.28656298a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"f601bba4c6e6aab63a5528d29e9940f03345ae71","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.28656298a.0.tgz","fileCount":39,"integrity":"sha512-uc/7RbqhdJvRVjFqVAUIC7QTixJnMnsW8opslSv+cSO3Flevl69+XM/eQYzgRSPXdt+NiPmNLVIw8TpiNYpcCA==","signatures":[{"sig":"MEUCIQDVQehKD82bMW7nxeSGdxHy6YZlJJ7JtCLDIV3unXJk9wIgIkzuGcr5Eu0zM85q4ahlJGV6Fj+lMyAiMWeDuENK7Kw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAu+hCRA9TVsSAnZWagAAcwsP+QAkVk54fbLSnjIs8xbL\niaQqdd+wFE36O4nZRtXRay4RsbUelo2bXrYWFQihh1FTBNYWy7+caxq1wn4C\n6D9oCGwNJ6Yu3ash+yIrJZ3dA8wYBSUDHiYZ5Tb6gOiCJ54rDf52FRDyd3A0\nqQsqCd51onh9HYatUdJo2YGDZ5o0kQOs5P/TgtBG6GH1CsuSQzqB3x0iAfD+\nPkHVBphh5K8xGSo5cqkdyFO4uvvEgenmDTs4f8j8qxb7SI06YJpIx0NauCo8\nY71VKcj73J1Azaabayd/PqZAHjbNcwZTyPtTq6EoI1WVSnVzxLcWVdGTqM7v\n1Oiif6zwBuZAFU1ZHKdGfdB0OiyRqmcVVGpXcqf2bo9TIK3bbU1V+bRwj0Js\nZA5aaEJTniuaq/1o0iupj8MPWT3Wzw0ssgsWyuT9Lyns+xQQ0QwuGghZb/28\nvprKcLG0rwPDKsAhOKPfoL0bpYKHlonKrICdOwpuWo57xEinlYMCKVmLT7D1\ndop9A+WBBH/9bOIsB/QoO5aVO5lJoaEKSGi17CxyM5ZPNw6JZ0QUDzegiM5C\nyNfc2S5pgS2Cc0gfPYKBKtJKafv+yIEzo1qNUolAUl8lumonx7o2DU4l+wgu\neXv+ouB2WeN/gjaNgGP0sjv4IbfeK4EiiiRE+cydWzTdX8GBW3neOn0/xavj\n82y3\r\n=3hN+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.28656298a.0","@material/theme":"13.0.0-canary.28656298a.0","@material/animation":"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-indicator_13.0.0-canary.28656298a.0_1627582369697_0.850542083544114","host":"s3://npm-registry-packages"}},"13.0.0-canary.9e797daaf.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.9e797daaf.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"8125e1b7a183059642d5bab0eb8f7dac7bd2603b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.9e797daaf.0.tgz","fileCount":39,"integrity":"sha512-10dObjdtt3bCHP8ZzjYhM7d8Lrvm+okc+HmK2GkMRnDifV/t5aTOc9dIkl/nVsiTOzvyA5E3/gHzd7OMbM3v3Q==","signatures":[{"sig":"MEUCIDshM20bMuMSoKIC6XgYaec/INsv90V6gjbfcgAhv16uAiEAtx41j8/yGd2QV4PfvhHSjdFuJ0sUve3aaQM3IZ1HE6s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAvTXCRA9TVsSAnZWagAAu2AP/iKFQCqqL2Cu6HF5dTox\nqIC2sUHZ1os/zQGqTQjwnRw+VP1pHiCvTrbKdrpu+7OYUfi0cfuwGTUvqsc7\ntxHWz9RetL/Z4PpgCeHm7FoTEkdUidrlDXqMCmRtrpDiU8PmeFICzJYfzpQf\n55g8cl+/TsxhZoxDXf9v5IuRXa0Ktab3S6LN2bn3s/v4lVArlqA8upaLJRQT\nP3wii09A68PG4HrPCnCxcZ3EnoNMHEEzvymQKE/9vVWF86W5sJoFrvfDe0c7\ndUTEqKRzmbbSxb8XhQ8Nt8IsRVvJ4i7S+GWQOV3/l2ARfWsYX5B18LgrSg4f\n+aovjcu0dYArp5LUsmXB0VLlfKAqgLqGVkhT5uzj2g1t8X7AFLBgLvFuCUbW\ncDpmk1HEGhGq9oUKXZG4FK+mg2itwqo1ty/7l/Umd57YYBu+GmnJo2wXn8rp\nC78OAK0lj1W0Q2ajtP0ghdG/FgQwgRxKxopnmT/LVfYkmV1efKcJTmuf4pBY\n2uBwaXehV2pH/yDcfwAsEdkAetrwrc2kiQlj4/KXMpIJpjCbUzZWB3HR4qoP\npTr+px+sZOAIyRCE2hcnnspEkM4/PPr7XoJdBlx797NOEvaB88BVH9WqcvB8\nsxeiV5SImXkcIEvKszFSPILnfS01hL5hReoWNSaYwzJ1u/xg8Eb4j20qv6oo\nAMbg\r\n=H1h0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.9e797daaf.0","@material/theme":"13.0.0-canary.9e797daaf.0","@material/animation":"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-indicator_13.0.0-canary.9e797daaf.0_1627583703639_0.1638359595111889","host":"s3://npm-registry-packages"}},"13.0.0-canary.adb9f1ad8.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.adb9f1ad8.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"2bb3436f336a3a9c71c4b544e60ba122943bbcc9","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.adb9f1ad8.0.tgz","fileCount":39,"integrity":"sha512-M/s6K6iotevs0C90oa5jeyT5boNsPFbQS0/EwyVS1CyQvDbO4Xza+hqXowMwrgL3RcYiL9tAesdIPoww9Otu+w==","signatures":[{"sig":"MEYCIQC9sBR4jpywDQkFESPwlA7X60Yuf2CV/yDePEu28EcTOgIhALkXDq2JO9il48j4CKdDZLLH5qnOo8HbRbHK6IdQgdUS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBE1GCRA9TVsSAnZWagAAZbkP+wS9nf9ggnvFqITbJ9Bt\nsu86Dq1cHHfAxy/Kub9qEPqwy/Gb1FRsm34uo4JoSm1VK6e7C8ToSj9L9mKF\nyhuTblun6EhhDQ+LR3zCtOqjJyNO+R4KAiPlhfTEMpisGon12KYbkJ1Mm8Xy\nHOiIJs0dlMXyfWfPgrjp+MW8EfR9XbaEsvhJdIalzBY9DKqvTH8m76qENB1e\ncDUaXO+UpEQr/OBDya/5/oR4Sy8Gyj7fgVj3DPZO55i48s5Romo3Za4jNGMM\nIgNRXlFD1s/xd3EAq+gU7PkiGHGgshJmEfUUdREIdSJEMy45nIWqhn0wP+om\n91Cny5iGjxNvOdJtNDLoxCKZ9bJ9SHVgJt0SdBmb09I/hWeu+S412eRu2kyG\nfMTpzU3wl7917vgQ5WhaAV02ri7+XedkwiDiEmNBeem/bRM+KDo8c75jK4NV\nqBBE4e2l4+KJU9o21FCj1jzi7G7Fv9rlZ4E01huwt7NlsOY9Fwi5HgN3FHHI\ncd5TKj7Ohe1LK2BQ8dW2VGkMWVXMq6qhVr6+d69PTWAxw1o9Uz8BDWGfeAYQ\nECu3Y9bqam4bxpXJ+WqCVB8tOoa6QRFsg1JAxluXovj+/p3qvn6E5L0VAtwX\nMe62vdCAj93pmzAtt606idb0TCf/J+wt6YEnCbJZAw7gtBW6PS4MH4ZI8rld\nR3b8\r\n=nISP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.adb9f1ad8.0","@material/theme":"13.0.0-canary.adb9f1ad8.0","@material/animation":"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-indicator_13.0.0-canary.adb9f1ad8.0_1627671878399_0.041466942425493425","host":"s3://npm-registry-packages"}},"13.0.0-canary.cc5377458.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.cc5377458.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"42f87a597abee8715692e1dbd9e216f7611e3281","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.cc5377458.0.tgz","fileCount":39,"integrity":"sha512-jU6Njt4SyFrQ59l3/qYuaQcYHH0tevU/35y7QV4JWy9qRsJ4g4x/JwuMIO01aJmIXvXglCBfqFlueul60sM8XA==","signatures":[{"sig":"MEYCIQCJE7ie/vL3WK1cMHH9iof+QpaL+frlRrs59j4penvFWAIhAMz6j6ke7/vwU5pv2ZkWQoj2vSy/XWR2ux1ZyfGWwlft","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBHATCRA9TVsSAnZWagAAFYsP/066F6nZf+91BuobDIqL\nPnuPBmzGAhpc2VgAMg12LqRPallIhl8R9J6OqWuQM1g7MUkpbNRmrpPWGAjp\nQ2Im233NBY6ZTkdBEZVncELzmyc0dZqE7e6gcPNo02IAm2ukc5vg0pj4j6pH\nbcXF8HMStae/3WoUKizq7RMlJbatmFWZJujct9QxWLpWQcOSdjhLkm2JZ8CO\nI8UNdYISRKZMdspzYrH5vp3B7LgOGshEMUauodWARSBTrkUsQYXDitWszBnp\nRruTFZigyOzJgKP+e5IkC1yo+ZO/H6o9DOYfz6rffODcEzq/BPLCntO63EGO\nnrYrxWeTOV9Xbc9UFc2wvebPXKs3iBaY/0DnL+fCYrzDWiUbYT2fXmdcIF9N\nLN231Pg+/NnJJ2ma3t4NQb7iz6buKFVEuLaf1o0taD10qgIL7Rzz4Fde6GQ7\n/avM958ybOW76OB9+bRyfxbwXMH8TxyZFNKZ+2Z7kwv5nnbJVvkrwb2PYLXF\nTtbBzIN4Gy4mQy1+0Gq2AYjY1kTgq3rWW4K35BnT0hYax7g02U1q4qW5d3cd\nrER8yctPVPAan/ely5x8Qh8NSxIFTx0Rn7VPP5Tbh/3DZikqExfT7+OS532/\n1CHd0qlRqLfHCHRHvWOQYkD/1U4wWKZQHEhlrc4/ADbJ7X+g8xKmt9HY6zag\nrTZc\r\n=zkGJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.cc5377458.0","@material/theme":"13.0.0-canary.cc5377458.0","@material/animation":"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-indicator_13.0.0-canary.cc5377458.0_1627680787400_0.9168246934523319","host":"s3://npm-registry-packages"}},"13.0.0-canary.a395972cf.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.a395972cf.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"8791a1d70c6343fa485d984c1aef15dc4af4c44c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.a395972cf.0.tgz","fileCount":39,"integrity":"sha512-bRqmB71na889fRPYHWZ/RZ593r7PzOlOw7gv1niauehMlBn7E8cuEnVNRHSo1I7B2+xu9fXLPrbwI6ER3EocoQ==","signatures":[{"sig":"MEUCIHdjjg90OaOCGah1iq8MnZxdlxCmFRIc8rr3OaoEVxzzAiEApG5TCbAH8coAhH75bqJNVuW18CMQel5TDM7FPAYTSwU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCbO4CRA9TVsSAnZWagAAyU8P/AtPwBguTqVYQ0CfwFfy\nkdKROmto3g3PPJ/ENu7V+wDJaAOA7p5c3vrSt9YYHeam73lwMtf/gwPYOrH5\nCg1VSWD49b6ixAhAM9uacusbBiyTWeMsW96TBn/KsXzgEDHXEw1vIo9q10c1\nM1ctj+tafvcW84RA91p5hISexSvsTvw8/y5l1P0ILRnAnk2G55pSLLstXSi6\nCpekg3VfPLUAS0dt+mSCWhS7NgRE8o8vtSysd4jPsSMoJBSY+8oCu7q3w2W+\n/4LuvTqMyqZxoAnVi7StGKSHDCFNU6G4ReSk6BX6GcPF519kkYBKbIgy45wu\nNzVOygmZJhYuELumW89uACCXGZ5ls3Ch0lE4dtMt5OwqVuquHx0WUY1YWgae\nywxw84wmR1gBYcjgWZKFOmBCcG9jpiVr4teHb1SIMXBWm6Imw1iac/yctX3N\n2ahQG7KLdibd/dgHMAazwyhlSuiuiHNP51H97OqhUbjNMtPCJxWrC7cqe21x\nnrLuiHWIflMN7EwLck/KuJDReeUxfS9yulYeEaO8g7xX6HF5+wnNI6mX1sJg\neWI1Csn4ZuKdGq9j+rSKxjyTEpl8vO502pvbPXuzeUS+qbH7box31ANwBP4L\nW1ufw/L+95lgtOt1UY+H3V8wQRZ5OMTeAxJe3Dv9dNQQbM13pGD89euJDdZc\n2Ktd\r\n=U7X4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.a395972cf.0","@material/theme":"13.0.0-canary.a395972cf.0","@material/animation":"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-indicator_13.0.0-canary.a395972cf.0_1628025783909_0.6965344220837095","host":"s3://npm-registry-packages"}},"13.0.0-canary.7c96e6b98.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.7c96e6b98.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"8b104f5342cdf831a896440e563a0caff0864f1c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.7c96e6b98.0.tgz","fileCount":39,"integrity":"sha512-OHKRccI3BBpVZMykaILesKDMd0xdhJecTzTrloexRm9Rzyv5M+3lUsqL8pr8UfTR9m8DT0xJFFH4kbH/R6VQ6g==","signatures":[{"sig":"MEQCIFvi9q43eVex2A8wYUQF242B/55+0S2ziSU8AFWRx/PlAiAFAthZ7f9rGk9T82X9ZGQVVoaEjDGNeQfG5r8K6KAQmA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCb+QCRA9TVsSAnZWagAAMZcP/3XDy5DEhmlAxS/Ts6lP\nYQXrEM7YUBhMQf6h2UHGZ9p3dU+y/ZmcnQDi9uhVmdtmcGtFT+cXltqdYovt\nh48+SI7HLYQlSIJNztSSf83BwtW4sotpBj74ONxDhw0aRgIa6H6QcA4GB/Fo\nOuOiALjl5xbYpPWKWeXccpZEQAF/CxHQPfps2g+vu0HOqY2xZKYNqEOfUuTC\nzLJtl1zffzHHIqid5QWJ5PUgAZO/LNfxjR4hfyZi82PzMPmEmy6f+9qLJBd8\nCrMZ7ow8Feh8xGkHdnHXrMASIwU+3/kpoga9YvEPwZJOEaP8uWxrastNx8/m\n/IdwUh5nG0b+SOBgeTYMxT2PlWBcEHNaSOHdiRrvGFCIPC5a49XYL7M5WAlx\nNjf99fqLoLvJ+hjz4SUmCnvhNsrmPLbx9IrbBkD7DwI0JGqCs0YoHkpJ9kUS\n/MESFDpz3dAXcFkH9FdjkzZhMy3HvLYAFYS0riycdl+OAtn8gOXoZr9rlsxt\n4JckuBYIYr4DskwEzfX8Hlq/I1xM/cxEhhKhkIvMF9jgJIcvPQGr10Q3Kwq1\nuz4w62yDt+xJkR4HdGbgzcqmbhT/PNbrn6AoRrx66buwKYzNys5dHm2YD6nb\n6I1XiR0rcDzx+37WaTlFcqiH37CbdRmHT0OlJQSLZSf6APge5RaQXkBfW46X\n38br\r\n=RAaD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.7c96e6b98.0","@material/theme":"13.0.0-canary.7c96e6b98.0","@material/animation":"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-indicator_13.0.0-canary.7c96e6b98.0_1628028816176_0.28841495587152677","host":"s3://npm-registry-packages"}},"13.0.0-canary.a80c8b2c2.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.a80c8b2c2.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ece2b930950a6cd5a0b18c023c16a066c654fe50","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.a80c8b2c2.0.tgz","fileCount":39,"integrity":"sha512-YesJxZT/kV9i2+Wce4XVOqM6jI4xziI1b4WVUPfuFYiYkdMzkBz6OV94i/EvbYKoglzTJ8lATUOHP7YXS8HBXw==","signatures":[{"sig":"MEYCIQCH0tWcnHUrG3HDKvzC7wl4uYJfr2Da9a890kSkkHWbaQIhAM0p0mQp2HiQa4Mq9P7ajB5Rg69fnvoEm1iTKLWH0gtj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCynjCRA9TVsSAnZWagAA+MsP/1AFCFNepReZzdoQxMXn\nQ1elOp3OKUOvM5UUSh8DzU1yhoxkF5OiQpbNrD1/OqOAtLJAb1ht5Q1HjyfE\n05fzvy/5Qrzo0wzpMwLlAv9Lsr9UFR+SEfynnStkJf45PbV0Z1WZ8DXxOdBD\njuAcT/m80tob3yPkn1HcukhhCUP728BpsmXPfMyV4B4XVFBtrk+VBoAnMG8b\nFQ+PTPYq3T7dfV/xGnKPhOaCZe7++CK6y301DObXbOqgas3oOJx+VBYFnBlR\np/6SHGxKW4LbyM1jjQ4aLDNGyKPM0kewaCGoH6aC3gCj39/YXie/x8QGsd8K\nalWIlvVu9dPe0AM9jWQmIM6aY4kNaGpo6DdP0yEhzqmzcHqc5Y52Y1agk+Ex\nlz3So93LEa0YNzp4rgtbE3AsTasO942nnxoutcQmBTrGUu51Zwt+339leqZc\n8v73F0bEQgQfBCWpp7X9zOubMeeLMU4NYNvpY0uMp/akawhGMEwqStjs1fVu\n5YsGRMllheHqXssT/0p+ARkJ/uzI+jEF9pjVKYkj6H5jo9VCsPR7/V2iGd6/\nDzKQ0WT9ALgZA75PhCiSnK/DMBrhd+8SOAZcqQIIRLOgd4rmVL53QESO3Ruh\nNQCueiTzmiQGjCCALdU39PctIz+//LtML3c48RBU4OOyOVZCavYrhnwUw9IC\npHck\r\n=QCH6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.a80c8b2c2.0","@material/theme":"13.0.0-canary.a80c8b2c2.0","@material/animation":"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-indicator_13.0.0-canary.a80c8b2c2.0_1628121571445_0.4295052422252814","host":"s3://npm-registry-packages"}},"13.0.0-canary.3dd611091.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.3dd611091.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"a2bda016b98f422da55dfeb19d02d86490984dd5","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.3dd611091.0.tgz","fileCount":39,"integrity":"sha512-04RIrcqsmmza0LvW9IySjikgV/qKaApcEo9u+1lRu2gv9IoDfmQkdKuB238pyZ/BRlbgiIbQCm9K+QJitiTLBA==","signatures":[{"sig":"MEUCIH2KAy9nU57/tPrynytyQS48DOIgkVqRt092nVEPgM3NAiEA7vs07IPEBTOeu5a0em3KnhCa4AGDZyCSY9ocQLNUn+Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhC2FUCRA9TVsSAnZWagAAVIIP/1jkCbrBfmf/HorRv7Ju\nhT4d0rzWGxQAhfnzxZlcfUgQ8bpJ8z82E/LLzHJfudj79K1z3l2GWKYm8VqH\nflCQ1mRB9atIY6TUadGJ1//24vKuuK0HRVvBHm0tvN5+YXA7ftNicY92EbVI\nR3zVx1D8LbSg+IZ93HBFBwmQEaCjVZzz3q7pjVAX8jv5txbQ7VqFE+rA2cpu\nzLxeSrKgrk9aeVnfDSjDBmScr4hjvSvZtUwfXtkmzhI6W/5MQTpFxr9rGKnF\n5/EgZXqzdcx+L7JRGKoZmSKhO2tdFvOzyAs+dYJYltpStH91y3GTMGtZL8H/\nATX1BMATdWVM7G4vkNqhMWMx04hmRruvMvtTUoRDhAYZRdQpbjr4F9VR+RNq\nFoy0gVI/6t8katQ0JQm5r+Pk4I3FwOyoGSWmp0oB0wM7qpGWEojqEfqCH6V3\n5k6moVULQSITecJ+uQ+gGjrVePedNmZeHqkXLPj62Fv0Hk7YU2tRVGiPEZ3x\nxqZMRip5bIHRuFfrBHiCT2P0jcvwbfOslhpIjak/mIvMaoKYjo9po8GW5YBb\nRxYs7lpbnmG3aFO6C1EHNTM2dArD94jC3AosAEhlaXVrvOEW2FgVGMYUpTqz\n9B/g+r/SAbfwqx3wIMTJJ9h7XsVdigGB8fi+eaMSHOCPkxxV2sRoWx8vmuhI\nmIwp\r\n=CHK+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.3dd611091.0","@material/theme":"13.0.0-canary.3dd611091.0","@material/animation":"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-indicator_13.0.0-canary.3dd611091.0_1628135764005_0.2615985862099075","host":"s3://npm-registry-packages"}},"13.0.0-canary.5dee37ff6.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.5dee37ff6.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"17c2f1feb48a7d783225d291e389ee8573728f71","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.5dee37ff6.0.tgz","fileCount":39,"integrity":"sha512-/luqGolAsXolqDKH1ZI32qeA4eEquVBH1uDhl/VLE3J1pKbUWBRaGOs5xU6HDoSvrsv0FJ8FqPGeBUAk0pEzEg==","signatures":[{"sig":"MEUCIQCLTc3i9+iZg0hUGMU7fbxJhYbnB8ucjh+Rg4V7/ExMeQIgBv81mRwbBXl3K/qEw2h9WWKksiecymwk0WSc6rahSco=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDCLoCRA9TVsSAnZWagAA7FQP+gMNKgnu1Q4pHdTkoVMk\n1XhapYlqoRiLzwPN4HbWFPKaew8wddFi+24svVpAFoWsjc82EqL0TvvFREXX\nrpXqbHs5EEkV/aSkrZQ8y/qAiIOjhEmJ07xwY0q9HPTppea9qDyzYVSj7XkM\na1Rytovh4unw4FiZw1rhUIoU87E6QyE8qCnDKZkye5M/eBmhBtlsJ9q3AeOw\n+olBG3I/inZOtz1le645nO13TVwHSfRlLawKQikemRC+RELldRh74HRIDLOa\nDvnfSI2vhOznPP8tSH0vMZOLjGoRBwd8VGtaRBjujujC6SrpLDRl4RQ9mSoI\ndiAmN/uvpGvFSdIJ/JH4cx4jVa+TAWvMj/2biIqOFiWx745l6C0KUc4AmmCI\ncNd1Q539NJioMSOCd8Vn54+CkPpMxCfkQNL6NtVw8e2NcTncrgWM7hhvCUzd\no+l7DBEE7gmnGNmQkpKffm4Aq2twJq7IRFurJANWSto/EwFYGfaBXLMQgEnA\npUm/jwIWL6ZMsGMTnI4/sCnMq0cXFxAJMVKX33XZoup208y6V3k3dWSvVCD6\nvZZgHy5ElU2ej2aC/FNiDu4R/WJ4KQFWuoDK/xxTq4KQ9SE9vZf4M9eBUZ+X\nFNlKigH5GDpNZZPZX/Wj1LGJKsoypJIg2hRgAUkSoaT+3wCVTZ1blGg9gJgn\nbAP6\r\n=aTUy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.5dee37ff6.0","@material/theme":"13.0.0-canary.5dee37ff6.0","@material/animation":"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-indicator_13.0.0-canary.5dee37ff6.0_1628185319905_0.8248743898609643","host":"s3://npm-registry-packages"}},"13.0.0-canary.bf405d22a.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.bf405d22a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"94262c88f6e9ced4cb7ba9291ee6f93d7e168d29","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.bf405d22a.0.tgz","fileCount":39,"integrity":"sha512-2C4JISTC8/KlIDan4VWszaU0QZSE8QdtEr8sPHD6dV9u3uHeYw8wCIhIv4nIIA5jEPuVZLqvjMkW606JYflnbg==","signatures":[{"sig":"MEQCIFqbaiPTM3hTYgo+E2o9knCXJ+ab9uCTMpU5vFot69+sAiAFtnsOjNq7SFgvoy8xQCTzIhfg++yh252wicSj4vVS/Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDEdvCRA9TVsSAnZWagAAui8QAIiLRnhDIiHkIjLy7SQJ\nG1zLRcoFnMWLQFvdEM7uDQwY3UkK8rXVooQO+C38nuaVnKLjyholKBBEAabR\nFUMz+EtX1C2wt2arZhHuM1dYfcNRuzb77EKPfn/qLlQtvJ0R3kacO/9Tb7l9\nMdfQjuVIZBvq8q2D91Fo0xcxqsdNTpYoYFrSmmXJyR2MKZToo5WDRxgTnqDu\naehntxMTodwLuR9KoIdESgyRmL48WtPk3K4+7ZpifHA6TdOhp6xiJS6YICal\nJJvPPawXiEpjatAXzCgMzUMMYjYCCfqIfy8Smx6fN1MpNv1y4BxM6hFrvZ6p\nDR7F2bw5/6k1i1m4VmRLBWiV5NMtDNdBcr/UYDlvyw/s/d8pyx955K6Clzt1\noqsdDDJfDGyu8fJW7XcMf7TwU9f/AL44Ivu5G5ERWMhJBO+7cIwM9LM9kq+V\nIjkv2fSAjbs700k+ZQP0gpHl45Erwybv/TKv95Dy0wTdCGhdShxRaHaYoNF7\nmNqlqFv3Aleb5IRyLeQk/+IfbT5ad2TL91iJXFaQY6Nzv7EN6l/0H9Q8E9T7\nUDCKebvdLrE45dmTMj2T4MOXHm+meF6huSngEKcrtkDBl0fhSEE1c4PWZmT5\n5/Ou91vwXv9g/decnkvUi+IlZlZdmNFs/H9oXgvTCOiHAVdAXp+0qQ3DE8Xa\nhwtX\r\n=eJ3D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.bf405d22a.0","@material/theme":"13.0.0-canary.bf405d22a.0","@material/animation":"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-indicator_13.0.0-canary.bf405d22a.0_1628194671320_0.8519236592818866","host":"s3://npm-registry-packages"}},"13.0.0-canary.b47dd37a6.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.b47dd37a6.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c1399a97872993424dc71723d0b0f889e7f58f36","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.b47dd37a6.0.tgz","fileCount":38,"integrity":"sha512-eRlJ5UphVHIq5LeJJidmnMkPafd2pK6WHJiFYi2AVIsuI+4ySf0w4EDT/KUJ5Nu/nZyPGxhXb9ozN5MOuV68KQ==","signatures":[{"sig":"MEYCIQDV8KoMpxd3gs001ku+6oJJxeGSCk2wIcKtCY1NAXvE9QIhAOSQflAYfUy8sStDM1kkM02DSLB7RqlLZsR9DpSHM95A","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDE7jCRA9TVsSAnZWagAAYgUP/j4UkomEjfbX/zaXWmSa\nFnPxb5jGCWT0ziYv0p9EmCBlDtRMCMl7Z4snQRiZ5foB3BEriyK+sno9F4jK\nCL/JPrY+Q+O0b37NVpNYzmlAZaB9C1vdyTPDKsqjjN7aVkw3zD95nJe/u0bk\n+1xrNqqA1zTn0UxldU9fbZOeE+7PoI5EzzWgf9sJDY/+YwGaRsNkim1cMWhm\nm5hyjAgMvvRxzhP/hsYR6qAYZ9PDEgnCcDOi3dQyxcwSkEac/eWsGP79StvF\notVFL7k7Ijaagi1fEd/cNRhpw4RFtUE1gffgr8k3fTWhNPHPpwVTmHTZ5Evi\nEax401JhqQjCj+qulbH7VrbheAVCJSr+g71Rp8E5k1wlj5lOl917N6ARpogR\npEmLCcpPR3fWlbclD4R3UA8EjgMWu7QYnDr/tPZO1/eQl0MzJWY/gUgauniW\nAI/GU9oA+ynPuSSJuefaFuwNjseorwi5BWzpVhuKsdgIwOaOnmv6WD6bYuij\nvK0gKZFcBdFwo3CTuyLLZCd3BjjbR9jO+w0Q0BV00GWs0B6s2HKIK2n1ku84\nP0ackZuoIo5GtI4kEgP3WYUOoVJ4qUATJg2QGZXm2LQ3jXj05oEn9jbKII2e\nCzVHI4k/9maMDLs5m6RhHWT3ZjL+8uc9ViGs8jaN/0jTmxTJITecW55MseIv\nIE5T\r\n=hfV8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.b47dd37a6.0","@material/theme":"13.0.0-canary.b47dd37a6.0","@material/animation":"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-indicator_13.0.0-canary.b47dd37a6.0_1628196579382_0.9225143525466084","host":"s3://npm-registry-packages"}},"13.0.0-canary.6c82b965b.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.6c82b965b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"8b53d90563075aa5e088a406e3928af3f155b8c6","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.6c82b965b.0.tgz","fileCount":38,"integrity":"sha512-bmFiAn/ZUe1Y/8UckaArMH5qOu6E4EPmuGDuHND3V80IHTFbEfHuKBseWwWh3hl09ZlXwdrF6jHIJgB5/Hj6Ug==","signatures":[{"sig":"MEUCIQCUTDrZP+1S7oxCZIZhj18VzZwSplwPULfHyWhfgPL++AIgCrx4SldZBCiDRfTsRf/vS2RKMW/w7HHan9qvjCXTAf4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDV/tCRA9TVsSAnZWagAAUOYQAIGhxyAnhGuugVU5k/Nj\nkGpZYoafnJd6QdVmJQVUywBnGkVNDMqDvg+pxX6RCWrbgx76eLjeDsIyJJ0w\naaTVpwys6COZ9G8kOf6M1qY3XTDxDr6WV4UDVL4BYLiZvbsEFPuVgTBHz3fE\nt+yLqMkVSUXAPm+waN7muF7ErlJtkGIulI52VuyplSxjpVWPtClpSTY+9gkj\nOjO186JkBm6I0HSe5rM/mqI6s62LEg0XRTKP/5ZZC1bdWoNz+jDFdJ85rzXX\nc2DVWAwxYsvJLW4KHpGueiKpk852yBtN3hJonQ5FuBR64445SQPuxofekFlt\nvoYTmCpkFaUS0rzvlMiyDC34nXklNDE0cFcjEM5eyMaJzbjtjSS/TXwzuilz\nNvo+96A5h34HLPZzRfiWru9h8+NVn6vQI/gZpIcimR1l6UeSQx7GutOtEZ9b\nwa9IjWqt8izOK3CWXiUY36DgTtvW8BJdcpMw2AvtEK9yfOXAN3lOwfQEF2iY\n9ytCg3Z/xQONRvPDjZ8QWkGRqnrY8PBHcBZan/5EYNgntTYU3aDzZusHmZJ3\ng6yMKJtyrI3HxgCoVyuJWeCuYVpjlJoQeRFrIOAJFIAPhltjoEJ8/ShL1fOC\n+G6v3wu8Ueslo51oCQb171KaQzLMB/V8lyHpYQP9JxL6HAmdXzrCpm2zAsrw\neQWv\r\n=PVKj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.6c82b965b.0","@material/theme":"13.0.0-canary.6c82b965b.0","@material/animation":"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-indicator_13.0.0-canary.6c82b965b.0_1628266477458_0.2059685272740206","host":"s3://npm-registry-packages"}},"13.0.0-canary.4ca11fe76.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.4ca11fe76.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"a0845cabef41dfd739183fc62948cacf1ae1469b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.4ca11fe76.0.tgz","fileCount":38,"integrity":"sha512-nhdpSnY2lfxOFF4P6zOmhTfRZ92DSheK4yJp7K2RTploI6uMZE4rKAU5iuh8fvN4RNOJJHDvGoSozjFIJYX0sg==","signatures":[{"sig":"MEQCIBRavuGP3IPnZb8jXsQj2ApC7pr3ebf3kfq3wSO02DUeAiBrgjDcfECBCdfBQM7Xd4F0MPmUQ60Uty0ZvQNglOl51Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDWw7CRA9TVsSAnZWagAAVb8P/il8rwkyJZO8QZD/DCRs\n+8xfdoWY+QIxqgpxIb16wSyld6JRGl5/rzlHn5Gb3dKpEmxzkXPzQ46elFLt\nFhNmdE1A8dVlwKfs9SLxXFxRs8M8G/HirYo9qvtf6vKBsp6Pd96Pxkn5KRqs\ndv6KNxJTj86qRycZwoDYagkbVdVd9dQ/kftXpsbRfsXjomIc69kJ7e3EPO2N\nWHpttfgNETbjWRG6jKq/VHN6HwsLIYnTGg1hKWJPkwEWqXvS9cWoqwjzd7wK\nW8wq6bj388U/q3i1Q865flsJ7DHYV+0S6AL+8vb+5Os1OIAwvY5BubcUrbrw\nhl2nUVJNYo8qDHlLN9dMwDWkYw3sLqsYPcZeJsgRhV6gu7URwGNPnOup6noj\nhXog4uCtJi2zGtSJU531c1AvKeZneAY7PF0wN+1g+ipQUqbk7YcY6rhQU2sB\nXckrALRjzwcwdwDJebzpitTNM5nT/n1isRug1/DgH4ta4FTulEH9oUKcHFIo\nTZ4OEvbCnKTqCS99yg5ryXjNHLPDNYhog81gSjo5tkh4wm+5PZi5lH6rmYU4\nxdExuc+5MonmeEy0cgP+GdUJS8VA39kNvsnHlUnXmt/XfdzpSFWCxxx1489K\nYdAy+rrsbzhmoHASy4XssWQVhgxq7AjJyVTVWvHQX40+qkttiDUfMQGCwELz\nacf+\r\n=LXI6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.4ca11fe76.0","@material/theme":"13.0.0-canary.4ca11fe76.0","@material/animation":"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-indicator_13.0.0-canary.4ca11fe76.0_1628269627048_0.7720330729208023","host":"s3://npm-registry-packages"}},"13.0.0-canary.510cf90f2.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.510cf90f2.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ba452f624dd3cb6658c40cd77a88cd5e9823bdce","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.510cf90f2.0.tgz","fileCount":38,"integrity":"sha512-O0FM6PiRL0dtnuyeP7esl3DdKXSpJylNTMLk/WqKfO/68/AXbJUXKfKTfO7FhSzJjJBRZEUIcC5Dv8ceBVI+qQ==","signatures":[{"sig":"MEUCIQCwC0ybIiGhIQvnmU8ZbD2aR9Fl2lK4g956sF5vZx+57wIgOO8mZrunhC0KH7Cf1wOtaevNQ9PZintzofAFDr5701M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEWMOCRA9TVsSAnZWagAAfvoQAIgJy8/syPkBVcMsW0KO\n08z2cU87+RKOZXCMCCnKDsP3+LpmYLlrWXn27yxwfKrsRbCxDZeeorSNKhn7\nR1RpOIhArnrgQUNz33ONzXor9FIulgTNGCz4hMhP0ySp5AjcGfwlL9X9+RDH\n/X6EYn7/OL5zE9sc97ekqoUbPH3qJ59VbB+QLiH7JUBsECFhc48YkEvxoKYs\nq8pTgjNgAq8MPn3DXQXti8psfPJDi9bP66rX5xmL4peGcaoyUCXQDXGUF+1P\nMEi79Pyas+dqUAt7dNvB49T77wVvguo33vPTOplBvZeVHLuBItFu8C1FrO9U\nkUiLt9He2mDiGCyqxqyyp6C1JyzqAoZ8cn04zNbOH9F6ST+6Ot73j2eCo11y\nierrrN9ropKtqgfyROXwFCoc2ZcMuxaAhkkPNxU6iKRrjuJ6K07hPz0jWXrE\nTLIA4jWxcU0+3ZLgLM2HU6b4PMjbnCPUJL+97AI3BAD6+oFxOcUq+cFP5CB0\nPd7YGPAXbgpdFNTuJXtuNnHibDWQ1kj6k16kEvuN0oUut2Lfb68a7GIGxPGG\nU+ero6MJtNiSCgdul7krWjpQL4smLOOKjxL+4htD2LFEVXxQQ05oDXdstnGs\nMYHCuepdO58nIIYz/W1NUZQvsMj++n5P2gLnDNQqhneo0tSH2ncQmuPVwcr/\nOGMT\r\n=bzQU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.510cf90f2.0","@material/theme":"13.0.0-canary.510cf90f2.0","@material/animation":"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-indicator_13.0.0-canary.510cf90f2.0_1628529422509_0.362856716927239","host":"s3://npm-registry-packages"}},"13.0.0-canary.17580ebf7.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.17580ebf7.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"313a092ad92af2bfd191307a161a568ba522f39e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.17580ebf7.0.tgz","fileCount":38,"integrity":"sha512-XPGkklgoH5Xl6pPJGnXgGG5cd8fUi9vx+p2pqs2b3VKD1lrqtCm6+fWI3DdPpldFiK5MH2hegdJLROm5C+4Lpw==","signatures":[{"sig":"MEYCIQDI65ntpkIgXHXp+NT6zIwM0ASb2qCxtk5OrWn9h/ilMwIhAL0tcbToLimrJ9wonnwW05edOsNIC4GrmyknKXN2Xjmz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEXEmCRA9TVsSAnZWagAAm4EP/RYi8hp4ou6BqaDGMmPT\nSPY3VVjapE+R7HruacxrLN1yxpmDkakQt4VAKJlubX3NkITcLpDPg7zCaCAF\n5XRcpgyyYa+QcJiAs0M6c7YkrD5UfTS//RbGxtJs877Yb8CFrkO85uMmr7Ay\npXx5n1dFILCOAwrzBnlijulAEpCZ5kytRg5zMC9QHpWusyFEc6vCkfBbPqEa\nzquKPBILaTIX7CMlafttD8vqd14bTt+tj9QkmycywQHts6dzVR9Vkxa4lyUO\nS0Qg8L9ZvlkIo43WOdv8VrQcUJdMw6xc3737Y/0jg41+Xz2ug/OZExqcQmoj\nidEuZ9AXYBP+/NWuy/s3CW2kYVUD/mHTt5148HHllEef/lPXXfv8m7uRJTKF\naE7KgEiWfMnQyu6rB0Vt8jFMXmRsKNdsQm37CDitQu4rO/n58OS5aMyP4nl1\nXZ5sMv9jvj34PRaXik0t5Drj3xWYEFZ8Hyb7kapjPvXU3tY6K9565pxBKqvU\nkFXVhBIYM7c601m0sep1NqnP8OMrlLhudARLut3Tz25eStTXaXt1WOFnKya+\nZnsBALJbto22SQXoM5cTOM1flDkG9M8/18S9MTTYZlMFi7OJztU9oCXjAawf\nuE+xFEtEltY04EmiyRry9gxKc60OAHa27x9xei+sufGXg+ftaSZ3oFTYly8z\n1D24\r\n=Gx7H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.17580ebf7.0","@material/theme":"13.0.0-canary.17580ebf7.0","@material/animation":"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-indicator_13.0.0-canary.17580ebf7.0_1628533029892_0.4084849781628057","host":"s3://npm-registry-packages"}},"13.0.0-canary.7249a3060.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.7249a3060.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"2d28601d42933066925d934a5b4181e0d3d2858f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.7249a3060.0.tgz","fileCount":38,"integrity":"sha512-Obe6uCyn/Kg5mnBB+A1DanBU6TaJBGG2D+FxUU8l1rNZYSFtxVLBSQJqVFAWanu2/pXfqVMQlAFxojBks0l9qg==","signatures":[{"sig":"MEQCIDvjU/WjKvEMUNKoCxouzQjtRJXwOy2vNYP87SUGhDRFAiAOmhazOY1st7f5x1WdeAmbU0lZ01IFXTQj9d6RWQ7vqQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEXIcCRA9TVsSAnZWagAAmBoP/jPomqS+rs+y1vWZTNNX\nKfYuHewmPsGRd5C5OSTaZt2Jj1nQvzPzQmU17ctzQWgPr761BhFVwpw/ZByW\nMacsZhjPjBcyFBtStfu5lQI+iI/nDQqSzLkomvSrqu+YGX83/QblDBjTrgRe\n5+b5d25nZdeL7wfRaUdJMltUCZZLjAlK9QvPtQm10CXzJzjzUZ7BzktfbtWD\n4UwWmWqakYVGpNlOiNSIzUxmQFwA5vZx1B0fTSzamDUcP1buWFwlaGMyhOI3\nZezrkj2v3O21w2IKS70OKXTIX7nNiP9MVQfkJyAjQFJZOHYIAQCoz5sifzED\nGdJDAI0JzpeBPeNoUn6iaFwL6dMQhWhwmGftGoujwaJpMWgGaNwj9JOgkxbs\nURaaWJHwO2gnZ45vPRHMwUE/IduycU2jr00XATWpRO81lgYX4mkNAprH3apu\ng52HfdNRuY5vNdIGQustrrotzIh+lXKngEUqZH81kTY882r46ivo657xVI50\nxXV3cFskx8MGnFOCtmEalgqfzGSke0Xp6PJXisc4k8hWpUWBVRH2yQEo9DSo\nQTtHpE/plzZE2BrEW4BU8db7NnrI723e72y9XfHqWjDw4AtXxNnLrxkBXOtk\nolsKZtC5Kub3VKBt2M1PVOxW213NcHkTKZCiLS4jjCkaxkqJ321wZkqhUJpT\nHhyZ\r\n=rPdy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.7249a3060.0","@material/theme":"13.0.0-canary.7249a3060.0","@material/animation":"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-indicator_13.0.0-canary.7249a3060.0_1628533276576_0.830299664466895","host":"s3://npm-registry-packages"}},"13.0.0-canary.4c405863b.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.4c405863b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"93746a1a3db95ef8c3c9e6499e4b266ebee8e78b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.4c405863b.0.tgz","fileCount":38,"integrity":"sha512-ePUuJWxTldp4eVfzYMyCtUivfUAR8gFhVEx1JXYcfys4HZmesurOjUf4BRpRXUjVT9+O7MhxSqAkjdk6L2cIZA==","signatures":[{"sig":"MEYCIQDDHbLlnWhZShewUbAFN7yZcvgX/GeWIyFfhAvl2glEmgIhALotsF8LRUNi0tfjZiXuFn2fhfxPE0tGyaLJzzrfXEQP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEroPCRA9TVsSAnZWagAADicP/jijbQE6NcLLdvZFGXdP\n0WXPdCCHQXniDnah9rwbLGWA9vwlKLcTqI4loujh1QM6MjWriV3nfTbi8vSF\nQPmRaZAEhdxnpQ7oIVyO/ycUgFJWhucdhHZSlwOxboqAvyMdRrlCa7scqPMH\nk0KvkGUoSR8INlS5P7ftbVEdaW7pjSToLPqYawNNlu0HJ3PaIoQ8iXM2pt4E\ny+Hl3vYGPW8H1tT0tm+w3wCZBUOqynwI5zNPu48vCjvO6SrY/VB/QZNhtApi\naqa9ku1Nrps0Pm/gfnqk6piIbo0/42qXhx8/wqbcnORVLQOVheiByY4M+KNq\nQkqbNzBwOkKioyES87fBRnOkrgMlnkllGwWo2gdDxGbfe9H8cmm9RGHsQ+DZ\nEjKI1VUtS6SEtgnfnseJ6PMV5lTECvxR32U7XhyL/lfG4rfv1y3tVg8nSwha\nx4jHU2HcI3M45nuX+NduFqhd0XLiQTYzxwPI05a99fzY9ZqkdudhHyTjuO3B\ngIVOfDy5S5AERWO3eYI68VHddAhJw8s25jKv7W6lIy2xsIz+0xpm1ScI2i0C\nsMpZGIuEAMX+wqMTWV9xr5CYg6UhQorzo8AtzVmVVJCzjOcEYw4Q292rz3vp\nUfwF9QRMqL+/AI9SLNxE3aPSLQ5FEOgQRaiMzRoKriEPmm5w98l7P7wHrH5N\n3468\r\n=4Tt6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.4c405863b.0","@material/theme":"13.0.0-canary.4c405863b.0","@material/animation":"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-indicator_13.0.0-canary.4c405863b.0_1628617230742_0.5142728999856903","host":"s3://npm-registry-packages"}},"13.0.0-canary.f4241a42a.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.f4241a42a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"f11218d196c9347694fdf7bc09875344129779a1","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.f4241a42a.0.tgz","fileCount":38,"integrity":"sha512-YB8E1GEbTj5VfTqqLLd84JbBQzrrnhMnabNESixPNh01cH5UdVPWkhSY6F03FOkVxqmRxG/P1FPrL4SlvWzDLQ==","signatures":[{"sig":"MEUCIQCcrFmdVcolk06ZXr3AczVFlnGDhHLZMUsadI44Xfn9MgIgA7Tn7JbNMOCB1ySLs5vlJ7zy3pq0C+/XnSYtLJqX+5I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFAHjCRA9TVsSAnZWagAAeYYQAIlJIj5YEXUCCUdcUdTl\nwrvqOWFICtFUocsORGqL2R25ZlaguZa6mzJTh4UnhF072jTFowHKds0jkrq4\nER4z1hrBNx827G8p1Ja2Rcs98kqZhWgYrfFnmepTWxVsw3ivjuzoNlRfnZtC\n/24YrJtWUzYTqRNlEDDVwDIMsqyFoR6BUTutK/URKg3O/nnMGoxl3AZ5T9Q2\ngNe9eOqR97cNOz///AmRlXFU3Lo7w72gtrQ5YyBs4eC/puSkCKs4c2nb+IjH\nlOmMeVwOExyhXXC2LkJjguopXjdQbXd0BPslBSq5aHbkRzj/IFqjXjh0soyw\nOPpwiZqkpnRrxcn2eBGMFUoU8wNj9v21PT1Ge3y91My/r1bOEQsuEOpfP0oY\nfREWZUoyoRkaeShwPQY8BJOuIVluP1bEehW9rJGLWNGSGQqwrCX8ogmD5rIO\nkU9qpfmgLe6Xlat0b0umyGk+NDZXYCpd/B26mJkjvtL8mi4aVVAYt66wfUzU\ndwnWb8rmY7qy8WXzEA5WmFBrXK9nCwvYvNP304pD5rb2YlpV7o6JscniGbci\nUQyEhg9B/YFSoYDNwwV8u8VQmJ+I4xavBDaKN5bsNFccRLKYs1OHYIwZTL05\ne3vQpO3PQDgZl3U/DACslDPyKEMKbm/2LiRuGCgObQ/gdet2aOmrn7s2qGKN\n/ppc\r\n=kBjv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.f4241a42a.0","@material/theme":"13.0.0-canary.f4241a42a.0","@material/animation":"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-indicator_13.0.0-canary.f4241a42a.0_1628701155364_0.823665377641351","host":"s3://npm-registry-packages"}},"13.0.0-canary.0ad12ed3c.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.0ad12ed3c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"f261ac72c880069976bc3d51ab9921d9db273bf8","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.0ad12ed3c.0.tgz","fileCount":38,"integrity":"sha512-2h97nesXvRwl6he3L3sjaePNNb5Cktkxd/Zb8OUeK9jUfDQH2qrQukaUa7wpVP4c1l1wIVd7yW8A7QAmyjYBzg==","signatures":[{"sig":"MEUCIQDLlWrYXAyH6vI6VAflgoH64jbrbH/5tnyajIPUvTzl3wIgDX6gVghEUNsIvqJCYO2SrOZsKzU6QManREgZLlQ7Uzw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFEEACRA9TVsSAnZWagAADQwP/16m95HyB7pt/etJjBTC\n25f3RjWsvC53NlRHqV/zZJYlECYrraoGulhtUQjj506dSxSQppIysZ+I2197\n71Yd8U1wpAaR1YVQKxsCi3pIoXBCn2wJSL3h9uIvnzDcSrCDDGJ9IAytyQy5\nb/aqwLAMIKEoGAUnZL5J5J7zf/EnPQo05WOzx9S+qFAcfvhbx+4EK01G672g\nyexkMMpfZZD2637jiBoqU2R4/2H7PVbMRvfi+t+0evvdIqXFY24lexAIUsUd\n0vqgep2vnzQ3yxiPDnXfU2TVfXv0Nbiho7WGfUTMWjNEDyb+qD/XtbpJukk2\nDOje2vU3YGu+ju8AHS69Jrsq7nHph+H/pjZX2LZ2E6H2bLkBZXVbirYeGaA+\nSEINL4Yo4AB1AB91oZQKtjRCEG+fIQXM1nOe+8zo1m3DOFS3rvdFapTRF0pG\n6vY/TFKefw/Nz+g0Z0YTG21l2Xr2IBqPKVUzLQhB1Qu2+VgDIiXZROwcZxny\nnQmUpHacf1xQWIPwQsC5a+LEwkWal2Buyo1DeYN1PIfJlkPlGpgvc9ejs4N3\nFES4ucZUV1RnBJJecTmBWA6VUri5Ol5TOHhn2P12YvlKq6sqvYDsMtDBtF/z\nmM09446RbwTBcL7u6Y2oAlP2q3nGYtjUaoT9y2X2hELvttrFS34qdPT+yRjS\nD8/D\r\n=dQV0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.0ad12ed3c.0","@material/theme":"13.0.0-canary.0ad12ed3c.0","@material/animation":"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-indicator_13.0.0-canary.0ad12ed3c.0_1628717312612_0.031503136648767915","host":"s3://npm-registry-packages"}},"13.0.0-canary.077dcfcfe.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.077dcfcfe.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"8bf0a934539f4d1cb826464abcfef1b3f879149a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.077dcfcfe.0.tgz","fileCount":38,"integrity":"sha512-xYjRlzck1vtshHQEE54kvGGBvMbGVBI2sa2v57SxMVtkWFjZ/CUGRdhprN/kINBiRRGKspjNt33sXavXDnR8cg==","signatures":[{"sig":"MEYCIQCY3QUwzpCb8sHxG4/dLhCWH19KuC91RZeuxG7tRahoHQIhAJgg3NRcX/ahsFIhvouhEdMrxgJmtNbdsvofydO83tgH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWB3CRA9TVsSAnZWagAArzkP/R6uikxttIGi7wYr8YGe\n3nWnBO1GSiEomTfFQzNqRta6FGOgZhnMETB02QJd3mpr4VZN11SMFVREo3EQ\nBN0SfCPsbzLRZhnxH4CyI0/wvoNBy8X2H4bdC97kw37klPHKrGYmE8OmzWam\nZUefuznc9vDKoeIyY1gMkvJijU4q4ETJpmm0o90ggNpoHCePRwcD+r274ovy\nYAfV5O2gyw+iRduLK9SSK93xDbqjRAD6hEomZNzPCY4bh0cRu6yKlXk9boaC\nL60AnYc/A/YbvhDQONOQfluo+Zk5uN2ZJvHGGceTY+tS2f0Ne2Yt6zIMADEu\ndarQsUoetpnHNFphgIcS/uwN3TyRijiXUMFFaZ5A0iDDSy8IKD4ON0cC3OFh\nVaJI5C37k6OpeuvA6B2ynaNrPTNTsyYMuCfGvMMBS+kkZAKrqwnV7ApK8OhU\nA/QbXnIqsePRtRxiDZbmj5z151wn2+aQHdoWui+Tm+b6IxWvcjxHVUZjC/1r\nDCk+AqHG66GGw4V+5ZkrAgyiWbsuT91/NvSNg9eq30sDLLVveE2yS6IIDa0w\nijouxnWj3rrE1krXJAYBFbU6z4ruZMyv3g9hDdOMlRGlSufELkpQZX7tZ6MA\nLcWbni6OedZIk0o9yRxduOAJ3Jr7LeM371u4iXjM0CFQEa0Ve8szPay1OdHI\nhp4e\r\n=PkpB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.077dcfcfe.0","@material/theme":"13.0.0-canary.077dcfcfe.0","@material/animation":"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-indicator_13.0.0-canary.077dcfcfe.0_1628790903065_0.8857524248949598","host":"s3://npm-registry-packages"}},"13.0.0-canary.e3346766f.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.e3346766f.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"777d131bd6a870742a87fc9a3587ed669a6b088a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.e3346766f.0.tgz","fileCount":38,"integrity":"sha512-QucAhIa+3GcszRll5TKUh6bVUi+kakhKwrcsCUMBgKBQWU8jUc/ki4fRBjR/7xJAgzXYetpDv7UBOq9iTZ/skw==","signatures":[{"sig":"MEUCIGVjYl9NVykLyimxaUSDJCsiDD084YjiQYkov6BVrX9aAiEA2Op+nHwy15nyRhbeijiOhGtHee7uuzcPTYfY6Ggs1eI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFsu+CRA9TVsSAnZWagAAoPkP/1poZsNgAWzGV0GmBFPx\nnWuc/z3OszKn14OoAxdHimQ36Yr7VXSyyhRmBro9Xd0Gp8GCkzgragNkhM8Z\ntWi5iZAofwXq2Gw1oVxzoj0TZZvz0Ii8Hp3TvC4Vq8sRm6VOkeEuuNk3oXSf\nUccTOyx9JLWVPRDtrGO+viSFygyBEpchWw3QxQhpfg/TCvltG+8djrDjqlQS\nLhJRNAvpKCBrZB361POoyozxdsXnSWJ+HiBJdt5oVrj2Q5qKqL9Yx3v1/VxA\nBTE6NBN6cHAsd0L/ASEQs6WIKO9E1Nr88MiM6nzORzeOQ2M0CO6kgp8esp9f\npgoXih5QygFJ6Q1liRwKH46oBfqhs9AfeJRObp/bSu0mOFD5RzoROy9GzBDf\n+D1yjO1b7OUij4MnYlMMyAjhhsUG2K1Ro4QDtq5vsrGeFEd664GhSVVebeDz\n/Kc0g6Dc30ARDj6k2BQasII+yzeA8F/lMVuTop9TeBLgWbqn+XE+pS9kNVqP\nOEnhubBr6P6U6XIPOVsck/nPBPVvxwQl5z2yx5HPeAzFqh0+88xzy3gIDmIX\nPuza3/Lv53XB0XLB9xfjLstCLFWBvkHUtoHhNMe5W9qMZ+8Xa6N3P3bdCkrb\n5exOGkVnJmeFpSG/9OICvsHulzDVv0zI6FdfP3KIXBuWXIE0c4yeH4akhDrm\nwnX4\r\n=29pQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.e3346766f.0","@material/theme":"13.0.0-canary.e3346766f.0","@material/animation":"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-indicator_13.0.0-canary.e3346766f.0_1628883901661_0.8183581868417908","host":"s3://npm-registry-packages"}},"13.0.0-canary.2fb068fb0.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.2fb068fb0.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"cd778915fc1a036aa8456c4364f38864d16fcf2d","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.2fb068fb0.0.tgz","fileCount":38,"integrity":"sha512-IG6zoyMUbOkFv9DP7D7nhlbPDc24J7TzgHn8WIHF9LnltV7ZCveNJ+suPHCv2J5wrRsHxMZq0YlmnbEWuEnBvg==","signatures":[{"sig":"MEUCIFM+Q3Hp+Vzp6kUa3YYCfifitU2pm/MrERrAMWvdjsg3AiEArUW2Aj2gu7wSpmMV0nhMWIU8D6bPgUpuFxNrp/Bzhz0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFsx/CRA9TVsSAnZWagAASJsP/2tUNSKdFhIxdwUxK1vw\nLC5bT3LO7DzA49uWndFz4ylrqHRe590U7J+k2zyKpllDa5rzSkJ/oDujtI9p\nFyzcVNFxqlUTKHHfLzh05aenTDxSk5pAoLS+H//1N9wmXbAujTESIKMfQ6xn\npfalqS00C7wq7d3jp+ArJqTa9LVJ9yOQarlK1I4/RfVpsnziobpjNhQp1LX+\n7IS5A0Fdg87zLxTRev6OeM48fzQyZ8uOLM0MWxW9XNcAopeYSu5u279eKH2a\njiUzANWDG8mgQAemS/SVGgfFSMze/Cpqv06jP5C54rndUqhtMGSxEOTQSJD+\n08QFUt2+1GrKNao7zvKrjgrjXTFEOoEd4Kdf19B2J+JsW369CaFrm+p+Sz80\nYKSCsmYJNXG/CQtkwLjC2rng3/88V0elt90SdxN+Sw4hYHcWYCBaVM7/khy4\nBZ97HbaF1iscoXmw7hhfHamXu3GdOQefkx6ZPKaglo5IXZWMUHjhJ68mtdci\nG4XBi/LKx07luc62SYFSli+SYhai8IqGgG6QTfAdS3ek8FyJfsP4LRKi82PB\nJiIrJonzm5yzdabIlPF4Qh+/f/yauIBBtdvph5UMpVkf5VmDDn7nd2xg5EKE\n5IREeqIpS3fLeREy87DygHqb7hD27J8NTTXIBcVrqV0Jtifdn8UA9XvnUdqb\ntdXz\r\n=yQcB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.2fb068fb0.0","@material/theme":"13.0.0-canary.2fb068fb0.0","@material/animation":"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-indicator_13.0.0-canary.2fb068fb0.0_1628884094940_0.08964867076916017","host":"s3://npm-registry-packages"}},"13.0.0-canary.fb76c5069.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.fb76c5069.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"aa5a79da1b672f1fa02244d37506a2af8bb6ce01","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.fb76c5069.0.tgz","fileCount":38,"integrity":"sha512-2Qy7QfVQn+Mo20CzbJOzedQTHhZ+mEgD2ihQ3bouFRsUKmbL+LUSBWdx1o6AfeAZ9lPl1J+gNK+N/o5goeGe7Q==","signatures":[{"sig":"MEQCIHRoqlGPOrFZSLKgaN0JHZARm8+du1RsVvXezK0ZREz+AiA/Af2lfa3h8/nPEDwNZJJ10n9wKxfIGr6ilzkbKMxZFA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGsWYCRA9TVsSAnZWagAA7GkP/jSSWMbeUUJGNJ6mP/L6\nvLLQK8Q0gkrAWLWUF11l9Dc/UfVBeeev92jYgPNZbp/se8832y9QlqF9CF4D\n9wOHSPgfhIoSiJub+m5Kr0FE75Z5VU6knnTxE1J8tig32G/YliiuLXuYibHV\ncRhnejTD7cP48T73heh5Zaa608GOe47bIqtUc3IYPbFwy+mSM/z8FtiaoSkt\nnZiX1jQiu3Uj1wRz+g5PVRNqrS0meKgfS+JJduAsW3tR1ejGrEFPNjdw34Pd\n9niA/kCbE4JK0prFo00jP1mkQ6gvkqoYqozN3HICTbgROAkAVO/qE/ywuVFj\nv5FcoRjE+Lf9PlN9pNgr1CeeSiRcxjip5JVdt5DllLgQeyLIxKkzaXX00WAY\nb1Z8THyWGbXvPvGaDCzmc9Htvrp84+SZkQHuFFsLX3/snkvGbAksO7yU6e4m\nJ/97YU98vd92dHJcwZyYoAGFusvnZ6c4M5RRLPw5oz1T1r6QqgHlpwowWsh1\n/UatQrsVnV6S+yJ9j6GXOcYSKCqPqqHVOunofQgCIwznbcyrKF08rEJQDZl1\ncbZQGG+6ST01Ycbl8pOmAsxrzrBEwLyTnK6ydDSF4wdngpGlA6tGGFv/SLiE\nECXp7U8EevGcXYnyjMGzOX6eRxZgboTA+eHWhEWEybnnOq4VpQIWoD7+TMlw\nEaFT\r\n=f4qH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.fb76c5069.0","@material/theme":"13.0.0-canary.fb76c5069.0","@material/animation":"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-indicator_13.0.0-canary.fb76c5069.0_1629144472668_0.7857470897234897","host":"s3://npm-registry-packages"}},"13.0.0-canary.457d89aad.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.457d89aad.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"41f4cb7ac808218ef8e41aa6dbf7d3aa241d8a92","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.457d89aad.0.tgz","fileCount":38,"integrity":"sha512-BqkjR1jVmB3EiyRNtUgOSon92xmA6czfzyNyXGq7G5y9/DTjc9baFKmBIE8W9MN3KqhTj+COvi8/UqvT0Aw8fA==","signatures":[{"sig":"MEUCIGd0CAJuWwihu2gs4OKQRyln7OgfCw5EzTaMLyCgSPq3AiEA5rmIeYYdlvCYmghLVTv0IiOe8SDLcS68ErT29q1QFFs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhG9P9CRA9TVsSAnZWagAA/JgQAJVfNnEHGJnXItLjcGZf\nZ0s4J7wbX5sTLcvPNZ32SaEBqkq3Z/w0R4nbHu3Ws2fRsp/Pujmz+WcKeWVc\nWTH9aichCoseTaa4rNKVvmA0w1Fi/FNEWKbXEMp3ex717gIuI3Y80/jWlBlZ\nqEr7WWvc40TloKokQFJsAJuN9EtcoMflmPEU5nLdGCdqMdpmTbDPWX3beya+\n5AKPxy/zZ2OhYgdQDT+kjWxGM1ybTYWGGJk1bnizzXuAS4LNoaBNAZ4EK9Op\n4AlVSRwxBpEecmOnm1nN988wcchjAP8d2uIDLWYDMSk+fWKEEH1hmGeasJF4\nryKpN6OgqvZm13lwEcRf9NXoAUS2rN/MEtk7UZHr0a/IvmY3p13BYwt2x4uh\nQoqEEDA68TnVUp8KezRl1/Bnu8bqfmtadv6ZBDco2h95fTjE5YfpGbVfEL6Y\nhgN5wmDrkFpIByqvPTwxp2+9kG/CrocCATLBj+YlMDWKezFTkJGYo1tv7e5t\ncZOxkq13U8+tKL/3pJW7TFsX51sukFZ6O57aG/LkzneYzxwK83d7URrdpRSL\n/5XN7rBzrIkzY5dQevdRuIwB2DaqhBVLjQz/CDv57jJQHobM1J2CGYPL852I\nRzYpTNw58+OuWbgD7MJSgzqrBaxbqq7AC9K7OdBRuOwHr7Fb0H2xM9IFEfQl\n2JgY\r\n=j5Fv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.457d89aad.0","@material/theme":"13.0.0-canary.457d89aad.0","@material/animation":"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-indicator_13.0.0-canary.457d89aad.0_1629213693492_0.5781695785668033","host":"s3://npm-registry-packages"}},"13.0.0-canary.0de2f2edc.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.0de2f2edc.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"dcc8e3c74e1183849a4c5e17343074f63c711ee7","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.0de2f2edc.0.tgz","fileCount":38,"integrity":"sha512-szSKsbIsx0e+0yrGBd2fZq9plX1hBnZBS6ySCP8Jw1CRoJW8v9E93z8MtNN2WbrzwEwjOze7E9sm3Mh8PApavA==","signatures":[{"sig":"MEQCIGB0R036J7tjl0TuvVkvzilxFujz/mr30tP5cDW/+HtiAiAAgX9eS7ONyusm0eCE3eOyGYyvsuIO3ksYpg5lp2IYbA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHCHlCRA9TVsSAnZWagAATgoP/2JA6kzNllU0uuPR4rGS\njIX0+aGNbiqm/dCQ03631ntXXXEU1IbzexU2K2LvSvAiLtmUqakZ2UrA997r\nYAUYGm+SNRSYPcXrQ7uQo5EDgjOFvbikezEeNlg7/pIPb3XBBdn+Cd7SHJM+\nBNUfc8rcXAQsQPVVN2cV4pBflpZ6pEjlQfBqLFcBQ1EI+CvGOR5ShtebTNQW\ncY7WQCSC8TrIw8tVRhuurpofgpjdvsXwOaKXHKiensSB/B6DtgmdcXJpCaiX\nzqf/wFXIPenuj5zgD0e/KThX8PJ+xQigEVf1ddsHUI4+/AGjrkghlYLNNUtS\nG7vOl9FMD54Qg6JT6Ukq5Kbss0hNepkJRvqP8NEfTbw17o2lpGpwUKy6M2a/\nnFAwRYh1fnwTmF95TsR5n30uUckySISaqH9J1HHNr4chCFCHt7voCqaqPecK\nb2BOYmposFs7gCgs8dxEAjIV7ldNrJ4zdTRX2nikAI7T+DAbob1wAvSAtbZj\nCSU42Q7vCed6Bgl2Gy8WnvTf2ImOUl4gYvsGUV/WQQVfNJ3jII89/jH1eYVb\nYKbr0bvfpIOtHFJTabng2PbF70joIY3rHFu3qHRDeVrrTdZ4vzeAbhGmCbml\n4qTfyAlepKn5blAUlaRfUSB62wy61CYqmXkTTIkSIBCc5dAGVZZRCc+Zqd5l\ne9f+\r\n=IERq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.0de2f2edc.0","@material/theme":"13.0.0-canary.0de2f2edc.0","@material/animation":"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-indicator_13.0.0-canary.0de2f2edc.0_1629233637471_0.13234450638098516","host":"s3://npm-registry-packages"}},"13.0.0-canary.1f9259b9d.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.1f9259b9d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"bd117cf41a90f68d822e19d9f8b1e8ea1f1686ee","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.1f9259b9d.0.tgz","fileCount":38,"integrity":"sha512-xZq0OLX6JsygqWI1rW1qzDqBxZrTqxirkvMCLo+zJ6nbd2YXf0vv2oCM2D5pWVw1jG3t2yhJ6++lBuWFx05K0Q==","signatures":[{"sig":"MEYCIQCbXCCl3/7yoLfYQskA6Uryu7krFVO0a9OdKElbiMK4XQIhAO7orub+2l6EPz9UAtvk78L/vd182E9TCs6GYqFywpN8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHDShCRA9TVsSAnZWagAAnkYP/A40B5xzVuVBxlrcaA/j\nfie2Xh+Y9ECPYuZjiVnQBV1BIk0BoFUyptHIUS8PbXyQDfd9UudaICaOLk55\nt8ODETjhnKIimOTyp0xU+9CeyADstqOEtFNgUECLldtsN+3WOWqMyjmx3FGk\n3Y//GWPaw0wEqi3XnDaSkkS5y89lhioYlv3scUSFw/0+VCKs/chN+Eh8hZud\nyZd33xhXNb1pHM0PQy8zmy5WiRWqODcBfIiCjN0O+wh2R6YIlhD95ZebA9gx\nEC7O+1W3KBKxJhPvylGU8tMjBkyfNrdt5EeDpc2o0Er4SOxfwxmWAL2+6bhM\nvcg6UHP+Zt6DZWhOiRYV5ki2vV4j8ec9Z6LMqIiQvdqfflit3nUqKPuBeGqg\nsNOLXYsIqKAIUeT6e4NiqDdDb0pmji8HoXMPHz6ulZ746CJ0mtYN0CwGDCKh\nsOSx2ioIF5A5M05n3XrjnogfVFtd1+YQ07cJBtf165O1oL5MX0BexhmnK1rB\nDTsz/bJi9/WXHnxBtZdth6wcs5T54UYlfjSYjS6uzd7Cr3u1qzl6udeEmWyB\nBGWGqLxyCC9Uq+tP2KUaxEtbnfzfPDz7lVwx10kISDfORTYlO0a2qtD7zEYO\nJfyKm965KINIhCxaq3qsrHTlR7ll2dt39Ac2KaiqcsoRxsJF/iwEeeliSEDU\ncm8v\r\n=KVE5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.1f9259b9d.0","@material/theme":"13.0.0-canary.1f9259b9d.0","@material/animation":"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-indicator_13.0.0-canary.1f9259b9d.0_1629238432877_0.3766424860789155","host":"s3://npm-registry-packages"}},"13.0.0-canary.3b9290351.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.3b9290351.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"f4fd52fddc5206d7b7e4892deb9c54cf136070d4","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.3b9290351.0.tgz","fileCount":38,"integrity":"sha512-mhZOEq+qGuTO8MJV4GAcbZ5ayuoc2rc8VYFlfWB10pU98pH7wCOMcPFR1TeYtuxkKbDMv/qi/gNcMv9/KWSwNg==","signatures":[{"sig":"MEUCIQD+bh9ZmZlcFoI4kNfCobZO85B1paarLj+vrywFvr/TpwIgYveyJ+lapuUXCRAwdq3olYam+G5zq84QPCPAxDUksOo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHJlECRA9TVsSAnZWagAAaiYQAJPQxQL5mRmrg0zggNLf\nCDBk9TazwkCtHfEEJ5r5QzzuxVYnD3cuZOSY/iLbL9Vrwf5ocX0ZJAiR4c2b\nN7BvTAZcUgf7g4aGK98ddusBkL0JHhaGZdyEVylFF0pY/Kl3k/4IDPCT6ezi\nvpQQTK7FkooU75TtPj1MPWnsUo98GAAcas6hHdjEtKWh6UWqFNMNPWfBPs7y\ncwgtem7KLTLIhTubVJ5pD5sAAwO7CmXRU+4q9DCZE6ba4M+V+lirbMeBHivD\nDW8pxiaNDZ3qImJCDtIwd3m5vpvHUzZGWKnFdVFMIVGOTjAscsB4lqhVGMMj\nqrcbl68eWYFs4AIETEfj3gVv9ZaSD2sqAw5pnoy5t9H1ZKFLaNDrhqCNW5Se\nQNnrcVSu4a8X6PfuzhZ9ra6UKd9yTGt3cCccK4iMn/aGMViamVESVyvAfNzN\n/WVv6gFc8BzsP5sps5EkI1pg/8LwN8ZQ58z03xfbytyzt4glkMkpusu0Py7H\nhUHUvNKk8sLwOS2GOOaVVbjgNUY4obXS8/8AIYIhMDNzkCAH2hH94zdWYVd5\n02QWM9bqGrfQ3SrGDMQau5yrfb0vmVRnx0IHjgdjZNIXRKx4JvFF96cnPL+r\nLB9+NP7e8o3L6wAEOhCD5XTfgQl/6vJG0jq5ToMYHUSHkwaMnTtRE9Bvdh0X\nHEFr\r\n=tmE8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.3b9290351.0","@material/theme":"13.0.0-canary.3b9290351.0","@material/animation":"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-indicator_13.0.0-canary.3b9290351.0_1629264196326_0.1640864829996873","host":"s3://npm-registry-packages"}},"13.0.0-canary.43d2eed2a.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.43d2eed2a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"2f4340fb4faa57c29ff2bd99fda036c3829293dd","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.43d2eed2a.0.tgz","fileCount":38,"integrity":"sha512-bzihfX4LplN69aTzTUPrnk0NrPWhdxivIZbSAWCwdIf1khG5gXL1ek1B8EQwjARwDU2JEmCuEBeXa4RQlGrBxw==","signatures":[{"sig":"MEUCIQDrF2DclndpX+5lnDMrOsWD6zt4T4of+MCOG1RHRda/OgIgXHimdYBRspsCnSsl8q/OkriNafHK7lpvO9HLCsXbJcI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHS71CRA9TVsSAnZWagAAergP/AgCNMYD+bVSxqDISMVP\nWloWg0sqo0amLkkLwtxRrZrf2tl4W6M4Pvbs8q/PuVS2j112YKE8o2YdQeg5\nS2sGs5AUsBrrCFJtzbLzoHYnejGsaA1c2Zx1S/OKXsX+J7Hf+u2DOe8g+pmD\nH0HQ/xdFwmd+JqADcJ6DOTSLL106y+PWidm04zRz3qlU9MWjpPaTkNfiPiBj\nkqiEiM58jlnvlxiijLZKw+xy28Mnc8iaQYHnrgifhLkYdECdLHmFb8FQvJC1\ncxElMBCXRb8lz0Ss+iG5PyQaXOqDrKYUeJEKe4BSfml4ELGta8aNiJqjW+8g\ns6nxaQb218EfM3EF6ojRF8vgmE9mEoQMfcYirVNOIePythJpj6dRafh0tzoH\nUcB0Gf2SX4Rjxsy2pCVFmWWVUxnWPIDRnBLBTujO1QdaYZ1ANDruClONcAih\n4TSJiI5fozLZa9zICTIZpXrsGuFwBINiw4CKOhnu9R/0pYAe2L3OpRH114+B\nE45Jw+NFBQVKhuoIvK5/WswRRSXD++WTXY4UYgzky41cqM+Wz8mPJkiycj85\nYp4jor69G4nbgo0EcKtxFHT8AlB32RdNB0WXGgpDArJ8iPxjG1977KGfALgf\nYpki+64xP/VS9bw3VEuoYyTvCM9Nrq4r3oTGj7K8AYr5+SfIDuVUJbN/hMVy\nXP/3\r\n=IHCF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.43d2eed2a.0","@material/theme":"13.0.0-canary.43d2eed2a.0","@material/animation":"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-indicator_13.0.0-canary.43d2eed2a.0_1629302517564_0.7827549705714265","host":"s3://npm-registry-packages"}},"13.0.0-canary.0a9069300.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.0a9069300.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"33eda5d330d2bcf81f4d18193e1a7f68c08f5554","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.0a9069300.0.tgz","fileCount":38,"integrity":"sha512-IuCGesd33522PoVTD6MNsR5vdfvMypNTV3HF4LkoP2eOLfY6GQiiTNTccSNB/8Btz9Ahni3NixEA/Srn1Yg6Tw==","signatures":[{"sig":"MEYCIQDbF787k8vrQrUe1gVXEo3NeRHPey6J3pZR2M16f6oPEQIhAPWKqKWHcRHPyytFXq09hPJ31at8Q0mbsrzlzR9yumsn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHoQSCRA9TVsSAnZWagAAQLQP/14IbKelqxfHoJ70XudD\n6fVF21z4G3p/UCDrTNgbq24cAtdcREK8FvTRjxUH3gUz2/az0+tP/W3ZdChO\na+eQuwyKCxIuyfDh0M2IJq7w0mKbZN/lEmqjphyqZsCJFm+tl1wF0ZsgvvSE\n2t020Gend51v972NMkfONg6fjePHh4WZO81McKNOIUgfaHw6FTDp7i0F5Gxr\nb7xJjhd2f9sXxXvei+h3Z4iRpZ5SGf7pWBLJTJbUM4Qws4UbX1Sn8fiT2meD\nVdKuE+zVQ1VQrnE2My2udtpv/YpPdYN62RrWOUFSJOwN4q/qN7CCWT0wfNpb\n2I9+3Ma+EVxYPnWQ1ZS3UDaC8Ff9/1MoBDfXRRQf5nNWNOKqAG/K3TfTnREv\n0i+JlxyHsdhWoFhw57dHmAyR2dHZrY/3HXLG78FNDcsAEWd+A0ZxVxhavvTX\nfaqnNalji38rDR6Lf1+NPl0VX8DFbBVHREl++AvWTNoNZUMHJKrbDfPMuqmF\nA96RilAiajuiZup+qY0KvRgGHlOTK61dxzn3mJrfWP+zq/H59O0Ep4kiibaK\nY/0HlWXrRBFDHfRZMrvyjqVND2LRlLiPIW8YmvH82hmTdmaXkURdhloAeHBy\nv4/suUSGijVNXZl86dgADXrx6j+2wxYUESqsUA+1bLzneG8IGD4P6l7fJQvi\n/ste\r\n=NxAk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.0a9069300.0","@material/theme":"13.0.0-canary.0a9069300.0","@material/animation":"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-indicator_13.0.0-canary.0a9069300.0_1629389842152_0.6795172744483722","host":"s3://npm-registry-packages"}},"13.0.0-canary.7da413ed8.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.7da413ed8.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"cd51a149bebe074d93e16f3d4d7ced930fcd0a9c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.7da413ed8.0.tgz","fileCount":38,"integrity":"sha512-quugxuaFVt2jciecJoeA0xhehqy6xf5/NHtpkofzt+MpAuod0VWBpaf7Ajw3ABBYqAEwUbN3PJGH2lr/282n/Q==","signatures":[{"sig":"MEUCIAJRU9HLFPm3/7A9k9p8JuTiPBfsLg2MyxMJNXAQme8pAiEAo8Z3/5AC2fcnWwOLfkpBR/pv80B356bxi37JtIug7oo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH87HCRA9TVsSAnZWagAAiOYP/1Ibzv0/BfGhBHlT/Fr0\nMqJpsEoKmuH3scLgF9yYHNjA5adrMICBQ7KjjLJtwpJmARLZQKmTEL0kfR98\n8+cIlRPOkiNyWNgq43vlm92uN2aFoPWxDsibGiYX2svd0z2Nf5IVflKHdjNv\nCu7rBc7phDZYi+UVSbtb68f+TfJkVPEMKwUrQv0BWHjAg/XDwGBwwokdfK1w\nhJaTeCxqcHnub7To9dIJ2JsO6pu/UtyZYR6cBuvmkXqWYI6AFMxkK7GqOpSw\nTZABc6kQ0R+nOP4sbDIDPkXQMQ22u0QR8EDlkvUkurNQU12L3WgF5ju9tFwx\nI+nEgboyPV9CxCVXS+WJcIPpg+T74lH+8Xvn9TyP/yNKx0P9sQ8cRyaQxKxW\nMBTEGiE4tt0aBUF2JYSKNjOa/PLGsmiJeorP81okcOBdD5lM3V0i4wLju/5z\nm+HBl8mMh9c3oo6/WZQby31NgkmHTh1ZG3nXDM7lNlhpZH0/W0wyQp1p3UX+\ndxoeZE7/yI0t2MziRAORERojrG7oGzMgrGwo2Pm5jacBlLHjViYm6z9/cS6x\nFhPJnA3U7d5RL8/9K/ypzXh26QUjOblYJKsU+lhhkQEsak5XhBqVxUHFKX3y\nEdRlGUPzgJQE8Macy7TcpUnqBbyk4xBnWt2rPUF9HD2XvHkOPUhrYJQG3vAC\nVbH0\r\n=NNPB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.7da413ed8.0","@material/theme":"13.0.0-canary.7da413ed8.0","@material/animation":"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-indicator_13.0.0-canary.7da413ed8.0_1629474503593_0.6913004841992312","host":"s3://npm-registry-packages"}},"13.0.0-canary.e1e69fd8e.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.e1e69fd8e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0f198106429488744eacbc27e8a4d9427bd99e58","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.e1e69fd8e.0.tgz","fileCount":38,"integrity":"sha512-Fu4KWNzRro5YQhSSjY+dZmCzKRa7alYxENFZPdrfUsUdb5aacx0qqBdsOium06Go+XpluJocCysvvYdFnB9yCA==","signatures":[{"sig":"MEUCIEcnZYZh4ZQz69ITpqPn271+1ySRkxRudpakxKZEQw2YAiEA793KToTGwrgY4HWOGd15BE8JbToEWqjRbtGSkv3FX2M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhIAMzCRA9TVsSAnZWagAA1LkP/1zhnh4tDKlvro0AlDXP\noj7gle5Bsh9nnKmb3334rUyG5wtH5Sbhf6mQYgcUujoVMiZBl0kG9neb9Ebo\nA/nuzidk2fmLWyxiCYZMiaUt81kv22IsQ+y3Bw81KqD9cSRLFkHviGXrcMZB\nfkrkQJNdRZCEDbp/QN9Mjc2Wy2FtBi/AW9K06k/qELX50dd9cfiwDR6mhbzH\nYTctsPbFPIserz3hNCey0YKBtdrNqrhdS+ey7BJump007vdZYBZ86GHmXhcb\nolOUS9oyDOUtrJ7ihFk5zB3lvKmN4HWzwyp3/LKFjonfKpgYE9c/foA9RDLk\nDkY9g+/9JCw7yFS6XStes8ek244/SDfUzlx0Pk25blQZpQStx97LTfoIMohx\nuEKhAMxNDctupJkSBO4MtUlJimCUS+1pNcpUlDIKzMs5uUHKFeWrla2Gn0ax\nurpja9UKn5huPssSBivwRITYR5ZuXvNor5pRnTUq6NqwLhC/0dlqwF3M0OHn\n4IDZKUCbQv/K4IC5BD6R7wTKJmeOmk47QrzYaa7kAkBur1+5+8aUKb0YDCaN\n7WMp+6XTsZbmiTiacV+Vgz0klARnnTOhO9NiJUeiU8UZnDfRWvNyyrvcFsYs\nvYJuft0Lszmb8cDr/UsH49YUAKNbksIyBozR4HxSKxjJLqWOpXMz1hHp7R7J\nv2KF\r\n=WQpP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.e1e69fd8e.0","@material/theme":"13.0.0-canary.e1e69fd8e.0","@material/animation":"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-indicator_13.0.0-canary.e1e69fd8e.0_1629487922915_0.125238087410537","host":"s3://npm-registry-packages"}},"13.0.0-canary.f5afc16df.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.f5afc16df.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"2526bd7215ac5f0f11ecc48358612e663bb1453e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.f5afc16df.0.tgz","fileCount":38,"integrity":"sha512-yY2zanTcdE61/C6ngB5ixoyLqO6QQpn/NRpStv4H6uHs2kIZ2ISakANhlF/GlPVfEFZkLAQv6hVr3HdzXRbing==","signatures":[{"sig":"MEUCIQCAhNmuS8lK+ot5kfMCN78UcLW6zhja5zd9tKTlZQz3RQIgYk/GWr53L7Obd4JYlPfRVcGg/VrVOQGlQKXn1WkHT4I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhIA/xCRA9TVsSAnZWagAADtIP/3cQF2pdwqdGVxj+Bnd2\nNj3mdJxHHWBJ1GL2q4W66z8386hdOzPHAeC6NU9rp+E2Zpcjq/IZXBILPyHu\nm7K5iJ11bvDi/cLYK8M2DZcjPQnkLTVbEwnGEZ+hpiF5Q6IJFj/Xjzv/2NWG\n75NC3ofxjjXhUEfXaYFhlbzFkGdVQsNnm4/OjqKTcegQ+aYsL+4824SkAxzz\naRSGOJU5eSYfqXzdaZxO0wQL+03BXjn5gc+f14n9DXGwlZtPD/rWLm9p0x2n\n+dkNgB/aiIKkc4Y1AupKyFacw7qCvFFetgbnjYiIhSDUm0z0gekUmDH9cudP\nQfAOyU4ofzPcmgg6tugL3BMjnmfUfm31SDxLDgMgWUedPQUZv5y8NrHEVHL9\n88LSlGSvSud1CwxwxdGt1KQ/LHbIWvVvYVwgzKBriGyIZW1ihD4AuhoGXUMc\nZGOWqhTjyx2lKTnMPde5TWmFqbNhq6ecoE/RvQkwQsE6T49U6THQVySGFTNI\nxEpG8SaRICY6UfFq1emOGDdaSnwqypljViDiJj9RfiQv/+eTM20vg3DWZZwW\nBZ/vjEw3S/O1+IZtLb0fXdPyohhdji2XMUfdGjlOEfe+AD+DS3sNPs5r9cOY\nN2I2aGMLktREmeJ2IMNOpp92csmboK1ja2KaE/WH3PKsmhsjGjOANJqUcMG6\nzV20\r\n=OKXv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.f5afc16df.0","@material/theme":"13.0.0-canary.f5afc16df.0","@material/animation":"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-indicator_13.0.0-canary.f5afc16df.0_1629491185088_0.6346003150784412","host":"s3://npm-registry-packages"}},"13.0.0-canary.28d0d75bb.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.28d0d75bb.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"3df759c10455dec6511b2560cbcc2d74ca66d8c6","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.28d0d75bb.0.tgz","fileCount":38,"integrity":"sha512-8mvVN5cEKhuZ/uDhiP7QzysPYLsX6DT9NaLdtMLxHXhseYmOCuGDhAjvYYNQKsF8cRLNJ350uhos9v+gkOK7QA==","signatures":[{"sig":"MEUCICYfSHB5quOH2WJQ/GeO/0ft/Bal0Terv7BxGy3/hdIfAiEAxlb8Jf+oP2h4zHyMYF5qI15LREcpdjiHQbtMpSMLnI4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhICqYCRA9TVsSAnZWagAAYkYP/1AlqoARd1Pze7yITlcv\n8ZJaClLfNdBd7z7L8l4EAsiaV7S64nFLZpFJfJEv/MIh4kYq1B1qcXGw2Q72\ntbVuNdH9kB/ahACACbHFJ9P2ngq9Ixz6tlY2X381nSmnYyI6yPiSTh2K1Pk9\nDA6DxBav0CFQA2uQvxKGF1bCyR/zowDlh19zXUNgPJDpMnCoQdC30d50UP/4\nlScoi5kvEVB/ulVZi7yUoWrhf7/Q25j2aurfI/RhKjC+YPRMtSI43JdiGbkt\n4f2wVzNCAq6Gpkz3t61wOlLDaNcRzfr7D5lBGvjLccktkGXas3udTUzRZi7o\nFv8y41k2YPGKNJpVQFFYXIINUBMiIReD3RqTQN/IXbxPcaayNFJHx0+cxVCh\n9xn13Pudqm7fs3+RRGep4nCj282p27GNOf79hp5oXWCcRMT0XWWY6zVjJKm1\nR7XR3n+tkpKO5rm+J/cRlFqvVH2HAj7AK/gyZeZmPAbMEvcPLGoZaVBaHI+x\nJAMGhLr82I5pqAug6CWUHajOsOfAZyY3nYU3dB6/KTKRoQgszMbYkzRgEbUa\njanOPpj1caQvo6y61wuap48prALTjzf8dKRsGG3kNBJnRghi5VAeRbaWNfeh\n7XyzBNWffBBLnsiOuyL4nN5ZBTe/aDELvdaRsOb4ya0ljniW9/f8L3+CqBVR\nLFty\r\n=9xFY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.28d0d75bb.0","@material/theme":"13.0.0-canary.28d0d75bb.0","@material/animation":"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-indicator_13.0.0-canary.28d0d75bb.0_1629498008611_0.4530797455691087","host":"s3://npm-registry-packages"}},"13.0.0-canary.21ece5360.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.21ece5360.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"6fffdbc909a329aee1a90010f4a441794f5ba3a3","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.21ece5360.0.tgz","fileCount":38,"integrity":"sha512-S3uWYjFySFHwDGROPoPZgdHFjACoKmmt9uoxaGhLcRsXOHn7+c+xax0VVQ8EeGRXBv9QD79zcb8yJvbnMzjHQg==","signatures":[{"sig":"MEUCIEYJ3dhjA1qetsFRXofQJDVRFZ/KIZx/qtMHuae55zEqAiEA+qm2rR1+lEgL18KEhGjPmsgEfMsGQ8Vgd9sKMGZV9G4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhID5BCRA9TVsSAnZWagAAhkcP/RIP0lTJRF1lBuU3wWvZ\n2kX+K0sndBB1q0Loxf4EGkEKXtZ1exeQSN2rUxWUhu2rCGhkDeTCxzMHqfVq\nBrzHbUli/oMLiFvBjhzICS0vqYsdKiDKWZ0JLzeJmzgTdLTiRH/Rv1KzWRFx\nlrPL2mrFbcXfwrV/i1jLeR7y6qhGjLzzbwW6te6PfRlfRkdieQdRLeDqmrJe\nq0nZCJuwrc7UfYq7lybUfXT8pakXu/s1vx8vJAt2hgE/Hj68wIQRslKht9K4\no2uRQvPJBCzsIIZNEcG42GFQPQX/PWCX/tJeNBTYOJnyd2UN6jGkZVLix9wg\nbdylOHM0Oi0ee1/8hTqz6NMK1pa1i2uoouyGT6Lzv8TrS863h08vqzkHLIo9\nodlN+BZt46u9aY/rRo8veVFDZRYiC1IK/g4r46/kpG/sFmzakd3lPHMGu1sF\n1db28Zw+zeZfhCrDltmwpzz+XjFE0fDSkWrCAQ1hHnDr0Qkg2sj49/UyOmTW\nK891aF3k/aeSaFtrf2g/YSgLV0P2M4Lu+bLkE3+dRrcGaaT4bzEkZmtYRQxx\ncmf1Ba8DKUwg1pYidEjgwF5WvNoX8sEO1fnERUCOmzvyJh4PfvDu4DKAtozQ\nNGGPpyYDwKPmhe3PPfC6bdUdiTVAC7Hbkn6H1gUfGoZEdXyLRAosgfoB8DW4\nPED/\r\n=UrIP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.21ece5360.0","@material/theme":"13.0.0-canary.21ece5360.0","@material/animation":"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-indicator_13.0.0-canary.21ece5360.0_1629503041002_0.7479011225892811","host":"s3://npm-registry-packages"}},"13.0.0-canary.8de07c02a.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.8de07c02a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"59980c96315024a3942af560d6b6995495401b42","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.8de07c02a.0.tgz","fileCount":38,"integrity":"sha512-NKjZBoA+YrD60cBlN5FsPol1NAvuKhFJn8wiBfeiV1NILviRxn1Jhe3DGmki1XzFDFaXB5+4LGdGXXKH9W9eTA==","signatures":[{"sig":"MEUCIQCWt6UCfmAadxn8IHg0e1tCp8U3QZEEccA6YjtC+KC4rgIgMBmDjL1c9q5oA87j2QHKDfEu7raKmCzC2Y/Wcqkdnbw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhI74jCRA9TVsSAnZWagAAxg8QAJXJND1deOXht1btOq8l\n/AlNI/wfHOi/ENk4BfQG8ClB5qGbFv7X9aCT8q3gD8WSh5ApT2Q5BbGbUiht\nW+H6z4JuQ80/bsaFwZCZDeOHbm0qB5O8/Z/2R8g3nr2qblxY0zjXv17fNhNs\nGYltm1bYPoCc6oBY/UUF/eP1I/r4mLyuv+K/TKzBMqVqQbLtMcb8DVvCkP+Y\nVx8peaZzNcCO4x4Vih/EdGlUo8yzqNrbjzfveEd95YXSdX1Q1L0GS9/OA9e6\nsrOvohLiJQb2Le6uaAbGf8HyK/oR+Wc+ef0A2shiO0kPbH7XPGXZmgwDcHVZ\ndz7Z8TakLD+3yd214gFneZ7+vxdOCEWCXXfWzGXWiEEJM5ouBsa5FjiS1Rzg\nzOzTu9zdWq5Va371/z6tUb0gzpz9OBQRbinpHTrXvd8JJvEPx2XMNARaydyL\niQRFyl6Whs+Eqo1Fw+kaogctc/UJhHJYGJdcLVCCjJdywUuctS+LLShHSxqX\nAw35J6NqHhyVv4nA0xKRXNNMsB7Ypjs+JzsXua1mWeag8mxIkr030caHt44V\nom/TttyUh7xq+urgOM9gMbt0Izt2Oz04QC5DhBopYNMS3jeVgYC8ykg3t1zU\nrFkMmAX3KfSU7cH429zUKgTb+1kCIxSIH6ZUalvLkOkuXin52LFwWJzmc+XQ\n8jee\r\n=xXxe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.8de07c02a.0","@material/theme":"13.0.0-canary.8de07c02a.0","@material/animation":"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-indicator_13.0.0-canary.8de07c02a.0_1629732387372_0.8620192686972474","host":"s3://npm-registry-packages"}},"13.0.0-canary.65aa63b0c.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.65aa63b0c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c9b542f68cf4fc9ba8999d14ed588bff6c97a76f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.65aa63b0c.0.tgz","fileCount":38,"integrity":"sha512-xEH4BTZVHc+h1zyAal1r0tQ62PjNqzWz1HK/Kf2FIw/icqtXrDZEuB77YD9ppWlFGYFYo8fdbLJR/0TZFWnbUw==","signatures":[{"sig":"MEYCIQCjV3VKdP4XuSE26MGa7mzhrauTFPzcdWlPnJV3ptQwfQIhANuzWr3DqUTWlK2mY4dapVjdYaB+3ERjvrcbkwvLMM3h","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJRAUCRA9TVsSAnZWagAAft0P/1Wm1qG5uHyG6ke5Dsb3\nhG6wlj57Syz6/yMx6RtloMs3rVpruNLOSXIGIzz+opZvFJUfdBRe5QjzRkTs\neKdVid4x6oyp8QhgS+vfxsGtWxC7f9SxfSDrWpvuHOKd79RIonqVGE4yG8E+\npc8boXR6RbcCykXj49f3FyhXq1ivz/ubVRQGmA3CJ9qtwpRE5aUmn+Qd0cS1\nVbW6Y3KO2vHOHz9oDrN8vfjV8YRdNqS7LXJAfQqKNU3LaxtKE7ZaLfKjuxV5\nrlYrGZf2wpgBqHM2jOin9K6wkkC5mKeGoaytrfy8sWIS6VEAargjV9c1nZdh\nu3f7JZi74NNriRcT3UHLeWHxtzwA0ZnVzRTXFU8f3KfHjMn9FOHDLdM/uQVS\nKOPGPbSUR8H/WVsa/56lk3ONHZKqtGe/KER83K8XQL3g4DuFAshISbzWAO9m\nv+UVDwIZzvPzsbToVsdFneAWt/KkEv8IVVVm/9wjHhkLUHTdKJLm61MYwyj3\nqi2FCStH03rpxHL0C2g+GTyB5d8zVyWFv3z12hvNYGdFkmhbjk8bcBJlaoq4\nD8XAR14TZPqO2uiUt6tWq878EY9uE02lZe55s9vgx5OriTj3TfDYZX816uTQ\nRumruKX/sNWkvjcxtU/yem7WuHCjqmbm8ExnCr+fY11o/dtMuZS2aQ61eg6P\nhDKw\r\n=gPuy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.65aa63b0c.0","@material/theme":"13.0.0-canary.65aa63b0c.0","@material/animation":"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-indicator_13.0.0-canary.65aa63b0c.0_1629818900762_0.4132366476611904","host":"s3://npm-registry-packages"}},"13.0.0-canary.15981e9d9.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.15981e9d9.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"bf7634ca8f265635fe904889bfd63b9eb3bc1fb8","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.15981e9d9.0.tgz","fileCount":38,"integrity":"sha512-D2CcvrJD69XGGn1C0pYFg6PCHRL+pnylWq4dzpZPqD7cU2WM6i7Fl72cyLZqYDk+veju9cORNy1VTYkex0tJDQ==","signatures":[{"sig":"MEUCIAVCAiNF9XthDEdF3ujeSFHaQzJVBrbDZAYkNy4GXFZNAiEApHL6Lz/nnF04/FsnnEKPngKR7ufVTXYbefix6PtzZJo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJRt2CRA9TVsSAnZWagAAVUoQAImK9vM2K7XeQKfveh1N\nOPzYNULmDFhyd4+RczgdMQEDQaeJsrzrRNwvauJh+CfwK9JDG6c7fFl2ysKR\n5NrO+FKI8Do9seev44j38LbO+KAuuMrDK/H8H9JfQGfxOB4qXMIaOfeGgbpb\n0OA4CC6rUZdkuFkKvgClCw1s90Jtrp3HXUJgIIn9P6s0z+Bz/T8iK9vVr6Wk\neZ/gX4fis5WxteQC2d3X06Me+uRzc2ILRt6aZ7qi/SKdvANgAfNEcClgNLy5\n/cqdex7/nNf5ke81Cvjt4fE/QVp0+ubYtP1xECxTHjAAFTCogi6QIT8APp5Y\nms3FhfVewQ5RNkol9HcWe0N2oBQA2tmDur9by0rhVcIHrHhsgQ/73IwtMgPd\nXIfcLYuRBUyJ2D+QEzkt9cm83jN5Digc6BK1QTIDLqVnqd49pe/BZewfVvys\ng48dsTry5Xifjn+zpCaPfXfbOFpIEZ1xaLKPdSwCADQRzhwpJM+k7pNQkgEW\nVLot+0dNyREANVmEQqkNFvptNPY7/9wb50mTsUubSB3eYy3DqKJzPaPJMCn+\ne4Q9qeSZ/26PDFJ4PZ3lt+xHgAGfZ7MBd8nVAsnsJX2zJB9DLauvSuU0zksz\ndOQxW1XBgN68iHi99NeEjv4Aue+yFCqA/jl/pjMYHp895Dt0AFjPMCB+Pag8\n7wUl\r\n=dl9K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.15981e9d9.0","@material/theme":"13.0.0-canary.15981e9d9.0","@material/animation":"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-indicator_13.0.0-canary.15981e9d9.0_1629821813910_0.5489765118399619","host":"s3://npm-registry-packages"}},"13.0.0-canary.fa7520f62.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.fa7520f62.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"8a3889f73c7a584c257ae11f6b80441f884a0300","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.fa7520f62.0.tgz","fileCount":38,"integrity":"sha512-f9Xzcj+o3YIkPGQRkIIjT8HgbS2eyExy12M8sDoR9zCscjQVs6ZvyNk0bTym7eVbeIJtSusVa0g/NLJN5ZRnKw==","signatures":[{"sig":"MEUCIArz4rgNczt/vpZvdyG0ICuhjQpPQn45n/j+beAzHuPtAiEAxZ7wf2Lr+GH6WX0Zco5l7uwCvxZxGukh/6QBrjEN8jw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJXJcCRA9TVsSAnZWagAAJ6wP/3TjQ/E9ZX/F8pvTNSvr\nfqvbwBLP/566oNmxiVI3GNCkhoj1EjoS9kyxA9601SAZCFGupEBfDy+5287A\nbjjrH37iycdOPCWVEzrDHdyk3R5jUk+O2VLYuHqunNeFX64DNJJaUa3nnBxY\n2Pk8NqCARV+FXm6/X/sdju0e5RdwyhKO7bmOqw5YuOOtZrRvyKC+65ZDlLlu\n75gt/sjCrVYn/v+Q4FxwISlZNWfnjTMIeQmhY6d+DxqiGeeQzdBXO4lE6O6v\nmcR+6q6BEFwhCKp1W90lIMloabqc53PFJn8hmfJx+HsyMC19SH+ptagHMvkV\nrSIM4Bo5KsoEGd0TmAkXUGTZkZYaEJbbNDvX/bH3bdBwAJqr6zNmb/bsuiU1\nnhPw9pJCRIk1cqdxLQmieGbog8IhN7w6aIGU9KGFgND+zoaXZ0z6rMqtmx9F\nEQz5U67Sx5+j2fSCFBvNehiRlVPSjyV20tQOsCKln4v/L0JPZAzlFPmYC/g7\nX76fvKQKM5/xQ0IuymJ4VdkyMoC1qk906VDfMEGqBG/r6IioEGO4EwDLsRgE\n5DO2NXiWH0NtqwjNinF0Az+jLJjGSQD0JSCrsMQu0b3yPJpVuoGd9svQKC9T\n+/NqMjFJ2vbrIlgxyW14abHzOioUSrNGqge0Z7yf9Y1aFBgIRqFpJ7THeaFg\nU0Iz\r\n=x2E3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.fa7520f62.0","@material/theme":"13.0.0-canary.fa7520f62.0","@material/animation":"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-indicator_13.0.0-canary.fa7520f62.0_1629844060106_0.18516217328130402","host":"s3://npm-registry-packages"}},"13.0.0-canary.ce25bc3ec.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.ce25bc3ec.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"74f059fa1420ed278edac7337572bae09a6f0943","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.ce25bc3ec.0.tgz","fileCount":38,"integrity":"sha512-uHC9giIggaukkievW/kqBEDGKmpU/U6E4xJnk67ZSYC8vA49WGH5BuP84tutcMcjwPyg0VfWcPPnnnBKN6xaLA==","signatures":[{"sig":"MEUCIQDbvjl+h8E3/pGxUt7zK+zcS+kHDC6rgOEpfdtaL4vTLgIgPIEnTv1x3dcHWxhsgnGa5oP0bQawV5E5Bc3yqdiRRIg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJXcwCRA9TVsSAnZWagAAxdEP/1CpFkxaRlGoWD8bTWnk\nXw5DS9wKaNLl5htE5DGPLTAuwnHd43LYXFOTiqlKMpoLCYN6MgTTzDLAPIrJ\n/CZH5z+sEa+TPjmLRixWcEtNW4QPQKVs0A7a2UpjQOZqAbJCn7PGvxCx4Fy1\nGgZpyvKXTu56Qm2U5XoUd12/QCJMbKpgyrLA5jCjW0zhztQx2QOwr6OKBdIC\nu/hymhwhOKJiYiZeSw06rktuOPQCLjmOY2Wu07jq5pDJdOx90qILI9zRp6lu\n9AXjkNQTb6EGrRCky0jljk/wZ0+UtXTDQzuWrYHkAENCxTymqX7u6Pu575eG\nUavrZiKYTT00JB2qct000TNuY+t20qaJo8vH2TmufmQBsJvvqCI5p7ZQm8s4\nYGshrDUu/Gmv/W0r+0vsJY0qoPEJcCY9IDZrc65Fp6zQBWTF9YsVWEJcnBhu\n21XBUIpd4O0pe9cbkWo5NMBRut++LiG8raKsI/CSFDo9d98bhSw8d4WEaRv+\n6YWIZJRye7GAOPyEoZwS/1Gk479f+3crUaw1rmaN6hY2YdIp+4nXtwfKIlTu\nRTnWjt6X9EBr1GEZIZ399xl5vegjADd6Rc0cUK8M6PKjQgI6kBYf8TF/9NtJ\nlnH3gBUCSz1LAVOp3nO7Y+xmGpqyWHLXOvQynekIDfbdvPpFCe7AaO2v1v1k\n6Tic\r\n=FFCa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.ce25bc3ec.0","@material/theme":"13.0.0-canary.ce25bc3ec.0","@material/animation":"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-indicator_13.0.0-canary.ce25bc3ec.0_1629845296800_0.9607172699318776","host":"s3://npm-registry-packages"}},"13.0.0-canary.12f5622e1.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.12f5622e1.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"65f1e290f9c25e75df1bcd43e282ff6e08468705","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.12f5622e1.0.tgz","fileCount":38,"integrity":"sha512-GSspenDoC6ecf915N4FdRBSaIZsCfaIfkxqnKj749wy3EWZp/yAG5lFmvYa1pB+ZNX7Up1HUn4nwoIBhImZqsw==","signatures":[{"sig":"MEUCIQCe6veMmrAAMzFfFe5VE9xbbMxydOX6PuPo7f/MZOy8EwIgJueQcAZ4qdjS/URfEROkviEv2G98Lk9P8NqknQKTecw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJX4kCRA9TVsSAnZWagAA8BQP/0KKcfZweCBxqnLm3zA5\nEjm2TzZrrZHStN7V3v3gahSQ8EPIn2F4CyIlBqamiwgLAugwcqoSTE/ucMGL\nHFH89VIrWeaSd1mfBIfWdFTiDDqzc0H796Hyjw18DtryhJbBcFISPOis/5M6\nSBE5TAf6CLY7NaIcy3JMzvEEGb0SAvYNrDpf70zTIvGd5zrKV5A4Fbn/WwaM\nyaCoDUsrGuv65wD6zwWrE1oTg53Nf9Roj+yZRHpA8zKIAGgaAIytReb0kvyy\nNsGq6qxoSUVnRsluo91XobYVsyDSXt/EiGXI2ZHkcq5wTZelmW/1Uaa7ineZ\nnG/PEUQ/PeedMvJUAqWbs/zxtva5wa7QLG/KPE50zxsuGLyqf6ihVnOkvIo2\nepxYisE0aWpHu3FCeUMfFfvrdhg0WaSMo1ew2sWVxUP7OGL9Br4rw0icj7UL\nP2u2skX5+evXfL7L8qgiInQZiEziNnX/nuh16ns0UQlHu/xK7WldrFdBldLs\nuQD60sRH1KRmx3xmAXC8bkGjR/FDl6caCr14ueCeCaP51AEDlIx3yuj06zf0\n+XFRHQinEWOmVJg19pu1Mt8WUxK2Sg5A0/slu361yB30VhdkHusjvSmS/S/s\niCV7FBzQb+b0I63V+faIpQqRrp0MPy5Fpk6ptoVSib4f6TFDif4O42LThpis\nI+DV\r\n=5m0X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.12f5622e1.0","@material/theme":"13.0.0-canary.12f5622e1.0","@material/animation":"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-indicator_13.0.0-canary.12f5622e1.0_1629847076301_0.35356865672615934","host":"s3://npm-registry-packages"}},"13.0.0-canary.d97f8f133.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.d97f8f133.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"9c039bb8f8fb7de27ebd366877cc184f8506afc0","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.d97f8f133.0.tgz","fileCount":38,"integrity":"sha512-2XUSodVZ/4pfR7g/IxJgdaJkzkt+6jUWppbTVLC0/rMn+q9rlE2uzaFxGWVFkQd+ajEPkr9H/5DUE7vSzbfrlg==","signatures":[{"sig":"MEUCIQC1GGrDZbj9l9vjtrWe4Yny9f7pA0LfBPLOuOdaGhiUVQIgKr5DvzoDwBVzN4UgfI08dz2iURLaIKY1FHfGAy0xNbs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJozdCRA9TVsSAnZWagAACqYP/jypYCFvn49SE6F/P/7M\n9VTzrSpZK1foAxP8qFw94IiM6iZqNwgwT0B9RB48gQ5pFmrlIOsbDGeXJ0LW\nE05c4cQn8EY9XyySYBCspbzp/kK6ziWsH+IdS1Ocxfov/BiauXRC3x17zbtH\nJNy8XvT2oPk9ibFza5Yg4aaBcs85JjjQK9LAzVPoYsd6zXa4SerTt+IqkcGw\ns1QpahcA7qVRAQoy0RwO0EZ6+/uPHvScvwN94DisTeip7p1p29B0QkjVG4oq\nzPALAPT6qRLCmW6/wGYT2hE8i5fCC+FkN1wgl2NtaxwTanqvRnGhGh3Vk561\nFYs6ano6O4ilVEqtbU+zJOu6JZ5qK/AAEaRwWpxTHA+V79+fS6dAEOFIUKOR\nMaUPvCFkvY64aBArGAoTKUkf+uuoZp8FNKsMbaihW3BuCdTA0rYApn4Xq+Ty\nvApseSqzciOfsDpAjlX18HUpoOn/XODKwno4UU/iV9vLjJ1+F300uwy0K1d6\nQw9z/IUaYNQxW9VmzLCX+LFjJ50HLbw1ElWez/HD/erfhiYjBKYSUR7rWKnN\nGn80CRkb7b8wWnbGIumfQxV9LjK/CuaS09N4HsMchoPpzWjwwsx533BiT78U\nvqDRGVRqFDKeBSOtNMGBwyRDZO71PtWLd6FrfAohACO2ZfGcYDm6MBuTbTJq\n2kuM\r\n=rW9c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.d97f8f133.0","@material/theme":"13.0.0-canary.d97f8f133.0","@material/animation":"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-indicator_13.0.0-canary.d97f8f133.0_1629916380991_0.634219247221125","host":"s3://npm-registry-packages"}},"13.0.0-canary.d86fb6fac.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.d86fb6fac.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"f7805345a74cda0e59ad053754cdadd3f3ba388f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.d86fb6fac.0.tgz","fileCount":38,"integrity":"sha512-y/ToPd3W0jwNoTbAGFy6zPcW+ROOE7++gbVd48I2EyJI4QelqxdY2MyIiZb68jzkBfjBDP1zi9VwyKJ5UQJcQQ==","signatures":[{"sig":"MEUCIDBr0oqVW48LCaiNnRnoXvgF3pudH8Chx+8o0bLe6v4AAiEAtMwSIKqabGwmxc1Jee0aTsTrgX2DMQt8WPBlahv9P48=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJpGvCRA9TVsSAnZWagAA01YP/1sG2YgxERYKlCJSLQdx\nK4LycCSSHzWc8mx/BMcu9yFMmi3ZA9NEryDBp524CmHpWc0UOiK7xWqJR0rp\n15y9xqct59sa4o5P+IEZODnIBpWGuABvtLZflZGkXYEPMpHe8MfDFPSj9ZDt\n25DYtgnlDPd1Oq2OZK6oxSzq9e5TKIflHDHN7KBkG3R+/XdiH3yzfCWgxZpv\npZ5YlCaoS9tRzrpb43sTGvxQqJb0WZ0IlHEIdRqQokEKrKUkNnJD3nps9YER\nVHYrJC3oqRyw4fB+tBQO/MVd3rBmMk1hSlRqklBTW5ENiho2W8MQ8GruqHlx\nFM7taHB3gNjs4st8h1qHFldQLfamJy2gCX6ISWjh8oij1aaJvZxl3uzXvnbB\n2qCg4+VXgt5tp58U85vlJ7RH8ZD8BzW3jU419qdvJq6CZvOfRXGPcX7oFLtw\n4N+ubGjAfLvfYxMFSi2yFXhPVk0RBhzeoNp+H9XmMfWepbsaA2z6ptcc2/wX\nWCwgn5D95OFqrnCvg2dP8sGuig1PfKfkD2nDKBbFhSkpG5yQJQj1fJcOz34J\nRdnnZMOLspgSoqZAowTNGDDimLGdHsyU28DAUz2eTtrwq8ZXsBya7YiULaIL\nt9NaFp7iaEa2dd2DBeqpAmHPlUfRHI4fDbp8mYzqAL8etSdx/FgTAgffmM9s\nT5p2\r\n=fHYF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.d86fb6fac.0","@material/theme":"13.0.0-canary.d86fb6fac.0","@material/animation":"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-indicator_13.0.0-canary.d86fb6fac.0_1629917614940_0.6604335360564879","host":"s3://npm-registry-packages"}},"13.0.0-canary.e8554dbbf.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.e8554dbbf.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"1229cb4a69cba3e72e6d204073477bad97433e7c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.e8554dbbf.0.tgz","fileCount":38,"integrity":"sha512-SMXAcIMDYtk9nRm3W4/d3pKNUCZAQrGB30Vo3q4LF2maf9FTwIL8GmckkcvS3ayOQ+q+lSI8eLPWyWQwtqhCkw==","signatures":[{"sig":"MEUCIFptj5LtcvJi0U5Wet3htBFdMLzNQ5+OqWsbueHRw+5tAiEAp/fQrok5UKyyCd4AcuJ/nm8+v8WoNbzBN/GmXnev740=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJr0wCRA9TVsSAnZWagAArIcP/RFCm4aby/iRud2m4zNK\nP4ZfwAivk6Rg1bsiZDv09KXIygORf6EQRlcBsRRG0L7S7ZhhOhaLI6OcFDbD\nDySM6LIS8c/Bw7Jpxf1pefbgEhyiKCFRAtb+AeucbFPOmYDGImqrJo4KjxZP\nL/x5LmOh5eIqSs1m8sT6FMj42VEcjcHH4/jA/4wMepIL4OzSO68N+hxhk5yW\ns1LAi0MrHrIlSVVdk3XRYug5cYvsbm8uP/Vv8IffiDsYsDZAZh8Fp/TKSR1Q\naBOsSVd+5IY62EUr9LiW8bcOsn4NY5cafYegxO3LtBH2siTxpzwKmicuVExA\nT+g0BGXY8yD6ld+Kbbo5DYoIrk9j1ro8VAPmUX6XLU1S6408q6Ke6IrxMLVC\nRkQiTsg9GUOp/WqGuMtpaLbCyAAzAAzvECQwJ84jc/z9UoGmpD/y0SQtgc7W\nzjGnJWqjTzK44C+8waY2DDKWSjgtjUXcDYtqRzwNf1hyXzDUPcKnKoh74KTY\nWAwRWy6j8vm5CtW9BsS4p+MbbNUhKMXm4+GDTCrqLz1ru8KJwkDAGTCWeuSJ\nbHiduuOsANVVUUqdHQrnSykEeAj1ZQK0oAqsRswBrFI/vQk5jpfS4f36OLO6\nhhiJG5GOjQkXdGdFGN1zVxmBn0FoA3bl8rTTerdIEQwlXxvn4UfBiuvGZhIE\nd4YY\r\n=Xf/t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.e8554dbbf.0","@material/theme":"13.0.0-canary.e8554dbbf.0","@material/animation":"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-indicator_13.0.0-canary.e8554dbbf.0_1629928752686_0.09944668000575008","host":"s3://npm-registry-packages"}},"13.0.0-canary.877e3fb0d.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.877e3fb0d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"954dd740ac32b640a829ebe918838dd1d15d0dc5","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.877e3fb0d.0.tgz","fileCount":38,"integrity":"sha512-afvHE/3g5mPeOBr48fZGqGKpbJ2wpXLPX5UavW25WHsJdhJ+/7TEwMSiOinSaueTjiUcAT7re6PP1Ix7z3Jedw==","signatures":[{"sig":"MEQCIEj5bnSK3lrlvz2EY6YYPEgJ/7YPrgBZ8gXKM5T/M2wmAiAc30Gv3y3rngqjTGgJ0pOZQsAQJhRzhJoI/S+1Ljk9zg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ7VNCRA9TVsSAnZWagAAwWgQAJw5SpNWDTvD6u+zj87e\noxfR8KsdFyPDCqGwr/RoX4gXE+6kY1T6CTxsWxT9ooObdL9jJGvdu58/vs8Q\nig1LQ/Velaor/BJfuY/PakaUBhgqPASkkOcBZBXLDNGou0KRZTQinpLdEA+S\nPiSUWPG4/C3aSRyWfVIttbn3Oj2yXFRw/LB4mIW8/PQFJyQLtB2HSDCZhEoo\nycZpB+9xvf+/h47ASWl+cNJC1cWreGhxHQ6Dwii2uGXOll5UBI2XYRtDV/6D\nmqasaU6HVgkjAEh54OkGLWmeMbIBiYpN0NK3OsPRabe3QsMBgcY8Tsc5uaOr\nh4PycDeXZrIk1TDawyJ1EjHSepyt9+Bt/LtzUfXSP1MYTy5opDc/weR6rqSN\nxnRbn2OuHUiE+algWD6uZb58lYWyvdRY9Dui4x/e+2yU6XfmRdROniqsNqFD\n/b9/1jEg7NZLms2wm/vRv0fG85eSQ81aRNfweWq5EtPJX70nBacvrjEOwroG\neH5nERJyXUPkcNsudtc7mUCSIzcZREglr/3di5hURz9QE0Ww0KL0OylC0o7S\nd1Jy5AiroePjWFn5Ia2yrcfzMM2WYtfUtZgEbrJLsv1r3s2AuaDvRc9YIvJz\nfMs4LzNUxRF5hEGkPyiWvw4x8LEfKTM1J1xND6Ixs4kd+yYVJ2Lihs2BMBRv\nFfxc\r\n=1bqD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.877e3fb0d.0","@material/theme":"13.0.0-canary.877e3fb0d.0","@material/animation":"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-indicator_13.0.0-canary.877e3fb0d.0_1629992269752_0.32337155380335036","host":"s3://npm-registry-packages"}},"13.0.0-canary.6236f3576.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.6236f3576.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"afeebc4676fc5f5f6c83f4854dd20daa5e69cd37","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.6236f3576.0.tgz","fileCount":38,"integrity":"sha512-7XKYHtfznba202SEHztjjZRSUF7RbxClt/0et2N7gv4ZG6lDweLJkrEA1n69Ln6lv4zeALrDyg9n8n4JYkbLhQ==","signatures":[{"sig":"MEUCIQDIjpNeUIrhvh+wOOV2pya8Pqejt71fxIenCOcQN/ZKQgIgIAY0X2Ak6tmU6I5SCOlsrGwknInz3uDKwvV47xMU4D0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ7vMCRA9TVsSAnZWagAAHugQAJ0SCH5kBVVNLvqN2IY2\n16EAqiibjRSJSfBg8zRLvXbBX5ZL+WRIvO70ziRSZSqKLk1Fx0ZXpnuexB7v\nRX7EUyfj0PxvStrAFtRbASCev+c/dCV+l3TtaBC7k/TfrekNjuNkjeqEPJqI\n/3jczpXFWxwy/BPah3CxR95cW1E0BxZxhxDHZiqz9aLFmV5ud6/1q4D39zyk\n/lltSNqYdJh9dcq3Yo6sT8oIvUtIjkwdl6zQtjUZ5bQWg9tXCrNJhsx1jwy7\nLgnDZ6OK5QShavih+DquQZCl+y6xH7JYhC8Pw3Pv4kxg83rZciq5hVJjJngV\nDAzb+9yYiTJQBuLAWFMYlG88F6tEpicdmnNKGxVApMlkLrowkul02ds/LQAV\n2stf2yLsdHxajAbFoFwkp469ZS6G+/eZ0SCN8P8CZHaHYv4I8HKFaCEfKFK7\nVZvnGaVrIW1IodlnSbAOoSrOn9qz1EBUeEIHkjDItsMawnfSdyLR2wGoR6sQ\nmTmEOqNJVDjdi4572GtE4AjGTVEoEZS4pQUkiFKJo2zHqNKWZv7zWx5TUbX+\n/3O/pPBx6W1j2nlLjLa5dKkmSLgk7l+gB1bB6holTV48b9092t1FpXlQjiBe\n8hoLC4o3x6QSTbARJd4lVqWD8rPXyn73sSpDbhFVE+tQJ0+TqTpc2Y1mELk/\n5uES\r\n=zV6Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.6236f3576.0","@material/theme":"13.0.0-canary.6236f3576.0","@material/animation":"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-indicator_13.0.0-canary.6236f3576.0_1629993931935_0.9315104040670008","host":"s3://npm-registry-packages"}},"13.0.0-canary.1d19158a1.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.1d19158a1.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0f41f3d1244df2f1c45d2e079a74f7df81998ff5","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.1d19158a1.0.tgz","fileCount":38,"integrity":"sha512-UV/kBExji7gQN+cYR1ptCoypDZ30qQ7q0SayNNyaZH7JYydlys95kAp3mow/v52ZfQgPhLAWyFE02YhfAlHURQ==","signatures":[{"sig":"MEUCIDwHtaVN/Q4FSum5oqFzPRPuRYfjJViX/S60Boi7x6m5AiEAt5PbAIA8Fk2c4clm+PL93tl23nQsWVErPrKIyP9S5YI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ8qdCRA9TVsSAnZWagAAzq8P/3OjxRKz+zRnwQC4UocX\ndqu6e/bGM51TTMSHixE9BXOAUVf/oCfYGsC/CgPNyqjS4IxHDV7F8vK3qLoI\no24rjSzb7E07iOtXj0gB/pTLxKNZUDUNHuf5SZnYt7mMuK+76AeIbO1miSWN\n65GyPVuJ0jxFUnWWQrE18M2kqxcEHO9KvIHcJ41G9O2KjvZLWl8mZNKzUhVl\nGRG2/YU4etOARiPLSsefInToXS0B5S6mJYKexUQGvNFs/MaIRUA4GNiY1V56\n3L7ADE74OgTc4UlZ03tyivG06uFpdJ/PnLouo4QNvtSvh8k5aDT7LCA7UvVS\n2UV/NQeizmLA7bHx33lbTswKQnkjIFERsBAgj0VkusFTmeanuJwMH8r2Vzst\nty/8foF2dyWo+ON/pB+9rp27UHoR1Fc5vHd7+JOzaWSf852gs5QmqXzlkIKB\nNKzHzB6Ee6zjsfI3daJIjjZzwc/MqsaAUM72zssxrB7UUfaALjhh5m4ezIi3\nebF+clFykvAj3THGkyvIEnD8gHu3hEvZpO2zF2WMFSiKMT3n1ZhCBMGohPAF\n25+c3jW+0hnew7oZAJHjL6XnuhmDGF+kNqfXD5d+OFIgKyerxnpsCAsJsCgF\n4f1GqpqJ8XvSTX3Pa3aJrBIuJ69Zcblc1BnRhD1aP8ZPQyv1tLz8JPrTilHl\nGIIb\r\n=pWpo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.1d19158a1.0","@material/theme":"13.0.0-canary.1d19158a1.0","@material/animation":"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-indicator_13.0.0-canary.1d19158a1.0_1629997725649_0.2608474532564784","host":"s3://npm-registry-packages"}},"13.0.0-canary.6adc9e83f.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.6adc9e83f.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"273d8233558fdf23f313868fd65750be083dc488","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.6adc9e83f.0.tgz","fileCount":38,"integrity":"sha512-fICnErn1B6EXFtg9RxHlLiYExD/IVao62vRtu621YxpHs+/iBZV9oqs2G5+JKMeMAW1luLKmLnQELvxr5ZwKOw==","signatures":[{"sig":"MEUCIQDxq3wvWijwm8lo9meC5emtzNE3tBNYO7YhztXF4gszygIgWnVC4Gq4/aRKuiYrAb6x5edLHJISbRhJPpmkgGAub5k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLV84CRA9TVsSAnZWagAABLEP/2eZCJVcYL15+xl9vDk4\nVmnQId9mRiWK8aePOwWXYvYRtujlXmVif6pbBv0wYfpgqFPxBLGPkSDxVXUT\ndgxYiuPidpTmbqFIXKkc7yXMkjChae+2oQI8OcRvOLaEOS+xoFAIBEHGDk6q\n3oAwDpMWi0e4kNVbrveruDvnHR7h+eMGHKMhrPZ3HNjcV9o9CCSoKX8Hebry\no/BuHsb/X5SzUTaV16e5ySQOKaII4V1f7Uq1wno+wYu27YftRa3u4mIWjc8X\n0h1T8Hk+bJI51UpchT4jNaIWpKN2GajtCjGOo5zQmYPTy5RK1ke1E8gpOaNV\na0Y8vKkB3lRYxOUPOKCOcHIplHjjB8cbrmnjcPO0fT+DLtCkZ4G6sGaRcujV\nMQAUKsdaRkYyNatdSGr5DgVcHTM4q1rrfEgsUVlJiWsO5PUEGl9vbv9ERqpo\nokf8EHVAb2366DvNL+qywCLtYRU4Uuj1J06sl+ORtS54ii1wmNexd5JJovSE\n1i8P38pIzNF0i6ccf/eoN7xE4DDJytffJKK6qVGkkbJWdes7iCnj+59Ixw94\n6+91nx57RoOllrVEd1mvfuwl+k4tWsxbUXCKmdZXwRBAR48K6UdJGevnqxRX\nw2L0C/qEHIOucHIxu74K4s8xibgm6H4jF7U4lLE9aH++5tJMI1trGGVn6qLV\nWzB1\r\n=cBqt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.6adc9e83f.0","@material/theme":"13.0.0-canary.6adc9e83f.0","@material/animation":"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-indicator_13.0.0-canary.6adc9e83f.0_1630363447957_0.5727082652057072","host":"s3://npm-registry-packages"}},"13.0.0-canary.d082790f0.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.d082790f0.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"7dfc3cf99e601f1416649ea08305333aa56d3134","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.d082790f0.0.tgz","fileCount":38,"integrity":"sha512-aZz567xmlCMM3FT8+IvLt54MNdHyeEQo9f8EvylbTyPSudC6A9bQVnmxvMi6dXpcEDp6gA5z8PtlpYVwcSKnRQ==","signatures":[{"sig":"MEUCIQCcfBdMpfZyNtL3vf+PLeW/tW+S/UExStvwlBWUI19t8gIgPWULSkaaC08eKnphKYpWJoHZydv0cj3HOyVXRjnarjg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhL/aACRA9TVsSAnZWagAAORgP/3/mfCIJE9S228PHu9ud\nyXYQCmQVtkAgairENvIP8kxv5lVtE9GeVh6WlXb36SJiyeBnCWRxkohK6iue\n+Z68kQQl+e4C/KGeRC7WbEYnkUG79Tk3P+1gc/DJLXtyU8sxHUnEfOnLoV3b\nWm8iVzSZmIvLWdTjzgQ329W2y1L2geUaT2JBljvfg1i8M/gKg/vcKFLvwvoL\nwZpHTsFLCzMhmz9NBW3UJdhY6CDBBsjGlEovHuqTipLQeN3gy+7023ldycaR\nIn9dWL//iO+WN5FjXz//suvNJ3uZG1rBfXgDDi0qmWi4DZo/t4Y+EBmKMtfw\nvaZDKon7hHrFTPKhJmKKA7XRMI2NpYKz7LoPjCLsL0jbb9Q5kCr/Qg4vE01t\njO0+Lc5+SHpFBlw01Fj9JabBs20e/HSp7kDFsz3fJSAHeJCdPmzh0YiqDC/1\nHcUkoXiQgwKdSdzmzmBDp6wmo6lb5jb0ZbbXpJtrxgC9N0bokbfifXPcv+FM\nYss5jEofJVD/xdLlNw//BXErgzPAfuR7elzpePxyfdSL4qquq2t0o5zIs/zx\nEobGEupKpLiyh1QQQ5pU7IirKUDW8991+pZMRDah6H51kRIB3A0i6GpaL1Yq\nItyocp5n1eCPxsxXKPxRtH53wWi8ReGqYV+Y8J6D3RfYqRch6PGKJySjoj2X\nnL6K\r\n=f78E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.d082790f0.0","@material/theme":"13.0.0-canary.d082790f0.0","@material/animation":"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-indicator_13.0.0-canary.d082790f0.0_1630533248099_0.5633024051487336","host":"s3://npm-registry-packages"}},"13.0.0-canary.e2c4f0196.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.e2c4f0196.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"d5e9f8ed4b6cbf05b4d10ccb3421a36769e391db","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.e2c4f0196.0.tgz","fileCount":38,"integrity":"sha512-MEHIpQDM8TRwsgBUhldORwnxv6idDTM2j/CcBz4GLLRMvojAvWZAO7cH9HO6MDg7HtuyJefwCHpvujT4RwGi5g==","signatures":[{"sig":"MEQCIH7mN1BD2ModYk5DV9C4G4wjgwIgN2JFHSFaam29FkicAiAMbiAbWmZid/fDsTTmSVjA6nPNpR4VmXo/I5JjlBbi1g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMDK3CRA9TVsSAnZWagAAXpEP/RAW4doCVa758vFAT1G9\ncUf73GPKxAkrEP7xow1Coa/HBUVdmOfFSshw5lsbLExBvPu3h68koqQ/l32z\nlDsTSGqwjcbRku9GMqyFvctZC0LZDJYHZuoD/bBMsimPVnzQj1yDS2KZVAEz\ndBKX42DT3rQ5nzxy2A+hsnB0gr7tFgcIlGoKR6ldVD9i7gtm88kcpiBZdown\nQxQMXIQGcLTxeyo9DPFy9TMtZXBVh4uKcLX+QaQ1G/d0WowOJmvpbzYYLZWQ\nVe/r6nckACDFoyY7HkjAKjCb3CvKemcglN2gnPooTe/I1lHwjDhWCsJuHxIZ\n2+KRs2CoWm4oVkp6gL/r6DFi62epRoSb+WCv3uVDc5DfB4NcEk6XOOTExyIE\nSMgr0GZRziUxF28Gq/K6y/xZx6Z2l8wggY1KpeJQTISBCGc0obtP+Ku+r1cn\nx1E1c5vvT14e5e476iiJYozQr5NFxfieg5ucM9s4F98UAbMsWOKxoI+UCMcy\nFinSGCuXM/zn/4O4JjF7tL9VnOO/ic6mpMM9QCaDSlALQgTlYYgi2/DyGwwI\nGY5B0e37l3rds2FOOASfbag59lpOko+PUCtZHWrD06N/LVgnFWTV9LRsd/Zq\njZ4GQ6QsIbQydyfcrA461ZeKPwC06fI1a3d+lLFNFrGx0cb4U4tlNedN7k6P\nkvOL\r\n=FLbo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.e2c4f0196.0","@material/theme":"13.0.0-canary.e2c4f0196.0","@material/animation":"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-indicator_13.0.0-canary.e2c4f0196.0_1630548663077_0.7192172076634191","host":"s3://npm-registry-packages"}},"13.0.0-canary.611db508e.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.611db508e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"bf2da0b0d9a23db8b97833d460fecc3e8378350e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.611db508e.0.tgz","fileCount":38,"integrity":"sha512-1x09X1la0Ki5R/3GKl4s612g6+359FD3gBVk1iy/ao/MxcX5mgbSUOe7Ad/QbJW+/d58+/a2zhQMHA28MhXoQg==","signatures":[{"sig":"MEUCIQDXqotljdt1nlRPlF5RocdoSrU1U2ovxX/qqwrCC1A74AIgH+Sr52zG5WhWVKEvNzlJvK/p//TCckyCrlkRSQEYWgg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMEGmCRA9TVsSAnZWagAAoJoQAJL1oFEReYeLnCh1z8Sl\nVsjS06Iov5pSrNjxykBCPVed1jvpswrTPenIQYOuU/Z+Rp6KbXPtFPeaDLoe\nQHc1kT6FXpNetntMN7FiZE9DTsBS+kWkfMpFuFxb8dM7MLaeNtg7htIMIsXg\nBffQ1sEEDr00BDZ3u4eKxeoytBIt+ytNlwOVxDpJvV4HOq+OUvVpbW6H3Q81\ngr+HP9ALl1tDTyriUm2LEfSAweneNWXWUwpAz6ejB8dNyGsm/j8pzB6b4U3c\nd3RbKjaiwR9iqp5VnFnKAKQWr32CZwEAn4RiRUd8JQpYpHzGzfvlnc0tBjnG\nr9xlinURikNJjersGm5TJe9ZJTQvdundudm27j7jFI0A++e3yRyb1VHdrbsL\nO7s21Qc/7FbQRvma7+z7DfLETEdjB4J7jG6hUpm1fjOY+mcWb3D4ih6tZ4Bq\nyTe8ZqV2nwY+vijvmXkXRyMEmRPN2i3mYQ79H8kc+umW1Db+7st3JkozmqF2\nNsVWhVjVuY/4ev2WSWyvjKiKpYlZtj204yU2kNfIIfrxsa+sjDmgsYCTyOQC\nZiouecFioLbRXWxNn2oXC5IG+Mge1Lebh8WBviLBcsxgpY4awiTUwVl70YXE\nyVl6OPnp9kU+GXV0Uf+P3Zc+dY0v2GpJaLp1yNxJ+2HFU+OQ4oqwjOi5jZsH\nJppD\r\n=2PUT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.611db508e.0","@material/theme":"13.0.0-canary.611db508e.0","@material/animation":"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-indicator_13.0.0-canary.611db508e.0_1630552486055_0.6545934939980871","host":"s3://npm-registry-packages"}},"13.0.0-canary.d4706933f.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.d4706933f.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"8385863d8ef9a6ce38647c63df324113f279b1cc","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.d4706933f.0.tgz","fileCount":38,"integrity":"sha512-XI6G1xktZDpHHbWl5KICnITjXW0j0HFHTCIZbLgYvp24mbYJvQyiwHsbvZSxTqjwhNzD3+7fVnPuJiad16+8tA==","signatures":[{"sig":"MEUCIQC4jtoQykR9CIhO09tkOBKbVaPowuSEYbxizNfQxLMu3gIgS+pyT+gqJf1FqLcfNICus/HCEKnCafgtdZV2QvB/YnA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMO+6CRA9TVsSAnZWagAApjcP/2ZveCIT2ILHZ8rV1bHP\ndhGN5oUaPTTe1ZPT7elWomeVKVLmS8YE58HhNFqrrtTFb7vSNRZ15HnV0YNY\nKeSe5Zl7ZPRfRiAnRH3JwPIxalrlQpTu9DlUUiDs/T/8No+6ZsO+hkP0RR8f\n9M/qNMpQxSDQDNyCc27dTzj9bmLhcVk6DXipuJSHdkdjzBBLhTLW3fASYofN\nMhEK3MDjZpWe/kKIpkpwWv3GWwItFpEpt3qPW4d1YPqvFHGKQ8BaVbk7kFJA\neJP8Kx02kLXVfHcx/HGQuRJGwoUbOB20D6R9ZUe5JNddimUypJXeHfIe8NAk\nTUKJnYW1PLyJbOQWSaYmjCUV63SAt+sChOV6Fu3opQD4KMFKbw4kwYqAdMuS\n6ZwAJHFm65mcvITStZEcQKsBstnytO6bBfPOPkGZaQUZxCCANNTtAOut/ZVS\nSH5rbXwiYywdYIaHaE/XjbWwF67EBcqu6Fwf0mvgZg3Goa9w1GSVWQDergfX\nyDYrRJSk6D58n0UEDj+TyLHflFAPjo0+vD52c4fyOYj2eWul2vN+r8Hq08LO\nUJcEJvSMscScFZxEG9LCzyPCG6MqJ16s6ZxS0LBVhH+5Cr8zyWAI0qoDQk6m\nlFNNCTNGXHUh2Tp46poqPxLS3v7LB6Na7IOn/Cd6/Sg0dhRUPLEIdW5xKozw\nLmDZ\r\n=pt6T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.d4706933f.0","@material/theme":"13.0.0-canary.d4706933f.0","@material/animation":"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-indicator_13.0.0-canary.d4706933f.0_1630597050480_0.9923860984497204","host":"s3://npm-registry-packages"}},"13.0.0-canary.c16fe03ce.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.c16fe03ce.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"fe975d207a491f0625b308640670bcdac2c1c11d","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.c16fe03ce.0.tgz","fileCount":38,"integrity":"sha512-BlI7+sJVnkiyae9nhQ6ikSqrl0tLoT2HF9OhXFvY8pmIYWojn37q/SGojnc6je+KSw4ICOztjflW0EPSAl3WZw==","signatures":[{"sig":"MEUCICsVUTw8d0AkyrFTCEjpRacnnZonC6kkzje6Zlt5vEebAiEAqbMnY9dAydvK92rDDLktZBU2ZsiKTUND9JEGKihU4oA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMQ2ACRA9TVsSAnZWagAAxl4P/2zQgBg1IeMFeUaQCTIM\n3zGWiJjNcHJq/eeOLzPXCqzZ7ZPXVGcQ8KNNVUG8bMSaAacKX+YbJOCyXEz4\nQbaRd37vn42jZIyz3F27jhjcIdH+MGLeaOUcEygnpxt/2WFk3qE0svVvAoet\nG/my9dHvix3bMVuszT7LR+QZ4wdVLpQcw9EWc8VjnRkSqae22pg8dpQ5J2hz\nco11pzIwOGGWvX6xkWgedyUIL4x9xxesGcqbno015YGgg6li9/6sTASwQank\n4Y54qf+RuJBcWwO1VOBPUOXLvkG1VWxlbUfD+xLgYuACdvpsaEmk8P4w0u+g\nTb+D98jiJrrTIkdvarV1kndaGOGYuxFV5wL6J6D2g8rcF1MYA3I+H4P7bTIv\nCa9XhXVmzynb5zDmu5sU8dXJ0lp+aUFBrw2IKw0lTP2bp2OOZE6Y3NNTNfrK\nj8aipuigIZ3m9oPBTZL7Eomq+47iA1rUub6l1u5jbUAYB4mUiWbNRjcQubPl\n8lV37PqGWTEdJW3DpESjF0CurEIlROJDDlbSTBY3aErZseAT5eiDDZqugu69\nA3hkTxu3OyPV6cLrfxrxwWo1X0O6Uvtyig2i53RL5mrc6P4iLHx4l8BpTEGR\nahIV+crgJFXestkHo2gd6eqOTNbRGh8xA2UWVuYXd1gQHtxhrS+tCS6fWXEo\n+rhR\r\n=zlPt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.c16fe03ce.0","@material/theme":"13.0.0-canary.c16fe03ce.0","@material/animation":"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-indicator_13.0.0-canary.c16fe03ce.0_1630604672377_0.5792392154702333","host":"s3://npm-registry-packages"}},"13.0.0-canary.9203a958a.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.9203a958a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"7733351030dc29beba0fc6f943c54e5b6f240043","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.9203a958a.0.tgz","fileCount":38,"integrity":"sha512-t/VBRBhY5S/vhW2OTe8gQqa/LPQR/9YLm4icEcHsnIAuv4PqD82LEmItolAZLRTFpQJlx6TtA5heJ5fnBwP63Q==","signatures":[{"sig":"MEYCIQCYlgfoiU0mzIUe3Wdkqm3o+UsbSGZf82WpU8G44+A61gIhAPgXFp7HhwbloKZ1xPSARGTI0J5tnN/aO5GaID/J+eDZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMWI3CRA9TVsSAnZWagAArBIP/2da3qVjtui+wRxZdSsj\nkFWwnpGyPyaRXc1zl/eFTSVjW8IpA9Z9Jytr/kHrP2C02QyAWFxPKbX8QHLS\ntz9V4/a+5aPmmgPJLbh+8H8mJ5mDRbwYU0P3SsmJED9BC1jplVhFCU5JoI3/\n+sozxYPWZ6lzCKU9rX4nEX/2U7mz190ULzd6V4faAZvraTWOLqYrXVEaKBh9\n6ug9Dq6aESq8c4q/jtyEHWPR3p2zBAisXcwcmFXyTQqVA1jM4IaYFsekxsD5\n78w0J2iHfbPfp2wb0hgML9fHxnt6P4cXPWoTy4HvVeP3npjEaE6DMhtKNaEy\n4vyXokKQokTJeINeyXMCJwdw3qSTVs3OZjgtOOMEGdpFgSO3Ef+ER7U6Dnhx\nZMfcxoRMuJIg9/yXtlx8JOD4PcFszrmwaTl9mK2qvzOU/SRadJ7DZ4p7I9cQ\nUl6Az9hiSG8NtL79r4IRO5L4r4eLRfsh5Ai25IZcD0wtzf+rSGBfhfvgG9qT\n3l/l8WINbtZs2avl64v2H4tIg01OlO82pHcf0G1ebtfGCyA2G73NWNYc53vg\nw7bGrWVEXndrF/O+IhD43Cy16V6tnsD0gxhmQ54KgY2n6SrfALLY5futIDqF\na0KQJhhk0tN7QjoOAfl6G0UttwZRl3AMOmqno5GrORVhyZ30vgqHW6C68ZGT\nBBaz\r\n=h5Py\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.9203a958a.0","@material/theme":"13.0.0-canary.9203a958a.0","@material/animation":"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-indicator_13.0.0-canary.9203a958a.0_1630626359358_0.025165186791161087","host":"s3://npm-registry-packages"}},"13.0.0-canary.fddd5ae93.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.fddd5ae93.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"3bf4ee0e973504f3a9e669f1b3202a371f129565","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.fddd5ae93.0.tgz","fileCount":38,"integrity":"sha512-JDzPd7+wsaPAIwm3w4xcLvCjTd5svWDOONk12lqhWcVJFv3hotTtwmDYrv8oGjShmLl5tuhtvkZJnZXfpkJHXQ==","signatures":[{"sig":"MEYCIQDyTbredx+CjAtZdNdXMQmGyO9B4neK0DnFOQAL8u1uPAIhAJtj5Be9agS3Ry7V3Hd/5P+GMMKyJHelbFdwCGh7vVob","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc7YCRA9TVsSAnZWagAALmIQAJQVnVYX0xzpvY6fSeN5\n1QiKbXIOtVsiWYLocP1ZCPYd9Cp4i2iDtG0sVhemdqVeQl71hOQq0/8ENh0K\nMbe1ey7uQiv9kDiQ3lq1GrCV25W+uuZhrpMCCtSmYM26Ka+6wHb1+uwfaVJM\nuPB8a+zaK+B1JrVjN6dBjCR9WNFubLryJ9sZA/fW0Jwm3gKwUct1dMT1sjyy\nzR/aSgULGzSGUkBrNKbPVd/JP2P2y2jmAP6lXOU6o6Js5d/UmLZbgvz8oMHh\ngSd6MS2OeTt0I8ieOwV787rSPSoSyQ6GLTHSf2BPNsb1R2HB9c1QYJQTw7jq\naHQwKQDVYhRtHlUhuURsK/LRJC8OEIT1uUWT9mcC3BIrN+kSxh3qmROxhoCY\nV+tB4nUaRL0z1IP5UsUxZYT9vNABkHwrJYp/uGNoM0D1UjG5OzBumdWGW3VM\nrhROrzB16VpIv/8g426x2KSfiuxQxnyUPiTU2LXHV6U6Ilw0jvbNJbn/JXxR\nmGhZ0MNrFVLoRf4kZLhVBVEbEVxK4FD6FNiUxZ0fFH0xzfyH5qD8PTsezhc4\ngbfrI09xO2NvCBybOvmsJn2HiC+qp4Bv7gf3cqm+UPMH6Ri6uhsw5GFOtlMn\n2jZnsiYC3imCaWqLnK9HrTnoU7lJpOXFGhQzP63cHSJkJwj3axRmzzdBxaDS\nGlK8\r\n=Oi9U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.fddd5ae93.0","@material/theme":"13.0.0-canary.fddd5ae93.0","@material/animation":"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-indicator_13.0.0-canary.fddd5ae93.0_1630654168787_0.5374853451318593","host":"s3://npm-registry-packages"}},"13.0.0-canary.117599a8b.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.117599a8b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"bba031269a49a98526c74f50f66e151ccbc64a76","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.117599a8b.0.tgz","fileCount":38,"integrity":"sha512-6Yg4IShBrP9mDt+RhYOrvKV/WGzRS17bjtnyitGxyVcRAYHnl54kepppF0SoL3ZZ/Pf59drue3LGDUVXIdqG1w==","signatures":[{"sig":"MEUCIQCnxR5CXXpPTmptQ4etyOxvY3ATL6vqbxXDMb72K4IoWgIgTDAFVYhuDzPyBOup5/8op6QEgy4LpGUoZXH2QbLVulA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc8yCRA9TVsSAnZWagAAMfQQAICSe8+wf/p/oOQfnsFb\n0AlKVNI2D0Jt/V33LKuls0OoHrA5lyDLvu2xR3IQnS4kP/sOQ0Riyv46+MKV\naB4ynOkuzldgzk0vutRHCp3CRjZfe3p0usVQgDiTT+HaRDkHvM+rwXw2Ut1N\nY9GiETK9fUPbjJcRpERDTgiG0T91pP1mFwCtr4XLpWSe5DUYJDhOnQXDIO2+\nMRPC5H3VpsIIQ9YcqVoSsbDOMZDG892h+i30MRZ8yVyNmjSCby6+JgSdQLy+\na6n03nn6c1NpsR4I7ejk1GMpwleZnSFY81LSCLAHLi4iTQal64pRCWxcfV/U\nMXnef6kM0SxQPxDN57t4Oq+KuLE/ONUioWGUPOX17auKf9EDHaptbKX61Tws\n2ups/KDQBuD0BzvFFuUmQy4JQiCykow68FJ9E9AZ6esFAbYVQXJcMeRqKmBE\nnOYfn3cZLLmyQF4J6F5EYdpNNQVPYoDkdiYJcB3ZqFOTLr21EGFi8/9f6lQJ\nT6J5SYUwwVt8MwHX2RtYdRG9M9cl1BtbXBxaGHIPMc0R8pkk7kJ2jZ88xX8M\nZ6OKbQJMn1Q1ytTbokCoF9ESfT0BoMIHxNJ+37XhDRs3IAMdsAQXyhW4g9dd\nuq2rx8BRVl3zRaDiglAF4mD1h+glktZ21Nwb3AFl/XNUtvxJbtnkX4c3BMF9\nbBLF\r\n=UrUA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.117599a8b.0","@material/theme":"13.0.0-canary.117599a8b.0","@material/animation":"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-indicator_13.0.0-canary.117599a8b.0_1630654258473_0.03941972134048588","host":"s3://npm-registry-packages"}},"13.0.0-canary.e4180d07b.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.e4180d07b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"5330d1b564458ce11f1e55b2e4618e3818393960","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.e4180d07b.0.tgz","fileCount":38,"integrity":"sha512-Vlph4vjtrg/o/P+QpuCwMB6WbexEZY6jFrAPYRjZOTGIzPGLtJPKKO1lG/AmcALRE7pjx1Mj6P5mbpdCdvCibQ==","signatures":[{"sig":"MEUCIACZw3p7cRAooDMpNF/+UzexU3abMsepP20BHngqH2pfAiEA/EOp4oVi/bRG3GcfxbEgW1LNJzx0a0Gs+uZKT1cihAk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc9PCRA9TVsSAnZWagAAcrAP/jLYbygxrVxZjKKjcv5B\nwg4DbHWhn/piqNqFZt5HXpDmk/mZdjE2agWvR0uup510s/b7l9T3/K+RdPMS\n7ecvsbqwe3zzhQ/w0zXQpgfged5HM/Y3O13Kb2c4tcenDM+rTWFvUoZ11JnP\ncWKe3KfcC3Y9MlShlbkFN36D4pN4YHhEXzW3sFuCl6Oj9+hrF9nCNoNIPTh5\noTeqi6yd5YEBkRCXNf9Dqji4pX7A1MPqMCUZTflVXCD9m9YLThAH3s+wvC9H\nDp4gyhQC3GxOnWeSqGYMCmGvrtsQT4LVE1+UzRxj/TCG+OxLbygdaighzOvX\nLZCaWnca3TAF5ABc+d6Gj9v/HrAcGYJUg3zttqC52pr1oaO8SFi7RjOEYlDX\nZUG4uJoHrUfoeI0EK2RT+jNNhSzbgdaUKSU3JGvWA2hKdm6OKwKwvwpDYwjQ\nhlCjHY9msi9h7hSEEm4l9CRDz/ODQZVXGT8j3nl6eLoFLueScO3IF10hPc/d\nnLUQngQ0BBDCuavy1nsZtlRUfkfyGvILLaURsUmm/+xGPRfxTCQ5dqZpDgQF\nEyEMssWUSanatlsCEapEWohUTJmGUIezTSiWSKaEKiIt1KsnNcC6xI2Vz+qq\neVxleoBj4VOmG/dDuSG6zueYiIgOB7Ah+NYt5/UfAUQVWx3zX3kgEM8Dl4Vm\n/UfX\r\n=OXem\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.e4180d07b.0","@material/theme":"13.0.0-canary.e4180d07b.0","@material/animation":"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-indicator_13.0.0-canary.e4180d07b.0_1630654287341_0.5887094614708146","host":"s3://npm-registry-packages"}},"13.0.0-canary.42d175efc.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.42d175efc.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"5a2df78c5cca9f36e117b3eedf658ed8582931f1","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.42d175efc.0.tgz","fileCount":38,"integrity":"sha512-3oc4fHtY0R+qkEl0pYwliCZ7TBu6OZrWoHpLv7IVfVWCJO8btAFrCHL3p6z01HT3SJAdEFHAPFGa1WDqlY8FdA==","signatures":[{"sig":"MEQCIB49meosZfkoLXGzFwZPduCNhGVD/Ifp27fbxDWbGtk3AiA1Fary/sKmg7hJ9FM1sg3ihc3J0LZDa4c9nGehQFMB/Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMkJhCRA9TVsSAnZWagAAYvUQAJdE88Ca1vh+jCk+XKIl\n4hq5PmUt+7Zlyc/P+dVDpuIkTm0rh1tS3Bswh3p4X5eRt1V5a4cwmh8B/5YY\nOZhX0hnwdzGVjfMY/JFb5XGhJHrxNnxtotbZ+ugXXb5jmARRin7N3C8bj2Ol\nYhKj3kozPAGj3eU1QyodgvKE+znauvXPznTZ089PTVIcBPARwkJeMys5Vm6a\nFdDGp0BPYTkwNsOcRtwAMSZcVl+rQJDABd3LjJE7da7IO+bG+cT/pyRNxoBU\nMuPGny/P9T3yQbKifMPkbv3Ss4SLRPw2/BvX9lGd02dxTVInpQfnQkDoGQ9n\nrIMCYzHSk31KunoVkizwQMymYoIIzlbooEM4n+5l/ZEIj8HnGa0cAEEjX+lG\nk66VrWqSWtVYZqeAmPKvBYYsz2tFRp0gR339ZsRbR6nbsvq44gdKOfqC9l1Z\ni6WafUOBd93TUrDoTqXUekfyDXeOA7ghxnMlUc80WETYV8IN050zWIznmwrP\nt3mS0oBw0XmsTb+gq6Q6SKPlAx6xjO0oaCzp5SITM0GQh6rs9abeUn0uxZ+P\n+k6mZe/KPmsTgWOOISeZHVIw5QKIUJWacfencPQDb5uLFfQpl6M5/mrSb02d\nMnVhvyx4vlRDi0MwfRbixu/gTJIspZIxU89euMM9fP0Uko/nc1VbMdULvgBz\ngC5b\r\n=FS6u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.42d175efc.0","@material/theme":"13.0.0-canary.42d175efc.0","@material/animation":"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-indicator_13.0.0-canary.42d175efc.0_1630683745661_0.9408257411608292","host":"s3://npm-registry-packages"}},"13.0.0-canary.72464476c.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.72464476c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"7ecbb6f51bf14c2e8f707cc812639256ff64961f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.72464476c.0.tgz","fileCount":38,"integrity":"sha512-4HCkmhFZxEjFbZTWK3t4QMAoyd/BkuvSjNeQYBCNFJU8dyP9WZ+CC8BG/6NiCsq9AUPAF8ZVcpTP0cKJlMkdWg==","signatures":[{"sig":"MEUCIQC6rakgopD/t8H0rMu5noEvY3gsUTSUgBWr68VX3bTRkAIgIw1Ya+LwstXeFu1Yq0OhPLV2dB1rjHNYEG8Z3Um7BAk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN4ZYCRA9TVsSAnZWagAAk/MP/AnkT3IgX8vkwnxHpx92\nw1siSxSyzXcheYHl89jXxf5kSrgxnOj/IhvyzZUmU1sa2P46nFZDLTHkQBau\n/qDBW5DKQFLennTqsMRUuI5MKJ+DeAJuCmAJMAOBNppyDMVEjvHR8lwa5SR3\nWLw07oSoXAGwJP5lvWZmnU+6aMSW0xEr6uymTKX2cuQSdk591u2rFLwJ3tmh\nDVSJYr/8hWqmSwEVNDydcd9X9O0KftYUA9cDdHFDIZ0tzfdaTc21ZCuT3/Fc\npTD/rYgUIF8jDEOdc0DrZM0Paz8nM5Mrba/FJNvC18H8aODue6aUh01FcsEE\naFWytQ1mcB5lK+E2RcVHXqdjVgSnI+gJBdFLdbsrzd9Irr6aXKALvQb3QHG6\noFUUdSCamQPdNsfpvHQVg660BiVq0INJB4IxiG92CJCoHwZho35zA9kPzxjT\namqo/cDpU8pBYUSykYYGXkwG1wpwVBFE4hG9AmxC3B6DK16hRjKudw+KK/81\nWcJL2j14Z2jtIwzUu1MDxyL7UOb9vwbfpT/dfh2nxYDQgwaoX2Q0SEGAbTNX\nn2nQzZXsg4w6mrk52seXEbqQB+l/M3WcyJ8dP0NQEQVYCNUkV0iehk30BhY7\n6eOkmCHUlanNpyUuU8osUhSwa7xrDoKF0KWY8Xc6jbdbjnvgVh7FnYbE7mAp\nbbU6\r\n=HxY2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.72464476c.0","@material/theme":"13.0.0-canary.72464476c.0","@material/animation":"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-indicator_13.0.0-canary.72464476c.0_1631028824039_0.8925719392380453","host":"s3://npm-registry-packages"}},"13.0.0-canary.37d4db866.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.37d4db866.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"8d9898dab0ca302c2390c16d34f6d1e0301c8318","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.37d4db866.0.tgz","fileCount":38,"integrity":"sha512-2RKlrH+jET1DMUoWg7jjarhKV9BtC2y5n6ONSeOXoIppkmYWfb1L8D0WFKNpd6bkio+51lWOWre5OsdhmaYpeA==","signatures":[{"sig":"MEUCIQCTq9WwQ5NGGxS3YA2UGXft0Izo+38TaaRiXJR21nIZTAIgL2IAqu3634f1KuMFMXmTcZJFUw4IihkP5o01BUjaTjI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOhsYCRA9TVsSAnZWagAAwasP/RpRBI39VHaxarppFjsb\nJlaPyt/43r7bpLCulDogG9zlrY5NHyZBgWhVsCPStvjOa+cTF8bbPUboyolP\nalNGvydMYuKvSrDFmrv+ijo9JU/CFct+ydexfAiV5xoZxJvrXm3mzrQl9+Sj\nojihaeUidgSlwrMsPzHtZAAeW5/O9JH+I92gd/hM4lv7En0iGdropTuSWPp7\n2tGhCSuWE+6BT4GwzyAFYyj/vJi4OhHQioiBdjbHjOGUcYuFtMuZ+P2W/ofW\nm4Z0Keu3CTroNX6xhahiolESUIO/xYVKaPlwS4fxZEhBrOMcBDUN7A3apWJE\npaA3i5Vney9Ch0/8uRZqCTfGYOR8lFBy2q/LOG55TMEGFnOsvBFn2MTNaoFz\nroxE2M1yNKpOxQyZozPbEiWDJzcl1nHy3zHrcd7Pmyz2zHFyuaNwD4kHrl61\nrH+xCpVQPmhDya3NqMC3aV/RrsCHXEAN8L3WE52NAYD1JFNyWtIM9lrpH3vk\ndZNrJteaN3CYlO2tYduqp2rEvCLSDhFM/04vfP+Fw3NzOOTJy3Z1ttEqycX9\nWLQNUCU7I/epEQl36CPZq6Xwxm7GI7yT+xZbfL/DlBHX1wYnh4SlIS2/mE3p\nmGJK8cxEzNHL95KnAUW5WMr+nMd35wwDJLhl96uhQ1p5jbl5SPcGjcK11utJ\njb+w\r\n=87/E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.37d4db866.0","@material/theme":"13.0.0-canary.37d4db866.0","@material/animation":"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-indicator_13.0.0-canary.37d4db866.0_1631197976847_0.5191926686279407","host":"s3://npm-registry-packages"}},"13.0.0-canary.6df682e74.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.6df682e74.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"7f0e99391754405c1f0fce6a131212b8b9a746f7","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.6df682e74.0.tgz","fileCount":38,"integrity":"sha512-WK22zc21LFCMqsI1vfDDWMr8OlQvgEbUZNKD4wVmDyG/kuOZo5Hu3i/cDWspOk5ipMfuZSsNOysNLybMknGLAQ==","signatures":[{"sig":"MEYCIQDjUzzKiPk0a14WoVAXwDnpfM4AFbBmzByyvsCD5itbzAIhAK5V+JTtMKdr8OGaB3F68Vc+kYcqANRmZn8UsqGpVHhB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOit0CRA9TVsSAnZWagAAmu8P/3cvP09mrHZnEoiqnJfM\nj6kbz6h4kqSNHwio6MUscgUgNKQ40RcCdzRJJkrMewpLMFkKUSTansE/pZJN\noGLr/ifH2HcOKVmPVZNKSjHWlBiwChzmG9H16/rLguGOsmxcFX5D3SBdUkz2\nRa1U1BxGp3o3DDpE3q8w7s4c6pVjmeUoRClAFzC77Vbv3py2hsFOqJdH+25g\nCgmgrNRGnKqtwL3/lO9SQzAe+8SRMNd5X+1wzNdz1EYftjcXmXGByzb9WHK8\n7/c7YQuy7P6HJKYGAJX8XiqB6PTCoyBHGQe8NC8J26C71cv7BzlMJmkE72oj\nAiDukqTYiyzCkteQq83hAVID9knfZwHC3qKkFyxn6yVscCHPiNNHmkRXHVVi\n0YhfsALhDVeCxEvdoPsV6K2AkcQRAeResOLJJwUatDBG7ixjIM/6jGqli86i\nfd8Vo/7N5fjRVf4H0Cc9enNez01tSqXd+RPyV8H4250MTSyB1UxO1nsp7Vb5\n4Fn2TQQI5wc9m82A9GupZM8A+qRAtUj6iDvrjevUohPme5Oi4zDGaJKSBK68\neEcNVarLinh6Grn6l9nRzttXRyH2n4Mihx0T2d7ZaFVnJcwNvzAJx+Q7B39q\nWezg0EvuNo8H2fVsozSBBLL4yFraeU8O79xJTB9c2cd10K8BvtRrlGyzvd1Y\nwE50\r\n=uD8G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.6df682e74.0","@material/theme":"13.0.0-canary.6df682e74.0","@material/animation":"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-indicator_13.0.0-canary.6df682e74.0_1631202164275_0.08236798108286947","host":"s3://npm-registry-packages"}},"13.0.0-canary.b49359c35.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.b49359c35.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"dd5549b65a1120b78759e9b999c4666a739075a7","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.b49359c35.0.tgz","fileCount":38,"integrity":"sha512-inD7PEuw9bxals0lseh6iiWrqecqfFpOBEUjfL8a6MpyqcpVBG/qv57YNyitX6H1SKnFG331ZyZdjwDdhHwBuw==","signatures":[{"sig":"MEUCIBQ5e26LLSeTxptpN5urNq+N2sIUVf81w5CQXdBSsHeFAiEA6oxO7RnpDj2uj0N8RbpLpfXomZ/MRmuT0K/kamCzoGc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOkXHCRA9TVsSAnZWagAAo8cQAI0azX7gZ3fUtp5ZgAKa\nedhXqX9QSPdJcaE7ZRKM4fxX/1J+FtruQg8EzsuGDfLnvl/oMjfSLTibxVFE\n4oAsfeiaagilYSuapxWvSUU0HonxYsOkSdgpiPVKYX3KAgmpEVvd3gZQPpIU\nsRrmpcP49f6yyA79cog+p6X1s9oBoPmp+mr1jOjGbMxqd063FMI3geLwH/PG\np1rKRJnpeiw8bvtODtp+oMv3lp/bh5+mcUPKLHtiBJrlm33zGx/0NpFGyK1U\nVI6Fwkv/9bKq7oxgU0hP0v13ZebqgwlZ3h5AH36xaNwvyOboHetxTP6C7S0j\niiuJRUz29Xaiff2ovcpnU5q+jAbEUEHvOioGjZotq/8oTVKamZwJVaMDfBaP\niGbEIVF0ujGt4OUQyUZBgsEmT/LIC5zzJ1CdSaixTSsjaUe9pGqRAStbLqh3\n7VJ1/U/iCUtOXXxN+XTJ8uv4D1v3L3xwTeRFbUGF+g5G8E6LnVgKQQ9270cc\nW+FW7r+g/90CGu6iJIJQi62KMUk+ep7cgmR9PWsBhgOp8kfV3574Brwprjyd\nUjaCCn8i6P49w+TKxV8MT1DR7zO4HopxJ4PXEDEQYOxnQu8HswLKQKU2jmsk\nayQlSDqwRio9TaF7Zg5FobozfQVFoGjEOWmZ6Uy6f7ymB01XhIrPEzzJBHF3\nA4Pb\r\n=IihI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.b49359c35.0","@material/theme":"13.0.0-canary.b49359c35.0","@material/animation":"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-indicator_13.0.0-canary.b49359c35.0_1631208903579_0.5680705969141902","host":"s3://npm-registry-packages"}},"13.0.0-canary.470bd34e8.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.470bd34e8.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"a592f39985eba3d367ebbe7827498743354d814f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.470bd34e8.0.tgz","fileCount":38,"integrity":"sha512-OmjKx5miOL4AgKOYYGI7GQyxO1NQLIM+XratjfrNv4xKDeYhc95L1AaOH/G9L+KW7j18gY+dBjkviYprFdJtTQ==","signatures":[{"sig":"MEYCIQCxOHxJ23AlYoHN2QWBye4lGAG9P97MXNIUZ7H5ZzrXbgIhAILA8e4LEkH5v2R8y0dNOd1JL/yhfmHxC7khjYhYAHND","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOkvCCRA9TVsSAnZWagAAbu8P+gJuFpw53i/T+1fE+DGD\nAnokcUYYVig4LXIWhgaPA1PmAazXuCqIQO8nCIoR6T7tR/BXMExKgAsxTBIV\nmuIjjTyHd22DwQHzbey5ZDAoJxhQv/JL00AWJbt3epLZNaXzTogd2SmSwq3S\nqHygiEFmtf3grWifoTg7ekCZMedvsvJcAgaAOITOIrE0uzxIedZKagP4mcJt\nF/oA0XHcow9IE2jfALsU/SxlQ7DYOhtNHa8MZRjVt757A6JS9abE89DuaBMH\nCLbCx7bDlBkZEWthYFVr+zdjhbIZMg3UZpnoYH8jL3R9fvNRAd7hGkKd+5/Z\ncy/DuByd/7/MJxHSJ5Bek/StLrTa0TPS7CWRehiwKHjFJbS9fQ9hMk8mI+yf\n39TffYnVMib38Sux2wg8vGhc93WitykquZkbrQh+zGWhw5hE99kolpHslG9q\nKncuA/TPNEp+kbyZazL22/vta1qqZD1ThtY5n/huFwwu05Fr1rdrNiDb2eqH\nmbcZQ8ic8FpplwEGtC5F3jeQ4dKQX/Al3OJrQaT7HzMJ+xy/P9FbFn5Bgj7r\nNYLjLDPwkNReoWPtVRw07OeDWVrGYZ15rTCHj6bATUkfCgRLWp5xLXt7+Kw4\nUm26Ys+2C+IbAEcKkwi9afxRRgcP2Wsv8A/mE2BMVJNTNpMpQoVJX8Z1IcxR\nrZYy\r\n=5Q3q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.470bd34e8.0","@material/theme":"13.0.0-canary.470bd34e8.0","@material/animation":"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-indicator_13.0.0-canary.470bd34e8.0_1631210434733_0.5316551696195346","host":"s3://npm-registry-packages"}},"13.0.0-canary.d48a01771.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.d48a01771.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"8ccc1884116e8507f7be67cd09f074b417469687","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.d48a01771.0.tgz","fileCount":38,"integrity":"sha512-asAy6YlxbJSC+GUe/K2d4L7wc5t/WVFDwkPBPn0QeinPBPbJ4L5L5J8p9DIn4D/MyC7GuJxY9CYXBxCTQ7eCeA==","signatures":[{"sig":"MEYCIQCxrb2DOsUaDvekB0+3jAcLzyjTtUPQq7iJLiJbv4gikQIhAPlM5OkhfIFhhrX1yffFz/AfxE6UKyE7stO29KiQSFMz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOk3xCRA9TVsSAnZWagAAO+oP/j1JRLQmaE15oW05YhiZ\n/2wm9JV2IIxRxvqIBXmOvx5wC85rVJq9tGlsoxUKVMfQ+k401CF3+5sWOQuG\nCAgFPP+nmiyHbWlJ7rx9miPb4lI1gWk8ymfHEuba06iB7p+L/4Q+KQO5FRWy\n8KjyjpHf1uR66XbdaKVRMbtt1FmRLeijp6bAF5Z5wwkhItiag53n3Xatpuh2\nijl9Vp0uFYhLZczqayVulUL9AgEoQEbtg3GZZrbAk056StPb3E5Ot+CEG536\nqDSbuFBFsehOHQG5ZyAbD0GZIhiQJFn6P2caOMdrotNGjumm7SxfhjKJYNdx\nvYatMP16urouIctRKXn3zKSlMrw4Fbs++eMy5je0l16Cy944dloULnLW94pF\n5YSbmUmkOoeNrvFkjAOSsZq5MoJRNgq0tBN/hCe2lY+jSgyk4oqV23eJrtKx\n/mXUwtIzMGJMKZ3oKfyiuwZFSWnfrycuWE4Ag74/1jzEzMocClpCWdk9cOiZ\nO63o+1mvDYhMs+Eo6d5z/n/iruKaD0LkOIYZpC1d8WFEogMiEVQuAMM9oiRu\nae5zkGE9sqR3LL2/yIaOK4fiPL2aQtO98X8MRsDDTxoyA7INbG48URzcnHHz\nu4AfRua42UHFb4Lm6McA/cHXDYIikJkHR0/uvmqZIs7Me02fvC/w25VySOd1\nvqeJ\r\n=4964\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.d48a01771.0","@material/theme":"13.0.0-canary.d48a01771.0","@material/animation":"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-indicator_13.0.0-canary.d48a01771.0_1631210993177_0.14382959424978536","host":"s3://npm-registry-packages"}},"13.0.0-canary.13db34b34.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.13db34b34.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"eea0986fa979f2fb24c1a4b91e93bc035396938d","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.13db34b34.0.tgz","fileCount":38,"integrity":"sha512-JVEg2oLCcg4B/4gV20Pgm6XeLUGAqXXiF6dcPXe3ViOboUWomsSWz9iuo/GliONvTbTkIKR6VlG8JqCeS5dGUg==","signatures":[{"sig":"MEUCICZmPuYdHi6hkGYPWDQvha7htZRmK4Y5n3Frpv0qJwWMAiEAux+5zussGWi7+/mmeDNDMBIOoLwKCYrxRqcn4slL3ig=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOlF0CRA9TVsSAnZWagAAXfYP+wTKFT1T5Kl6iaRCTXTu\n6I2ZJxGPGLU6vb6jXFuC8m6sVzXXBMR2nKsUxWAcGn63u5Dmr70e0k4qmRQW\nIS73Ae73jL5a/PRsQHOOCmI3ytyMeqvGy6jhM+XjmcANheGtXwO1lOCKBLA3\nYhtRSXXbn78E20cOUmcqKVEqpiIM9UtqPLmWlSq3+LtkGMUCCpQpV5jfrSpz\njFXSTkOGCLiJeibVSRLXQ2ANBxcsodSDoWWTWeEIpnKbZ86jz+9afAjsP78i\n8wHnBMuhcFBGg6eL1kSiR7zcnCCzov81iILjpITplHizRcO36aYURWXpJw8A\nxVyKHQ70h6jvNfiflLwFSFoHaWJfebIgWZXdzbu2zC9fGabUUiXbQfskDKLx\np4Hwx0HvWmJ6wRGn/pzF9TQHK3CBmALTQUvfNxbV+SYRFwLYsgCdXwJEiS5L\no4g9mJUBgWPcvFbi7T5aNSlP3j3RzlxnsT1WtyyqZxMNaVd+E07YcowPWPQk\ncvuo/fmn7Lfuq6p0orXCrTBOHNM0aXGKuowDy+TVh4t3FYszE3azwCxcmARb\n5iPALjkxop8xD7EMKEiOwT+ptU55rU+pwxQ+zQrj1rxjdMwswL9pyEfJ79Ik\n0HpFjK4bv6Pam3m5asvTELvkz87DWV4sakOsspU0f5ATtSTEenJRvrTKiCtY\n0gIs\r\n=L6tD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.13db34b34.0","@material/theme":"13.0.0-canary.13db34b34.0","@material/animation":"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-indicator_13.0.0-canary.13db34b34.0_1631211892101_0.631101388158728","host":"s3://npm-registry-packages"}},"13.0.0-canary.864798678.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.864798678.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"88b99cb71973e430a5b975d68898c4c3b5c300a5","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.864798678.0.tgz","fileCount":38,"integrity":"sha512-X8ZMSrw89r6FpC6NIqNPdLLg9hmP4JUq77y5w0uYvBV8wlqESKKEKdVwjqcay4aSVMhnkaDt3sncWqEP9jR8IA==","signatures":[{"sig":"MEYCIQCAGBegNa5WUDXb0QIIg6rLNZU5dADqSC0AJ6l3DNh7dgIhAKj8FX2Z+jpFwl6IbTKvsfpQjdHfQG0pq1Vmsq+o6jeU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOlQhCRA9TVsSAnZWagAAfdwP/AsBofvJOp9rlRbxUBPm\n/F75oqXJs9egVYWzvE3motyC2ZXdCBBVNrOScYWy9Jxaz8El/SWl99OrLsl1\nOUPged5omwfAbSOmLckfyfvhgW2Hk1/MHTCf+lcwbFXp531SzBBvlDkwS8xt\nsUaQArxe0V2wbKZR/DCdj9d8NJ17iPO8wz5GfTYedpflt/WDd99VjScYKLXg\nNHXZ+wMjYOy5T81ZEDaG7h4oX0t4aXk/3ubOzUf/hrFNjr5U15EyDXLxB7Bj\nTNWbQpulIaIBx0xhXVttGHAbnSpEiAYXz5diVBtpbu/wMlf1yeXp6GatPSCm\nc+jw1fhluOydMIO1M3qDuxv0yc9MQXqexvd3V+FLzNv3TLNlTT1zxch+Ci5r\n23GKLfYqLIrRI/C62FLgLi88xOqCEYzv7OAsq23oxgMRdtoudxotFMUEE24t\nLbYQj3K9tvGhO4L6oqyxRTncOm+PhHg+qkKfDfVg0He6xmzR5nVUSRQtlMMx\nWJy0vkIspQ97Qj0+z1+tZTxr6eEc900RzfzV//nSzchupXBiuY67jLQm11sC\n57BilaK3xU05fqsYUJzf4uKqF8zziHSWnh8EabVR9Z5Qqq+EUu7FDW/W7UHt\nmt54Y0wQjiSKP5Sc3U5DivvUj8u2FvuZX5zAyeSyiodb7w/TDTSX/Nbc+ydk\n4FhI\r\n=+oL3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.864798678.0","@material/theme":"13.0.0-canary.864798678.0","@material/animation":"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-indicator_13.0.0-canary.864798678.0_1631212577549_0.2697868923588975","host":"s3://npm-registry-packages"}},"13.0.0-canary.d04bda3fb.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.d04bda3fb.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"cc1f07bb0da9fa80064df3a279dffd1b6ed63bef","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.d04bda3fb.0.tgz","fileCount":38,"integrity":"sha512-bSg/FpwAAhPmOm/dtEfWoSGz5HIq2vga4mnew31wti/g6Lly+WW9BrdU+0czf5dimHKz8IyI1e+952k/397dtQ==","signatures":[{"sig":"MEUCIQDKye9rC1Cio6Yuqw/YjAVs6ff0RI5LrGn6IteAg6vifQIgBjesrrbpcTrk+lPtOBFHoh3geivlQXKBO4a5zdPX5Vs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhO3ffCRA9TVsSAnZWagAAtKMP/jNhjUE6No1LH5WUF5aJ\nx2xKlPaOOBTxSotRrQkYf/ics2AZTVcu2MIoFosk54E2g9RK6ygMCEubqk+M\nEBgthyalgMPSGmPjzv1KLwumFouuXkcLP9CIawjmk2pVrElnASpfVhn/nmln\nj8LZ2mtRD/bkLz/fMx0ctBFHPghR2xPVpEtmLuC8dlMdLcTayv/ZxfRUzwSX\nNXXzaDK++XfG+voCz/6GRbhQfEZYvhdgAUiCjZss1b7qy5ZlfKlgy/zutBHH\nNk6SxPIuqkMGZ2ADQ6+3wC092L+2zyvR74/uvNtwnkaQTp4DANHHzOpz6kAV\nq1OajNyJP/qZQKjf3Gq3qgg7bbrb5bdBdhu7tTfpbTtUC/bMW2JjMgySVwc+\ncfxdcYuOMG3UAP4k7U/1ktJLPntVLas0QJDRbgTWEGIaPWyO/Hqu7PghZT9s\nqIbZ8qtOI8jHb8Us8pmq709n7lx6VpYFnAofjqiunYdVpEXyj+VQ8/Hs2cAE\nJoivDkAYjO5i0iG+/D0YvDrPA+PTcksR+cm71hPj4S3fDIM6Cpzr+7oax4QC\nqt/8VtuuU0EKGa17tsxeUmNfDhh1z5ctF/0aJu/tyu9c/y5+XG/flIE5Zy1Q\n7lZXxfUkeNDEdwPlvzAVbYDEPKZBvUPWsNQeazXOVo4jOB+JPVYLLClZzDqz\nY9Jz\r\n=RQsq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.d04bda3fb.0","@material/theme":"13.0.0-canary.d04bda3fb.0","@material/animation":"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-indicator_13.0.0-canary.d04bda3fb.0_1631287263045_0.22824901484701532","host":"s3://npm-registry-packages"}},"13.0.0-canary.5533f73d3.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.5533f73d3.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"62a7aca7c8e148d2aa190fb4d5e41d4328c719e6","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.5533f73d3.0.tgz","fileCount":38,"integrity":"sha512-VJqN6JfjNSg/Kng3lN1GdFqgTrTmKe91S+ScZfBq6WyykcAQQKVIu68D2XigyB5hwlt3FLUquGnbxD4UQXm4pg==","signatures":[{"sig":"MEUCIGaWSL84rgmDt8ft4RFXHrT24i4FKRYjqtoeMCiciAPZAiEAod1IeK9LRFg8HLIvEYKlSC+C6KY3a7SzffRBJxUXAvI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP9ivCRA9TVsSAnZWagAAvq8P+wf5hoJvPwF+aEGmRyq0\nhO51l6UScBSKudjeOpU04e0yaPZGJMdqE8HQ4nv/WE8A7qnBVZV+xrHaGWg4\nmI8UMUtpCfp1UYCigPRrheVBAr5MPPqvAPZ73qHsSTBYbgB+YsYL/NvFKuyg\n7yyuPrCK0BoiJ78Abf70PD7rtd4wfEuKdVpkNIX/O/UdqUtrLLuC06+143Tz\n6RpRY1N6Aea+pX45o3Z43yTPdG+mowlWpubK3BosXzyA+QYfJ+sUlWgaTsI7\nM8OsF9QMO2v8f2J3d+dzU9s/LAWEZJK8In0GI3RKezTO7IGLx8TBYXdWHgkT\nLMnAZAlGYb2stor0T+fpjLXLbnk8cV5O8E+w1hOVJShh2BRhqW041sUuaumv\n7x5YbrvG/p5KvZRV7ssLzqcRTq7kusUH6/HeoVa9mz4V112EcP4W/nZr73Bd\nNuasb5t2ADVjf1PgUKnEGXNSFUaJWcF/xcxUYz/qeA0gKT+HA58gtg7kGmfi\nT39yDtWj6R+4115GPsNQ5JpB6a96oFvnZCVg1sYY8F6U70Qx7y2BChxf+Vla\ng5vG2+AUK+Yn0mXqfo9SxV3CklOKHqs2DurTeR0oxWYLQSROICK39gwt0w/z\nnGeDGX4PnHZ9bUq/HHVq0mMuEafNtV+WxVHRH9U+2zrkDgOvRz+ms+IUDFwt\nb4Ae\r\n=nocE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.5533f73d3.0","@material/theme":"13.0.0-canary.5533f73d3.0","@material/animation":"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-indicator_13.0.0-canary.5533f73d3.0_1631574191043_0.30078811003215566","host":"s3://npm-registry-packages"}},"13.0.0-canary.08398f880.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.08398f880.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"537b189b83a6c47c68fb2c40cfaa060f74a700af","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.08398f880.0.tgz","fileCount":38,"integrity":"sha512-ckQqSlmnYDUJg2+gThTh4f4H+5irxk9SfoAyHVBmo5ph5IGT4Z3eiRlWF510eMLqQeod+9yar0ve1SAFSixk1w==","signatures":[{"sig":"MEUCIFCYKT9l8sNzMaS3ZhLvH7op7Dk/bG+UF8Ykw+pPLwpAAiEA+HshvOGJ3uIZGPGxZCtJbFhLibUYTvNDgkUQl0T9tEk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP9/gCRA9TVsSAnZWagAAjeQP/0Jo2cmrD+3OiClT8/Tz\n3XksAq14H4VBs0/PjiKHOUcCtQVIyb6n51RiRncIQ+jz21z8oRSO5AI0XoNt\n49yuuZWveyCK2jWbqnOAh2k17t/nzOl+luI3u7C5jTEfD/msqCsBpgUIkaUH\nYEsUcODoRdARh5hZeWbk09NOP85KBTmngnybDSPN4JEbAtMgSAK6EFfBSsD/\n9ni7bv1qGup22qQ6UcEzgBdxf/wt7x7WDnr0CkWYYcnaoDucF8+Q96B15y8A\np8hom7Y5uOSlvAGa0GXr4SRqq6o5f2caydaF1btlHlsIjoZSD3AkGE5sHq12\nFcaX5sCq1gXPJ0FkbM7aWl3ZhXFcg/1eX0aF4WCUAeB3vFxBUgS1azOb1n+Z\nOkrBZhsI7ailRt97/2hFLzfanIj1ZU6yS9xWvfZP+vZ41KK2hi/32mFBWQRu\nDmecOFh2A0ulwbGI1TZymCNlmAuoNX4z1SDTSsE1dZrNRj2Fr1Eaz/nzFcFE\nwQ5F8ib5uf5tUSUrfO7Qo88L9jkNMb3JgwA9FRvr2sz+rzcU4p7VZJIcmOqu\nQo/stu3Tgh/LTBePbL3Zgd/E5iW66Cb0FmhPXee1oAbBHyA/ma8MW5pCEZ2d\nNCyGRH/eVdGvsbXAX6eUDrd+SR57JKjSCJDs0EwR/OvQVnPSHFPt/TZGx5Os\nC70Q\r\n=Gg1K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.08398f880.0","@material/theme":"13.0.0-canary.08398f880.0","@material/animation":"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-indicator_13.0.0-canary.08398f880.0_1631576032171_0.12771325526985455","host":"s3://npm-registry-packages"}},"13.0.0-canary.818f4ee93.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.818f4ee93.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"80100bc94f94f02cefd9dd0e3894af7aa8e018f5","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.818f4ee93.0.tgz","fileCount":38,"integrity":"sha512-O9iDYJe3sJYCVeHl5iXLu7c3fcEnHHipOCFUSLbjYfiMC6kQyygGbAo2Mcjtnc7ArD/NyqEDGoDtqbEG8FupDQ==","signatures":[{"sig":"MEUCIQCWsftRYeaHergDn9JPA2L2/fUT93mfYz+eqm+pYL5xQwIgFWcXHPqXHrFeiIEkObVYcP+svCYAs/uHX0HQN6omKpk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQjI7CRA9TVsSAnZWagAASSMP/01rEGRmlBKdX0HMHxBG\n21xmgJiuFzmpHig8yIibwx/v1a8tBs3KbWG8NgHeTNHhrRK56bhAQOakIKrc\n2+Ab2AB0cJbOhGOcbJeAxEsebWL4DeLruYmp9J3HCA/cxdm2Ot9t+MkBKgMM\nOjLWrLqLzs//O0EwOACel3sNMABYy2NRYhurJyVwLaWZ9GoZOeLLzvA2fsrz\nQbiKmPXouTS1CCtT35sjQUV8hgsS+tXDWMjXJNS6vki16gRJzdffeQHRtF0v\nUtH+OyoGcUhI+PwuXxGa0cxkS+jLyY4bAsGFhNg9wIxjvQc/bJzJbtgCkxXy\nmMUbAdvZnOsxpgMR6p/KsDWSvnS6fx7to++Ot7cTMzU/dFGM48erfu6RObKH\nIucDla8vVj9dTI9ImQ2htGwdtuvsmGgpQ9l6rz7+Ap7LCLkSz9qzPJWvl3nk\nnnNpIrWYb4GcPyWmdBLUKzDEZkslFHz0WZ08Efl0LyfjuRKJxX2Rp8FcWLrL\naWkIfJNcOvDyXQohTh9aPpildGXPkciBXpxCMkNlPFmXy50c7kPSWzpgGnvD\npFF3H0b/rpCHdHV7FuOO47ZfIzWRrAlSbEInmTIOQXrKH8xUoI8xFYFFBzqo\nTNgLkvlnuAaZqh9oJ7xBrb/6cdq5t5hOtgUFWyUOXfUIrkmpk3kYEPr2tYaP\nc8Pq\r\n=Gof/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.818f4ee93.0","@material/theme":"13.0.0-canary.818f4ee93.0","@material/animation":"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-indicator_13.0.0-canary.818f4ee93.0_1631728187623_0.4637726165848466","host":"s3://npm-registry-packages"}},"13.0.0-canary.8355e14dc.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.8355e14dc.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e7ffdec09527dffe2fc19d82632f28d4e502762b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.8355e14dc.0.tgz","fileCount":38,"integrity":"sha512-iXehGJ6/BkZ+jkJVqUovc1RzyJyVQrh2sUOgIHZWILAhiH6PmwAbZOQG3uNIG6hdvs7rj/DQO+b5qNo+hLBT/w==","signatures":[{"sig":"MEUCIQDjNYToOxDzw3vD9wWZxBYEW9zyzWNjL5yTT2na/9+3pQIgDMCHNGPj1Of0K/HhJID8/RvLPi2quEa//OUopaDsufk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQkVyCRA9TVsSAnZWagAAq4oQAJbWTHwUywB77i4Xffy1\nOuQmT+7IAhEZr8pO1XT/MLTXN7L0Qxlxd86/iQEd3irxVTlwtoRlgzRwRDmn\njzfagXCNb3tdxMe5BHS/oVdumT0CPP2+NiFOrY3Vc/XsCzS8O/00pKU1jmeG\n0e1lfXeSZvX7DxNFuyw9fBjvay02TcvWEHtMK/hpvWXiUbGKb9LqH7fjx7H5\nTOPubaXxvJZoyYkH3PYCg9EdrJiwD2AZgj+t2evHBUU2lTICWY5akkzmF6US\nydYAImuxiY+qP0qdgIk3CTQwrSXq/VfDD0RTEkiPkpwPFN89iRJkuLLbczPm\n9xoU2ADRQcr51xDIGCUtVrzqoaU4KiW64z95jH+Lubi9QbFRXLWYlqDOM+N9\nLHjn0v2l3L3maKOyymOgacSXbz8U7NYolf7kPLYRoE1LUkcONXKub4K4ccDf\nXteKivXwA8G5A7PMuPmsj8sYEsvA7y6K7ElUmO+yKedFiEwVapwsF2p3dAbZ\n2T7K9ifFuKfc9G0QXDeLWsmkVVo/jVIh36RQIUbRXBViEp5Qm85ZN8c8Nbel\nvftQcl85VMCgHpAXJZiemo3C0L5wK2UWmvocBDBlxukBLxDu8vDGndcOnlRp\nSuAwiGC3cKj6qDv1BwnlJS6pW+3Do+UgZUbUN5m2SKT7irut/gAbIiXNRuik\n+49S\r\n=pQgW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.8355e14dc.0","@material/theme":"13.0.0-canary.8355e14dc.0","@material/animation":"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-indicator_13.0.0-canary.8355e14dc.0_1631733106772_0.7520382894983422","host":"s3://npm-registry-packages"}},"13.0.0-canary.d4e16a6c4.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.d4e16a6c4.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"28cd555496624030d2c622944e564f26742e3c1c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.d4e16a6c4.0.tgz","fileCount":38,"integrity":"sha512-M8zWbX8PlSd5lplr1XHF5UbSi/ASt3vgIHp7CYeRdEceBTcInBXwQuB2s6jyhRrpy2KL3NDWXrLCJfrctUNcnQ==","signatures":[{"sig":"MEYCIQDWZuHabeo5pPlIgczUVYAwTIW5pzEw+WtpRLDpaeCNmAIhAKFuLWPIFdGIfZbrImISoURSgCXUdO1aOv5CKUTkXMeF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQmyJCRA9TVsSAnZWagAAafAQAInGb5Wy7dx8YgcNRCOh\nBz04Pl9AIIUeRMNLHFgVQbOmHNVPbBBfrNI3IvPYFaqmexmvKgSqEMG7e4bD\n+++JYrHFPmbCphRnWCFvUjMT+F97dlBKOBCu8Pq6JnmHcZqBCcfFLl6tanEV\nW8j7ukrbjBIq+d0EX1oNeaoDKnc/3bHT2WVQHGgXnHlebV+KKC9jwVVxYVJl\nf2Z1ds80cMfHE9aEJsICq6lfN7TBiA1rCgS3SZJiAOK/RgqJYVqIYYf2IikF\njN5rWtCz7ttP3iDQ6g5l97+20QDu4/afsb74+ylw+ITMwhxQIiciCOnSWl8/\nQm+2vvpqtMi1Kmg4lk/FYG9xSnVJk5XfjJoQgv9q6/lntuCltspgbek2jfga\na4pUEG4BstEH5Q8jYdtxeSJc3FEs/or03pt9z6DN0zqAhhGab7dPk2tNd+3O\nBSlZYM31DCQ+aX9ta4zaVIgp13G0xx8b1ODjfzQPm0c3E5XWQKmQDjmhQVsb\nF8Jhe2TxaELfHhu/ZqIo6R29/0t0bdTMxTfb2k2HHBkBfpu3W9LzYayS0RXN\nONBb3cAKA1nEnPyZ0AB0kD/OeTeTWSCph30izX8FDEuiuVSHq/lCzZ5CIaFJ\n69XvsVCPwjAzH3HMBdjHpwMUfdTdWqPijXtfzz+1WKPyy7HaKB43jjtvbfA7\nw1t1\r\n=1QZY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.d4e16a6c4.0","@material/theme":"13.0.0-canary.d4e16a6c4.0","@material/animation":"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-indicator_13.0.0-canary.d4e16a6c4.0_1631743113591_0.1153324398356359","host":"s3://npm-registry-packages"}},"13.0.0-canary.65125b3a6.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.65125b3a6.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"bf5db955f1d75c47d0d3ebecc59465176a3c9ed6","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.65125b3a6.0.tgz","fileCount":38,"integrity":"sha512-zqfI1jHgfMz4vNmjHaXsUXFX7OKMsy5o76wBnjAoFiK2h4IYr2GrvRSIv67htd6x2CPGf9pK3HsZMIFtajTEKw==","signatures":[{"sig":"MEUCIQDHBBbxiBLQeVfNPxfIgqP4l0YJpWH6dbqRD/6mBuCohQIgN0XelnTo5pZoK4xLeY4tsC6o5SDBzxSaBVOZ+gbTBZc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQ7RDCRA9TVsSAnZWagAAZ/4P/1lnV64mKMXmVGEOWv5f\nRuFWVDr19bNZAiGqbByPlM4yOg4dfEA05qxDAERImcpvMkSGJJjZUHMTErsS\nBKotUq23ik4zPXn8FpztXgmV5RU205tmt4Ih0Prd7cu9Sa+Z9uE1hfKPsKl2\nTdegA9i9h6lcxhHFGF+npWUzVDMGZX5CJt4mF3pWNPwec6CjC4SdYY1K1v5e\nfjX/RUuAupf6nS2p3O4Dwo38cTHQFcw9sqrbzUJtGlm+cHqGBtTsYfOGyFHj\nMI9kfAYk4fCy2HHcmN66M8tOOC1JKJ4hZY/zEa6vl646IKqDuppKxPsahJAV\nwxOixNkK1eZcL7oohnmVHpgfLMdJYgIqaKXwRv47IdWhdNPYh7rhGeg2cxW3\nBx2uQALwVSw27NotPZ/xamIWQeOhlrqSqkCogGK7uNh/EjYr6/FJsDCJQkpF\nSjeCNtmqbIm/iIlb1jLEAsYlh7GoSjaY8znfog1uV2SdAnzDdHrr7bqyrD74\nCnQBH9OPt+CmiBh8V5qbmJqW+18JCUBESpPbMP06xqLjrEsoRjbLCcf8FoqQ\n/1efZSKkP8y8Bh/YoQi5uZK9zW19UUA4+WxHl0hD9UN5o+TLUNA4aMiro1hY\nH6QdBse2zVXMseKK5biKYfKg4w1gzhP5n5t7bFg3/PTGSCFp7KOdG1+8V2G7\nh5p+\r\n=Dynd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.65125b3a6.0","@material/theme":"13.0.0-canary.65125b3a6.0","@material/animation":"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-indicator_13.0.0-canary.65125b3a6.0_1631827011482_0.5534166413981294","host":"s3://npm-registry-packages"}},"13.0.0-canary.80a583365.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.80a583365.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"a7241b495fbce612bc7ea7426d4b10d04b7f1990","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.80a583365.0.tgz","fileCount":38,"integrity":"sha512-t2ZpnM4XkorF128IwruQc/S9FpG/fHM1T5bOyk0x6SuqqvzSIghA96ISOBwlLofcnhnkxPQmqopOms4SA1uxLg==","signatures":[{"sig":"MEYCIQCLQ26g+VLi82jEi2Ei9l4yPFtY9gixqiBLPb3NaaJP4AIhAIWpY4XDcvSQKgiJjw7+hT73rTnzonSNDgT4/iccxYOL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174365},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.80a583365.0","@material/theme":"13.0.0-canary.80a583365.0","@material/animation":"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-indicator_13.0.0-canary.80a583365.0_1631910916031_0.6423323083272512","host":"s3://npm-registry-packages"}},"13.0.0-canary.83900936a.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.83900936a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"60527913755e4f43778c6c065ee5e2d219b439d6","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.83900936a.0.tgz","fileCount":38,"integrity":"sha512-8RzQhXaB6q2K25LlrtuB6njx4FoeYGqcfx5QeoqvRjm3dAjQfAPZGRSku38hU1d8J9HDU+86bM4vF8d+zAiMJg==","signatures":[{"sig":"MEUCIQDbTPNBqflEploB81bXO1htIXb6hjhI4PfBEaZxIzL5wQIgc4I2XvJ8tt5eYHye8Rh7CR2+Bkrby3E0XxYbqzdTN3Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174365},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.83900936a.0","@material/theme":"13.0.0-canary.83900936a.0","@material/animation":"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-indicator_13.0.0-canary.83900936a.0_1631921029935_0.5454359951049743","host":"s3://npm-registry-packages"}},"13.0.0-canary.860ad06a1.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.860ad06a1.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"5c89bf61d55d2c9d6c5f624de7fbc2c300a5670f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.860ad06a1.0.tgz","fileCount":38,"integrity":"sha512-kHzy7LpIgD/wUXlFBkk1fyZlyuBrrYpK6BddBWOTqK9fMus03zJ1HagiVKiWwO0Jvwx5iCnRaM3D6FYWNiY/Lw==","signatures":[{"sig":"MEQCIDPfJ/MmDrJL8GVKYsjomqutOmgr6GNFJQfjC5bfcY7bAiBIDNsMAHEt9stnNB/XuNBD2g76mrkf1nKBYl4ctbBKrA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174365},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.860ad06a1.0","@material/theme":"13.0.0-canary.860ad06a1.0","@material/animation":"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-indicator_13.0.0-canary.860ad06a1.0_1631921730069_0.9712085389019125","host":"s3://npm-registry-packages"}},"13.0.0-canary.3b8d4429e.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.3b8d4429e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e5e8fbfd4489c92d1bb4382b725b0dbe4c32cd70","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.3b8d4429e.0.tgz","fileCount":38,"integrity":"sha512-va2b5JjkSeT18Xcqqzra2Hfb0GY6opFyV2/yqRpee/fdwBIjB0LH3yYsSHbq4WxdiC9YGKFrkcNQMl++Jalkvg==","signatures":[{"sig":"MEUCID9dbj5d79ugV/siH32W7sMIdBDmr6MFP+RTOphnurPKAiEAgO98PNSQmpjAVA+l5zRVK7lsA+pWKRYxC8+DoF7Mn40=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174365},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.3b8d4429e.0","@material/theme":"13.0.0-canary.3b8d4429e.0","@material/animation":"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-indicator_13.0.0-canary.3b8d4429e.0_1632160023612_0.2790115459488749","host":"s3://npm-registry-packages"}},"13.0.0-canary.2da3606b9.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.2da3606b9.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"43fadcc7f65bd7e75d2d4892fdcc7a7d5551071e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.2da3606b9.0.tgz","fileCount":38,"integrity":"sha512-j2nUFevvv9Br7RAB+r+Rt3A8owVwMuPILDo0c1CRqYMxM8Y/5VrPlnFKMPDqTTbqTRhO+Jyo8rZUvZD8swcvmQ==","signatures":[{"sig":"MEUCIEcg74JFrOYgLlP/1MO08XwK8HyZ0hFmVdkglnafw/ZgAiEAuAQCo5K8yHg9v7gJAHJHbI4gce7kikTNRWh1k7F6Cac=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174365},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.2da3606b9.0","@material/theme":"13.0.0-canary.2da3606b9.0","@material/animation":"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-indicator_13.0.0-canary.2da3606b9.0_1632166632975_0.1577345765857474","host":"s3://npm-registry-packages"}},"13.0.0-canary.e8c598d1e.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.e8c598d1e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"3eafa2b03758f38b890bf4b374df0633e02d984d","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.e8c598d1e.0.tgz","fileCount":38,"integrity":"sha512-VKPyCzgrY3jumUtcr6rkh9kmaen8oU/Nlvavw+Hj5PcV6lZUrY1/mDYMPo7Kk1OwS529bwoxwXNgTQ+9g1nIyg==","signatures":[{"sig":"MEUCIDghY3IkHoFMkH7EihXsu4HJOtUF98yho+d329+bUNkYAiEArNbiJ50P+VLhIdXIM2mnW1RdUbPCrKs5gpyag8ZKMwo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174365},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.e8c598d1e.0","@material/theme":"13.0.0-canary.e8c598d1e.0","@material/animation":"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-indicator_13.0.0-canary.e8c598d1e.0_1632172283684_0.7796742907803571","host":"s3://npm-registry-packages"}},"13.0.0-canary.1340ee9f7.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.1340ee9f7.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"4ffe3751cb3c331972d30f01eca44e5c33c20e8f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.1340ee9f7.0.tgz","fileCount":38,"integrity":"sha512-zlarY+XwvmucFHp0Z6aw27YtPMK0MeV1lEojBYGnRrt6J/snuvPDdIosrThxXnz6pEq7Qtwb+HtB2Spk4bjbQw==","signatures":[{"sig":"MEUCICWnE1yEejyx0PulqqvubGSF0jDFr+zM8BF/YmKmICTrAiEA7YR7xDvq17OQPqQYN+sdsUFKiQPnJSKemjCmsfkHzqo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174365},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.1340ee9f7.0","@material/theme":"13.0.0-canary.1340ee9f7.0","@material/animation":"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-indicator_13.0.0-canary.1340ee9f7.0_1632333443397_0.25229975152542283","host":"s3://npm-registry-packages"}},"13.0.0-canary.65084baff.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.65084baff.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"f06b6be3b9b72a516cdfd42d23feb189b3f574ee","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.65084baff.0.tgz","fileCount":38,"integrity":"sha512-GOWKi4QSyFhhEHuiGaPuBuZgnNbx1glTYYZrdAkGCk6WY749a6VHqIFJe3D+2xkFdZQN0r71dkMcor/a77qA9g==","signatures":[{"sig":"MEUCIQCplCAWeq3cZbvMHJTp6FAOEcibRO0Z1CXQokP7ESsAYAIgfPDfovJ/DUpYmKHIkPI/4M0PvFg4MvLGmeyx8D4/n+A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174365},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.65084baff.0","@material/theme":"13.0.0-canary.65084baff.0","@material/animation":"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-indicator_13.0.0-canary.65084baff.0_1632432294763_0.9193995366818877","host":"s3://npm-registry-packages"}},"13.0.0-canary.c79aa0cdd.0":{"name":"@material/tab-indicator","version":"13.0.0-canary.c79aa0cdd.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"4c775faa925a66b0178dd11c90f02f1eee235beb","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0-canary.c79aa0cdd.0.tgz","fileCount":38,"integrity":"sha512-frtam7l2/F0k5zAQ+E3V9ElNQEXtU5ujJZ5RNrfG/lIUOF/iSnADjP46bsmCVsSjYgjyZFJjPiPFyaoC5WLVkA==","signatures":[{"sig":"MEQCIHRis77kitLPaYkQ0LK/i+XKunRYpLKNgftniCYur6l+AiAL/+NxQ4Ao5uLXaBCAy57JMFZVtrD0ST1i+63BO7pCeA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174365},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.c79aa0cdd.0","@material/theme":"13.0.0-canary.c79aa0cdd.0","@material/animation":"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-indicator_13.0.0-canary.c79aa0cdd.0_1632490879868_0.8335733896538853","host":"s3://npm-registry-packages"}},"13.0.0":{"name":"@material/tab-indicator","version":"13.0.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e79d06b888ac8c625dabc6c9288eb3ced70adaa5","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-13.0.0.tgz","fileCount":37,"integrity":"sha512-T6Q4zCdl374rQgNLrAIc8+sy8ax6fbNTZRb+oJgShzjVz4wH9OLk6LX1RREHEeWiZt69nTqeR4yU6/6xFX+Kjw==","signatures":[{"sig":"MEUCIQDPlw1r28u2Xrq1AnsJkxq3D77b9anEU1h/qGPS/kUcTAIgFJ5NpzOuFQPuBFI5YtZ7uH2u0dq5jG9B6E8+QXdGgqw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":173769},"main":"dist/mdc.tabIndicator.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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/base":"^13.0.0","@material/theme":"^13.0.0","@material/animation":"^13.0.0","@material/feature-targeting":"^13.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-indicator_13.0.0_1632512720517_0.7440317278555628","host":"s3://npm-registry-packages"}},"14.0.0-canary.198431fcd.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.198431fcd.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"cf60e638087e7e872d5ad528af34db0277481d76","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.198431fcd.0.tgz","fileCount":38,"integrity":"sha512-0kfNXR07DNV7i8rzjvhIBdeB6JDGLT+2mYL4ok/iA9wlqV++2xtbuqvKZ2xGOo46wS5+TTzYtQgYtDVCpbiACg==","signatures":[{"sig":"MEUCIQCNyBbgqzXYQlgOmOArABkCIdoHEHxY66th3OaN/YKycQIgJzy60PeUzJYsmuryHGrqaNy8EJPQif8riHhrdINc2BM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174365},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.198431fcd.0","@material/theme":"14.0.0-canary.198431fcd.0","@material/animation":"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-indicator_14.0.0-canary.198431fcd.0_1632512765938_0.22210333064287102","host":"s3://npm-registry-packages"}},"14.0.0-canary.9a02b6ef8.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.9a02b6ef8.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0181f050b36310374db8f9566ff24cf23b8c8949","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.9a02b6ef8.0.tgz","fileCount":38,"integrity":"sha512-C7PLu7a00BMyRnjIMgCHcmM2Rh5W/wtW5QG3mXW7l7xvmrFqiC+njcmruLNXt7E4+kkODZQfYmcfjEA7a/+YSQ==","signatures":[{"sig":"MEQCIFUVL4Tq9KaRUSBVkdYFQ/ftsr89qtRYi7Qk8turNCStAiA9YtJ/DFOrf6UStJnOoz2Y1EDl9mPX0ywWFR/hHDk8Sw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174244},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.9a02b6ef8.0","@material/theme":"14.0.0-canary.9a02b6ef8.0","@material/animation":"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-indicator_14.0.0-canary.9a02b6ef8.0_1632575431845_0.8624052755899876","host":"s3://npm-registry-packages"}},"14.0.0-canary.758ce31d9.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.758ce31d9.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0606f8ae06208ded509846dab9435d2008bc741a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.758ce31d9.0.tgz","fileCount":38,"integrity":"sha512-EYbY4NiJE3DmWKQMPaimMZjNuKIgvDwiyH7koBwwZlQDBM2cqhYG5K1wQ13JdnaXwM/9e6UQ9fmjKXfm2dWJMQ==","signatures":[{"sig":"MEUCIFrepSDajHjUpcefYzKU/SnooL1J8ac8Z96g6tOqdqliAiEA6MJQp7tyVRbBrdcNHgN9+2KyFLQIYcq0QWNZmFYrOvE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174244},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.758ce31d9.0","@material/theme":"14.0.0-canary.758ce31d9.0","@material/animation":"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-indicator_14.0.0-canary.758ce31d9.0_1632763725429_0.6772653449208239","host":"s3://npm-registry-packages"}},"14.0.0-canary.86b50ef74.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.86b50ef74.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"cf5fecbed423b06ec5ce43526e10e606dfb69f90","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.86b50ef74.0.tgz","fileCount":38,"integrity":"sha512-6VGq3PjtplKTGzK6usHVh553KY5NOQf88SOPtFAi3ZFOwgtIyJ6nOl0eXs+Zjza6RHAf+MglKKNRNl8hoiYwuQ==","signatures":[{"sig":"MEUCIQDGS+ob8IlY4N0qRdEDFtQBTToMphXq9OF63R6VJeq3AAIgZuQoCr7M/B49BJNrqUo9IPmpDeJl3YqndushNcHYgM0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174244},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.86b50ef74.0","@material/theme":"14.0.0-canary.86b50ef74.0","@material/animation":"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-indicator_14.0.0-canary.86b50ef74.0_1632850949254_0.21367432579264678","host":"s3://npm-registry-packages"}},"14.0.0-canary.b2fe3528b.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.b2fe3528b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e69cd5f2a4b5190de60539530add5a0652863d85","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.b2fe3528b.0.tgz","fileCount":38,"integrity":"sha512-CjYrpPhLY3SGRxWpYL7sXpSeNAcLw+R1l3g4dEdhgtUCKcUDMQKP+M3aadbscwCN7N9MaR91JA8PXHGtYMXYeQ==","signatures":[{"sig":"MEYCIQC19wIjxKsjEjdn+Ep6uUSBXIjhwc+a8XR2YC4Upu0fEAIhAKGt+kwemG64Hj6EPye4+93SbliyFeoWgtFAj0uktavy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174244},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.b2fe3528b.0","@material/theme":"14.0.0-canary.b2fe3528b.0","@material/animation":"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-indicator_14.0.0-canary.b2fe3528b.0_1632956183096_0.10797830054668256","host":"s3://npm-registry-packages"}},"14.0.0-canary.586e740dd.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.586e740dd.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"4f1cb1b140ec11b338485e201ec75caabe96f808","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.586e740dd.0.tgz","fileCount":38,"integrity":"sha512-7iPSI16SfLTYUE3z7Af9c6vkdTdkUvKo/FRaRQDeqlEdyllEPEoU6P9/ZnRPA0b168+NCYQTFEIlo6VedDkFaA==","signatures":[{"sig":"MEUCIHASBX8eM9nZoZrA9FkE7SgrZ13maHhl3ZQfAfJ/9RMhAiEA+pEvr8t65EAzXcvqAWXP95XYtLlXymmpL0409xfZzaw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174244},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.586e740dd.0","@material/theme":"14.0.0-canary.586e740dd.0","@material/animation":"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-indicator_14.0.0-canary.586e740dd.0_1633019445293_0.9426829493427706","host":"s3://npm-registry-packages"}},"14.0.0-canary.2ac92d766.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.2ac92d766.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"208cca0c39cd830826377f3ec2f64c30e5104c00","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.2ac92d766.0.tgz","fileCount":38,"integrity":"sha512-EYoPhQrzSoeTuNs1Toks5t4Z9swtAo/ltBQcFoHE/bvxvCRQTBJIKJJBk2xOZ/OyGuC060FwyUM9xkADlZQH1A==","signatures":[{"sig":"MEUCIQDMntnwg3PPy1mxbZA1I47zvPjMhiVmB3DYlP0+PPfkfwIgfOIQ5B1VjMYioDMWiUNztCBxRJNrwZDldb9juVaoJME=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174244},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.2ac92d766.0","@material/theme":"14.0.0-canary.2ac92d766.0","@material/animation":"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-indicator_14.0.0-canary.2ac92d766.0_1633462080364_0.19822068242932356","host":"s3://npm-registry-packages"}},"14.0.0-canary.353ca7e9f.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.353ca7e9f.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"b8d50c9bc0794a3d1b7a75bc9ce5dae50efefc0d","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.353ca7e9f.0.tgz","fileCount":38,"integrity":"sha512-h+AGXggxPk9+OLqd37Wxuj55AXoJP+DIANauvQKLIZd4Tx1IQ786hj76Ld7bb6sg9hw5aHCngyHlGvyD+JJ5ZA==","signatures":[{"sig":"MEQCIAWaPrhxGahtXqWUZxkhwBo/T4KJmbvUlUdazVJ27xVwAiAm5CJJAMku4FfH+JOISzY0hmbWS7MtgauWAFJ3xP3QVQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174244},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.353ca7e9f.0","@material/theme":"14.0.0-canary.353ca7e9f.0","@material/animation":"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-indicator_14.0.0-canary.353ca7e9f.0_1633718785141_0.424558401300303","host":"s3://npm-registry-packages"}},"14.0.0-canary.c78ff0429.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.c78ff0429.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"07a33f9d17333512085a5df6ce44e3417454b900","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.c78ff0429.0.tgz","fileCount":38,"integrity":"sha512-3UHnPMSm+39rvoB5I5BIOpAdHzbxZqjZrk1980hJiW6Q2iLsnvYa4Di8lb19Qqx8Qg2ruptlg8XQa4zKPW3s5Q==","signatures":[{"sig":"MEQCIBCZlvW/m9yabAUxaoz0Uu6dD/89QRBzeJC+Il2P+a/jAiAISgvM5Z1H9fH7koSe388tPLbz8vZExIoms0CbIQFb2Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174244},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.c78ff0429.0","@material/theme":"14.0.0-canary.c78ff0429.0","@material/animation":"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-indicator_14.0.0-canary.c78ff0429.0_1633972892978_0.5628355996903116","host":"s3://npm-registry-packages"}},"14.0.0-canary.261f2db59.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.261f2db59.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"9143171ed500c9e6055b8289600254b624187fa1","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.261f2db59.0.tgz","fileCount":38,"integrity":"sha512-v1MHQ19zs0PWcFqgSzhGY9dU+OeoLixu9BO7bLlT/SHyQ3SjHn9NRc850KiqbFuMlsIlnyIEz/dCJHv2lO1ZAw==","signatures":[{"sig":"MEUCIQDY3sS9FAxzNmEe0ZJzCisqoAx/+UlT4N8otWpj6f8e9AIgW1x+Qje3aMt9CpuILCzw3bc8uEYwt1VL/raf5cqiauo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174244},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.261f2db59.0","@material/theme":"14.0.0-canary.261f2db59.0","@material/animation":"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-indicator_14.0.0-canary.261f2db59.0_1634749148084_0.06762231604594238","host":"s3://npm-registry-packages"}},"14.0.0-canary.9803d2dc1.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.9803d2dc1.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"bb3f389eb45771d47e45b8dd1becc64f3c6b3106","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.9803d2dc1.0.tgz","fileCount":38,"integrity":"sha512-NXNZcN5OZg0V4iTSLhbdqn87sy6Sf4VNjW+XNAVKDn/wsjMT1kYgQJbx7gm1tdtweOtCiYdKt3NV+j+bBO9XdQ==","signatures":[{"sig":"MEYCIQCy/4BmHFNmDvdheI688b2W/FuAliUwKOQj+6hYwgWr1wIhAPJKGDDb2oTWhqdKDiXwcmC35p/xoip9xEk6pqE/5IsV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174244},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.9803d2dc1.0","@material/theme":"14.0.0-canary.9803d2dc1.0","@material/animation":"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-indicator_14.0.0-canary.9803d2dc1.0_1634757681051_0.7521174337417451","host":"s3://npm-registry-packages"}},"14.0.0-canary.348665978.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.348665978.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"3930c82771a3de6565719ec4ae68dd27225c4a56","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.348665978.0.tgz","fileCount":38,"integrity":"sha512-DadjttSP+5+8ixnqKe795LqfI82TFrG3P97xK/BoCuyDJ51cKlAy3j7qPaHu3ydLJOtqZyLXDJzgDO7GcPfZ4A==","signatures":[{"sig":"MEQCICIVBnIQKDy2u7fM3YbEfcUVCmz1OU168sAmr5BKoKRgAiBtLqmEz0aan0t8+ofreZaUeBnobibEcT0TOmz5Za6Plg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174244},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.348665978.0","@material/theme":"14.0.0-canary.348665978.0","@material/animation":"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-indicator_14.0.0-canary.348665978.0_1634827806848_0.6250353834426097","host":"s3://npm-registry-packages"}},"14.0.0-canary.b2b979a8a.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.b2b979a8a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c02706c3fa1aafe25b4f9125e29e5a5f53141537","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.b2b979a8a.0.tgz","fileCount":38,"integrity":"sha512-DJQEtbHnG5uo/PS07MOG0SpxscRBhzWirH2bBDUDyx9DK8gIwDKwXBmL/Q3DU8MheLT2PB9BxQtizotvoF63lQ==","signatures":[{"sig":"MEUCIQCcKDjw+4sIEe/qaQDNIruj455TqyvFVAjZzArB85o1PwIgLb8Hca89F1IMPCzDhxoJIe55I2ibcWPYS4llC1Ca/68=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174244},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.b2b979a8a.0","@material/theme":"14.0.0-canary.b2b979a8a.0","@material/animation":"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-indicator_14.0.0-canary.b2b979a8a.0_1635433901409_0.9162569934624185","host":"s3://npm-registry-packages"}},"14.0.0-canary.1af7c1c4a.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.1af7c1c4a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"835aef2f4754b81c3065a9f7e0d31f39679cf183","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.1af7c1c4a.0.tgz","fileCount":38,"integrity":"sha512-yiQqmgJy2O8z8eKVckp0bU3v19Za1tFP0v625M/S9PEJrTnYvQsMRKAR6JZEie1Smu8JMdTEqlk/3cKjek4hFg==","signatures":[{"sig":"MEUCIA9xQfg/2wmZT78z2H3N26dPlynasZ0NaZ4jeFgg+C+3AiEA/ghYMJL/OZlYtsvH3V9dGF2LyixMJkMR6bzDr4Q7PA0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174244},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.1af7c1c4a.0","@material/theme":"14.0.0-canary.1af7c1c4a.0","@material/animation":"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-indicator_14.0.0-canary.1af7c1c4a.0_1635443537958_0.8345314800687669","host":"s3://npm-registry-packages"}},"14.0.0-canary.4afd353cd.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.4afd353cd.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"cc0c52d2e248d0d9a7f05e9baf76e6f72c73d06b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.4afd353cd.0.tgz","fileCount":38,"integrity":"sha512-6RMsXcDjamPx6TyFdkkRM4KNT5MWr4FgbdA330jXZx4ACJ0TxoeNStHje4Wx35k+WIuYJnZ1bDTmp7ciBrWVDA==","signatures":[{"sig":"MEUCIQC8DDDmlKUwW2oglE5ZfWzYSSKmiV4qMipzOKdGpmVqYAIgEfDaGbtmN7Unrf/l76KZr593PPVa46ypa47JpDNKyvg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174244},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.4afd353cd.0","@material/theme":"14.0.0-canary.4afd353cd.0","@material/animation":"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-indicator_14.0.0-canary.4afd353cd.0_1635519664507_0.2687340096849724","host":"s3://npm-registry-packages"}},"14.0.0-canary.a986df922.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.a986df922.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"b6ad737d03bfedb62c464f4c34ad357e478faf27","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.a986df922.0.tgz","fileCount":38,"integrity":"sha512-8RaWYu+CXaVcUQZX3sTv4uhPuuMWVwB0zFdVdlzvWXdMwbSrYYxCSmjxT20JgOe4UwMYkddTaeodc5X8IKJzOg==","signatures":[{"sig":"MEUCIFVWe+I0918+789KnJtN/5IlQ1a1e8UssChNjOhWamWuAiEA6YSENwSnYHw5733TSO3xYAqPTnNVghejJUG0e9qEXYw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174244},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.a986df922.0","@material/theme":"14.0.0-canary.a986df922.0","@material/animation":"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-indicator_14.0.0-canary.a986df922.0_1635543273357_0.6490791181328965","host":"s3://npm-registry-packages"}},"14.0.0-canary.c3cdff07b.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.c3cdff07b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"76dd784986134532e2e71ac71c6ae8e0e635f6fe","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.c3cdff07b.0.tgz","fileCount":38,"integrity":"sha512-ysB6zZlcRj+25TbTaaT5uiKGVxirlDUDMnMQ5nUifsKly7UQSIb81yLusIOvJfPIlcUw31h5vEmLKG2/9P7kkw==","signatures":[{"sig":"MEUCIDAT7SWfhhhHv/YQAs7N55Oi8v+3Mc3m57sEVTaUyITKAiEAiIxQ6HLcqV0nmVgnurct1P1IqGT/JXXO8LPOyyJ7fmk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174244},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.c3cdff07b.0","@material/theme":"14.0.0-canary.c3cdff07b.0","@material/animation":"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-indicator_14.0.0-canary.c3cdff07b.0_1636484724647_0.25736598166611824","host":"s3://npm-registry-packages"}},"14.0.0-canary.468392606.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.468392606.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"2a9d294f638a926531ae287016af399f571dd3b5","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.468392606.0.tgz","fileCount":38,"integrity":"sha512-fcV2Lyw4b3pQq+/BgBRX31Pu37mUypmPuLOT2sRUPUt5xfy68Vt4D0u/7+kq/ewS8d0iK9bI776sc7H00n1gvA==","signatures":[{"sig":"MEUCIHdQamBzH4Z7UIhdBKKxCBWI6wKtjcclut9S+4rQDiuQAiEA+i6AA8401jBmm4WI+pJEAdHClzfYMJCr0/kHsuTo5WY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174244},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.468392606.0","@material/theme":"14.0.0-canary.468392606.0","@material/animation":"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-indicator_14.0.0-canary.468392606.0_1636659578208_0.6226847227487171","host":"s3://npm-registry-packages"}},"14.0.0-canary.828f9803b.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.828f9803b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"21693ddde47184e4641cd5224734f6838356f240","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.828f9803b.0.tgz","fileCount":38,"integrity":"sha512-iVvT9z2mmc/Ss11RsjLVtlRpVYai8Wzah2BMlhRtNUhupWAGX1LYKLaokxtIpQzMmSvvo7M4r20ZlJ5k8cC6EA==","signatures":[{"sig":"MEUCIQDFmncL7qYqMRuXw2tZfcSW2lyqAYEMpZAuzwbHwiP1WAIgMDZKvsH8QtRtkKoawST41C+AnWKTvD783IK98BpsPFI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174244},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.828f9803b.0","@material/theme":"14.0.0-canary.828f9803b.0","@material/animation":"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-indicator_14.0.0-canary.828f9803b.0_1636660221195_0.5586156137675804","host":"s3://npm-registry-packages"}},"14.0.0-canary.8795cba87.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.8795cba87.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"9a7e4658ee1186c91412adc7a81ec23ee82c2fe6","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.8795cba87.0.tgz","fileCount":38,"integrity":"sha512-ORYYy1YJ/YcwjHVdGKVDgFUZlzxYOEVhH5ViDcVOy72O4hNAmBG/gNCsiZ3teTtKYtOmfDX128uo/Bw3gfB53g==","signatures":[{"sig":"MEQCICC0eKS9SrtdvPmU9N+HnEYz+k3cZ3Di/so71IkERc5UAiAxfpluGl7u3eEpcd0IJzzuV0g42kE6eRWk1hC6Bn6rCQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174244},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.8795cba87.0","@material/theme":"14.0.0-canary.8795cba87.0","@material/animation":"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-indicator_14.0.0-canary.8795cba87.0_1636660577341_0.8631582686416648","host":"s3://npm-registry-packages"}},"14.0.0-canary.cd7f8cace.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.cd7f8cace.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"624c409499a552e60eb72d7d287e0a583f89d2d1","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.cd7f8cace.0.tgz","fileCount":38,"integrity":"sha512-JyPB8iAhNF9A7ySw7aO6fPmO+5AvbtDp7Dcx2AH+32HEinl/ZSS5RSXteWBB7F/kX/uvwcGRyR81v+fqABOnRw==","signatures":[{"sig":"MEUCICtXDRTjorl+A4geDZH5aUyDR3OYg/uS5rCDW9yNuJc0AiEA9Ep6M/OC8f6AGpI1OUmMfQFymIFG+N4WHV2t80x/I8w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174244},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.cd7f8cace.0","@material/theme":"14.0.0-canary.cd7f8cace.0","@material/animation":"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-indicator_14.0.0-canary.cd7f8cace.0_1636660677802_0.8909153914770107","host":"s3://npm-registry-packages"}},"14.0.0-canary.207230eb8.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.207230eb8.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c0d9c5b45c19249b0761dec75288ed7edf7c08ba","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.207230eb8.0.tgz","fileCount":38,"integrity":"sha512-fel0XaPIr+ErT76QA4dSL9dWQ6HV9sBao8k0/ViaommV66vlSRqJpU9CnOMEP8tB7txpltqe2a8XAXcf72vRwA==","signatures":[{"sig":"MEYCIQDXz1gK+rT9lrXOMbD4BnalM9fK34kZXSPNazjjf8HKCQIhAIyf1SnwQZDX8/Vvh5iCMHrwkyCEJqpjJnA0xzck9Rf3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174244},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.207230eb8.0","@material/theme":"14.0.0-canary.207230eb8.0","@material/animation":"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-indicator_14.0.0-canary.207230eb8.0_1636669432198_0.25004954687292313","host":"s3://npm-registry-packages"}},"14.0.0-canary.991fb99f7.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.991fb99f7.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"8fe089cb15d0ba51c126cd64663eadc361e03c1a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.991fb99f7.0.tgz","fileCount":38,"integrity":"sha512-TheuVyWiqHgGhD/gMrhiAg7m1EjLrFDXEVDiOGZvXsPseorDQtDzMkd9mv/vvEKmj99z268aCkvh00+n8OEi+Q==","signatures":[{"sig":"MEYCIQDjOqJad10EaNF1gO5fARR48P1w3/RGMBuYUQ18EovnLAIhAJKpC1q2zYfRBX9qCuB1c+/UeVYOpfJjkf5oYWPFXHdk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174244},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.991fb99f7.0","@material/theme":"14.0.0-canary.991fb99f7.0","@material/animation":"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-indicator_14.0.0-canary.991fb99f7.0_1636670156576_0.5718322795082518","host":"s3://npm-registry-packages"}},"14.0.0-canary.15db4f164.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.15db4f164.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"7463ad167a5e96e4b1ce17458aec43c6ec3d9c09","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.15db4f164.0.tgz","fileCount":38,"integrity":"sha512-uFFXQBmWNN1Xu1IFY6/kdB9Aq4/pWZRoH7h0K5MbGwmK0y5V6wQgSWGVaEYlcToi7VFG1zXTeE/Hss7grbi7/w==","signatures":[{"sig":"MEUCIQCuLCldX3v4/ZbD0I6I28gdZVB5ldk21F5U7AOO5Zwd6AIgc+fBGRAaV3HeajZWIhNMXHOQQJGEdjcbb/7RCVF8kYU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174244},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.15db4f164.0","@material/theme":"14.0.0-canary.15db4f164.0","@material/animation":"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-indicator_14.0.0-canary.15db4f164.0_1636738159014_0.9830368784762147","host":"s3://npm-registry-packages"}},"14.0.0-canary.8fcad5a3c.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.8fcad5a3c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"26d38ffc690f1525f971fb5a9ba0a8250ddfbf69","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.8fcad5a3c.0.tgz","fileCount":38,"integrity":"sha512-Sve0GQjdj13+nH35ZVIn9SzUCjUSU9uG0IJkUox/oj2zdm3UPwc2k8hz8F8R9+EYjjbXOQp1ojQLtsUlkOqM/A==","signatures":[{"sig":"MEUCIGxpQNLt1vswJlPOAHlYDcPeGJFYBNN4WIXL+6uEjMBvAiEA69tIE5xvmio7Npuful5yj1oPH8Rb530PCCGd2jD4JNM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174244},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.8fcad5a3c.0","@material/theme":"14.0.0-canary.8fcad5a3c.0","@material/animation":"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-indicator_14.0.0-canary.8fcad5a3c.0_1636744399544_0.7721001727507304","host":"s3://npm-registry-packages"}},"14.0.0-canary.f81fb1d23.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.f81fb1d23.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"740d4bf09b2d3fce352a9c4991ad1ac9a30ad67e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.f81fb1d23.0.tgz","fileCount":38,"integrity":"sha512-mR7Ym1tqAtNUA/GrIMmOqbi32nlDgFlzKAsWNTdxm56jJEikeb0r3KHuOuwIHdbEOCEqeT3pHzg1YSO2K6hqEA==","signatures":[{"sig":"MEQCIHQVY+t3/3OagtKXMBEzIp/pm1rpQIySv2C05RgS8gxBAiBcYB/QJBANch8S4D/1YZLGstAlCYrU02ZqhcPXevg53A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174244},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.f81fb1d23.0","@material/theme":"14.0.0-canary.f81fb1d23.0","@material/animation":"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-indicator_14.0.0-canary.f81fb1d23.0_1636756786335_0.3970251866454104","host":"s3://npm-registry-packages"}},"14.0.0-canary.783f6fd5a.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.783f6fd5a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e1b38a4d2325a0d72eefe0ca54cba8f952cf627c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.783f6fd5a.0.tgz","fileCount":38,"integrity":"sha512-G9hTCTYuBnnbmLw1eVZXbzLNcEAvfGCI4hicywpuG30mCkmo1RQM2vwyjRwrUquTxV4fnFAZvB9tNG3p6M1nRA==","signatures":[{"sig":"MEUCIE8IFnZ7Hms4cicrSFt2vCFkOZHMnAncluU6ZRv7PEphAiEAuMk9ipURTmw4NmrNwVvkZCy3Udr0imqghPhGHTZHo+4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk0ZiCRA9TVsSAnZWagAA29kP/RmBQYjkr9sZHYR0kYEA\nqmkendJVHdRaosdT4FsoLJFvnCTnvx5j/4kOxBskI3ViUecMTBkVJ7J1KzVp\nN1Ju8T2iiDflHkVLiXWiaM7lCqJO1lDh9PtcF3alVV865vRjtgOjRUtXhyia\nw90KKEJMeSWkJcyeEMrri295aylgYS7kgbVZ+zjRi/TAl35++lmUsiRxXqMK\nwd3FCdRtlgdx5mNuq97owzMRgOx/HfnkbjsO5mqP+WnTVFQhoOtJ8IfyISG3\neoM1cctmKwduu0LYudDMR8o39nVh9YwEaYlJKQY5pUKThPSd0TaNoW2TRng5\ngC3Zd8WzlD5hMpU3VTqcaukLUuNrghlpbCFTeAnmo+v/mmd4HlCX/ec3xEKh\nqwLo4kz+982o4yGESiEgF+vkqL1EsQKec3aGYOmNyyG0PF570tYYCo32L0bL\neEOmAk6xMBE6Bhvh88cfYJtI1QJMeChPF3bkACjrd/utZ/gRTp2W7b4MfXGf\nczBzhOZb/1fbdFayBO/rhJvvx3V+Ri93c7QxVG6qBbvq4veyQGbJg4JW736U\nxc6cVh7DRiAUCphDgCw4ElGNvfwVzhh4Vhv7UOPI3brZykdf9V79gZl4V/pP\nx3pzbPCTT+M1QygKr1vAI8NICVkXg1aoEQsloyLPwC8f92MoA94kYFvoAYoq\nMKNg\r\n=osay\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.783f6fd5a.0","@material/theme":"14.0.0-canary.783f6fd5a.0","@material/animation":"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-indicator_14.0.0-canary.783f6fd5a.0_1637041762543_0.6681647400135726","host":"s3://npm-registry-packages"}},"14.0.0-canary.d57ec74c7.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.d57ec74c7.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"2340ef4834c9029de77296e9098eda64b40f2bfb","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.d57ec74c7.0.tgz","fileCount":38,"integrity":"sha512-HWY0nu/5o4KaGFMIcui+3QSYRphQYoUeX8uUkNTibxzDCjBDO74Y/ftU25PBBTj8DYMmXp5PuJhfERzEQhAOrQ==","signatures":[{"sig":"MEUCIQDfTzBsmPdP0/V+XeGW4HnDYY+BaJe7fBdO5k4vYD6f8AIgFzJzN797X4Dc1HSO/TZ8TRaN7KJNoYlUeotQzlbGiwc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9kyCRA9TVsSAnZWagAA780P/1uW3i7vDN7hrlkmh5UP\nMnavN5NozDZH2dX2oQjpNw5E95y4LzGGPuz03sr8ME7OCQftaPn6fvptq5Eh\nR6B+zMYclVx+AmVI6PbOH1//FIAatY5N38c2xbep1m0CtfQDu6vYEskHSE72\nWt5iBfQeXO8E9xQlIq5jdB1BJ0VAIsiLAE5BcD1azP5VGiFw0J9wy37r0KzN\nvhik5nfqt49Sj7FrTM82L6SymMSSi8sLu+3pwfHxrOP7M9UDR9wR1eDY+bZE\n2gcQYe6iAxsQGufS2yMH2r5sQ8YZtoXG17UVvChvUNdb39QSFBY0rA1UVg0Y\na3xSxKcbFbiJ0Y3VlLINdk6/A6C1jCDEEIYwXJPbHW/zp52wjtY+6NjLnSzt\nphOFQMwmd8ti3HCU2BuG4zhwuGgfYYfOtHFv83l8ZQyJyqPvjIarJJ/60wF+\nfMJO9BlECGzh/p0MA9TzQsdhHfZIImNm8COiwDa4CzUp9fbdAQvFAAGE6vQl\n+wVlrhQvGBIQfz7H8dAtn67oYO9Jd3KHv1GCDxThGEQBkgQox2Ue6yn/bS9r\ndcDELQiJek1lMhTjnfujtI5II1VGJTJhkLTEvFJSztnwQ2V5cSSKcB7SjH2j\n3Ci7kor9dIrDsD5K12+qaZo/6jM9QDWiMhtOxv7U/geI1JhsoToWzZ8LgddL\n3TQM\r\n=4pGS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.d57ec74c7.0","@material/theme":"14.0.0-canary.d57ec74c7.0","@material/animation":"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-indicator_14.0.0-canary.d57ec74c7.0_1637079346315_0.7533002611132193","host":"s3://npm-registry-packages"}},"14.0.0-canary.554c71829.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.554c71829.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c35940e2a058b2f15ca21e34f2b04097a71966b0","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.554c71829.0.tgz","fileCount":38,"integrity":"sha512-yxlB1Ko3owj/FbbZrW1sQFFg/mmhDJXcVlwtsFg7X1+HHl2p3EU06h24+FZkqX1nKNDKCVFIOOzYP+oyOs37mw==","signatures":[{"sig":"MEYCIQCJtN6qAAFQJWh/MeLNzL9MLACmcuoPoDn2RQ9vhG2uRwIhAM/A+lrtiCUi+VzxtofuMYVVYZGSgGsdzTZjbhER0qCP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9neCRA9TVsSAnZWagAAY/AQAJADxNGx2Vs/SJ1yhCml\nTTjy8yJaFTkqkSnQ+xcdVy0SKt9Fr/toxNI5kylPtBLHEpgMpHm5vuopO52v\nQDD1WbPKbYueuTuBg2M0EnGCQzboAHtylfolJPhfEZ1NQDzA/Tb/Ouce9lec\nxz5ldpTU/46sOuifT1kxeukKVi2Hzf/+WpgZj9BcTDAZHfPA+cXGloIyb4c6\ntWkMXvFHhn9VsbLG2vg1Dx7QzCRVG1JwQr6bwL/oZn2vqsqS9RKWBl/EUBb0\neItu4Cjdo39Ort96pWoo0h7DcEv74tDvTw8hFKwfjudbU3uR3rrhW22EM0aN\nYGuhiVYAxbxoCrhyofLgEme3kBzh12/VLsOY4zxuUwzmRNR1k2Zd5b6KKuMY\nZRNyrFjvMis1w7A4RqZHCsQX7idhUd/ABwDeGZrPrx1gwlsqlGgcBlCFVZLp\nf/EPuW7IMKO6TSOuZcsSC7BuMArSd9f5sNuh3NLZQFyzi9mgAMuHnbgbgHn+\ntPC+i8aKHMA+IwJRCuJBqO69k2NNESGqVzSwi1kbGW5Y2nKap5P7UJdXxZbF\ndxRpqznml01sLaCu4zkWkmVBideQonV0RKAdgAcjCO6YDRiaegt3I9+addPx\nydJWSVNhrghhLFy1j9qpnK3wAGHrDtQwPo7axk8eIXTmi5nmoMIRGQowPEk9\nyKqT\r\n=36FF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.554c71829.0","@material/theme":"14.0.0-canary.554c71829.0","@material/animation":"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-indicator_14.0.0-canary.554c71829.0_1637079518567_0.48235247745946097","host":"s3://npm-registry-packages"}},"14.0.0-canary.3ef470efe.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.3ef470efe.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"86cfad97b88e5f1704baa821624c0e69b9630b38","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.3ef470efe.0.tgz","fileCount":38,"integrity":"sha512-RzdBueunKVqICAbXQUGPddQ7buWEWr5YzxDxk9TzGKO3s4/cJGQSDDKuVGI0bnl8QrmQWFsuCkr9WuFFBN6FjA==","signatures":[{"sig":"MEUCIQC9fjAyY5w5zjuwxJmOjMTUZD8X621wQKqNqEW4h5KmcwIgYFxp7f//BAngSk2II7MSWqE4t/ZGkgLw1jjvngZjWE0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9sCCRA9TVsSAnZWagAAHs4P/iwtLguZNpTT8DgKuPN6\nV5edsXXSKEM6Yp4n1Pe/i9uwI16WTOvDMrf7dl9nUmw9LGMsOUQGMa8AkZ/y\n5Ty+3oHHU4hvsDXoZeQNnRnFLo2R/4SQi2DX2yrs/i2LzEVGdONIAmE+IdHR\n8alv38l4g4ePITSOF+mH4sIr7A8t/33a2PjWUrB2xxyLgwPAMKSbds9i1wfm\noizdV9im5xldA/8n9qSqVQZyvH1+xkdDs63pWPVJlnJbYPNR5v5rxX4Se6VV\nebEUvJyZ4riSwwenlKh76gK2e0Xq4DiMubToL+1rx8itv19RXXjZdG3ueoym\np+Itg3Ar04XlgYs9sRjSTCnx3vXYcmYdqHo0JITf58f280r7XXsqJ6n+SzUm\nTt2dG8Mce12TSl9r6Z1QdkhUPAW4V8kK2jGVX4iq7rOrjQPdzn9qewiKXgtt\nxhHwsRLG0uIfnMHklMDUuHrod20BqqIjmWGCjCHNZOMOysgGwafNeYxC8o98\nRkj9aKD8lknvbpwyrO1gcD2sHKRlHDIgI4jmArDZlGc3Uey+M7yoVJTYwbFY\nITEUjpSruZJwP/yy3gl2s5klGZ8ZSqs4f+nBV5R593Ii711uhL//Z6GIr7q+\ndU2EwO0KuX3nOOlwXdWTDHcctEoMmVXoohgzdrtXQ0TvsGAeDvBt5GrZA9eA\nKvWT\r\n=vnD2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.3ef470efe.0","@material/theme":"14.0.0-canary.3ef470efe.0","@material/animation":"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-indicator_14.0.0-canary.3ef470efe.0_1637079810043_0.505600363371185","host":"s3://npm-registry-packages"}},"14.0.0-canary.61a28b2b5.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.61a28b2b5.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"07165a21b0717b308dedb6db19417a6bb65a49cd","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.61a28b2b5.0.tgz","fileCount":38,"integrity":"sha512-6b3NDkJ+ffk+sPHMWpDjvtI7vVM9Uk6eianA8DJe+aPqSeRtZbJue3K9tCBcKNiQ3UGD0JoZmp78IIh5HQNzpg==","signatures":[{"sig":"MEQCIGgenrVyBQ6VtwnMHMNsfzo4OUvrux436kifWZhWQMjtAiBDBVd5pITN3Kvl+Rc5LdKPi9JunuOuYA0CtZQcnr2NFw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlVDfCRA9TVsSAnZWagAAC14P/18Rb6wmZZ4djI1BITv0\nO4krGqIZlP0w+V5gLMT+0WdObuXrCKx1KseSoPmkasi6lannihkBiZs0fGGD\njPMemqxmziZDSwsHjZ97MxcuhF3j/Mji1jxzmzYOM2sk1a03FmbY6cANUU08\nEZR41ia9lZxvJkvs0L+i+lUQ/dEmRtQ4kNJpkv/DAXXPU83j4HHHDHBJ/HzL\nJG+rdDs7EpuYwBbMko0wEyOyZQTNCWPU08DnTSREebR7B268ezehKHbk4kso\neR1duET0NUZ/4DI0dD5rjKp4LSvXMIlGgbCJ81aAVWLcC4f7UgSTMl4OaVAh\nQZMXOi4M0nLiXEACUHGhl+mzJEAb6qYxECmnAeC1GaVsJAPPL4vYogrChD6K\n6V/VcztmaD9iQ1K1w4i3sOPPviOW8xcozJ+bJ6hpfCa8Wbt+HyOAlI4MEvPJ\nCSyx7YfR1h9MOcrbysqwIr5P78qEgDmbZXOIGqhp/ZZzU6DaTBs+ZgwH9eS9\nKb/GscmlvwVKJ3goglHadBdhXYqZvqWFLK0t+VLoei4WgdHCy48K+U/vrG/1\naM8125ufHpawlL41iHkiO6gCki80UUaHE8+/tE1WwL2Vj0vxiiw63I7l0aO9\nMofUPoo/jgaDE81l7PxQ3TtPIqi/b7/c3hR8ai+BuAMou3OcvE+k2y/21bAq\nLWVA\r\n=z8CY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.61a28b2b5.0","@material/theme":"14.0.0-canary.61a28b2b5.0","@material/animation":"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-indicator_14.0.0-canary.61a28b2b5.0_1637175519407_0.24724396754035172","host":"s3://npm-registry-packages"}},"14.0.0-canary.fae6c652d.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.fae6c652d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"dda18a79350287d091a7a8bda0d5f1d922443760","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.fae6c652d.0.tgz","fileCount":38,"integrity":"sha512-Er/wKwGllYchFtwmiOKxHhiaCT+Wih7bSmRQ/2EnhFmgs/oR2gwhbhSoDF/EESPCAB5+y3Sf5i5UBFYSyr+7Aw==","signatures":[{"sig":"MEYCIQCffLQw0adH1q/Fm2yFzcfgLeL0U2B+WBilYz8ZVM9O5wIhAMqIBX2hNdVEnMrRUatOu+dHTVPQPzlkzGqDxTuDhMYY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhln42CRA9TVsSAnZWagAA7H8P/jEimb/SdPcQwibYRpO5\nXBzV/9OxOji7Sf6Ia2gz7mUSRAmt6MfERmmPz2DKDue4kW/XtwWex5LiOe4Z\nnTqWVNG9SRkRw74voK3xJ2sJ1YeB/FG4nLGuNBoAJ5CtDNXDk5rqpCNfh05k\n8IPCLcrD/FMTu7GP6IAgkfYOnb7Ig9HsmxFxuSMOFi4BWqQ7OgKIDX02+3Nr\nYxKWSz+mV2GMO/62MRPiUAIA4Gr0rsXMC8fUViI7BlR25223VGBca+7at9XQ\ni6/zNYvqI3NE/DtNMwh/eZkVlH9l5lptRAQozRrdb9CPkw92yPddAfMCBf6r\nrx940LVnmA8nuOrZBhtGmf8wEJ5xmGF5I/jpJQgANTHJAJ0mmW+v4LKPdUYb\nLtm6sMsJOTYRcsBFfA4ELbbOSmT31cqfFWqTq0+LUtNsfPzf5tEvMl4qEVbs\n4g/2LfBipJK2rXElp063FtXU4I7LmMCgG2Pdr3r14sQH7ahj+qqfRot/USRT\nW4nRDfKvRHqbZgoLwpnZBW79jtfCxNJa+3i3SwpUXVnfvXLpDpJVPwMKEbqv\n7Ds/4boVsBj9ub3uL7fjaCZrr+0Mug2TjX3i1q1vbG26v6cbXcbX0AI6G9/n\navr21hM2lSogYobohWBpxkcoP3UFb5ANFozA2n27pAcNKhtnJ795/PgsYw2l\nYoA5\r\n=Ll6D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.fae6c652d.0","@material/theme":"14.0.0-canary.fae6c652d.0","@material/animation":"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-indicator_14.0.0-canary.fae6c652d.0_1637252662640_0.6622646326760593","host":"s3://npm-registry-packages"}},"14.0.0-canary.978a3b5bb.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.978a3b5bb.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"81e76b45835fd3176a3baf3f2ec002742a6f9843","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.978a3b5bb.0.tgz","fileCount":38,"integrity":"sha512-fQlmr7hdN8fZsrwnkVaSGoe5VsRSs5fZET0aU8eG8+1ZpLihho3mg/KfVSRVwG6ptSL0PtcafZfNeNOGttfPOA==","signatures":[{"sig":"MEUCIQCNJixWDYz+h67Ynhipkj3GJ6gc5p6dHhKgswbOviaVMAIgb0dt+KnQkqqP4LiWvuHkIkkxdtL6ylsGPsJh+agY0DU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhl/06CRA9TVsSAnZWagAAHJkP/2BNlBOy7GmB1Pbk/CAq\ncdKCsKxlwTIE4iNmZhrr9tlQcMKAZkW/bR0zUWyIMf6LLfMAAwpNh9IyQS52\nprmTfSA0HDxHYwgjIaS8yVbmp24Swd+7XjkvnbcKE9STe/DmUu+eeUTZEWvD\ng29P7By9ZMTvmVGRpZKDVZBuWPFiWHS5PoqKNRR4TDMsWpStoPMEbjny9gQ7\nZiMc8d1FZbPUV+CZVLxyo9+3g36TXPZfaFoZzEx4IkvlRwjCw+dafHSuhesy\nFPKMF+3uPJv5HIhVxF+U0/DK+Lh/Dr6R3X1X/iiztflmkxUZQjaZjfIZzwnB\ncUYB631xrtQj2AIITMZ/d3fjgbfIdrQv4HnHFNAzyco2U41oGPTOXwK3hfhA\nlTyFLCCygXzYuH5wm4/cszP+A+GxKlmF89tWKeS8tyzL8n1XdQ/dTvYGsWX3\nVCiIzr9Xd19KWfJt5BxRm1Ljw31q3fh+LfyOl1smLDhsq7TneMijDmx3ebGu\nYtFlq+hWDX1MZqTmT/QEUQF4Hn8ileMR2ulwfizF3BaEPLSWbcRTs09X/0xI\nAR76jmYQMoKzuA6jIb3HdxgZHappJKcU4QkumPILMVcSng7gWK7SsaYmtd88\nGxKzTnlhZjvX4Jf4PkLYX5Ho3l9TP70wQJiDNAk9uoq/TOvgE7B1rKyc+1mb\nuFsu\r\n=JSbq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.978a3b5bb.0","@material/theme":"14.0.0-canary.978a3b5bb.0","@material/animation":"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-indicator_14.0.0-canary.978a3b5bb.0_1637350714767_0.8254306209780968","host":"s3://npm-registry-packages"}},"14.0.0-canary.e6f43cf44.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.e6f43cf44.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0a2fc1b3c22737cff98afdc1ef7fe5231e8ed1a3","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.e6f43cf44.0.tgz","fileCount":38,"integrity":"sha512-cfNvLO+sBOtpK8eKjPIozGEmqTNIwWlovh/X5a7cndmRp6HE4RB0Cao8nliWe9eG2an/2aMcr0QoIuNeFBHh/Q==","signatures":[{"sig":"MEYCIQDAMV+rWu34rkKjTc20AsJhZuSl5UtPd15+lpDK7pZsSQIhAPHfjI3k680x9i55gNZGn6/EGMfIPM9sMG+E1+38D2sD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhm9SoCRA9TVsSAnZWagAAGfwP/jbPtVafMSnpR3XK9nSb\nAQ162LB8wP4qbCXAAmToPAx04MqGf1ve9/leOEL9x/0u7mgNOdFR2cg9Bc5U\nMLDUTAI99R8sgHPfX8uXAXg9a5c4OXEdh/t7eeBBIVXyr44FTiCkzZJeVcx1\nxSGBHEVwc5s6B6xY0Vt1gCV5w5PVDydHRMPeW8Yp4mOGOZa5ZGdqtCSTKv2T\nmgA7OFk78T7i1HM3HcFHn/A7BDgeNeLmvESdFHXlzkRv0wNo+cQ3GYpqtT/X\nd3hqjtzRpv/sjoSpWUkY7H0E0yIp8UrB0/WvvI7NLd9ixiS59b/6DSXGipQm\nT2DumsGPz05Y57YlutCCTZ1zIynuLuTMVBiKzfcQ1GoMoCGTQJZXvP70UK6s\nO/VyByOTlicZkP+788U3GmbPyy2JMzscNabvw4+0Fg2R0ZLk9gbZJGFBsOOU\nawTdaPbzG7wIwpJSCvqnzgj33nqNAYS9PIXZsin+/duoY8Jo0R1MhErHxkwE\nHcYoGkMO832IdXT2pAMZJTJ3dPQDd1bqVpRO4oY85+cjQ/T3nRaKvcqvvA3A\nkU8+s5GryOzxdW3u9cSO0xJjhrjn/FNNsw8gcpT02zmWPoPPY14ZcnAWwRZS\n9V9ntTQn6tcXA7s/PV3GU9Nj/u1C3Chv5VWmOcEA2GWBOaj+xYa8JE/uLtqR\nAp8f\r\n=XzPe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.e6f43cf44.0","@material/theme":"14.0.0-canary.e6f43cf44.0","@material/animation":"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-indicator_14.0.0-canary.e6f43cf44.0_1637602472645_0.6280213058807651","host":"s3://npm-registry-packages"}},"14.0.0-canary.39cf14bc3.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.39cf14bc3.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"2e9d8aa6fe8ee8967f9644b755b399fdcf6e9526","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.39cf14bc3.0.tgz","fileCount":38,"integrity":"sha512-dD04GLE9qmZny0+iyzNEtZ/H97D5EqBw5ndNkkLWu4i0m5GwR+rXzPwRRtUwfEhVdZghTrW5sZDW5akqQ0XaMg==","signatures":[{"sig":"MEUCIQDRh3fGhCIbzFA234JBT4y65U3qlXXUSwVsvCm2ahiM3QIgOiwfqjc5rAeOTTBasrhCZMR4StuBtT0zIOB+kLzpGrQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnCHYCRA9TVsSAnZWagAAsX8P/2kEhPJt4KJZKZ3yvEbp\nPfJ+MAKaDYVAUtk7ijyBbLZ4E5HMRuRlejI5pyITcerCxxfVTZ02mVYv5BND\nel3ORJuL003UowoCYkdhSkyqdIyeOB2E3XeAccF4Jt6VeNc1PKzOvMiBSo+z\nO6kLYUxHjOk0fu0OcQU1GX1vxNh1wroN4/JazQR8XA8uEvtSvf81BxtzZYjr\nEvrYcOJe40EKHwAIuHpExytetu5gUBVnedtOxMITflPaEJKt80uex9bQAUGi\nnzgdnNao2cj6JBfIZNYQvYkZiroXD5rSYVF155TGnxueY/CNubNt1zNbODUe\nN4ouunbtRs29An4nC/f+JdHErrC7mOgogjmLxpJcOh/lem/wbzUQEOaN8D3p\nWZT14fASkVCUgUl8bStrgojtjNWLQNsf3K/IpT7/VsJcA6TRjedAUFD19829\nAqsbRtsCwvZmyBrjUPQCvGrYcvVTYXs+k9jnMZ3Rk7qej0piYN4sxnluQ+uG\nNnGyUP/MeWFoxVPHL2pdH3Fe9811c2TSxfwifSBfvixvcbGFITlAVqQP2WYM\nBHQcUzsxOyf10nT3/Ix+TyqKMOwQpdjgeyS9V8bhHrHmnTPsxPcU6Hu5PUAA\nbUJE1H+NUU6XRFsTIMs+H9zWrK191yMx6dwEMgSrV5qbzsYWLjfYiDI1ThPg\noA4y\r\n=9J2h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.39cf14bc3.0","@material/theme":"14.0.0-canary.39cf14bc3.0","@material/animation":"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-indicator_14.0.0-canary.39cf14bc3.0_1637622231966_0.3991921333141406","host":"s3://npm-registry-packages"}},"14.0.0-canary.93134d453.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.93134d453.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"2c640df84adc3762664264ab811642e63a06d981","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.93134d453.0.tgz","fileCount":38,"integrity":"sha512-4zkVdiK2vLMI4XzyzSKloDJPD65AOqc9wjd9+VkO7zHPC03Ibgz3TScaaqW4eJAlwl6u9cfsw8Bq6ONSa2zz1A==","signatures":[{"sig":"MEYCIQCPwkSgs5vosrEpT6K2HjZTd0+diZwFdKjn/i73SDgQWAIhAMv0G87O5kUJtCKnL2neu4Sgny4UhYxIj6iJvKVRzQjk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnQrsCRA9TVsSAnZWagAAAu8QAIan5KsqPO81AxDSX65q\nTPtWw7Cr6m2Q/AYC1zXT2TVZkaUrdWEYi7E4/inNcUABH55dwrjf66i9faoW\nbK/byxYivxpYhHIth3sQmzOdTwisVplJGU4FuCZ/AhP1vUujCEwHmD49DnZu\nLQizDxxXU5vye5PuuxJVTdMt2rg4/vZxiJY8MXDTMpR2VGxhH8qdE0/szXw7\nMFWZotRsYjsXHVgKYeg+Vi3kzEQ9/wwK/Awrqx1lHEncdgvrcTKGG8iZfbZ1\nh1mA98APfruE4HsNTc/ONwgsDvKtD7WhUhfqBPnfL5LUAVTMtttGHOs+2VUP\nVgzZzkeRwK/2VFsGNKVqGzyriuhsEyz0lRJDwJ2bRs+dsLFL3273KU+en5UO\nLG3xAdGG/KHbb2KwZSRR7u58PJSqw9+CSSt02pQ2TEyUCK8VnmNW8YaY1ZJ4\nXc4+99+4ddoGOA0cn2WvNyD2fvXif9r//k699JMP2Oz37qbUs/bl8+zAHI6J\nDx/Osk5pW7ZPySnPQTQy4RkEE1r2m/IlexkGAISboWDNHLldo1Y6mCLF7mSP\nc5JRk/5nJdMnSs7rYINcZh/vuUKtlDgL/4BmJTIrym3ErEUO28ik+pN5LIFr\n4hHpDhueCXW4xqvoX8gxIStYC6D20TwLCkrWIlrnr3Jh2tRnpgcW/C8DqQIV\nVin1\r\n=cOoW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.93134d453.0","@material/theme":"14.0.0-canary.93134d453.0","@material/animation":"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-indicator_14.0.0-canary.93134d453.0_1637681900614_0.9599541424816009","host":"s3://npm-registry-packages"}},"14.0.0-canary.bbd11268f.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.bbd11268f.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"bc3b43406e3b99855733f68b67f79be6f813be70","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.bbd11268f.0.tgz","fileCount":38,"integrity":"sha512-wlyJB0DN04ARkc1kPnrD0tZJlxRWsu7smdmXrIxuqse+v9JzMIfWuiJFHARwVnZxV4mtFP7MobizCJ/ESeaK2A==","signatures":[{"sig":"MEUCIQCLhN4acJ/JJ+VpNLf4VzvUHPuhjbSobXkgTThHXzKPEAIgIerYy34AxHUZ4ssBxYazocb6xuvrIaH6IqDpp8oTMhQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnWvJCRA9TVsSAnZWagAA5oEQAICrLmX94SqAWZKEi+tK\nanB9KDGqeDgEDksJxw+n8aKEjSEt+xPDU6dyPxwuASkdxElpN2dygnlyF5co\nFMaEgXUKDD7dmNPKURZJELukZbLSjGg9pnw7YCTWUgPTOM5/2vasOgTFhdwc\n71Ym4RwgV/cQK5lhno92aKwHfBX9ekgpQbVczdLrbmbUVxAuaZ4UnfEBSG7p\nN7+8mnyHhARJ0Ci0HKOVg1m8PJKdks4GbpHgp6B69SOYWdMIaMK15CVGwQvw\n1cwnoQqo2fHHsamxyO19qrtMKEhdQYPfcAncUFmFpB/p8JUgpRliuquXnZ6/\nlW9UXwbVoITQ02Z+8mZIgQz1cGI/EVNuhQEWx0FfW9/vDq0oMGOuo+bg7GjS\nD886739nWPA9xP84z5iO6C9/TlnkQTACjKV4/nax2nOizwbZzYMUGcQsKi6E\nHeG900drTtNspzccZVLTLnPLwttjZ18EJRKQEqkwiNylh2lhzfU2O1kdWf9X\nIGZeYYsXkNMQawDozVDt8ko+jGGt97YpbBvnyPCB+3VLsvDMzD4qJUPGCx1H\n9zC6hBbR9gPSQdjpUpebkvlhpZR6YLMBqjfCnYR36dd6SgfWp0npKvgV4c0j\nQmqtjMICpGgWZ8hQptBIEJunJ9PPmFQVzFTtzQlBzmN5jV9t9d9yZDy4exkX\nzw2c\r\n=jl9B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.bbd11268f.0","@material/theme":"14.0.0-canary.bbd11268f.0","@material/animation":"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-indicator_14.0.0-canary.bbd11268f.0_1637706697717_0.34431428970451794","host":"s3://npm-registry-packages"}},"14.0.0-canary.3db9c4d3d.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.3db9c4d3d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"a01503a10e6ee24658157fdcdee1ff7f4d1d11d5","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.3db9c4d3d.0.tgz","fileCount":38,"integrity":"sha512-97so9Iy9wJYEN5p5lAs/I2U1rYD8kg1CqCC4YH7mljiipcu39n2tlIofPixfn0Y+uvUQtRoLbeANHWK/xf51wg==","signatures":[{"sig":"MEQCIChVzJlgpCzZ4uwTaGE/0kMBcHuVlliGQauR8ZiHLSkoAiAWnD3cnn1ST5xWa96Qd3MyLZeGj7KlacfCMEeboB6Xug==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnlwPCRA9TVsSAnZWagAAV2MP/1cr3Qj+bZ/RwIfQn7sR\n0V9Ev1H68d4RmIFk42wMuZ7XLBr+E9WBoB+zwPe+WzdoLxP4d/2SyLT2s6Is\nVE9iTQpKY/5iIAs7Ey1st29xVIQCo0b3TDOCLAHcnXiF+pmiVzTuJ7iFMXSk\neooFAD2P6Xfm89Nvwn+AZdYvyGUOimZxq96IFjiArUVX6uh3fWi+MujMroPy\naKwWsimseV45gPS04mRpzOA818TDgGl1RwHKRtZI/1GEV9Bif+aqQdVkNnk+\np5Y6tmR+mZ4CdbbIXUu60oszh2VYxc1RhAQe2NjJCNvV7NPpcXkSI1t+U4qm\nqkmzDgAlEGsjbCxBt9YPAytomSxZKifMZfSDlKBohS6I72YDukGXCNyzjuRB\njtFA7AUatSZvYOEiz6/Eit2aZ0TF7mvPPWPVA7de8js5Aj068yR/vxkbRXCV\nCjrObjLSgQ5Uon2Cb5IFbzegAB9j2BIokgekn3OBIDRuLJYBqU9gzn27KBv5\n0JxZUEYsOWQC3YH/6M1sKmx/kiN9cZSt6dQU/kMMdUfsCF+i02ib41WzaX12\nB9XGNAvhq6gM6s8+pTjxkuCjoBNCNhIwbfzIu6RBYii5RqIJ7NMsOjkFSjtU\nU+CKZV+V89FLmn/ISB1jW6zMh5p9o5kvjmp1p0IUOeK6b/c+58r9xhCIRxIi\nuloa\r\n=XO77\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.3db9c4d3d.0","@material/theme":"14.0.0-canary.3db9c4d3d.0","@material/animation":"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-indicator_14.0.0-canary.3db9c4d3d.0_1637768207838_0.34139948013944155","host":"s3://npm-registry-packages"}},"14.0.0-canary.78305b6d5.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.78305b6d5.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"9c987f490d4c119385d046c0daafd8fe45d6bdef","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.78305b6d5.0.tgz","fileCount":38,"integrity":"sha512-RP6XjAFPCbLIlN6RLefWq48NduL1UwozHhcpFDVhJJV+SAIbW6KOBaNaTbg3sbUG34rW/PQhp4tgSmZuenHOrw==","signatures":[{"sig":"MEUCIFfWgIv7T3CV6gVVe0A2JnU7Iz8FR1FfhIQiD5npmNbDAiEA4rgBHaILnqPBdfC+AhMphbTrKD0wmpSQlcuiulzpClY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnpdrCRA9TVsSAnZWagAAKkYP/2FU1yXq3lUkvSunOv2c\nF+QpoI1R4y/PVTUymSGBXQIBirjyFhgil51Tnjh46kdXqwLFpuZYvSJu25oe\nZq2jLNLTNYMdOMrzH/BoTpIgpmQQ4k7P5EdavROshs8NkH/2uXBWmYGTnZdn\n+OJ+PjXrdrz7tQOysJTUC5twBuAatfEEry2EHtm7KqVvmPobbIfaiADq5e4o\nCeoAjJuRutk7mc8XBkQq4m5oGH7048rCD6tt5cvupBMKeUodhFFjL7D96haE\nM4sRw5Qln9jq7lxN946JTwUJLXPfA3FiDtjQDpAk6NfMOA3zEN5An4QrVZlW\nLfX5J/fzA5ldkJX+740X5bjU6NEjNPf0VI0VgUfAk27kK1IVpEQlk5oLWzWU\nutdas4ussCjy1oMIcKkvidQDScT9LLF4g5xrA/HlDpjWwlOekKbad64LUKwj\nj03Bok/7aAP0TIUv+l7c3k9YgOo2tP9hbrQHZsTIuS1dn9j0YlYyL6fYoZnd\nYQ266dfaOZVVq6OYxkLDxU58HXXmyOD21FKCPx/luRMX0oS2yyKoouKM7wtc\nbfywbJLRNci9QdAe0LtfYvhoecTPWEh1uHEck8t53Mfkys/m5PFdqE8v6bFM\nmlnHQ/3753mqgx2IuYKHPoEfibliQZckhXLfHTxBdnWI79a5+jfXYhmNosn+\n6ueP\r\n=D7lM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.78305b6d5.0","@material/theme":"14.0.0-canary.78305b6d5.0","@material/animation":"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-indicator_14.0.0-canary.78305b6d5.0_1637783402919_0.6752247610759181","host":"s3://npm-registry-packages"}},"14.0.0-canary.43d08ba77.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.43d08ba77.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"6129ff2a6988d17474fcfb4981dae7c4fa682d65","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.43d08ba77.0.tgz","fileCount":38,"integrity":"sha512-rMDrGkRUvaxkKahkpCM3Le7Rm8ha0PmUMFK/eOGb6K6MMJFic/iNyiDS47Yg9kznStT72Ns5wm4y26EG2BizKw==","signatures":[{"sig":"MEUCIDrqd02RCXdWyzexF35rZf3KBGyWnnqvF/40nulaA7gRAiEAgDRagfZj5qMd/uVN6ZLNyJqec2zu8pV+08w3CEStYkQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpqvfCRA9TVsSAnZWagAAoEYP/jsQcLs+9Vy7bwM8+Kgu\n5frHvzK3OR9eMt4U2XOU1CpRB/i07uq5cdND2RzKEAd3qvOQv2XJxQVBk3yt\nb/Tthd+zhEGU2BUFXOgKGaVK1xXQMG3vx3mIQfUhsr6G3fDKjWTmRisRLqe7\nZqT4wqfDAD+V75uaYIDm6MAQAUteHqwWB0TVPW/ZP9zD8Kln685QXmwQOJxp\nL94W87tWtHe0WOmmMpn10UAlt7d5OVNz5VVavHQdVF2v2ta8uhe1NT/lq56r\nJeXJyXUU7FgkaQquMmQn2t+DJl6o9ZTfHaKtKCBkPuCjXUgXATQEzyzjIzNB\noNg0PxosQyg0nuZIBBEL5od5AwWGPfqJGC1e+oMsZ7S2wS9eUj9PAxSEGkUH\nHX6NX7yzIz26HPkX/0s26hDMfZ4J283cpAGryJH3VFFNwQqt3QYSAiiE3jM3\nEJTV0hQS3kPY5cQ+fo/PMguGQStRV5T0FcRVQOMAzFIyrZmVFfHhx/EhZ5WY\n7Q1PV3VY6uu4zoJaH0OllG2ULYMqaxivBlpimY8VX1io57m2uO79kH92+oe7\ndB487Hvcc+K9P/6wFlkq539OE4p05+i8lEQEPNufuXWDrWjFdQJkMrcZxiuy\n1W3KY6BRnzNw39XbX+usYLrKycjnvHtZa+A+9Z9xIkTvWECH6HY0WLVnURew\nmILb\r\n=Z4Oj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.43d08ba77.0","@material/theme":"14.0.0-canary.43d08ba77.0","@material/animation":"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-indicator_14.0.0-canary.43d08ba77.0_1638312927464_0.3860246352286112","host":"s3://npm-registry-packages"}},"14.0.0-canary.17a072535.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.17a072535.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"5b601932a09139263e75a210e326aa31826b8d27","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.17a072535.0.tgz","fileCount":38,"integrity":"sha512-vi3O+K+llPHgMuBzxtX5Wg0AaUw5WlWosGdTte2tlTqohQF81WKyFDJpVS+5MBG28YWP7MZgqrCdrefvnDKY6w==","signatures":[{"sig":"MEYCIQCVXyJdGjSBbkbQUs9VcMR8GOQuEu7YeW+upjH67hQTQwIhAIGm3/Ks18TjTdbHN0pcAkCifqN8ZdmjR+pr+Ze+J8Gd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqQq2CRA9TVsSAnZWagAAitIP/Aol09v/a9PT+bv1gWHe\n/NHzJIElgJl2ETuHl+HAKfWCe3u2igCs/XhgZVbYT82KsbXEbb42QYbc3Iu1\n6Ig663zaihHEF+UuOkCQ9OhO0lQDmjhr6v2Nmtgqzic/joX5015vO9jp1I2H\nBWYYxmzC9S3p6C5MaDw4BCe83R/dPEhdaxd7rL55o2cSXkSNU7miy/jQPlwW\njYxYj7YS2mOw62OaJFHGu0dw0cs0PCFZoaubc5gRbVmf0PT6aCY86RayU9vD\nVwKitPmYUET62Q3+W9OBvI6kQ8D9kHCMfuDXx+6hGugxC4cUrygX30NWl+7C\nOmo6AV5prZYaGSjzaSrQv/Y2bRgZjhrJeBv/OD8+3j2QLtUx+G6RJWWKpai/\nuo6bkInVrVw1Ye9BK+Bq0wG2BymQDbtWHR9PfPkjIE9+fCTkblFyTEMumqLV\nvKoLoCha9KHL+379zw5Qt73rbkAc8LB8ruXaPKZOe/7s0r+WMNZPsu3zM2Jn\nK+uC8IO0SlNxZ5ix1Mxfg3oE4eWLHQbLOLyEux6Us766Kw7Qod/AkL1fqfjN\npH3aOgTg5siCu88fww2S7c46qyC1qRN3Jph9yYNLlxzMhTQm6uZopLhj/nBe\nPZc4LCwI7avaWX6VY4qXHKk7IgbHPDNMuXF2p9c7+SC3e4YY6oncfnKJMN8z\n8pgS\r\n=sFeH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.17a072535.0","@material/theme":"14.0.0-canary.17a072535.0","@material/animation":"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-indicator_14.0.0-canary.17a072535.0_1638468278219_0.0015612685311721108","host":"s3://npm-registry-packages"}},"14.0.0-canary.5d809696c.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.5d809696c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"a655b5c840fa5daf188b267979f07b189e27d716","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.5d809696c.0.tgz","fileCount":38,"integrity":"sha512-/b6QceY77KFRdV1TFHdjO4VNHa5FtWjs8hX1pOLGLhbchiUazjoyabT6+W8mqUD2jAGcojRaThMgRmwDYPcaRA==","signatures":[{"sig":"MEUCIGQpqN4wFlNVlBeulBgX3rqVXMBU9M9H7POfxySE3AB4AiEAkzKuTredG0PKv5DGrJCzNNzyYG8qfzCZ9sERrN1FPoU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsO7NCRA9TVsSAnZWagAAKQ8P+QDKEKQx+7zCXfikUMbG\nAIsDAYN4LW+0OEaBuhXigL60UXsJcRQeiepRnzuXRCZ6aCOrVcW2AXErZZex\nAykcojybK5l6O8tuzjPRtPLA+bfeX+XNh5HkbfXnx5o3socJQ2grS2KPUZ6s\n9VGEklVjTWIuPmd47hIPHzRGQfSfKtgjaVLxJxLMHJkNM0OyrPVkVHATfs3A\nL4pb86AGycRehyyZDchk/FkuiziidjOz+ftRXSwXm58cP/hQS0812joVCHYg\nPILVexoYEzhn3LauapAJk8dS3rlcoDrb+NvZrmoo8AtAh2tZynl+/4az9mK7\nMMv++45gwR5eKnxRhbvQ9u3TibFPAbgs4DD3wknHNdAkwfpUIHXqhzUqinAO\nMwpAqkshWNRPJ5R6xBTF3mc2Z0aW9D1/7vO/rLLobf+2+DLB+kjas7MAGzms\nrdVMecDPvKCI0h4urlaJ2KDV0oGmES6iGMb6Peq/xS+AMVwx/J+7I6vfa263\ngZCm4HvCNsq1n73KfM4w1yjVYLkStnPto0K5KmWNSzcdFtuAt3Lkue7xV6RB\nfJaSLqruBbCxVYDEcG0NzA7+hZ0ppG+ZTH0lHdfWimoJdS6W8TbnHQblSKh9\njd/5Ise+FiUTBVuhfAc365WqiyNY8ThsmJW0ELIfxV5eitGsE6c8I+iIi1T1\n0pCw\r\n=GAY8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.5d809696c.0","@material/theme":"14.0.0-canary.5d809696c.0","@material/animation":"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-indicator_14.0.0-canary.5d809696c.0_1638985421752_0.38148982916920926","host":"s3://npm-registry-packages"}},"14.0.0-canary.b6510c8c1.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.b6510c8c1.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0739b862739efcad255c04cb1ec3ba478836c318","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.b6510c8c1.0.tgz","fileCount":38,"integrity":"sha512-8TJKcK/5YPLk3S+iRo1AjgxzUUhNmdpGSIrminFg43zyXb1bIE2jXSIxMilLXRHkijFqtmQG+9MOuwgRPZIj4A==","signatures":[{"sig":"MEUCIQDKh3GQbb7ihxlKGUTyfLjBCBB39PlE4gzwCl8ym67n3AIgdpM4U4CRgjFQlpqEVdaHJn8Z8+9c9k/9tyTSvsgNGuo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsPP8CRA9TVsSAnZWagAACjkQAKE+1ZdOdRuFpQqtmnsO\nGDsM1ypNqLUTQdCRWV5QNytfSXH9uuYpVCJtkK1eS0B/EZ5S005Tpy+P/gm3\nclWU79hd2C6b4djfBR2rl/LCex4r1tCGD6WFcFpaBnCBCa7/lA4l0zkJp8EN\nvoKus20nXoLDGTn5bj+cE3l0sVC1Q09ReofS8rj4HK4xbRJ1+bQI6RP0uko4\naItk8sz5X3OmkP3Kzdcw5qSiY7q/0YokHaFTHpb+VEzrmfRshtRd9kouinzf\n97UOweXy5h8R0XNV5sjC8QXA2XZMs9UKXhLo1/1gqUhVPAB0gKs0KIG0Qj5S\nZ9ryOGHaT3+smW+6yEiWp7SKR03ynigOOuWoT+bOjEWPImEokAESyvEciJ5O\n6nMv4CZ36Z/WEgtDV9OYYb55BsNfQAMkDgLoxL1QpYH+F+O5daiMU212mNRi\nY9gkkbdio1hr3ngr8prTb2u0OJtWZYNb9Z7sXkZ7YokuYe4vaI1zHCtO7Y7l\nT8ZPQET3lXTfoKVi/1YYbMlT1SxYtT7DO4hDkIH2L6rHU3iW2XtT4us8edgi\nBccbdkCxUV1riNBP1bD+F9grrOgUtHy5vwvxvCNUkW2YH2bsqyLM2Cq5+xT2\ndBSj4lpLYlteA8hpd2nK55TuByDBuYqLvCUVQn6GCE4D9b6Pc61QLaR9+I+o\n+nRE\r\n=Q3LG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.b6510c8c1.0","@material/theme":"14.0.0-canary.b6510c8c1.0","@material/animation":"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-indicator_14.0.0-canary.b6510c8c1.0_1638986748630_0.39858194657616464","host":"s3://npm-registry-packages"}},"14.0.0-canary.f460e23da.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.f460e23da.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"67ae2cc16f62c99a0cb38847bb32a9802ef97904","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.f460e23da.0.tgz","fileCount":38,"integrity":"sha512-w65I9nNxAHVihWkPTBSOMz65Otxs9NC8Z0MrzYKJ6xJmU6c3UdMdevu0/er36xol5A9bfgxjnp2s4/TFifxy+A==","signatures":[{"sig":"MEYCIQCY5PAp+hEEzm1BYLzNc7yGUeUdbda1knab4J5YIzLCywIhAKkXJfU6y12Yuqh39XGsLg14guHHV24+mB3lGAMGB40j","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs3E6CRA9TVsSAnZWagAAFp4P/2tgx4QqU37ymxgRwjH+\nFJjLbMz178Uxg7z8QCnaLr3Jddpcfc/VAJQRV5L1k9UMGRzKvYrHS84HX1AO\n9Rl/eMyYo8PNuI3ilc9gmWMheBmGfo97xNYJ7MMRR2nJN0mjmCxKWHegOAQg\nwoU4LMAL6Ti8TQpoiyu9HwYJ0+bYZ/Gn4blMi7cMn0BFbug3Gp0BcJOhl619\nP3XXs/P6ltOWkp0F1AfMeYAzu7tUCknsCTl+w+Q4q5Fzado/NhI4YlY543ZW\neLyP8BeCH1cT93tRAaYVUgqadei9KuP/wkjWwI+Clr+xPNAMS6tFBtkL+11B\nN+0CO4NZcyQ3j/HFiKbRfpjK6xz072tGh1HuJ8DStykiBsW88ENe0H8oL731\ncrRe/hq5565WNW6FAtXx1dzMP1SVqeGyUbpRnDERtOwHIu5e4kkaarLVI/8c\n+K5G3x1ciC/7gx2ND+Oqu3tX3FumbIkaUSa777AtdSMESbExU3pOM7l1NRb/\n0nQ15JnWcplX45T+7nvPbo+fWPtL3AERjSN4qfx3ZL78pVrXgadf/06Q40Xx\nl1Ubuu3pBRs5l5bNxFV7uBXZjHKaVu01GntQkZzMA7KXfvpu8/OJQbOoRSV9\nD4cB98PHuwyBW6GBUTLt9vh4ZOvjPQN8z2ghp/TX7p2TykLwcSf2eovpR+p9\nFFZL\r\n=8tpZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.f460e23da.0","@material/theme":"14.0.0-canary.f460e23da.0","@material/animation":"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-indicator_14.0.0-canary.f460e23da.0_1639149882235_0.9824202108110616","host":"s3://npm-registry-packages"}},"14.0.0-canary.7d8ea4624.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.7d8ea4624.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"378b9a88a44ba134e08ffd0dc7a7f12b9445ed49","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.7d8ea4624.0.tgz","fileCount":38,"integrity":"sha512-lCvlc1zkmWwLAY5KMHRUOvbSwsikQStOZP3GqeHbalH8apBGvlA5nxICunEbOxqHDmk7++MSJ8/LsDB6yH+SCQ==","signatures":[{"sig":"MEUCIQCtWg4GRltuH/F1hMQExQpEBAxgF7o5zSJZg0e6/V1CjAIgTpcDh0FP1bchh/+OEMhesjQTKw5usWpPBqGL1X55SIM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs6pnCRA9TVsSAnZWagAA6FEP+wY4zDO5D1DRI1j9Mcp/\nNvgORJvBK5YunEYGHJh88mDvalnHsEIixc4ro4y9Dsy0s5tluJzgxzDhQZ7t\nfXaNYHnWzOmX89Edp2lMf3sV7Zbyd+XOzveF0F/iNJjS2tjxpRaTB2VYTDjJ\nM+HUfipp/oVoqnhUX+MG9xZt+ddb5R8mxrdvZrZ3vl0CTMt+8apMOkRMc4id\nM8MBCXqcurZ6BUe9FYlVHZvZqPi+4Ez7ARx3qRrKRHlW02u/8e9KPnz/xaWR\nAnWPts1+/tofAOdaoHM+TzqnS2d1DaRLrtOuSI0ruUOlGxX4mTy6zvbZuDrU\nBi5KVWDYxcLnxMTtaRuuVmh6Ah4ChcZQ7yE8m/PDUm89AB4zf4cAzPyDlq4j\n9vzTX1q09uAIk3F5Ev29RizqxLhA6viVKKs7mGnbjjIxy7JCdzLIcEp56bSj\nmSpAq6myCI+lXldMpwpr949VRZWigsbgi/o6sKgCbdaD5SBUtitRTK7/ypeC\nL8TQODy9An6EOzDSQiZyB3EayB8AquU3f7n46JX82Y6MvCNSuRQcNqaKUiuh\nssvHWVSBDL4RKeE151L4lMlH26fz47dnNlPtuhTvKtSLE2WDjiSm9F6uC9qk\nkIASM6h+Y6SmUXDCsG/wUvLyZtF77bBcMSzBQn/dd755EaSInqiKBeVrBp7n\nN7bJ\r\n=Zwag\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.7d8ea4624.0","@material/theme":"14.0.0-canary.7d8ea4624.0","@material/animation":"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-indicator_14.0.0-canary.7d8ea4624.0_1639164518974_0.5145185265803343","host":"s3://npm-registry-packages"}},"14.0.0-canary.8fffcb5dd.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.8fffcb5dd.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"d889de57fd9e1aeecd9ef65c31f1d81dc795b4c2","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.8fffcb5dd.0.tgz","fileCount":38,"integrity":"sha512-uL+07JQHjGjDik/9r6+SS2wzXyTel8YrJ8UdlJCkwNDpKrb1iEaJJLKnYQ9jVSFxxrmZjHC8+Uvp55EN4nejSg==","signatures":[{"sig":"MEUCIFtW5/7932HAPjwNztG+p2GLaeX6Ii4fzC8Apk8nfqxlAiEA+u0a7uUlGM3izXxR6b3zeGL/nQSy2rhritGGG/6Pl/o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuFu/CRA9TVsSAnZWagAA7s0P/A9dEl8ux7pIrLeGrnBk\ntNcC/j78YjmPaANwbsmubf8YVywnayVZ0YRvdcLz2/aPe8D4cKYNBd+il1w/\nWYVQnm3DQr1rV8gie7kk6Y32euFA0DkUtcTcXg3xSPfCabC9dY2oEFDHBn5d\nNoBKPXhti41GpPIQKGnQY+8z76emm78ztmi1Rixwbct3K0FffR2mf2y96O/L\n7V5phI60X3OwqXXrejLwW8ygF07hWvIAvbFtRNK07iFOGu9B7/caIypT6gK6\nQr0zSYieh+91ekW+RvgxTc5Nwthb+5TFrgBMuf7Qv0n/akT1mB/XnAgoBV6M\nItQ7Rp/8z8m1R9996xI0BsYnuSPzgWw1tZ2xCwS9Ac1z27jxwzzQbzKhpXxX\nLqPCoVejtNhkIOfwSIMnh0Efagf6kZnW6n61+dyhKkQXPB5iSN/L+8TSo5Lc\nFjUPEAPZtphSU8TPcPf5Rh4Zgj7ZA7WtjqsjXd/xZXGwu8CV2bjj6jcBMgT+\nct/4twZKa+LzBDJMgCzfr5v/+fTN5FKXF6R5ejJBY0Z6UoIARgal0lAMpowd\nuYvbqwM/jBsSHOnxo5cLwKS2jV6Fk6gEvxc6HqSBOZ0/0A39FwZgvEaJzL3f\nVmpJtx+dw0Jre7wanztKTZX6KqbodtpX4MwWFbVGEOG9QZDC0oCIfhExNb/d\njR9G\r\n=P3s7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.8fffcb5dd.0","@material/theme":"14.0.0-canary.8fffcb5dd.0","@material/animation":"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-indicator_14.0.0-canary.8fffcb5dd.0_1639472063525_0.27527093711908","host":"s3://npm-registry-packages"}},"14.0.0-canary.21e1cb9be.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.21e1cb9be.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"7d07371b606d66456f5f32c69faf932b4fd47f6c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.21e1cb9be.0.tgz","fileCount":38,"integrity":"sha512-k9/h3ucU1syU1my3D34KwxTDRFDMihoioOEqm7r/4qydctOgTQQmzHDtbnvpu48RQQxSxflw+zFRU/nERTg8dA==","signatures":[{"sig":"MEUCIDjDkcP6veXlF7L9hyfZpuy98x4lyaLewkkbuREAedZ4AiEAj9bgWzgXm/RF4KDZHlQ+E2apQ3X8/7y1ker+UIwNNMg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuPLhCRA9TVsSAnZWagAAGrkP/3o4ZKUf5ZoTq9LWssMZ\nGgTRBTz5YV5DFxuAkODAraOgdqsd9TYBZaHSuFF7ITS/aYxNTcXXCbesgEma\nQsIfwWb7Bb7YzqHznqnnWW4wwTdSo3sG+M/NmHT4JMJvE0E6vquTgk9F+fJJ\n24R+ZeNEDkRP20eXK6Rnm+pi57gZNHKkEdTqo3wLm+/5l4YBUPJZ7Aora7Fq\nU1L8lRu4AnX7q+udj5pGf/k9Lox72xfS5ehiWBzGVX2VpG5DidgVE2U540Na\n/Evjfy0v75vYSKZRBm5yrYSwPiOKBt49QegnT3r0FUm0UD71aI3rEpI/S/EN\n6o4LR+S7ry9aJz1DgrqI5JiVjU/X7ZSokVkYmJaBsF66uOLJM5dpK4E4ZqzU\n9FYvUgUapk1a4mvy0KKXSj+rMKMr1UjutKq1PzCSZh7d4JSD1L11E6Gi7WdV\nQLsiYK4Cdh2Q9G6nwyyuixpoIn/wFYRskNWe1jsJu+c8mnbKpJpJWA7LMOlS\n5GtNOY9+pPc43ZpeiZhtciGTpPxp3Uvac/DgLZY133CXny9cORJgBONNCYod\ngKCO99Szia/kf7BJzdUG8xr7zeWyH3ScrGoq/l+IgC+0xu6aqilBUYbXQAf8\n67DRgypJYuJussc5qDxkIC4lkEyRZebm6sXbdxMvw1AmSJVO3Cq632J/cHPZ\n25iG\r\n=4hGT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.21e1cb9be.0","@material/theme":"14.0.0-canary.21e1cb9be.0","@material/animation":"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-indicator_14.0.0-canary.21e1cb9be.0_1639510753500_0.6310772461670149","host":"s3://npm-registry-packages"}},"14.0.0-canary.ba78e8724.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.ba78e8724.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"b294801c7f3946c8430676b2853ca8fd543d2f6a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.ba78e8724.0.tgz","fileCount":38,"integrity":"sha512-tiitp0hhHk9U+6AWKVAS89Nvru3tFNm1xhJ+rNMGPgW/z8wzY0/8XYeNgdTMBeSRYnlCRpfBY1hhIT6pAbb58A==","signatures":[{"sig":"MEUCIQC6L42lTJbdHvdV6fszCVFLglzYaSAOZjl5NezxvAEUdQIgWInh5kFG21FWfOfsYKIgmU0soL6C1/z68MXz858YFHU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhumhECRA9TVsSAnZWagAATsAP/3lIlmci/hlmxFyUPiZF\n32pmLC6gRhCXpVdD6bcZhPP7KIKJ3CEwwxn+Lgq8GcdA/9rFSJiM0fRHOBle\nDBZArzJRQpQWDpxTDIseXwpOOqqGewlrVZGx/AnAY0xE8kJP6mMYAWZZH5ay\nbCeQofGswhh9Ch+oFJ6svInlAaBmJ06/p6sCipsynhZjo6CdKCTGgpn1riUY\nnD+xwNuquoIaqzKiIVqMqYm72D7Wo9QjW+I/tYOcsx8tvYgT/QZt2k5E6UGj\nDIevWp4KM2TbFD1Woe+qYFQvP2O9coetP3AyS/sZ1ABuiXzb0k5DRiEGLn0s\nQbGVea20XF/08xhPVxDXe7LWHAR9kHABULlofCQECm29H3X3/UJ3PGNuqXN2\nNlyciAiS81u2FqaO9652t29wlksM/59Ntv3acwd3mRgWYFZb5Ixpm9x0Dn0y\nljW5kSW0RHV81Hf3jp+v4YlSbR2g7s2F31093j7ivNB4+VUwUcqrMZdrG3fy\nuORTj13cGLgkBAGkhBWEk5wOWEaAnOGzgM1JF5ohNESDzCjGYWi9UOb3ppmJ\nvYxOtdZNPpqF234Pdym8nywKzvX2SEOFniBfwSnZt23uSqnyf2WcjaJVWwfR\n4AGtCLv79NABF18OTLfLmUHvMDFjwjsRgy+fIs9ATg/tSpxqQ23O8m4tObiI\nf7lC\r\n=J/Wa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.ba78e8724.0","@material/theme":"14.0.0-canary.ba78e8724.0","@material/animation":"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-indicator_14.0.0-canary.ba78e8724.0_1639606340590_0.7716146557323211","host":"s3://npm-registry-packages"}},"14.0.0-canary.e3e073c00.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.e3e073c00.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"9c9c911a321a37076f860001d3f1183115d6aaef","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.e3e073c00.0.tgz","fileCount":38,"integrity":"sha512-WxGyewuuP/UVTFkDxmul/xW6G5Az0+MISvMnLfXxvFxVoBgcLaWH5uFRaSvuvfMOsz1yoAbEo19jG20MHnUnrw==","signatures":[{"sig":"MEUCIGkOC+lxPxQazbhMDEBBMvRVi0IBOZISOytvf8reW4OVAiEA56OBuVBibhixqmxUoXEoKR0aNreTorwB1/8rVJC8bUI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwPDyCRA9TVsSAnZWagAAwgQQAIsBEigJkMTqVdvfGYOb\nQ9vOCS9M1My9o6gfdnjmHnZsusCSH9QMXldEi8uzLGWcsf/kstlasUTZIPJI\nA08eRQJTTB/Mmjl6WxSSsGkeHKk2+TBqz+ccj7tjIajXjTsPxFTq44Ag3PTp\nKCy22g6uZ2LSH7aTUa9e7U1zigdwa+qERync8I0Sb/ObBaoYPlMJjTLnKuEt\nsK4FhqHgNhqk2q7wdnDFHr5MGtx38QKd0qxAceiaaUVTpaQ7Tz4fR0iLb9nu\nFTEk5jNuvmHitrXVml6xhW/tjuD8lbZu8oI71A/jKa+ZHJgd/PkagMfDKIvI\nm1x6bKRgI8Ipe2kTmB6tLl53kKQf6Zc+cwvkYmArKxmTMNS/MxJLaVACjFck\nYJ9icih0rz90ePu3W+46OV2oNt/qPb9cGUtv5Gk2TTcVVwfLXPOAgt1hbCdn\ndLcTK/iHdxeYiIa1fOCD0dJC5HKh0UDwVOdwNe3bgfPY1NMr0QYzwvHJ/WKP\nyoQdF/f1y6At3yeNfTIayiwfkG96toBYHbjGdDwZygroaI3utQ2NeGG4/ixv\nWHr7KJCgD03AUTfkM+riiaOmQTDUdZy1S+w8drkUdr/ZYzjjwjyxYTONqHqf\nYGCRs4xpGJp4NqkJqoiXEvBx4ghL5i9Gzmn9TvZqWzPw2IpNHbIM6w4irihL\nLQAc\r\n=Gu4P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.e3e073c00.0","@material/theme":"14.0.0-canary.e3e073c00.0","@material/animation":"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-indicator_14.0.0-canary.e3e073c00.0_1640034546746_0.2072296031064862","host":"s3://npm-registry-packages"}},"14.0.0-canary.3366a71d7.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.3366a71d7.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"2e779f956e9299f3c3dd30307ef71701592211dd","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.3366a71d7.0.tgz","fileCount":38,"integrity":"sha512-lKiSpQzBAIZhz11JML086KF4A8P1G6EqPzlKVy6OAFZvdP9Q5x9y+03wfsxOIrkbIS+sA7q9KVfatcVnuD3O8g==","signatures":[{"sig":"MEYCIQDkVb2ErRTWzTOKMM777gr8vMIr5jHvnfZoqr1zLw5bowIhAIid7gesbB7n60oKYL7xS+0Kf3doBi2AX3uXr1+0q2ma","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwxq0CRA9TVsSAnZWagAA39MP/j4zbZCjzQmTfPXTRLcO\n3e7lCnYu/pKxppp6U4DFyKXB69Y0dmEJyjqBBsg+Csu8Pvmrh7N24z0UQcwq\nocNscaTpz8GRc9z+v8fLRwkMenKTOU3iuwHIHjLzGRz9bWZxu+/9JQWSiWvi\nEERLRAcv2dFk3T9o3yphBCDLNKj19Xrxy5Vx/EC5/DXEwRbCLQIabC3eLg6f\nlE5iyfPtqR9QJtOtGu7VpQz1WqeB2cBK+tteKaGx422mSZN9Ua9XPyVp2FyU\nr8znN5ZLmdFcYKTYnUtlvsSdyUAFTtnPKgegne0A+JzVx1JkLQNDYSWMu402\nCiUQhqh89cWTrEyVFUvuKTPfbvn2NoE4+lZNlawwmxwBSt0/mtBXMFuO9t9o\nLNBce/Bi+TGILTJ6PtUAXzqnnm398EA9W1nL0F5yfAa/SZ2i6lnVBdLmI+0F\nL9sC5O+zWz79BU8MCG3jnK51kBxmhKFZb2L6DTM4qV/9hg5qr2/Eu4lY+f9c\n3Zy4C0lq6IUb8d4KEP0NembP8G68KqmQs7Qo7X0vLAu/zI585P8E1mYvoD3o\nEF0jH03GhEW3oS6IuEk6/B9XNXxxxGAjh/3G3tV9yLmd1oGTR3AXb4rybgSN\nIVAjp+QfmsYHIATC+hCo45hbEBvmTWoqvpugwGeEk3NQ6BVMCLVTGZV7MH1N\n/qrJ\r\n=ioXx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.3366a71d7.0","@material/theme":"14.0.0-canary.3366a71d7.0","@material/animation":"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-indicator_14.0.0-canary.3366a71d7.0_1640176308506_0.7601058843816857","host":"s3://npm-registry-packages"}},"14.0.0-canary.c047f7c19.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.c047f7c19.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"41b046c7bd1597eff3bac22ff79733c6a53c1418","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.c047f7c19.0.tgz","fileCount":38,"integrity":"sha512-khqbjwyEwQiPcvWYqPXSgdLWS80bX6oCXf0VEtWe150i6aW4bEKYJe1Ic0g+FcTbU6xxWAkFUWUJvznUomkYVA==","signatures":[{"sig":"MEUCIQCXvP+iQfu4HwF0h/6pUZibIiY0nfR5SrgOajV/Gum6WgIgLF54cUjWXeY2tBrhTkChDYoqrwE8pViXkYWEjDTScL4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1csUCRA9TVsSAnZWagAAiMIP/A9pgTuq0sraJjaDf9WS\n8Y4UY3H95JWdiqNCAqKkBO49K5Nh/jzJyWh+5ZHpQZH8EfgBp735SgKysT3z\nSBP70z4HHEnzq02B308PBpzCZcQf3sT7CBsGYBqy8k6E7J5jrwkfMbh+xXna\nDipl+PFiK8rrWeiNUIBtf5+UdbQQx06ZCcP8jyisBB7/uTznaDBFac8W8eUK\nAuDoCILxHzNCsGp4QJkdFuSJCwG/sw+D2qKTtsCLkWSNybnTuGLzYTDg/W/+\nD2/KiBMF2eqLP3IWOkxeCz4iyQg9eQm/rtiKxQNAZGRJFkLAn0TWYcNPNBXT\naeSSu5e0DFBOy3imAFK8oBO/QTLihKpIGsk2MQagB+vwUu39jIfWnk/beuqu\nuq9hdm+0Ij3P9ffWxq4uVklaSXHnF3uKAxvP580gfqsTVqJ5ALmpZwP2OsGW\nMlid1GdcaXlQPitD3DdLb/ALK2WQEF66PJqhjooDVEEkqYc77F9PmWUwd85G\nmSuQa1jeDb24bTVoy1JM41wZxI3ooKJw4oeH2dU+mfkFR9vFUDJ1vQsm7GzS\n5WOfY3oOscj7qoi2oOEjOVutdFJnFzs//KPQlO0Rdu+o/ZCv4jomXAy8yOZZ\nlflo6MTMraAPmkaqALwYQ4X3O3Fn5zgu60U5697gw/Kp/iUkRDTrohPLMeni\n3hWh\r\n=xXex\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.c047f7c19.0","@material/theme":"14.0.0-canary.c047f7c19.0","@material/animation":"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-indicator_14.0.0-canary.c047f7c19.0_1641401108737_0.4131046210402427","host":"s3://npm-registry-packages"}},"14.0.0-canary.05db65ec0.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.05db65ec0.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"7452b7a2da3962b65cd799e965353d140528374a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.05db65ec0.0.tgz","fileCount":38,"integrity":"sha512-vWhkCaqaynCqMOhuSdtwSWcwdELKn4VOZ8R/lM1qsi5NinjBdgVKjvKRxGRUE1nGmaTYslUbhBqaNjiSIEZayg==","signatures":[{"sig":"MEUCIC8LBqrwq1Y6inCZfkmmP/a0bkjyCV68ooAGS9JkwSOLAiEA90atg/gu8E4bX9Lti8GxGVpmsRMOJwD6c6bibMobZcU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1yM9CRA9TVsSAnZWagAAiFwP+gPJW9dUvM5AMtriIR+0\nL7PMWhADU2O2zk41EcWiYAFA9yzEH/N9YM6YSYEK+LOvXvm/VD6ugdh+a1pu\ngJj2v1Lle7ahVraNFbBMbaNdmtA8Dp61svMTrADifuQ8kJiVETFUSXpJrk1p\ncMFh30ECBuFL65AVQPP5mxRe2pntph2SxkYRo/x2qOOysdCQgXu11PJVIVEc\nZZIAGV/1H2AZIurQ0wbNyKL7KlTLsYHH3TVvQl9lXuWD0Sz68x81QqAlHb7Y\nH9p8xa5NNAwsnP4IrdwJ4JZwc9jyYrDmp+j5ublb5TF9iyxccsKw4acZiTN3\nSVVki3hyj2qVLa1E+Zbc1PfSSsdMFxtSe3eDCUliIYGfNkYCoIJr2PSwa4NG\nERTHm7XEbFeGLyzw3360/iIQkItRmLOPZoTMTAkIRJJX2PWIm6R4xxLybt9K\nbZGJDNwgGy+E3bCR7saXw6crQK/xa9P0Z3s2KJkyUARJF2K0rXL0CNDvLC5B\nQW0TDEEk7UfiWd3McUMxApykdJU4iZmLwvNBpCnrakFZQei1Pg9H06mXPVm+\nHgOVJ+D5KfP/f6dVRy0TErcI8G/UMwkurRDm41BIXF+JzWN7yL/82zre5eAU\nIoe41ETO+NBRyYkGWy6X6jf02MCm9L7K/NZBMGtb4zafRE5kbBP7Kw6WpsGH\naaLQ\r\n=5tdS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.05db65ec0.0","@material/theme":"14.0.0-canary.05db65ec0.0","@material/animation":"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-indicator_14.0.0-canary.05db65ec0.0_1641489213704_0.8024266402397313","host":"s3://npm-registry-packages"}},"14.0.0-canary.6ca8b8f85.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.6ca8b8f85.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"bbf0a6de46e0ef4c2e5ae55d1cd8b6fc7502ee72","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.6ca8b8f85.0.tgz","fileCount":38,"integrity":"sha512-JPwGG+20hjGmORUBT5wumCtveVlcC/9HL2e4qTdAlhxl+eM6XuI9ON9b/23yQ2qBjB6C1uIK3d9N4/poveig8w==","signatures":[{"sig":"MEYCIQCVU6O4fJ1Xby52rYpzzfMhCq8vA6FabHiqb2fKJxHz5wIhAM095kQ4S3umaTeATAFfhaJ3+ZRMHyH/5XXvt1ZgwD2h","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2GOTCRA9TVsSAnZWagAAMdoP/2MnVyfRiSVePo0HQZxU\nt/XH+DxIrmsNxDzGso3Kysq0ky5CECKDoThf6WE0HwGgnvim6lPenX48I4Cl\njyPzCMQnqIOUeVpt5M/wVieCR2efqt+JJBtJFlW+QMD9ywPo+SKP1Y3Uyd8q\nl4T81x0FfUyQz4fKf/eqB52puaPeQs6CeZEPYqH3PTBHIB9twFwBVXjcUU4Z\nN0A9QizYKj/IAQb2BvpIYtc4w7QV0pvEfTCgfqN2968zNHF78YE7p9ZYfs1k\nlqW0Di96JmwjO2lNyL2JDoXNMz736lWdbL+XHpsoVj8NLelR4zRFpAxrMIBT\n48HLpDXetVLYHH1C/n4H2Clb85e9fgysWPyN6Yb9w5zFhxQaDypP0TGYlsVb\nosGbspcoX9NBrVYYa7qMeRf0s6sxNe0aEM9P/gp1nOv8ra6oNGXll/qo0/6k\nFI1vPqOrr/W55U6y7Gq68wD+ps09tj+fZUNtz9+Ti77yXQH0mowr4C57EUjP\nZhqu9cRNX3HO3gY6Lda3cG/WnlE7wWrr+k7gBw5woYiJo05gGc+KVJcL9sjx\nqd8LAKt/R4+bbOqzjlC03RjtywL/NLsaz9pGwJyz/XFhv49SFf31So+Q3+kx\nn4Dj+CvCYjVqvPMpdvmgdsvAdEe6gFEikZGETjVoj6e396gX2pr+g7ynEc3N\npnUS\r\n=yuKH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.6ca8b8f85.0","@material/theme":"14.0.0-canary.6ca8b8f85.0","@material/animation":"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-indicator_14.0.0-canary.6ca8b8f85.0_1641571219675_0.6458193335535067","host":"s3://npm-registry-packages"}},"14.0.0-canary.173ee7a7a.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.173ee7a7a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ddbed058655f4d6a7e770472cae489687580765c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.173ee7a7a.0.tgz","fileCount":38,"integrity":"sha512-pLon7edik+SVz3zLb+5jYKykb7VE2Q8IFoUtAzE1KR1VG4c6V2yEaEerdzORXXPz0cnPnhHCjJB6UQ0B3dd0kg==","signatures":[{"sig":"MEQCIHtJz6vMq7CAXO/lQy+62tRWWYXw4BwdJCbbDioYj74GAiAyhtbtYADfxhqPVsakOIXJOTLTGSzTGut4Gonf0yDqIw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3GSNCRA9TVsSAnZWagAAPFQP/ArFWNuNlankEo2mYj5P\nPfDpUlVSjKHGS59AaT4vV2zF3GCdx9AWUspAW5B3VFX11GM7+8OhZcs3xXsZ\nEcYkEkKuSUAcrFYLhDoIOW4KAOv/7SuwWoUmn1A9LDSJYkTof75mDhpoS8lX\ncy6ILLyf/MnwRU2baJOyoFkZxuJczBHWoWnbbSxEEXu/w5PQkzq/IuLUQXDm\n//DefCe5CGqH1UVOID5NY5Wo0Tp34IgOBLAWTwmXDr9gCXdMW6PT++tePYLZ\nE2QiJty9Uox+4H9YVBQu37ni7RSGAkqrhr579wlZfvH9TofpG3L6AtO9YdWh\nwdH5N22vIDB0Tyvd3a0d8GDGTLmWsav0lj97Qxrsc+GXs1lyFlZEVLIICBYh\na7pjZIn+g1nuWI0S/Xl3kftArZsDF/OtK+sssUZkokIlkQtv2EjBQLgolWab\ni9iXcUldIAAJv1hfGjQuZYGYWnp5EM54KrdreQcQkVg6349ZaMlbyMWkucMB\nEI8Xtq9pkW8gGiNiU+L4dC99RF3R670PJltb5TnDFDu5NfZSK1OXdvKeBmRp\n/XNMRhnlp15P809d3sSZ96Gor7POupDp9bfbgflEEy0lpcQ6+EVQu+n4Fo1n\nzVcdfMGwS28hq2PiFI+8bRQA77NEHQDV7oMhIM38CaKhIvKlxdWw0bVvWgP1\n9O0+\r\n=cIFM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.173ee7a7a.0","@material/theme":"14.0.0-canary.173ee7a7a.0","@material/animation":"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-indicator_14.0.0-canary.173ee7a7a.0_1641833612981_0.261545396470541","host":"s3://npm-registry-packages"}},"14.0.0-canary.b704e4dfc.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.b704e4dfc.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c76ded9c4a4635c8d2fbf635cfbd74e590a7ccdc","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.b704e4dfc.0.tgz","fileCount":38,"integrity":"sha512-7syYHgWZ+R/WGZu0vv6EWO8y2OTl5fS/w/pdtGhquLfVrBRIXG4FNTfP1f9Q0PRufSxHWj36hp7Os+ODFpM75Q==","signatures":[{"sig":"MEYCIQDhhzhJRpE/VKg34zmXpI7cVDPZ/qxPEiVjfEFkcX99WQIhANkHX5dWZdmFlQF4m2P5tpwDF2LJA83h5Hx5xHe5Fli7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3Hu1CRA9TVsSAnZWagAAPp8P/27nFXZZPh9yBq0UJ7hC\n/gCPjsMU8GeV7tLNl5bHfWAYvAL7ad9gqU+YKqNx47wheFd78klhb4NMistK\n4ZCLZ2dFEaiPs/imOTwIAkRCEJauQqNwk6Ac6cT2GXOq+r092PvYwRP9gKJS\n2UvYIrJnFxlm1jENam1sA1Pk78s4RuAq+gh588dC/wagx7LfYYBhZB+IgP3A\n4M9lS+vMMxHFSEUBCUi4aWPCYuwNWj0ehYe2PbHBWK53edTbsLpQNk6snOee\n3asHrhpgU2bp8z62XbClqOxBsfypMTtieiTM/xHwv3jVel2XxEbLR0oLxABS\npMJC4amYCGnNeLv4AFCMh8VJL2+CB1280buIvy/7O59GghzDwm1/iviEVicR\n2SkDyJKEYy5Hzjpe3cOWCFWIMdjf5z+5libPuyRZ/jXe0U02nJaf0Y2hJjks\n52jeyCMsIkJTZrVvPr4o54clAnZXMMfQHM87bYoywF6z6Pqute5qD3nn3PXa\njaS2n6B7mo/mQTwaKSzt8/TqDL8PGyxKo/CWwsVQUBzsmvO7j0Dg1Pbn8HbJ\nCMy+bJK4TULeDsXEc0CQGvlUbrnCet+89JP7/gUdAqr6cAc6UJwKYliauecm\nH/aE1JHcYDYUfkS3u+cIkPpBWL6eA7TV17x4Dmn/9FLV1ialzqm9QTO2f4S7\nyf5u\r\n=jAVX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.b704e4dfc.0","@material/theme":"14.0.0-canary.b704e4dfc.0","@material/animation":"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-indicator_14.0.0-canary.b704e4dfc.0_1641839541068_0.5405697065617732","host":"s3://npm-registry-packages"}},"14.0.0-canary.c14e977ee.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.c14e977ee.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"3e62e4b41eed885a44d03e6a022d627d5604fe9e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.c14e977ee.0.tgz","fileCount":38,"integrity":"sha512-hqGxZH6+g9lmzZ5TH/XcLHAdE+c510zGfUWnDsIKL4brN3eA83UKxLr9D3hoLwmtATzmCqgae8RLwGrALel5gQ==","signatures":[{"sig":"MEUCIQCqcPH5e1XKqfFxZKpHt6izL1+XG0HR5Vzzxkzg93Td8QIgICQVpg0vLfgwA/u/kCir+je7f1nBwXhcS0k9LhSBTA4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3abpCRA9TVsSAnZWagAAfCUP+wfdCAh8y+WzfnhDY5Fg\nkh4dgj3IFAk8AyflpnIVOBJlGRkgcP/65hmwAEwRVMkRMniXhvFYZxcI+gtb\nX5FE2CPsW2BB0u067V6SbD52JVesgh1U+Rsm8ihauCSJSPwwubNgR/4Qyxhm\nBTpdr3XstBXKH2eQ3W6u++1fdoQOu6DVbDELE3S1uu5Qo4PysojlwSTRiQiq\nOQgqNr1uXiHsF/dXbXVfXNMgNZnw/hsjgaPe8hXKjY6l+eMTQkhJY1406uIJ\n3cnUaAEXUPnreRS0zVDkHwkzNwGxXbEiAIUi/zkFD+YnfX7YmMdN2TZNigiA\nDScsSp89Cw76MmzfxJ9exPr1gY3kPrESPfXSTpqucZbbt/V3EvLJD2GMKU3w\nUyuqdzsvNmFqJwYi9In704s61mvpE088TF7iPoKlNBTNMDukC4AgGYQkBBWU\nW0dVIJ6EGNFrdzgDzQKD5MvYy+TahyDGVS/1W8YzWtfHnimWG3P6BJM2M7m+\n41gMGLrXrXvKG7Yml/dutKfCyQ/14V0rQmOQsQJD3k6b+0sdOANhzQbs3Duc\nXsl2cLBTdlumTP0Uj9WrxfjoA1VG+VM7/f/J7uU4fMDYszJ3osSEftYzrLr1\n0/Up4CLHDO14GyZEMdsQuvrl66UTx9tZtYBU5+i9QlhAm3POYZte3zlCQ1cI\nFsmd\r\n=J/S/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.c14e977ee.0","@material/theme":"14.0.0-canary.c14e977ee.0","@material/animation":"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-indicator_14.0.0-canary.c14e977ee.0_1641916136867_0.4724570578909144","host":"s3://npm-registry-packages"}},"14.0.0-canary.b094eaa4e.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.b094eaa4e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"6f951cd9ae343bd373840cd8ffd8b483c8fb2043","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.b094eaa4e.0.tgz","fileCount":38,"integrity":"sha512-H57Cvvtby5ts9DQiHKh5Z0ptkCVhP/JnREMHj3zgZ2PGWGg4LMwWJDM2f8ii1qFY3hqI3pRDdvV1OtGFkvkKfw==","signatures":[{"sig":"MEUCIHo6Fs9IFCWZ1eIZOyMhcokdtDkx85qJw20rs0Od3U/5AiEAmGt2Ajn9WNbv0FpHejtRFaLgoITb+dvzoF4tRQWnqa0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4cPoCRA9TVsSAnZWagAAaqUQAJafTepZyD/1THpsu1oC\n9pkEBqCADokgPFRTmNI9XpXLdaJxOXFXTkvt7m0XGg3qi0KEmRpfZs9DUK9O\nVraPzTzx8bZ/DEXM59oRIYeg6k/zli7p/Gg5w7EVtkYGNp3spxEZtKjI06uS\ng2hrOzvQBP/+7RsOnx+k5yu/0zTJRvUlWJYS69gij9v2j6LN61VbsBke4iGL\nzev9EyJkoM+ACF2YjfmGgIgVxXEhfz173I8mju/XG6GJyWAY8CWm1ImmHWlV\nCiCJ9RSxJaDjzxQqeejUbdbKRvSAUTfTmQWCHgw4KbjoMhj9c0m7Yy2heXjC\nqVmBabBPATD709S8zEwdl9vANvTbzuuNj/p9t0HRhMkYQhnnDI7OIrE5/7v3\nRimAyu36B1mACpOZOAuZ55ZvnHwJ+6MsukT5t6vO9Kk4GeaI4YzIFHjihg0X\nWTcfJmwCBMBSa6agpjXaisIbMUL0JrKS1hQC+6oRrMQE/kWVyO7ccEMmHL/z\nZcQ9TXg+lXpgQP1SwgO34WPCQqwd+r4pMLCwE57FaAPqu18cgiV05dCW8wut\nYrq4HN9+JgOS7enuLsKBKZ51u8M+pXAcw0RLlihwISIjxzx0/YWrtuGymq8B\n0SY6sjUl8gYUjHRHJGZJT+4uVPOSCVquKIZ4LbEsukFQvrGm9AqOEGFoeMep\nKrUD\r\n=2ZRB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.b094eaa4e.0","@material/theme":"14.0.0-canary.b094eaa4e.0","@material/animation":"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-indicator_14.0.0-canary.b094eaa4e.0_1642185704215_0.6011434683585766","host":"s3://npm-registry-packages"}},"14.0.0-canary.390220e42.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.390220e42.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"749a53279bfd792fbc405fa0f27fe79823b4ef15","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.390220e42.0.tgz","fileCount":38,"integrity":"sha512-UwDrciYX82vNPFRN7aeZIQpxq6+u+qATcA0b1NzXDWSRIZ3z8Ev5uiK7fjGlcL4Vxk/QCiI31YrsdiHdE1dr0g==","signatures":[{"sig":"MEUCIQCWtMCid8ryzrD/OB58yhAGtl6YcnOz3ZhyJ9YZyhMBVwIgTv12Yg10jt7Jr6/4Dzuco7tYeFFUFf0jolBovLg+DIs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh5Z0lCRA9TVsSAnZWagAA44wP+QFVmQ/gofRyOUKo3JX1\n3avq9xQqyUWTy/h37TGMecNCm0WaveTaMOYAbJQabew2TIQkD3n5gOAn+tO5\nkYXZojFQJGUYBGXHbIdKuVOMgW4+aPW+lIXDN7ckTFOQMpKbCSHUAGlg1LhC\n6ymYb9o6nb8gnV47caunub2kfsGtbxC5hSQJAf56tdlj6+jUSIirh26+0MFC\nK1ra+esQ5M0q1cdUmXb4EUBYXG0o3MnaAeZmGFHzFTaW8ZpwbyxAN54bmqRs\nFy39ogIrtqxxMUsYdnfW1RjAc1MDZwnD70dGy935ACmaZCQ6VJqjnHszgNG1\npmoSAQok+ENrnA84OIwz142NoBKc/ZMLrrtT/Y2Sbwt+vwz165K0jK9qlMUf\nmmtKzSkTUCixYgxE8bajafhLT9x54m+30RjXNklTZQlSG2aMQVd+/LNCaZlP\nv3t2zhcuWuD1f2cnICuPWEh3UkxXGwyIxbeltIytxvc7ejYkfAOxX53y5EDw\nQkJl1CdfE+cMT3nft5Gu0vtGRJAo8J//SdZpzkqcg4mPBkk1AH66+TRdK8UR\nXQkgbsME522O9v3Rzzy5SQktU9xnMBbPIW2E+dZz+3UCZ6CEpv9l5Cn+VvqB\n4GYV0r46F96v6O7krSKD+VzTlvvllGyBj5/OfmDxEkmc+o0Fnju10IVYitK3\n23n2\r\n=AnF0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.390220e42.0","@material/theme":"14.0.0-canary.390220e42.0","@material/animation":"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-indicator_14.0.0-canary.390220e42.0_1642437925589_0.6194233079535432","host":"s3://npm-registry-packages"}},"14.0.0-canary.4b5391f8b.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.4b5391f8b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"1bbda73fab68c83fc7a5b0b62b544921a7a1e836","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.4b5391f8b.0.tgz","fileCount":38,"integrity":"sha512-qAaTecC8flEa3jGDNmCGqgvXTMkJCS6mmpXdQN+9urYMaH4usHboZaRe5L/Vbp4TURT3hXkvfkDTfp5jNTmFcw==","signatures":[{"sig":"MEUCIBkiVYQAKTk+PzzxMDOQqIzdzX5CIJYWZ4Mg9C1KwDbXAiEAs9SY24q1E5HpiM2pUIVP5fgLvgPMjI2iz/wsFQ9/2XM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6KQpCRA9TVsSAnZWagAA2osP/iEFQud14jWEQYPokVKL\nT4SeBNWoMW8xzcv5Pxg4m1qF4OmhwpmWuAqYYGVdpoq2f00xPHOXbDa9hvic\n5M/DR+vYmT+CkYcw+0GRJumZKprxIhEGkkcJSnt57fxwPtb9HwJRSyscTlxe\ndwPJxGGLrM9TtVPW0QMBPmYqoN4ma9wz93vlLfl17NNkHALrbMBtW1jJ2Fka\nYdFaPDidcCkh2+26ODVQ44zwaoVpWGn+f+lRfFASwjzKzgXY+zKLj+ZQiy48\ntdCck0LLc6uRTYFNn/GcDUAbYBYGkQgdj/YyaBmoamzLAEW+NgcRIgnt/opZ\ncjG01hWcQZfOuRJf7kOQ7DlQO4AaQ1GYT1T6jsKX7MbohexpILg+wkqL9gKJ\nr9Gg6sfJ0PlPrb3Q5ouzbYEUh9Oc5FQNWXWHfnSn+2QUwfrXwnqzyePE1bvS\n2lFinsAVAGkQ7Amonz41tAunQtr8aALVxW8e+Blteq6iUV3qxvUadQ45ODhO\n2pVgxHNKkXc2grAx0xOUudwAkKQMPEV0INcI2zDE01KgqHi3cJjK13/ZeMWH\n+ngdhmb2/TUAvzkLlwAHgWNVcNe6IK+0wyCd7dYLusOkFBljlubBIxU7wbbX\nXYeVyFn7uJpOH8UI2IdSjYtVeAQ3/2xaXsgKOH3rttSLCPeOUtPN9KKg0Ru0\nzVKf\r\n=5DL4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.4b5391f8b.0","@material/theme":"14.0.0-canary.4b5391f8b.0","@material/animation":"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-indicator_14.0.0-canary.4b5391f8b.0_1642636328930_0.7930854610646529","host":"s3://npm-registry-packages"}},"14.0.0-canary.cef6bc623.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.cef6bc623.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e8a2b121753276346577d226253f01a0a743152b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.cef6bc623.0.tgz","fileCount":38,"integrity":"sha512-LQYRLhF4/NyMF/rPXE8sq+r7vmU7BfqXlDh0reLR1HPIw8FhDrnVlstehfi+dYIYvZ2eqPE4qCAW30RWxHA+xw==","signatures":[{"sig":"MEQCIEEyTgshSi42CIwjSDA/mRPgNyn4x4CosOlz5qbWOVnUAiAMTJsPiGuAGF8VeMxxP93DYNYiYZ67IwSarHIYD0WNBA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6KnxCRA9TVsSAnZWagAAIigP/jda0X5lEdkNRDSdLh6r\nsI5mGsCiVcGzdl5imZV7JQkwVHbBzpJDQsG8w467+XJLxtHe1pBEXjQ5/uaG\nJHlSsMDdoC+YPB7IjdoYaPw9+oJkElIEw0qRf8fi/o1aXHgbruLUsb/Dahdu\nuJ4XY7y/gE6RC3TLUZ0N/kjaiNpWO5Z6rfodV9tKtNXcyMDopddkwYcTzWWe\nSXSdp8oYDg/xIVUPljF5L+udB0FFefY13q3yQ0k6EgRhjt+pAhBEA3+Al3IK\n8jYqs+t7PxJYl234Q9kQNr9zWl9rEncUVS/5Fxo1I+GdWouLpquJnxGilfIV\nZVT5R3m2vB1mP3ZcBcqsJCHl1yEmsqhlrdspMcOfNWlbnEFctj+Pcc4BIJYK\nKF5WpMhq6K37D0crGr2fXFyYHhHab7hXmhI9ZHBgsh0mnQNGADDEtfK3ClrI\nNK+X2hrFZwskIesKXVNK8hcJFA/FF0J7ew93t5JzRhV3pM2i3SDgxMGcJSXE\nAz4XgECGL+VC+SFjz+iG5Jnw76lQxxVALAp1Rfx4PPkLhqMc/GdzhhP5WJ4P\nSiUEfxr54sf1qOfLXOdVCdxWFG/QW6/Z2d1XGW8DH8dJV9mMPmghdRx4ncXQ\nkg/v2M/6OngVanOmWDkpZUS/Jn0Ga5hI2IMprD78lP1t+DkL+CJz5i+ZG7r2\nv+iM\r\n=qBu7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.cef6bc623.0","@material/theme":"14.0.0-canary.cef6bc623.0","@material/animation":"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-indicator_14.0.0-canary.cef6bc623.0_1642637808931_0.65967454261128","host":"s3://npm-registry-packages"}},"14.0.0-canary.0379179c4.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.0379179c4.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"be29a4071dfc76fb00e2bc1fcd7bf5766cfb69aa","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.0379179c4.0.tgz","fileCount":38,"integrity":"sha512-9R1upQ/RkzXP+9Mj2TQx6QzFuAHlEsiKKIB531tR7AezeIPWJq/9FLNMcIY9pT1X8HM8fvIJ/lGXrF/t3KWXZA==","signatures":[{"sig":"MEUCIQDlM6SvsvgmSgn7JkRTX1cQOGoll5k/q4q186ujKEBhMAIgaRBxmjzG5bk9xIU1IY3BAqSmarcxVrI7YVlduoGhmew=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174208,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6a+5CRA9TVsSAnZWagAASRQP/jVWImT/SXi0Eysxei9V\nLuLFCfyXnOZOio6dVHV/l2VksMHsHQAcEhP5xZb77s8rOU44Biina6JTR2On\n/WEfMu/g/ntWq9dHYzhAXyCT6BdIcjErcsV63w42cqpmfhUbEMZovMgMw07v\nitjpEClEmSQ5uKZGv8+XkGmKoZ2ghgpAg30U7eXrjTQMYSjDSiZ2sayu4bpy\nOPOIjKcU8AgMbSLzHvnvHASC0LnZelYSt2CRdUNcjRSIbeGJ97kEC2JQzMGt\nKEmPn0rp5/6pziMp+PsjPDi7vhheB5+iFW/A/CoZi4OdP8UXPT6k3s1l3BZR\ncm2KIh9Y1WLbcPXHVP/qhdxZYS3NujCqHh2D+YbSO4506FoK5s0xMy8YK+BJ\n6iR9QKTBj2gFcW0pGc60t5x2LUWQ1FBr2YPPshQHMdIOWmEDpJgEQ32yq/NO\n5asJ0Gj/HdVLusgtPABt8hQ9f70pZ0ZieuB2L26482uFaG8HDyhD4dnTL6p1\nMW0GJa/B4EFg6LQtxJLItY7z8Hm95zKYYVtVxntpTTLtgAayrDj0QK4o3d2d\nya/h9lIA7qJnDloObfNhmxXVKokDtg5V6t3Lmvd/nhd+6q+ghr7q2qYlfHGg\nbDRHJkml6ln58gj99mGVTGqyzM7AChbE7yT+OARPMcL8itAQR3OQEJVVGKQg\nrBmD\r\n=wR/U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.0379179c4.0","@material/theme":"14.0.0-canary.0379179c4.0","@material/animation":"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-indicator_14.0.0-canary.0379179c4.0_1642704825731_0.6567769786484761","host":"s3://npm-registry-packages"}},"14.0.0-canary.e62f3dabf.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.e62f3dabf.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e143f690e4ae730cc67b5f68d8aab1854da46384","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.e62f3dabf.0.tgz","fileCount":38,"integrity":"sha512-/RwIziEdmvVzpED8QJl9ON1cm7AXvzviqeDFY3luMJQSnz8A3Y1Scj8BZBYonWUB2IYNSqQS3yS+xkKDLM56lQ==","signatures":[{"sig":"MEQCIGRKCNouDV9giyXxp7dfr/LzbAXG5T2acIZ8BLZ1osMsAiBhJKIB5m9WZ13BDqvyjzbIA0HFzC1tOPE15WTZN135fg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174208,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6zuVCRA9TVsSAnZWagAAMwcP/31Zwb4pUlc1p7NZCrKD\nssS6ywynJyn4yfHzq/kAaVYyeIyICrOSY+OK6fmBZgWgDZyEarnRWlczUlxl\nPxowFNvdh69dl0Bjwfo/ibFKFHTOi2Stjuivwme292dgyOvAxJC1Xi0iInpy\nZgrvcxZoUy6nhnh9aNLWJYcaMdLwIKtyxXSe3d7+uRGapwn8hYF7foSDMMZi\nQGQRyeQgyNwpaFJEVBJi77xrh8A+owAQtzAm8+wWI7JHK0IXMuf1HP2qugBu\nK7hrc5qetRYC8h1kr2tJC82IVzsYcAE9Kw9irmYb0lJ5tloT4qJPj/pWXe0W\nKPCXNIS6L9tGqM6+ef14hFkQiPITXyxuPfhjl7H3TANU9qRAbchA86gHceJT\nXX5rH30mEyyB0Ff3j/ZnJ2H92s9HbHYWJAhqJIlFvHEu2fnGQmBn90FWbOkQ\nio+wNcENMwGf+Mu2ipBJjughAqtvhmz7/1Yc6MAmjXKtVnDP4aQxYEz5wcrC\nQfUQ9iKPgYQttRzJA4UJXYrE0gA8nB7i3MZYOjyWD0TQZJd9jURjEZ1htcbW\nG9uvZ7gpkl4loIvqyYhUnLpz8VMQBJ5Y9Kxq09u7BSQ1DoduG+I0X92anrOa\nKnbciby74V6D7RpZTINfRBzNTM4TasB6roAtds5yh8FNZ5IjpPd+cbuIsQ4g\nQvC9\r\n=smgO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.e62f3dabf.0","@material/theme":"14.0.0-canary.e62f3dabf.0","@material/animation":"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-indicator_14.0.0-canary.e62f3dabf.0_1642806164934_0.34571066266240136","host":"s3://npm-registry-packages"}},"14.0.0-canary.3e20c1de8.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.3e20c1de8.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0498eacd04e1d084356c03a845784de310c4ed8c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.3e20c1de8.0.tgz","fileCount":38,"integrity":"sha512-53lh9CWJwiNYTMq/rQRKLjQHlgsf6wLSLTvjcZd7yqtOJC0Lama3g7Aj6IDiZy2Lz+1MCeW2+FMRO00DfZoaCA==","signatures":[{"sig":"MEUCIEeza/EylEt5dzZGxdl2tQOufiZYzySuSXP5aro4M64qAiEAnmcS+Gu7IK0Cpt9GUiV5ZPzAJZ3azUOtue9Z726Jehk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174208,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8Be4CRA9TVsSAnZWagAAp7YP/iLk3kmavi5J1YPdNGDQ\n724kB77qtRu3aDnikjPO0WRaPQdNAPAfbq28AJJxeaNyCsmMILFZfJzWbaxY\n/j67FdTQNIEYd2hpI36eSjpEOP4PcjIXQXZIeo75KQ8fpCeVZIU1On5hp4zh\nY1A6YnqIApGUKSvhClz6hM/H8hPVZU09Vuligkg6eaVxzv0TyMIuCP8miBw3\nA9yWR7OLAEcQ4iFz+LHr8V1vf+FeElFMCnZIN1ytca6yrnp0wCJRqmhXrh/g\nv0+H8+vtYo2PrKVuspkHnn7owOZHpSZ6cBp+P5ZtkVL9uNFrF6ft3lv1PnZD\nmlW5WeT+t0MqxbZB0V4NSMJPCdoMen84RSMvkhMD3Buv8kp7CG6Bx9XVf8W8\njXAtu9gDp8+wedAHORr5j97/xScngvr3ZvanQND3KydUr40CMWCMzAaaZsQe\nxOquJ3vCBG6cQNBkXrClX8HHjSZb44HDTSd8a+m3iIeOoTHHHo6dKfKpOoNh\nE5bRg4GK6L/4CMzZ+t739JDgsa1HMhpzalYXo3ogeln6x8M+ts7VWcnHg5+z\nOTJ6DsHr6SaunmcIn/fCJIJDTGAWAyuscn0HhaMYKJs4Okvd18aEbS7sMod4\nCd1iZMOWGmYJ9M9zzTfbPFipnEkvjZwD8PQlDdxgFEOJTm6gY6iRCg5pQ+w+\ngYhX\r\n=Gt7W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.3e20c1de8.0","@material/theme":"14.0.0-canary.3e20c1de8.0","@material/animation":"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-indicator_14.0.0-canary.3e20c1de8.0_1643124664714_0.2185033625055115","host":"s3://npm-registry-packages"}},"14.0.0-canary.9f9d928b2.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.9f9d928b2.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"d5477beaf1690aad99378626cfcdece273171dba","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.9f9d928b2.0.tgz","fileCount":38,"integrity":"sha512-tEULpD4q2KLMNtetpser0eTZYjTRr0PX8VCQ0JmPtGYBkbExAiNDKG9BSLvY75e2PIkr7K2irFD5vAX9Vhrb3g==","signatures":[{"sig":"MEYCIQCx9xdPN3ebuV+18DFKC0Fe+dgKxUSr4EF4rsC4VrWcRAIhALgINnWUxaphcQPc7uwLdC46PGu8hU9WbXMWpHUe602w","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174208,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8uCQCRA9TVsSAnZWagAAoi4P/0r5vDO8FpPhju+YSvIJ\nXRnWoRzFSrAo66HEK+v008FwexuWOEtKrwp/RMwu1ettdMNgG9stqVRnQ53d\nzCSnyL1OLI74j3ZeMo77vwxrEiw4WrLlhEsQT1tTai2uw1ocinlQ5o24DSDK\nRhEtcaeICSB+vMOhrqlOPc4S8Y2IvtjaMKNEMgEZ8J+Fq9e9tMpVWv3/3msY\n7SsO+/L4BK056yZVH3eLkEzE3v+5//epaeX6fep/OsS4mqF2w/XOQJdYHCcA\n7WUdOg6jAPDNIb6J2SxI4wuxpwuuybOIWvQ7yNF91Ov0aZR+PnSMFlInfA0h\ny5QxqBy6AM67s532fIYwdi1J09pHm5aHVINWaCGcE2V9QqghoVnRj1iR6Rzc\n0Cdgv/bsxk64qCGjF0rIANhCIN9bsJRhzmlUZQzjFIAy/McGd6iv3CGXSNU/\nnLay1hGJgMKWYXjExarHN9lHuwd15eNF/yWZU3/5SxLKX+AzvTAVcDy+UzxT\n/qIcyA94bHsXXw2djOu4+1V4hfZOoVvtXiGNXw4wn7J4te4xq8gLMcMQA7z5\nVUtkY5Pj0hC2cJ5uDJuuKQ87imJUyM9S+JWX932428xBcyx61epk4aLbWrDh\nIeTAjzwShXcFeKgOeSo0+233h9JNwg0ZQHKOJ7OqcvXNfdPP39UBZwWP1tp9\ntO3b\r\n=f0r7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.9f9d928b2.0","@material/theme":"14.0.0-canary.9f9d928b2.0","@material/animation":"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-indicator_14.0.0-canary.9f9d928b2.0_1643307152385_0.8815888049825436","host":"s3://npm-registry-packages"}},"14.0.0-canary.a2bcb065c.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.a2bcb065c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ed84e180e21a29d484746706b0c418a250670a77","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.a2bcb065c.0.tgz","fileCount":38,"integrity":"sha512-TaMUOrZeGbPzwoqIPBSQhYQ8+b17qY6IsiqDNBRYLKJUQJKR265DJjJUgLW5bOznijctTp0c3xD8fprqaM06UA==","signatures":[{"sig":"MEQCIBJa4Y3weFQRbUlS3M9P7vw9e3lSm0iJ34tUvwMedaRUAiACM07aoa7uUol90xKUACAoU9D1qBx7VGMMO9kOl/wdUA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174208,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9EW9CRA9TVsSAnZWagAAym0P/jeBm43hNa5XRZZQgTtu\nghksDy8LqhKjb4e9VY+JHRpTcABuOuw2puDl/YYP0UdcJuWp6KI312HS6XIn\n7mSbx4p4t+coiUcE0fFeo1AbkLwYVNNoGRXoYozL1K6g5iH59eK2yl2TRsu0\nHWe8AWc7VUrqKM9fpG/D3Eh1PcTlta0hVcZOp4i6bUJrtp2er/x38xjlZ8Kg\n1vZ5XIRybR7Y3iaWne+0aA1l/EiZ0frngtmme6cEZZJl+Abj64GMVe3rX/Om\neItfaz2PCCn29qM7pq/K+z/w8CN+Aljv5x6rjpUGWOS82+PEx4fRe9eQRYy5\nLhyy/xlkt6Ioi9RcDx8gCMUMdp722XW/A0D21y2Fu+oJ1Ptnq+/rIfClxrMa\naasoIEz+LXRAsLbuqCaohdQFKzo0HivI9NwhpxxFrrxtYtPGDKpQI/lRXfbn\nBm8QTcy2DDr61/vCXGM+b89LmBnrP1RCXDQ3DGq0c6SMBQgeFK5fbSrPCiMV\npF3HEYT8PmMPJEm36EJJSWp+MEq3dgixYQOlInmrLLFeVOVKZLtmGzoVgJpT\nj8n9fD1C1q2iAf3YfWoyho0j8FspCdHyfjZhB2I73KWtI4hdGqX3Qse8NRcg\nLJSQX++2zGc3qkdUhkYi4cT/Gc7yRb2+sPyka+y5lD7b/FOExPUc5RniJ+7h\nQrY0\r\n=KjHb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.a2bcb065c.0","@material/theme":"14.0.0-canary.a2bcb065c.0","@material/animation":"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-indicator_14.0.0-canary.a2bcb065c.0_1643398589204_0.780227191811784","host":"s3://npm-registry-packages"}},"14.0.0-canary.4e66fb2e1.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.4e66fb2e1.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"24c0dfa110a19a6e44270187fa623621bf765ae9","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.4e66fb2e1.0.tgz","fileCount":38,"integrity":"sha512-pgjV/ZHOK4VNCsZYrauzHUJWPIbGjZO9pg2rbqfa3yILNEVdGb07TuxCZ6oWVrAYUVlQS+7YhgRIfiyBeSyr9g==","signatures":[{"sig":"MEYCIQCw/uQaRI/c2IpEZr0Q+xPUn77PZE7uny9LAipGG/iRJAIhAPXtANEnj3bAFIsqOuTUHW7WMZTjb+/pv78P4Ibi9mIh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174208,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9EbCCRA9TVsSAnZWagAAX2MP/isG6PnBKAtwbcicIKl5\n4VGYSuItjqQ7PnTisMDdOIsXVhBzA03C1G45dXppxmojPsMcFSoaFDVVHAOh\nbb6EhRW/IjCHVTxa2IUjQIcKEg797CaOGu5WNEGW43zSGKugkjgcGhCO0Ozb\nqlZbKgMDNoX+/5jjibIrlfD3/5NN0e6voPDth5cb+1SZVlMssjwAkt9oqjHN\nkcbKAq4xDxD+qv5YueUC/8OFYq/XCRHPc8dfVix8fQ1I3Hzqp9kfS2mKZMaS\nO3dQNiGmjuBzHagKsLDkz19N7NWWZ1z4qqnJEk1bnDDjTVrMpFlklVuiTcX/\njpJkAZwchu9cYZl4FF7tlTCxRFZCojcCoQifHv76Q2g6v2lRoDjD+Xh9/XuJ\nXBGdZY4jbWoAB75HloLtwpbmnWPqPiYVbpGRktmfl17LAwUqWOkI7jhknOxR\nMjngzFN2Q2Bylr44RvrrR/ATVvlgU2tQ2kjlndhig4DpsiRrbjVw5l5nabZJ\nFK1y2cE2tU9rb7+SrPGYXM6Ecn6j0AE/+JoT24f9glyL7SKeI9cPJtLPCHok\nuEmt7ZUUuvT2kq4FbV/HaVieeJG82NPHCfOJBHKlf5P5eYiT+a819zd/SZDm\nmxZZVcAwYCA/g6MUH8hStuk9EW2NIzgLGuJh+ZXeTIhRhsSX8xWkh514VzEE\n3vxB\r\n=YlHd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.4e66fb2e1.0","@material/theme":"14.0.0-canary.4e66fb2e1.0","@material/animation":"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-indicator_14.0.0-canary.4e66fb2e1.0_1643398849961_0.7328334683067002","host":"s3://npm-registry-packages"}},"14.0.0-canary.9736ddce9.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.9736ddce9.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"4f4a2b90a69986464d63ff651c6b6ec321782190","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.9736ddce9.0.tgz","fileCount":38,"integrity":"sha512-H31+lm3kGKfCN5nkY69bHUE5Y44rQju6Xa+PIj1qjrWziQS+ew3CUOI8rWwZXVGtp3eCsJaV0BEMhgmNUgahYw==","signatures":[{"sig":"MEUCIGPP5BvpjnjjMgByfITbUArx5kWx1fF4knb8Y9sY/EyaAiEA0G2CkNotYQCOl/S9FcBhMhdyVhJVprxBUDMOYIuIVRM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174208,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9Q2dCRA9TVsSAnZWagAA1FQP/iF19oay9xW2L12i2yTB\nh9q/qCcwb37rnT3he9U3okBqoWjhytJAoujTIAY++hmUB4cMFA6DFqcI2pV9\nag//+I+KchKt1Pn2m6X+5VLC3Up4PlWL0f9jErXgnn/sqGj05SDQQM4nhZV/\nDX/48UiVSkjrhofj0X+2XMGQf7FfIDb7HmIZOEu8EahB9PW3139cJ3AkIlqy\nRVX5k/CxNlFbPtBOXsta+xlUHu1hr0LQoSzru/PjNi1zJbiHsWNrkuDOTFrt\nDoWs1adTp5l22kyEKuTmN2Q7GA73h/SfbRSSf2Pg2SIMTJroqJrbXjjLSpxg\nuRylBBqKppibVdmoSZzzZGjX9ANcKKXp8dZhg9kdW5IUM3RHQpKNVPszXpXk\nN5txllirR671Su2LubU3864Xj6gwjUIYtgfPWT2xczD9yCK0PmnYf+8ho0sf\nxKL/NAE6dXzZWxU/MY6eyLdh9AQvF4aziDAyaCbNIz+LrslDYwogmJpTuxar\ng1MEfB1mFPn+R/cj5M1+2bhVs+FlnWxmxsVQdER475mDEThP/1A5OlK5cybk\nkcYf8lzdCcF8o4UXkPatuqgnOQq9PWEeVohlggAK660Qz1LdlAxtaca0k2nL\nLp6/0+XsLO4Soa0v7bwbWd1fU55+FevRgbZ2a9QAspDsUnFetVFgITWil31k\nUieJ\r\n=wD5S\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.9736ddce9.0","@material/theme":"14.0.0-canary.9736ddce9.0","@material/animation":"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-indicator_14.0.0-canary.9736ddce9.0_1643449756954_0.7582013053406338","host":"s3://npm-registry-packages"}},"14.0.0-canary.cc4ed13cc.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.cc4ed13cc.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0f55b7f4f04954356f63bbed173e1059415bae25","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.cc4ed13cc.0.tgz","fileCount":38,"integrity":"sha512-A8WhLaucp12eZoNQctoOW6DRfF6H9rRa6FFk+CNvenegVcEY7dYNLYJgsBB1+EFxi8w0rySfJ6rYJpwUK7OPGg==","signatures":[{"sig":"MEUCIQC6f1hX8I8yrYwO9JFGf9KBI1TFWniMbXbrKU7UZ1UqXwIgaCnZKrL5685xJ7yGkK8Jh3E+srBgovbaMFivDtIMNoE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174208,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/W7NCRA9TVsSAnZWagAAxu8P/AkGgB4tnVf5UpVOPgOe\nBIvPH3+CXS4NZTav+0aoG9d0trxwhesmIsxtrOdCGdfdE9s20JEg76PJqRUt\n+WfCu31WAmZ9u7kgUZzvQjlvwd+xSQXspTM7NXTjYzb/zZZ6MIkUAL23KL43\nXOG0qB0YNUpMinFenQ6IJTFH9byzb8IaoEri2Wk/WF/56qghh6GnCdtbD0Vl\nSt8zHX340cX3+WQjwhD04QdbojUI02SgS6p/l6p9eR+5MwbI+g5g6RL/MNhx\nuOaF3xPzRNXIJP040+KU3Avr8yUvM2YM70SkETh2YAvBQsEj1kPypPmbmuue\ntQ8dNsLQbAxBdK/XyceUHCnW8TlM0L9N1sppwjtTHo09/adCt66tVJQnAGaI\nzXfmo6aSE0B4IQ1BAnELPHeLbEk4OJZ8yFFIBeNnuADqrV+fbXp2rAYceTAe\ntlgbeg7M1SdYy80taP3NEOuLl5CrnFxq+/lONG2o56+IdwAuScL1F5S7ZGfa\nKr4VKJMI7Ni9N7ionV2XTLAcAYKCT88bK188xMYqg01mRt7LjkyqhqiBhYRV\nqMLeat+aJD44eH5ha6TqjiFnw3rOj9VJvuqg9veIE4AKd7mqFCXR4QcHpva4\nfP1q1bRUVGj3Q05ahzyTPGZqYLqogC5lDuS3UqKs3Q3WqaYkXKt2qAP4rlun\nxwtA\r\n=awpM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.cc4ed13cc.0","@material/theme":"14.0.0-canary.cc4ed13cc.0","@material/animation":"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-indicator_14.0.0-canary.cc4ed13cc.0_1643998925176_0.41059286686324303","host":"s3://npm-registry-packages"}},"14.0.0-canary.dcba26fe1.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.dcba26fe1.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e261379b7f8052d757d070dbd7c30aaff8437559","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.dcba26fe1.0.tgz","fileCount":38,"integrity":"sha512-fEnM7W/AeWL726R/wyh/XNUiQNxeDF+vGG7r58ONHrQHC8SjlJ2pBP3+sPwZ1p6wy9JPBspT1MDvmZWqYwsI1g==","signatures":[{"sig":"MEQCIFgYu7HZXykwZi+Clsxnk+FI/kY0UIwrKqnjTi259q+HAiAaW2MrBOgyO+NNO+rVZuP/x5PZq0e5aJib+1YmbvzAjQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174208,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/aERCRA9TVsSAnZWagAAVj4P/A8/I/0MiMXRrFIgb+Bz\noTqDDYW2JsrEqv2+/0VjRZ8YHY+ZdSos/Usa+dRfL4kqnx8nTE2OZjHuLeLO\n+dsyeQJZ2Z37YuxB2DiFpQvQtL9OokqVzq3frfc8Izq1f67YqKinv3Dwv2Wo\nTp5bvAtzn3u8qllPeXM4ygO3hz0k+ucvW3hO6I/w9newAN6fn264xs+p+lIz\n3+bhc1L4koSTmP+gBnrFSPYh7JLUQzXjRU9GeLRx53xBya/NFxPGRFTh0a3u\nK8rrmWJdr63GAr+3OYYfXrkf7XebEdKUIOUQag2GA3lpHeenXVlmvFinFw9B\nHPTPau+6wurXxv7AZi3awLXo6Jn/h9qHCXQk87u07myt2y4Udz8uqieeJ9eQ\nVaTdb9a4ks2B2lB3o5SpPM0sWy0GYw2D2EnHDxb1mL9vDOR0BwOk3p7FTxrC\npy+exKBcGMm85gmpVNU4H9QgkyuWNhEicsM/vUKfGTLSb7quG5hcBm9MmDpV\nlhQVMjfx7KNHeyJ5pDdcDODpM0fh5tDn9PTfbpnP4n1N4EHdA57ZQhNeGDAe\ni6x4A3djZf7YGimb1MC1/pPz1Nr9CvXacXvcyJD4+N1mtj/IoK7L00gCw2TS\n2I/A4YfpX6ml3FMDeAPBk0nWDr7wGkGDSbWn4XKu9o/yayVTMg8jwfwjyzoI\nbh0w\r\n=iVol\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.dcba26fe1.0","@material/theme":"14.0.0-canary.dcba26fe1.0","@material/animation":"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-indicator_14.0.0-canary.dcba26fe1.0_1644011792994_0.4245285328053847","host":"s3://npm-registry-packages"}},"14.0.0-canary.ec54d9046.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.ec54d9046.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e44bfbc10485e7976b42d8cb2254a08aec4d701b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.ec54d9046.0.tgz","fileCount":38,"integrity":"sha512-0FPnKdb2F3NCa2UmMQmbWHzdd9JxtJa9hEKxwbqTnU1NAlQYCUK8LBojAYwvOkUUfTFORbDVCk7jq1XJ6JXbdQ==","signatures":[{"sig":"MEUCIQCW+gHmabjs5XkrN01n63IZv+CS0nR1gWRTOCnlxUKznwIge7zazCpTuldtn2yK7nH2RAIX56oUvLIrf8nE4hM/qPQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174208,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAT60CRA9TVsSAnZWagAA6A4P/jvODBPeS8saOSBnm0E/\nU/twlfJuU+Xbn/1zcTBqvrJVkGJaQ05lZg5DmXy8seyrq/Pktb3wSCREPQ7G\nJX0HQTTIpncrbgfLb1lvehzJMJAHJQNq6tZju7RtUlf25ew56HKaZlkdR6W9\n8wk70OvKjaKPuq2h/UM+qukF3iVsmb/aB/BgVsLO8ANiP7DQ5TlL/W3GqF6z\nb7/j/IzoUN2Qx1ZbPjuui0jHGwG6ZoVNn7CDx11cbOBpjz531oqTe1sk6Uoh\n2eVm3Ggdd7r7MMQKkFEc1YBHljPNRONzeCW3LGP0797yqXUYqOPfcNsQTTnH\n3oshmv3IqLMUWFfI3IK/FuJdz4UEt03zUk+ZCC64Prj44E9uZIT7tu9M6fhl\nx8fHSkvbQe9yQ22hoJrxNWCrJHqhdBYLq4oW9fbG2PaOA4gOrlHcFp/E1IYQ\nfR/RldPOvfZw+SVFAtefpVcDxMOkb5FMMPG71/yjgRucgGY/YxvBH/KRPhp9\n5dT3/zLf6HH5JIp6MwRdbthr6wpoC5UDqZaucTwMabsrJmTTkL6LI6ac0Y1V\nYfSMiHkolRjmhwme9WiX+zrIvboH+5tsEbHG5whjDuiKhS9s/E4cGiBTqqT+\ni2jTNhd0ILREB0gylZ+RDweDsg4YzibTSnX9HjO2S49z47jsj9u8KNgLc41k\n8kRi\r\n=vaZx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.ec54d9046.0","@material/theme":"14.0.0-canary.ec54d9046.0","@material/animation":"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-indicator_14.0.0-canary.ec54d9046.0_1644248756353_0.3142226567393691","host":"s3://npm-registry-packages"}},"14.0.0-canary.ea9b5b463.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.ea9b5b463.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"fdb82583feea74348012aa288784e6ca0c093456","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.ea9b5b463.0.tgz","fileCount":38,"integrity":"sha512-ip/PO36ZD7dEacL23J+nMEBXqPcGYbOCkm3vPZqwRTQCsCeFqM1lI71Rf5E3K34W8YSY8drtGY5elicb/GTAqg==","signatures":[{"sig":"MEQCIHYtIxtlZZNfza8VfEdbiYeRlgul6V0R80CkVkeFP65KAiA0zx7FNm+RLZaEeJhUzQ9i+7mhn+95LJeJquQvh4/kxg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174208,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiA/99CRA9TVsSAnZWagAAt0UP/R3HjUYqYl4cC7t/Pbjs\n1rvndr3pSapwofCM9WzwD4SwixDhm11WvrmFIcBFos4B0ewHmWSYOLUIKQZh\nJW2kWkqdQdaBAk63UFwd3HAk3wYCruohkJ9zHzJI1Oj32VeSXB6/hLtlRKOU\nfzXMavCLIantcNpKShyuI8NSqBRhYLwki4JxC+o4Klf9ZiMsfxbKX8ZU6OSa\nUre0wTrt8Gxfm6m996MppS3KcTaMfKve4hmGBu6JYRGNRJkhScqBOxtpHKVT\nNej11zgMJ5pnOAYSLaYedg5i95SEUs86EBtKCMMGHYqIKVssPVCBNOib1zNH\n70MucOEXMlEWh9haKfnR3S4L9VGIaY8UKaC6YqXwM5E/7i7IagxsW/hSMwy3\nGAMR9vG9EvJpYdmB7DfYU4PyOTekk/U2oX6NoQ0Jw16QP3Ecj+2UFrd+gcYg\nsfOz20muYhfqCb231wNYHD6FDkQOOLvOLEfmyM+ZeouoctiViAHpLX/agVVR\nR8K3k9LrfeqGUEu2ORmxIb0lRPsi/Xzhjb9D301Kn8DIfiR53eCbH0RpiU9+\nHzK8Q9LWGR+pJFGw26ftCvRpRztSsbL6iWyvk8cEmK7rMupNgUVRESJtejy0\nrnBsvaX/BNNNOGMCIeLjbNBuBTq5L/JfEKMX4Ao+rUjXf98voeeEclMfGESN\nIhP4\r\n=jGyK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.ea9b5b463.0","@material/theme":"14.0.0-canary.ea9b5b463.0","@material/animation":"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-indicator_14.0.0-canary.ea9b5b463.0_1644429180901_0.6202240362669338","host":"s3://npm-registry-packages"}},"14.0.0-canary.96ea061c1.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.96ea061c1.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"2dc6e3f26b140ba0de0bb0ad2d7b9d7b60e2627b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.96ea061c1.0.tgz","fileCount":38,"integrity":"sha512-gvhAxrm+oDbeC2v2IlT6Khpxyty34IhQQslneoo3iJBS6abhBCi1oV1jUo8RKfdHr84fQNlesJHVuA7/cRgyRg==","signatures":[{"sig":"MEUCIDrNUnL/457X+i4YwYvUL6pG3j4rohKtszptqybzNpkAAiEA3ThGlJ2RJU0GS6L1+5OKDtL8hiF0MP4oP1TmNNMUJxo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174208,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBA7eCRA9TVsSAnZWagAAjJsP/3NMOey1RkSImCivAA7n\ndB95t5Oyx8eeQUg+mTIijGsT/SrR8jB7Wl+AneZUuq6ZeY8YpjeABfGzqepL\ndXPGhF/+lvPdwKkQUb5ul4faCvXVlGUBcRNM7ri/0I2hjFFqCxtHR7SsY2Db\nIcoh7tRRgGeXAYbRI9fpfX77eIiFqtW7HL2O9PjzPaKfYuN0wIT5rZtEgVuq\nafXBH44+x7MN59osWt2RcJMKss23Si3F8mFwZH4HSOQGYC8Hl/R3EthEsi6A\nuBBmZg3FS3259quMozK6Mcvef+uJw8McvgHOUryrgyHwlUCDDvE2aIoRCvOd\n6BFVQOiW7Z4umjqjEdY51pX0iOIKicnu+l3HuFjZucHE46EZDODd/BqIHFoH\n4ZW6IiATk52mm9H5xw33OEkz5FElifVnRoZ8cBzH6entzHXAqbNn3nEfJcMq\nQSB3RaPvz+m8e/kEE1TzMFq/ubJXOlRvWCMWJIdE6L5PiVHYOleNb0OcPtJL\naV7FssDGjAh9/pTiYk4BcocyA/7taWyDIR8pn3yOg+zdjT0cnC/fmWltnhtO\nAMcwVQ8dkFvypf2bMOgpBKcXBo/mNIOupDM4ioofWosJiqp/D/+XCzwL3ql0\nd5sw2MnEJNXC4qhBRJx+dhEG8PCPm3iv7XjFfph6gStO8nYUVnKzCqfvJiJC\nUqnh\r\n=qzn0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.96ea061c1.0","@material/theme":"14.0.0-canary.96ea061c1.0","@material/animation":"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-indicator_14.0.0-canary.96ea061c1.0_1644433118184_0.928080356061356","host":"s3://npm-registry-packages"}},"14.0.0-canary.e00181e59.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.e00181e59.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"8f5cfe96b05f1221d212f6f6cd474f966b658c3f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.e00181e59.0.tgz","fileCount":38,"integrity":"sha512-0vESI0hI63QFiCfL/DfCU8bsBBB4YuxapEF5EbvYoaoIbVHwe/NSJIMXOCcFsh9AsRIy6FeOAEi0FOcWZ7VohA==","signatures":[{"sig":"MEUCIH2dgzkxdr48QSkNG4SPZ+eL85wk1k/lz91jo9fpWtioAiEA6GwqjqrVslMrKj2zjS4uuFfhvQoHbqUusvi0e+Phxwo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174208,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBXAkCRA9TVsSAnZWagAAQwMP/3VKoDqZUoLJG7Wk6Qy3\naG7DNn3avxFDVlo9TFdGWLY0kt1R8Rytiwa4y0qLo2lYP8OivxGl/HTPQgec\nb6reanUBvZJVF2/QwmtIvzKlTJj09+ut8fx66XD/F/sPvba8P8Jrg6g2wA3+\nDuHpdNghdWzG+gRBn+nKH/3XDc46aOFj+mlYrACAkPtS35DCBAdJVISXmGGN\nl8eEmuHzeRgV2PiAMg9qwE5S8oS5WulUK7gHpnO1lqoL3DDq4Zt8S5J7jn5j\nrdU/GYEyrxR/l9fx36P4yrKv3N/vK1mKxplcV6nae3XBw5D16jteZ/Df/3pA\nejJ5dZMkFyDVkZyY3NryisD/he3rSAi3965r8nCfvUzCDxiImk1UUh0g6HOF\nd55d4L2GDG/TSnIFl/8isCReenp+yUAOupSlxmUevoEVk7leHVx8PW/WTfI9\n4bkD3+ub8gnwKWE3YBHrzH+EN8UsiGGf8R3CEURBI08Ic+ugfmRbPbPcYXpf\nQSuBVlDx34Xs3oNIi2SFGbJszUC0Vbjv2Omrng3Z7zgWt/RTwX+GyEmHVzhk\nt5CtQpvX5prBJqBQUqV51XYgTmUPvfHkJAw/wn2OjbguNsDa6riWmKhxLOm+\nI0izMNT4vJQvIRhaUf5C7k1Cevo3tXY27fyg1lJczXX5LryDC6m9i6DnXcJg\n4LuY\r\n=L8pT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.e00181e59.0","@material/theme":"14.0.0-canary.e00181e59.0","@material/animation":"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-indicator_14.0.0-canary.e00181e59.0_1644523556800_0.4873026887688636","host":"s3://npm-registry-packages"}},"14.0.0-canary.037285f9b.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.037285f9b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"feddb1f57ab1b1067a1dabcb6252e332b79fcadc","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.037285f9b.0.tgz","fileCount":38,"integrity":"sha512-DMiSILDd5E/u5pZMnGiAhMF4BSfu/uOcRAjW0oVCFcsiB3ybTQpxzE9NS++0IWAw+J/f7L7CqU9xdkgA3t4RRQ==","signatures":[{"sig":"MEUCIFz6eEELfjkThi6zr9kDW6NefS4Sgv90AKbHlWWZBHlgAiEAgTcchdlku7AOPZphF0BaBFqB69OFCwlih6BxiipOAN4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174208,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBqrhCRA9TVsSAnZWagAARukP/3l/rnn+ZBys3kzq8rM6\n7TFX4VXopxSUDK2/AqPADE68/ce2e1L7UkIVAZs+eA8hAYJ5VsnUkU6t3zDH\nb9zpkz1DEbfjS/Rkzv80J5WBx2CCy39fT3RgxLi9xNK1ktc+XN4DXfQ8/dPq\ny5uW8pBHIIJUQH7Aqbe+8aViw/DrXbQkswvKgU6hWvMkwTbr9YxPGS/8vNGd\nNtLcBbFAGwGB8QJuI51mlj3sESZ+HN4ZfnDI0g/lVQj6RSBO3obHjRqv9iKR\nlY2YmPtPM5CilFNnjJt8R2OZweFSXW/NL9q+he/ojzppcHkaF4m47AZFiYYh\nXeXg2RR31wcE5ycpjADB9IbjuC8n+xMwGIFCBj9IKXZLNi+RxtKV/z23K7/G\nBfIbdK4PUeYYQMsSOIcSsC3ks4C11pqtvN70lXziUH/FyC+YCjSyoj08GmET\nvUuV/keZpLx2lpOalG1MS/qas77y/VOI5LJalmP57/5DIdgrNgt8jMvEx+XR\njI+4q3fLfTEbKp1//AmHrxh9hOdzHKOcYJKy3eaEsXkHb8lo/lDDLrLepGh1\nMYiZW9tWQfd2S9pK0m0D3QkH+VvjoO7zrZZKAUAp5ssEouJiMkObYCbb/EPE\nhT+gEabxEz00m09LKBKmZRe0tjOVjxnjN0osF4ar2U0NW1qO4n3nQB+RFJVY\nFo7/\r\n=IP4+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.037285f9b.0","@material/theme":"14.0.0-canary.037285f9b.0","@material/animation":"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-indicator_14.0.0-canary.037285f9b.0_1644604129631_0.2498743103817449","host":"s3://npm-registry-packages"}},"14.0.0-canary.1aaa68dda.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.1aaa68dda.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"d80d860f1f61619e5e4fe4d88ff634b913539951","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.1aaa68dda.0.tgz","fileCount":38,"integrity":"sha512-HVhn2uinfGW7lZThj4mD0xBLJKu1PUgjxEwTeg/vpk/XiRJMusZG4HMRbCiZFkji4hAKu9+SW2t0Sdbp6dHkJQ==","signatures":[{"sig":"MEUCIQC8LDv2/kHBQookKXEc/oXzNMs5zyYbidgO2ibrxWm67AIgN17iKLyga6dUB3ey8HhMsbKgx2vQVEtfhxXSfeldwx8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174208,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDVUGCRA9TVsSAnZWagAA5OwQAI1BmdGaWw3xfR81i0f3\nBoKOSkzi7OD1vRzM6brrk7vVBXXAFVgJmyFQlDBly4VLtwoohXIr4ozI5r36\n7orZCJXPgPRWAaUWAij+JqEIbuFJKR482mMPkrgE5Rt3u3BvRVnzNi1K0XbS\n6uDJYkRqbNznTllamZs2BHvPYwE2mFblpTeBwXGtEmRC6M9ake7qy6sqKe5K\nayVMPGVaNwpmh0ZLyMYFCxacsLTsGtkW/6BRFu7n8+Y000cFz/Zimi77qjJx\n3gf1pXnI655a+n1IS4SgbWJm6Pox0U6mA4WUzLC1g3+dadD/PKKpFeiw27qx\nHBZg2QQv3vc7/JaIMB0HsW8qCcGHvd3PeTaJjQObR5niuPYd6AWnCBqI40Ct\nxnEGsx45GroYaup+FCBV5H7z9gCEokJ/aWJYVrAkhGln819Puuc82Bd7ClVD\n1GpbPhimyE3HGoHjNtHFcj8PVfECxVIIiRZ+eEhYFTNi6sfzsxbBUvyLr+YR\n8udKfqOHCElUX5Q7bSUeaD869w8t9rj0MyQ4Q02NAPrDqL7Sm7aQczqfVB17\n6e42J0MQHvC0rflGH0vEPZYfOINNg41+IUl45bm45zUS3GKmxcG14COJBoyr\ncoG2jiZ6olHlHKXFSYHefY7TsWLuDTSEfDA04UH4l6XSNJvhCqsWJJ1v891e\nHzWa\r\n=fZ6Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.1aaa68dda.0","@material/theme":"14.0.0-canary.1aaa68dda.0","@material/animation":"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-indicator_14.0.0-canary.1aaa68dda.0_1645040902486_0.3512101963892593","host":"s3://npm-registry-packages"}},"14.0.0-canary.ab4aba1af.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.ab4aba1af.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"1107cc43738ff953e4b90fdd4ba47f67dc8a2113","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.ab4aba1af.0.tgz","fileCount":38,"integrity":"sha512-FEayklSFXL3fg5ipGYF02FVhmk4wFANFaD01h3Q/iV53JJ2AllWXuzmEWeYXWp5MgsekoXPnTTuKC9agfjAGsA==","signatures":[{"sig":"MEUCIFRzoSeZsVu/u5xQM3fmalaADM93IkXxhrtVnVFN0GNfAiEAkb4xyiVemFtgePtsCF6ndZiODlLDCYMBwweeNrIbuLY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174208,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDpDVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqqDxAAkVsmU56tfM+cRhOEKTv3GZulXAvXbWjSlj94xHyzwqwiR3pu\r\n4HMJM9MWMSf5x3cxttx+oX6isMrQSCF6g04IORJGM34E3+3t0TGrqN6X4D01\r\nszrU5PvZQgDpw5wmX9OpZrDNQXol1lXhePjGvXh9vCcDsI5BfmkqqJ9NnN/N\r\ncrWhBbsPdn6povem8jdnq1lesbUuNZ52z4BS+5wdI43BsacBc+UtGnO6+154\r\n7zQpROMOaBgzK1wFNqAhP3bqMJmmCumvJgP3qRLM1ngWtuuzDhtmqefdnYL7\r\nWIc3A4j9Dz+Z/YU/7rnxun0W3Fr/YnfAhaLIyLDQ98J0lhF8vCCpU6/52jGp\r\nrplvCxjjm0kQwKHiMgPiunVz+K2g86et1ZNFvgslQ8oJPhZkCpyRza5EJiqU\r\n+1IorJ2QScssZel74SzEvyDesBrTrtFpiuQIXZk8hRah1KC2AuCSK/J8PBbk\r\nHfBIE+PVCTgjVXvUdvUy5itVOhNzku4K/M3rSDz8ygrcKcWh5oUlqro/kd2g\r\n1kB+TuU9H3Yutchq7siCu+xnBm+ica/1FrEbg9tdGxABD+JetyEJ9v45lN5u\r\n9euD2wtaB3vpexQXgAWJw2buWmfH95k28I21tobUXA0TxY7R1b1EKAShxSNg\r\n7DyQ96SM5NbsVyg6olo5cVlAJhSvbaGSOs8=\r\n=GcBw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.ab4aba1af.0","@material/theme":"14.0.0-canary.ab4aba1af.0","@material/animation":"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-indicator_14.0.0-canary.ab4aba1af.0_1645121749340_0.18315902743890788","host":"s3://npm-registry-packages"}},"14.0.0-canary.e58552c6e.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.e58552c6e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"b54c62476b1edbef070cf7e27376f0caf4258e5e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.e58552c6e.0.tgz","fileCount":38,"integrity":"sha512-6VdZtK3JOkf1xeGabAJcw7/vufD/aT2cu3HVOsf6WCAZNJSEvg9wQecYVr6yh4BTevCNgCvUbAaR3OuxLepiWQ==","signatures":[{"sig":"MEQCIFzfoBvQBGedjzT+LVYqixRjBIuOZrBrqgaq3fYqLXDLAiB5deLlogPMEQ5yF5iE5e4U9+9mBTTyFRbBPkWkBl7wIA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174208,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiD994ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrkaw/+Ntb81dCruHwq9+kK7IXFFfs2i/uLlmBQlaSoKpNBhc4WzCZu\r\nePEu2l8W8vlP0WvzzC7KajldbkphS++fKVp7pyxBOQ8tv17SXPK1Bs7EFgjU\r\n6/ppIF/F/MHhK2+T8OZP5qutfa8dRvv4zJq0h09fdk+2Q0GR2eIzafakdTNI\r\nnorts59QnR0YK+ztH9R/vtehmMpq90nKmzT66AmZITckSeNLaED/6IDhWZrB\r\nmCRI7LWiirGZNo2rGLhWvAkeBzJagS6j8GqUXcPnf7rc9r0G9eKlsx66f8XA\r\n+Cdv3jewwfuxD3/PSZVTfxQNGvSW0MhT2LSxpztpSB12HxLD+zNn9mC29psD\r\nvS+rFyF7R0RTXpDFwWkrsTmeV7CVkfiwH+NG5jYwkPt5PdkpIVszmmPaQL7P\r\nyegej5vkD2pp5FXpLF/p6EHuW5MMLfhLnlyWiDMv5GzVQMbnazh1xf7fLN1n\r\nZvqtPEyS/Of+vRa6qU+qRSpa4filkg8IUHnhD8pM2Z+gQMeONjZQG8TP3zKc\r\nFVvOB4RJL4P2uubQCBoDMwbbJMrHOG5ipDfVbaUpKYaTMRsDuilEXYjFMhce\r\nIpUhtRnixWXli7/efPMgLNJrWNz1emkCQT3TWqJTLRU0AdzNt67rdBx2RwM6\r\nYoyi2/dd2t4FOV6OwySnoBfJM1b1G6+Hl2c=\r\n=h8th\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.e58552c6e.0","@material/theme":"14.0.0-canary.e58552c6e.0","@material/animation":"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-indicator_14.0.0-canary.e58552c6e.0_1645207416171_0.937490516618176","host":"s3://npm-registry-packages"}},"14.0.0-canary.868793776.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.868793776.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"10f4a2a2b83897eac90256deb5977a16cf635eea","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.868793776.0.tgz","fileCount":38,"integrity":"sha512-hcJbs/pKMtOBg1LZec5URTYD4orKHJhs86Hl5EuxqIvjWQn6WzEEpbELVYxJ5LkQl6imxSsOc1kXxE5ruKGgzA==","signatures":[{"sig":"MEQCIAgDf6KnF6YW0PZeXfqqK2VWWO+fpcQU3/7Z5GQi1lE3AiA5Acpu/e2cmXshRBZbXxfuJBx14u2IR2nsvklJ+yDLDw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174208,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFTrXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqm3w/8C82i46/MGvijykc1/iHUTZdAJDaat+hfdarI8Ig7p0zmtH4A\r\n5bGFNMX26ZYR5HXdydNQVulari/pGyOBL/v9sEvKby1LUll+g7GRVIo0FQjX\r\n1DfES84gDELJGcsA0tkkIdEJuhiDPunKeRa+Naw6hVdpXcZsv5QdnikqV23C\r\n7/6kzTXz6lWSKNAErly8j4Zp6/Z3qIeDye2L6XenwVxAO+p1yxHIho4fLahp\r\nGox/6flK489mknzPEaE/9q+Jqx3fBcZWcxjdTrQWDprcxsIva+devdb/cJBl\r\nFj+ms5D3XLHvXeAwnoOMd+L5KgJKUcv61IAm/toAG4/yI8VhwcpV0FBHaJ2s\r\n+S8ssFQIJquOrJsiW3UrioYcDoIZ9e7llZAJfGgUriN3W0uzowQF2uvBZOem\r\njqMzqxhi41ADBnG+SzIVPgQTk9Ci5UY69RDLsXQnSdvrC+SY/z3wgn2IO5lp\r\nTWfIpIyiu1HcVz4mnhLK8UCR96LGw3zE9HqfG2njIMexCoPOUIEwSn6yUbHC\r\nXZAxL32+ICVxVSvvHy1nI2Fj5hT0mZ3SS2K1Z6Chvp1C85FE1XJr9acFpXxO\r\nZBvG9CCdUYGT8x5iccPT7uA8VvRf7OAAoG29wRfYwH/BzaXioSwryVraB/wJ\r\ngvtEy1SR43m3e61qEHNPFU8Ho3VWvHQBJuk=\r\n=Mzio\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.868793776.0","@material/theme":"14.0.0-canary.868793776.0","@material/animation":"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-indicator_14.0.0-canary.868793776.0_1645558487289_0.14216109540076904","host":"s3://npm-registry-packages"}},"14.0.0-canary.fdc37a445.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.fdc37a445.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"61f0e38170d8e67cee910b88df5bd871a7e7ae0b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.fdc37a445.0.tgz","fileCount":38,"integrity":"sha512-1TQklMBMFwhDYf6P+g8XslRZMz1fMYX9i5gmgnTO/JwXjQ5MvFEkdCvww3+PmKJLdAzQ0rvxUo1IiqPPa4H1NA==","signatures":[{"sig":"MEYCIQDuN/ns9e8QlSyd+b26Q/qhOarmdrwc+aEz+Up/iSjJ0gIhAOGFcRcyQxl8H8CVf8sqAKwSqsPQXYxgnizR7Mf8Mo1L","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174208,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHRhUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmotYQ/+OayqudqShHLPNfTU7iYVXoquOKPTgoqf5iPOIOM/dqi3iJ8O\r\nBkX6LWv0pbXPkeMUrbSCA3IWIOSV5ElZsJ45g4SJiv2phBfI7f+scSFCXv4T\r\nWGIb5oVf0kipLezNZbL0Y8KOOWjpih00xlhOY1fJ+8gVxMT7DYxfCL0e/rCD\r\nc/rvt3lj/4COofpy4vF/rEpIL68EGt2KRUPjyNLIYwrbM0bToLgU38P1RgOE\r\nTe6zxXv+52NRdxOrwAxoSwjPV2Isk2Y45WlevYuBCDwYq2+h3TI5dQntiwoN\r\nc5RIiNx6FRy0ycxa2pPClgp/IpaKzANDUMCaODNx/5U2nNH2oo7ui6hSU4ec\r\nYKtgaiAVnOpozaravQC+56E83+N5CG49pUqOQzwMYdPjBr863tFWOxFNSOHZ\r\n6hAhtyRA2bntiUZ4zm/qTQW+R8kJymr0LjYktl2jwUkXIgbjbrfhAFeY1Bg4\r\nGN5FkuFD/QqFOaPc30wDqzJNhtuXG2o5V+Xqo3vQ/HdrhQqjPX0AdXCM5B1H\r\nq5UjfRP2YnOzXPUXZnK5t4LNinv18eMUM2Tsb2Bk2cQwzCpU+nScKM+Ax15P\r\nT5V1gFRKORbCsXCE5UqYk6d0PVDX+U03rdXdu65EGLlo1PzaYSOptrgaNbBW\r\n5Y2Rce9g1lfLwBw1nkrd2zi9PRqkjuGhMcQ=\r\n=gCKJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.fdc37a445.0","@material/theme":"14.0.0-canary.fdc37a445.0","@material/animation":"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-indicator_14.0.0-canary.fdc37a445.0_1646073940384_0.3861698535488083","host":"s3://npm-registry-packages"}},"14.0.0-canary.43c7d87dc.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.43c7d87dc.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ca3a6e68be9e5ab98afb34e52b6dbdef28339e71","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.43c7d87dc.0.tgz","fileCount":38,"integrity":"sha512-P2PIBvfHmM/3y5DvArwzx5usP0uVS46vmAQOSwlaeX8dpYTSWOkWS4tG9e+arTfs3WGseASoTStfGZjv4g6PcQ==","signatures":[{"sig":"MEQCIFunXa3KN591Ly00+vDRx45R1bW8m1DOqZmXDNFuxSZCAiAAjXYp8OhN5tjh+BQ9IHSzuY2veKVvozMtDu1SLud3yA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174208,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHjyYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrZjA//f3yDdIVfI2JVkqRnzwBxJumLSpd4OgcUMreVwg+XkBj7sLbA\r\nfhWr+5ZAJvjGn0GThXjavj51q/RfL0rJpurDFmlcBlPWRp+09OtzHjtGk8fB\r\nOMaRh7gz66ZXojWlFGgX1/F5IQ7fRka15fYe2uRVe5R7cuffAAvPXlJG/W54\r\nCTMbtID2ElvzifRE582DsQLRGXhM40QlOJMKlTXtwcktZIePMFkiqJ7Qsl+p\r\nkofEk3kcOtozlOQKVn4YII6py4P7DB8V1/BU3nHB3xGOagY4BAbo0nkS+/yN\r\nLlnlR9Z7wHzcnRYcaOhQ7/yhObdh98cuuN8SzA+O+Rzy/Vp9U/cSeaCqLW2D\r\nNs6MOGm0kOJAKd9stoZXN471IjXR22qB7by2dPlnD+maD+IqivF76sjbZsPe\r\n8LoPHiHdSdHZmh4H7io82HR6l/N8pGGj0Jty5VXMTjUXL03NHTS8SCErdugY\r\nI1pwbHfJjn1qsuCk0DjiUMWm+l6VacOSYxNMwEOv+VtKVBNMoEaDimQcsOob\r\n0MlQzm/73c9PhXGwhwVNCsD0bwNWJ/HN/I0KzPTptzGYxlVC9lqa3ljISLrH\r\n7ijNVfW4TEPWpO1VkrQDeUgEkc4LW7OPzscjzb+y8GnCB6BpefvwcpazVz//\r\nKQ/Mp9NBD0C1PlaZYncZmumNDqr3FS4uJfU=\r\n=Lafs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.43c7d87dc.0","@material/theme":"14.0.0-canary.43c7d87dc.0","@material/animation":"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-indicator_14.0.0-canary.43c7d87dc.0_1646148759982_0.3780263958561709","host":"s3://npm-registry-packages"}},"14.0.0-canary.23043acd0.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.23043acd0.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"5120ec673dbfb873d708fad17de71d507605d56c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.23043acd0.0.tgz","fileCount":38,"integrity":"sha512-2zlrO2gVddyR6dHldn+432CF8dClJS7yuM4swr1xF0YbxykkVaDHrkHrrirURvqXBTdCpUeqiK5y63NfYhZiRA==","signatures":[{"sig":"MEUCIQCFVl05rYrcr5/Xi9gwpeaS2lvPTr9XQ9DBk1X7WcvbugIgKpOO4EfiE2KV9FetHVxFKh4SwIBzYhvojiDvM1jcjA0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174208,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiH9MTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq0TA/+Pr2JojvjA5QABvggotWzFQ84Re6DXN+3pRXij5ch4RwgfTyQ\r\nP6e9QaoNbPdBwwQ4QLMLLE5MfoguyWB182fyDHSuwxZZnSk6kqNHPdX8G8gw\r\n06iBiDtecc+qVANI2SLSiGgabLaeWbiYNC9mN91zuyApi04mLtqtP1/sGwvq\r\n/cIcR3bQH3SCJ7W+Mx+OYrHHbu2Lxk7y3mrumD7RP7FZPS5lCAoJ1OOesClw\r\nExYnZCalKXwXU3KhlEX/AtHo3l+Bhf+rd/0Exbg5VBOt+jOytiOvJ8RLZOIn\r\nEB3ZmX7jHB8thSwRxT9CJHLo2T+1edviv/EfvBGy+c4LK4M7RVz2nxuJgcWf\r\na65fZq0nXQ7E0g0SM7yTEm18eZXPPwhsl/0fCpbLoC9uFEjb7NsFz5iT7o3V\r\nGRfuqfksVW69EcqsgBCt1+sA96SLmC5mGRIZDJuyaAyGy98xpIkDIs4BswQ0\r\nLCjUGHdhUco9Bn6kkBzyAcPfURwW4ohToYanbLtWeyiTvs9TOFR+HrdM3nOf\r\nFHYsZrCyT0euINMkpr3T5vLp0ysWMd/AcCRHIBqWL1LcfnrB6/Oq5XnNSXCI\r\nMeO4ZMR3NWzRAx6r6CkRveKnnQo4wMaXT2eGJbw/AwwAcTUhYbheFiMuP0W7\r\nA+KrEsMTQVOqYX+oSp2BR8f2bzZ48WrqBl4=\r\n=N5kk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.23043acd0.0","@material/theme":"14.0.0-canary.23043acd0.0","@material/animation":"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-indicator_14.0.0-canary.23043acd0.0_1646252818843_0.05720817030232306","host":"s3://npm-registry-packages"}},"14.0.0-canary.6505e61c5.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.6505e61c5.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0e322494618549c5eac5a15fcdfcdebec0ccd1ec","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.6505e61c5.0.tgz","fileCount":38,"integrity":"sha512-pj4VAo47JapuzlmpWiNP2DbkGovLWbZj5c541QBCZEPKIVS/BinDHORCYzRlTBzmuFMtu/j900DeMLD/N/YKzQ==","signatures":[{"sig":"MEUCIQDzkVNSbzSs4nePECHRk4+p23laHBN7Yk2GGAkX2LPsNwIgX2VNwQcp7lLRpwMW7ntoizeAIvWh5NMXdDSwWL4q0+4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174208,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIR41ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo4AxAAg8gDLklJVZbydglu2NwShgk6szHE2DbjIG3ffOYVamzO7CCX\r\nmA4EOlmglYVcfZ2eIKLrEhLoub8yyonFCFeo2NZlQ1AiioQm+84ubpBkiqgc\r\nrQP6J2Y200TxfhwzpGEQ2jmy0Cl9wwOoo64AZ75RRW2WkZeBC11wfu6Gcaip\r\n0BA11Ioy28H8Wz0SUeswFvKB9wax47kSudU8zJSrFNuiH5mURY3+XAXFCpFw\r\nhEs4jNTaPBA7lNIih89VbbTsP5wAY0KXzLEiHZqOEnC41s8i8IJfv3ias9u2\r\n3Etlrjj9y0sTeJFZ+9YdHLxMoLGo9eTdRjMd66R7TpO+kZCjpLKG3frfZf+P\r\nEW7X/cw5Ol2lv7RqWPTKihnfNJSQ4QpbNIELZArdllSioftPj2NHhsQpkgBQ\r\ncNeAz0DI/+wGwmiNUxUOMwW6xk2rG9Zb1dWeGrIR+c60+WyHNjjzpXaAtbOB\r\nASIgd2hlkl45xt5mIOUigMMmyve4OgvwEvES57/VXE97i+ScTyynHaUdPXhV\r\ne6TbOagAlVQFcf2zHp/1M3+rKWn2yEpt0g5idl+Wx/uG8cuHNdmID6v0g6pr\r\nc/xMKK2TKE7PQ0PL0eyXBc4aBs9PR2O0mdujqvOsKmuykZo/EVBHuiFjXlF+\r\nlceM0yadKjfAKhF72bECyxaa+erhjHNTh+0=\r\n=rneO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.6505e61c5.0","@material/theme":"14.0.0-canary.6505e61c5.0","@material/animation":"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-indicator_14.0.0-canary.6505e61c5.0_1646337589146_0.501708000278839","host":"s3://npm-registry-packages"}},"14.0.0-canary.16c166154.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.16c166154.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"69156932ecfdc8e047355d3074ea3653ddf892ed","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.16c166154.0.tgz","fileCount":38,"integrity":"sha512-/7JwR9hAP4/Gl0Sgk+CqKbcFfRATNWiBNIJ24DPCmb2mBmBtwGHZcDOswpZ0Y/IxBvGZ4SvKouNTtHFbn8b4rg==","signatures":[{"sig":"MEUCIQCN1dmwy0G4cgpMWB6fI4Uo8Dfey1BtRSoVpj/iYsuFIQIgBvBSvSbdL8dn03yCDwg85UAH/xISy4qCReoO6wip03c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiJ+UQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq3yQ//cc17f9VZYoVMj+dX0tG3v9FmP9qutx9HCbVyrVh48e/OYeFa\r\npU89lZX0UlHsMGjWbbRIHu/qxgmM9xwCA94xcpV8JdINAVhs4pqBpVGWgFrx\r\nIgDGNfVpYA+O+h/IEOSOlU3h4c8c2yVjhl7FAyUAKbFzDXsh+mokz5zvuBAu\r\nB3OGU48cAIqD4TBWjtnAJRGOkcsg3Q4qH7M66XyCn+ChvqENYRWH5PF5dyQk\r\nz0MqodcFmtcJvO9H8GYerGqqUP37GF6aiYL5l+WIw3Fi8A12zGEx9cnWszGS\r\nP/W6DAca6e97xtP5yUiXIU7rI9oulSe4E14wJeS7miLUhotA6smMO8cESPd7\r\nZKrmzjrSp9Dn2NAkWFolK+jZ7+DWiwvcQlg5tIy3DeTyPM+vJIxUaPMVaarl\r\nivzysD6NTzT6C3qtAaqz4PXQT40ZQDlv1YFxtLF8HYGzn9bHF2uld+eISKmY\r\n8zOmAPcqUEOh94AuXI1irNskQJbFNKbwftdepXSz7ZWrXZzPLWO6nzMjUCB8\r\n1k8K9XBxMQvH6cnZDldKwCKQRGZinLlvnaAY/d0WIwP/4hnSunkyB7q/c4S3\r\nH1ly7Ji/ll4OlTS8mA9b4kqLzaAHyfxnze8aCcn2754dn1BXomdqdauxqXH3\r\nPf0hdbmUcWX827pdYmjQ9A49/wedJzuCwQU=\r\n=5FXz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.16c166154.0","@material/theme":"14.0.0-canary.16c166154.0","@material/animation":"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-indicator_14.0.0-canary.16c166154.0_1646781711860_0.1674809465338698","host":"s3://npm-registry-packages"}},"14.0.0-canary.bdf1d3771.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.bdf1d3771.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"9d40fdc480bdcf1133f325081ad5e42ead492268","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.bdf1d3771.0.tgz","fileCount":38,"integrity":"sha512-FtKUjA+GH72+dtwT0UtNncaVf1hQX2TVVXRsZAlw8ynhQlDFLTvrj1Qb8o3c2Kdirr5cAIQykaFOvR7EcAqwLw==","signatures":[{"sig":"MEUCIA6p6Fm8I7zuCtpQg4b1xT6ltYDdfhAlDWT1ytcgXeynAiEA9k8q6rgjETTnIQvLX51ZCCuug1HA/xebiLQzhX7gOT8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL1DrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqf0A/+M1dAVlo5omsAaB1Oq4qc49TqKDGBQKeuDnkhQ8lmifySCYyH\r\nIJ0nLTIQeDv3LYgKBgNO897iwHSlQJVaQ+HrbY02GPikzbR5k2rkDtBzDF4+\r\nlM66y3lN+GPLYFWwrIanC34r55g0IzjFgwZRzZo/0VUvSYbF6wp7v4G7jim8\r\nCQlvnhupTZ0TRNn8/bFmAvAEhmnZFrUJP36skW3OiPOHcZakBLGLorbmbPqt\r\nIZQpORFtj919Bau7XRCEJ3g00stYmJWgpvKBa7KRZWZEQdnR9CnKZeE7N98Y\r\nOwcSshXY+BWC1alFyhIO5pa5uv5uILLt9KAKyEwEJ8YU4SncVUNSwnTkIcnh\r\nTKNinwO4PmDWOxqvnuN94Lu/bN8bAsHqakOfi0c/xI+Rz6dnwOx9TYQHjV70\r\nbIiEHpzXaHwb7ZBeYM6QW9B2FRqeAJU0/4MoOV/3HSoN0krakHsedo51pUQM\r\nPJEfA1Fo2YSn9gMYZsPqwiL5fUNAWZe3momI5qbWkLuR54anUccNEB3lOYVm\r\no3DZlt1cmhSmOKfT/m79Xq21OLmD4wJhjYXhL6+hmV0yoLmtbPkfqd49ybDQ\r\nM7sf01Veh1gh71mBuY/q8uxaVvsVHc5QlOPNwZ9PcK9Sv6ua8mCa9aGojCuB\r\nzigrPP6zSbjftjnN4RbxY279E1yHAUSe8+A=\r\n=gkS7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.bdf1d3771.0","@material/theme":"14.0.0-canary.bdf1d3771.0","@material/animation":"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-indicator_14.0.0-canary.bdf1d3771.0_1647268075190_0.37951472373625394","host":"s3://npm-registry-packages"}},"14.0.0-canary.cf4292778.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.cf4292778.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"7b45f0e190c9d9eb7ff7d363fd969c57d08ec4de","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.cf4292778.0.tgz","fileCount":38,"integrity":"sha512-GlOSz9jwtgoDGANMzi2DIzdXP+20Kl7q+lGbqY1TM+EAEIzt/EWigoszbFWsj1U1eg8AmdpEsZzH7CAfe3oPJw==","signatures":[{"sig":"MEQCIEwstNpeXUXiQ5UZDBCOfzbsx4rbpHyZgqSUWRAdUKwEAiBctoadaG0URYgH+Pt+OSs9nI13x4ZAviUAbGmkrHp0Rw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL93TACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrNdhAAjALrOeMtKmikB7Z2afDgfb3abi4mB5Vd6CxUIxOURYd8JrFE\r\nQ9chyeEt6/AeJ6LMwb4UTlhRvQDCHGHOAx1MdZnBVHSg66IqbDu5V46MXQzL\r\nyxxbsm3ZyPmDPnv2Z00ZgH/8/aaENKw+YhcRPvlMu15Lm428PhUMEG2qIiYp\r\n9pTm7pbUYfjCJWy7W2BZqLMHmzDHLs2I4fOJaL415Rtshy7sikkaPbcFph8K\r\nnRgUvohKxJLAkRTE5jp3KNZ9ZlUJ1ij1w8JvCh0FagQh9lsSfx2XI0RIGnPk\r\n+u64p6cGeRqNUrxmhODQdU453xaeprbGlwCNfykV3qabf+UF89UpUbVmhIr6\r\nsPBlFpw9T6Kq9ka2XU7ij21LPzbR4X8koJF1ohbz474WMS+9EJGXmRqVOcAP\r\nEO0lh989jNWMKaxqzJHmwarCPzwogrmI/krU2m+hv79A047W2Ss7miaewJuZ\r\nLk50ghX+HrvlwIaEX/GqIWE3RUtZSYAHsjgiBtb0N3YDSON0UXu9+Mo29KTD\r\noqgNXRYsjO3F3Pys8JTywKydivGIOXgt+BuTS1SKOTHcgIZqOCGrggKWUCqg\r\nEaTaU16m5f9EQh/jLoNWRI5r+lu6X0riia+RmsNIpShcJ0Qt7u6P+Qp+DpJN\r\naxieN7BMJldhiW9Z5yLNqjhE+zt6wJuYldk=\r\n=nzGz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.cf4292778.0","@material/theme":"14.0.0-canary.cf4292778.0","@material/animation":"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-indicator_14.0.0-canary.cf4292778.0_1647304147471_0.7167098023481036","host":"s3://npm-registry-packages"}},"14.0.0-canary.bbd43e0e0.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.bbd43e0e0.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ae2821b779f3c52ab4ed82020964c7d3d1ecbb2d","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.bbd43e0e0.0.tgz","fileCount":38,"integrity":"sha512-40ZIOFzD1ZzOeB0gFLGMmS3nFleTYGwwnMm3mioISm9vpBT9PIrVP9RjhGEyuZfRcXLHwOt4Bhe0eMaJHODe/Q==","signatures":[{"sig":"MEUCIQD/xIV24ZrJGYcgUnjn12+gERwK/HKaHoofsbxYqsEmWgIgN8HmsUn9K2etJ6ZvZZaE6aNduKxJbqPMS0TrdsPY3zY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMk1gACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrmFA/+IdMkfaGriGHGCMJW/bY8Fv3mwT6SUDf3us+bV5Ov1p/FkUbE\r\n9Zkgnq94TDvWfUzTmUrLAIIK4Ii2L1mXDM1vZ1XqVRgTMSRXZKp16uHV0ayK\r\nsRa4HIuElW4kS3QGfO0Al/iS+0NSRCtg6l4oyPYj4PhWTe+qtw1yXEyZFkPr\r\nzYNDD+IjCOghJ5Anap3RBgghB+5XAPdAsjdhyoxmilzlo9AxtD5Oce3/GiAH\r\n9HR2SdR2b7GiOE0PgEJQDv+91xAaF9fYsPRcxuEZq+RVSZok7hIS7Wz3maTM\r\nkQq9S4VxyHXg0NRFNSYAmd0ctrSnNsAc7k5Yr+wkC2u9XkTF7KEoqnKV0ozV\r\n4jCP0TNLss7pKzRsgCYLncjQISM9P9cWiMEXlRKhQmBvweJ5Nt2EEe1C6SrW\r\ncipJNxx6A3E+wbCuw6uhQ8ba/H7e2mbTfIfoIcb4EEJ/QF6v7hvcOXaLv9jR\r\nD4ZA8soHvczy7jotYKyG583irRycjnOAfPnk9nFQTBHoXuXz0j1gfLTL++2g\r\nd89g3Gp5a1lLWX2ezY2HwsbTwWkMyxQLH3zIwag3iig702uSODRqS5oahHOV\r\nz+J5GdMtmAVV0g1QO36y8Kr4I0RABi+p2ySbxE4RcT/5VJHG5GnpNiJesB6J\r\nZpcpq7m/mOYyB/L7zARaOxQoU1jXmn/GoXs=\r\n=r1RI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.bbd43e0e0.0","@material/theme":"14.0.0-canary.bbd43e0e0.0","@material/animation":"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-indicator_14.0.0-canary.bbd43e0e0.0_1647463776687_0.5830634395931222","host":"s3://npm-registry-packages"}},"14.0.0-canary.1b6afad86.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.1b6afad86.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"3ed6f4f7a6664fa53ebe9c2ac2eb8085d87694c4","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.1b6afad86.0.tgz","fileCount":38,"integrity":"sha512-bArhFhvDiKsgyqSzP2VCJgQF9yiHTU0Z0uytlvqE/gnpcVtl1N6thcWMntI80fHL7UbFPuIka04IlUPyYuO5GA==","signatures":[{"sig":"MEYCIQDK8U2or5ImTrx7bks/5RA4dfG02fYmHMD5S25v7udmugIhAIicD6kl3FaERgpzLfJfG+YbmmrYJ8j4lrRmsS8HrqCg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMlCLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmojCg/+M7G9HN4KUY62sFE1qPUFWgMfMDTbOfZEuzLSNocdVtR0KrPw\r\nLer4KYBwzV19i4kVtNZoV+GiW9TPjLCHO3DmVdFzcMGFEgmSXFNQxxB7XmKH\r\nQRs2nncFRDCKj+7TtIgdEpMrVJt2wetVnKAhi2nrC/pIlZcsFU1I6XmzeOIb\r\n73V5WTZu1g5ZknQ/ZeU/RZOzHOFQ8lLCbIW8ePfBJHf6xzp8SVH3ETJsn6Ed\r\nmeGJT5njZFkd3vJgf/CnuKXwdkBZSrTMHfvh4mWQfZ+elY6L2f4K2Vt9NfZF\r\n7enbnUT2tBM7USdWo48FlEQDXoKdkBfOmKVksAzXjK9q8LvXTqUb7wYDmJO3\r\nsazX3QpkUOmWQNw1Kyn2jjiyzwYZHkOiZVH81Ux52t8Tr2I8eFbu5tuh66rP\r\nkcPvG2HWCwLRoKN7Ak5O6bun0pLCURi0fCsnfa2fz3g6pgpUavvICc5CP014\r\nH0UN/HiHzgWr3yTpRiZRJrqD7oOFHJxXmwZIZoNj4QxGvgwkHQygqIcKT2At\r\n8PPDcEDDhR99+hydIprAdRslC59tnViasPEAYtahHrGfhbzUr8Rz5+AOeszT\r\nZxarGvgNh/3gjv8fzKm42QKt+z0N95XOpJIvBnf7TDshG30/kcCIjDMxCNhz\r\npGzCkAvmP8IYtKevpHYNI4N0/h+VFm805Ig=\r\n=uqRl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.1b6afad86.0","@material/theme":"14.0.0-canary.1b6afad86.0","@material/animation":"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-indicator_14.0.0-canary.1b6afad86.0_1647464587504_0.5470866733167647","host":"s3://npm-registry-packages"}},"14.0.0-canary.bdf9d4af9.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.bdf9d4af9.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"7bd1b6bdc81fb586df4e22a5d43a72c75b7c405c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.bdf9d4af9.0.tgz","fileCount":38,"integrity":"sha512-a+Jwetco7ClKhi+hoRcTmEz7J8rF/q0RCqz8hy5ILWlkS80dRpKDGD2BHYXKu/eEPB58JAemhLfc+51tXMPp2A==","signatures":[{"sig":"MEUCIAldEj++REuFLPO5BwARfzjqX1ndJLdEDb9IPbfE6SvJAiEA/h9nBUAfuUlbwC9HWZHQwknLudTc/IlWeva9w9Cy2GM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMlPjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmplJA/9HiEWU+JSHxtywxDhCUf9L4wNvU4oEKBaANZvSvzHz0v1OaaU\r\n2CK7MaGF4J0PVGWEy99onqMlvnL85CPpJt6Dfljc65BYnHx3SHrFa65eM7MP\r\nu1qvd0uz6/RVCzWcK8QbB1qlFPbg/ECKzygeBo/NYXj4N2JbZtmPgxEeZkCw\r\nZEiq7FHRW1YYgCVYaj0PNvM9F62z1TDwmXWiELFmWi4YatNhyFPfNjjAGxmI\r\nOM+wcM7uUX/SG1A6RLmbTMcVPSfg8ijpTN87O3G7D25eYP+OfLTNIX8/+pY7\r\n/VFo4c7SP7m2aFX5ufjkLfMrLVwfJJ8ylrX5zTS+SfCd4BCl+HS0wRBvVtNy\r\nWHyYWabloz3g8fwAxlefgOve4K38GacmcGGauFSgNK+BoRISlV+RFRCWDXde\r\nrQp57GQy3uD6pfr0EqFYDs7GjthJzXC6+jkcO9Y2zwX7ds0VwYpNxvV3Kl7c\r\n6e3UE9XYQWCexE0yiiUWVaAARW9tffGCvKmd5iQQM400Ks6z1NrV1sHmjrj3\r\nSjQmC6UydjVLtl6TedJKyFnsXWA+CF/gJu7dehBYUqvXQ1SB9alSCOcW+jRM\r\nG8XbSdHXbQBLmkQF7Oh1rYi5TJYj1zz60ZIqQFc5+0AhJRetlBaiVjHzeSA4\r\nZ1VoW/+OabNp4+ZbnLWJ3xbLqYT+haMR0AA=\r\n=ZW4V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.bdf9d4af9.0","@material/theme":"14.0.0-canary.bdf9d4af9.0","@material/animation":"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-indicator_14.0.0-canary.bdf9d4af9.0_1647465443564_0.1946775642478913","host":"s3://npm-registry-packages"}},"14.0.0-canary.32b391398.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.32b391398.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e8517df7dbbd2ed4d31f2731eec21600f794e537","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.32b391398.0.tgz","fileCount":38,"integrity":"sha512-9vY7idUVwIc9DrrXzHv49zKxubEp+9IwASIyDHIWMITm8kmnnTpjg2nEZsc39a3JgZdfd9uEH2/SjTQEb+PgQQ==","signatures":[{"sig":"MEQCIEoglexdyOUfx08txzix4UxsQUqFsX/uRPuyS4HgGnE1AiAmX90z7R6TPXYycP02vHg6tOkiaU8meHWz8Es03hmufQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiM3bSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpJ9A/+NelUpxFzHifTRwT/CJHOwmgMniQQJhKeK0k8zOQu63ZKwNzk\r\n0rtQUTPSeVyX1y3mwGFwe9gwc8OcD903nrBYt7pZO8JfHPbLA/CENapfYQ5J\r\n8WZA67RNT3vwrU2WojRfzOBwqJNKV2UhlmS/Q+bSsTArhOZum2t4B4dWRd7v\r\nUeh87EK7Eztif+MIIa97ZpUSQ0NgJC8Y54BHa+7t99B5r54hECPhSZGvZT0+\r\n6nAsCUwAptT/r1UpReuw56b9U2P2fFKEhiakzo5jE8q9+bgobTq9DUazqpSo\r\no4a2asUBd6Vw73n3NEHfKKzTFGOHj+Mr0aPHcNqjU6aAq5EmU4+EWcK7tPg9\r\n4pY193CeEUpevbNo4sNFE3QYWfo3SwliIQY4CyVZPqh2nDU4iIunvPPHRlEW\r\nlkVXJqm2GZeOFKTMeIBOGN6fo0dMBlZZJ3LtBJA5XKbsGvPP5sfWzJaUk7t+\r\n2fVGRLPkm8JNk1ktklPeIAFgj+GanOApT5QZAHXARs0SkGOcMQP0I4ptMTne\r\n63FAxFaz6UZyUtedu4myQ0sn3hA7kLj79pGK+9NB4xa6pBjueW/hpj71mQlp\r\nHoqXnq/hZ+4BiDLK8d/EMRjLy/OwG4YCFpd8ekPNFhot1tRnlYV+4DcQsz+W\r\naoK4xVOAQ0kTLGggX3hN0Marr/5uoZYXYP0=\r\n=81jv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.32b391398.0","@material/theme":"14.0.0-canary.32b391398.0","@material/animation":"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-indicator_14.0.0-canary.32b391398.0_1647539922282_0.15364837442867163","host":"s3://npm-registry-packages"}},"14.0.0-canary.ae8a6a3a3.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.ae8a6a3a3.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"73a400688d6bbe49ce62d196db3206964f026e93","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.ae8a6a3a3.0.tgz","fileCount":38,"integrity":"sha512-sVBRZyOMsmkWDC/Doa2p0J06hpz/NoFF5zToFuq4zKc529QGZQ66FRzUA6tYbd0dx4qUevo2RuMX5i6CEMh56A==","signatures":[{"sig":"MEUCIFDowW6S0TZ6lTaGyPGB7++TNxAGTD26t/mlKJyS7mqVAiEA1MCQKLUIuodFiaVMj9eKvfs/VHU+dPUpDexcxp++QEU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiNLWUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZbQ//X28lHYQrfX9vvPGtpyfXX3oowhOSDraMtojttjFHs3aimdEQ\r\n+DJMHpMTfu5JJa78eiDGDbkBoP9sfuUFjN/aLvebjQBG/NdwpXjHSpFruZWW\r\nA3LOByXrFPG0IacNnjsTKmPG3YgxVQzcMNmYCvD+96waDXBjZatTe2xq6wZq\r\nnV6KwjAO4qj+XZGrMCsddYa0mpuMlEJh1Ojw1ZYYDFS9K3WZ8Nonlgroi75w\r\nIrvu4WyTiAOxX3h4T1qn9c2GQnV53+SyHDGVjiGz1pbVhecHZIZDwjPByHRS\r\nqrR4a2/HctS1mF9u5Frcs5puyN2s1XNeAmHPdNN4Fnassr4mZmGH/OvtbX0c\r\n1evfFWkORDUL2srKp1m5B9kNlNjxMWQMGqgbLVZ5q7TjFA/xixVR6wzPfODE\r\n7gQ/3ERlceiDXZY2KQ3T3dSOfpMrY9qEFEBasmQyW/t0M9i3NQCh1bUb5a2Z\r\nRIt+Sp/RR8p//Q0/cVspL07tsR3JbN0lHxIjptpJ+q1bnvdu42vQ5U1CKg+c\r\nDi3pHcbXpaFRUzI+mFXifN8JGZ6pTK4h+zPKV9/EuZ9CDL0FCcCDh2NAXNzQ\r\nhXGBrZrTY5H5glJbXkrT1b01wD3PUaMjFuogFe0Sj+XdtLVbF1zzTavh3l78\r\nZudFBsOVA71qV/xzW+DF3CxMG9KJjFgfwaw=\r\n=NDl6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.ae8a6a3a3.0","@material/theme":"14.0.0-canary.ae8a6a3a3.0","@material/animation":"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-indicator_14.0.0-canary.ae8a6a3a3.0_1647621524123_0.29845251220492197","host":"s3://npm-registry-packages"}},"14.0.0-canary.cbd9358a6.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.cbd9358a6.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ea266c03ae25a670450c65cc95c99e0af67a9bec","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.cbd9358a6.0.tgz","fileCount":38,"integrity":"sha512-Y06Y0op2wassAeYn/rSRXuURWEgfv4flB1YnLmH++nhNefgOeLHGrk69uxW5MRxun1E86+yM1/wQ88ovRG4/Ew==","signatures":[{"sig":"MEUCIQDMNNN36lA6fquhJIf9CcdSwjBImwuPtl9KMgAPeOawtAIgXc80io9gujO1vD+Yqms6DSc59NeRMX+6Fp/bF+JRXPA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiNQzzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpO8RAAj9v9q+w5rOteZaFUD6ipU30Vs60S+x8lzc1Gh+U5lQan4g/z\r\nMgQ+039B1mwxqW024wB4G7hPAXjV+L9QpshT61bTtZbXeOV8sKykzWKwuUAl\r\n93J3bVbvWUIyTXz/KSS9dcpIi2/0NxhYo7YVN+6GmCxcKdaaEJdBahwShDeE\r\nPYX9y3xDlwJBvsflEM6+Hf58aiU0gworMWaT6UFYFrnB4XLrQSjSFDFwt2Rj\r\ncyxvA76+dUeaQlEub+2KJMbRhrWdDY8r4i4/KzsfQuYmEqm1/FASwrEJwphd\r\nKRWJB6iTQhemrpa2aGReskqy6N+IqdXtt3Zw50ScMwLTjUBv3GHgw9tssCYM\r\ngksoElKIKRi6NwJvghdaiRarDUvG4SzY+Hyvdf6bRGEu7Ca8YxXKB47br0LC\r\n82XLT/8htrFDCZCnLABuXLPd4YTK6bVgl5APdydsSXX6Iz4P5WwkA5VqzUGd\r\nYc3BBf/EIYfjQd639qGnVeJ42cxKBoGd5mKX0ZAvARSNi4OkxiPljHskW+rl\r\nJ1plih4TsBfSfkvMC/y40mQOLaoPw9tyaS+7LlwSZr2sohwo2RDZt+jy3Biq\r\nRci2ZZ8xDLAbKGzMmOtp+qqBNNNyspBSwP+WcPiORhrVVlGIxkK77fcMV2KC\r\nk4o4uYDRGG2VIbSDU4UMRvyN4rbrPR1xEOs=\r\n=yVjO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.cbd9358a6.0","@material/theme":"14.0.0-canary.cbd9358a6.0","@material/animation":"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-indicator_14.0.0-canary.cbd9358a6.0_1647643891219_0.5701057737936628","host":"s3://npm-registry-packages"}},"14.0.0-canary.dcfe49c98.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.dcfe49c98.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"9b298706d936ed68ac1cd4b2c3c3d60cfd0ca1a5","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.dcfe49c98.0.tgz","fileCount":38,"integrity":"sha512-H2scFeaHBhJ/beHfzKaHOD1IhZsGjE9iRjayagSk2sPCKjLE7+x6MjhVnT3tsqVf1R8sC3ndiRj2icD2mk6EZw==","signatures":[{"sig":"MEQCIGE4eVdzWW56g+Te9W2kHo1d+p5z8s+iqj6t+NRzWTGTAiAbH1zPIQY7uKmU33mJVAvVxWiNrbKUNrZk45Fx7ARqLw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOMdXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr9pxAAoYeqYP7Y8XuJX5prjoIfkRN5Dcn4VBwgj6gRy3XaupxQorkc\r\nvzopD3h6f4pwsxEe26G9yExEIZw7Ym9JcyOYe+yI+9jDS0n9lJUS0+GwhzuT\r\nayriumH4RLZ3dUqFocq0QX8oNdkGBkvt+a3Jx8PdK6kLKPTJGHHzd+eVgYF7\r\nGZhEei/D/87yNRIj56YEJVfLLFJ8tKtoHIu3nUySp/4LUi0O8HFiUBsn+STX\r\naCDkZ3ss8vkI7IW9iOn2IR5sQDDtgnddQAM7T5a5dtTIuM86cuRofxEW+u2+\r\nq0AmfBXMbY+rs7FmFZNVawLFFcpuk0ipgEtHXGGDekE6tppiMPpFfYwn+r7D\r\nhzYuIGPw7jnY8yZ//Qwr9skZtEUmpaNpTA1WF7KMKGcbX8iImhzYouJkmyt3\r\nO5ObLjvPyS74wBxPFXLrSi+Q9GvA2XUYFXPUzfwzOyLby8iUdj1p9n4CdLI1\r\n44V9Qxyzjx0E+FXJzUeYpw58RZu0wRtUzMsvhkg+WLRC5OD2RWoyMdOtp/mA\r\ndSlfvMa225WrO+UpP6zisYjz1Lf4DDjJ964MSTr7ThADmrjEdeuqVPzCZKr9\r\nyCGXkTmOgwWWOp0Dn5FeP+3bY7qdAYDz4B3n03mNtI8XhKtHUFM1riGyjdFe\r\npuHGmf/FvyX331WxTPQG90cLPOFXgQCQuo8=\r\n=EU4t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.dcfe49c98.0","@material/theme":"14.0.0-canary.dcfe49c98.0","@material/animation":"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-indicator_14.0.0-canary.dcfe49c98.0_1647888215366_0.2702686134746801","host":"s3://npm-registry-packages"}},"14.0.0-canary.f31a833fa.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.f31a833fa.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"4eb3e18b9a04e17112330ccdbb5f79b24d2c9924","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.f31a833fa.0.tgz","fileCount":38,"integrity":"sha512-JgTWzsCOS5yosJvR8RIJpxDR3NTwePm6A7DsYEyJSKZWRivFA9QTrGIFcMgxAFQ7P4GwhSavx59MUHSV9gf72A==","signatures":[{"sig":"MEUCIAtHxuUYcOO7IcYBf+oToFlAOvGigz1BO7jO5dIXP2xuAiEAj0QnDJ5GoZwX5Cd6VJ4FxnjOyrvtPtJ+6U6nZ66YdHA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOm7FACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmprKQ//YJz0Cub5XOpMg527Ze6Q7BGWxffbUoHXdWeJip909p2Mw9Ca\r\nZLbw9TGVnV7M9DFmNp8AppSuC3TcTjJO6kHDp5etoj62Re61fdlDs+jfEjHt\r\n/NOrVI9fgo5Pbswi/Lt91lfe45xAWhjYhC9lQNEJ16TdUYoSi5uuLU3KjjIe\r\nn4m4lz5L69eyLWgCsrIupk4KBipLf3lugm/H5mYonR14box8B2Dd5ksAh+Ag\r\n3lXKehUyOVBX9Kl6l6lV3WpFxmpotF6e/2JevfVw2xyKV7W3s7UW9z+VZRFe\r\n3nXP7rPKetKL5eC1mxrarGgwTU08FKfmVk4UBnViZjWJmMFJ6Mi2SzlstHHj\r\nKcSA/tAQNMvk4fN2XYkPXSlZGvu0iGjF3o7Bko5BPdJplf6TiIDp8M0VEXiW\r\nAbY8VzThKAIzIfmlpl8mnVpr5HaZiQqodK9/RwXYIXW5mjTrwQIkRp1Nd8NT\r\nXt8Ar96yFLoUr75Rc1ALdbZBmscw7Va0NuXiC9DEEZBmyGOvyRMi8T2XCo19\r\nqijzdVNRemhiTmSzvho14Khb+sSYaJd8Bw++jsAia9w3LwpqMxOUkyE0Pl/b\r\ndn2uiRllbjlYbgufcRyNivkOFsxJi8iAMo88xUs4QUPQ2XdpSMAWb3r0PzHQ\r\niDNofO9Jxnv6APnsdimH3Cs8PFE5oqtMmco=\r\n=f2zv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.f31a833fa.0","@material/theme":"14.0.0-canary.f31a833fa.0","@material/animation":"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-indicator_14.0.0-canary.f31a833fa.0_1647996613335_0.5842243792373412","host":"s3://npm-registry-packages"}},"14.0.0-canary.4b92e210a.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.4b92e210a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"474f4b4f1579eaad0dfb2dd732ad6c61debfd0ca","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.4b92e210a.0.tgz","fileCount":38,"integrity":"sha512-W+mppdwMRJgn1aY2JaBhhf7wlcF/83xPBXB9robTpi2XaKn1lxjMzqJeGqvXUNS8eOrPi16vfZXPtEeSLo7LAA==","signatures":[{"sig":"MEYCIQDQK+yXqYsHooajaTloteKmsFcc3X22JeibBZlza9a/sgIhAJQQt2simeCx7aPXqN6NlrKddQTvXUZzv5ZQpXaAw6ac","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPNH9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrDtxAAogZC51Dn1R4BNSPc0V+iGTkQOlmVWWZYz5dIrrb1co08pq2R\r\nLLm8uqIouaP2MqXgDOwT9562bQpgydExbV3L2NWgbIWJ/LW22LH5OtPdTdgH\r\nNqAaZkpAEgLRDWmrXeb+OMTbfZ+iSX/6bDZTu7dZWZ0CqAwI8MWI0wazf8cz\r\nqgsXlBbqEeivQx7q8+58ZAanp8+GVZw1eogeEOOyGcTveKVl3HkNX68Hn8vb\r\negA9mbfXuUvjNkZJODs9UIuC42or63/A4h4CcxDuFSnaCEiZp07HUp01ZQ+N\r\nyGQCjbscUGw339MHdr4aF6UUr1raYZUY3tNz4tqhJgfhW/+yOKG7oL8/CIyn\r\nT3SA80aQO5HNxumN7qLPbYCLhRpAcncilGtHqys+b7+h5IRrhuSbdOiN1XVe\r\nYor9V8bJmq8yJxQk8Xls30yT1Wn0Wp9oDAvG4u2A7gYOoNRwrlxmzFIwMUGC\r\ne5f6CMWsGGeZYrRcFrwEyizQ4FJHOQ40c4qtJv+4H/7pOOWIH+iv+C9RDM/R\r\nVGal14yNt0Zi77SVCm39jcISyRrEolth99N5UOPDhkkS1CVeRJUrp2Z9bmtP\r\njnE9ewjGONSqG98vmzwaO0MiVc9/EQx190hFwp22ypOfqxx/2ZDB1VctFJJd\r\niH9EwwxT38RmEGlxYg8bPLLxEKFR9EWXJVE=\r\n=+nai\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.4b92e210a.0","@material/theme":"14.0.0-canary.4b92e210a.0","@material/animation":"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-indicator_14.0.0-canary.4b92e210a.0_1648153085441_0.7629296331782247","host":"s3://npm-registry-packages"}},"14.0.0-canary.a657abb61.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.a657abb61.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"a7c7a214471e08b3467fc6eb549757d200609013","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.a657abb61.0.tgz","fileCount":38,"integrity":"sha512-VFKJeF2QjCSQiYc6moFFq+WGyqPgw109SGQhjLU4Y7Asvoo0AblyUSwwtfA7Dl60kECB8xG33gJ1sA82KsyYbg==","signatures":[{"sig":"MEYCIQDU2jgRFx/RfFzIE+ejm8MpFcl9td2Us3ms/RzupkyfJwIhAPcWMJ5YFRckyFpKBD9RUp9xyBfp84qYuYzrvPV7NETV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPNcAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpggBAApEuu6g6oDVLhN0dovBLgggPT3FlJrZvRrnS2kerEAANmABfZ\r\nMnj35NZFBeBepFVL4u6eurpcV2mYw5gpVb5j8lP0FNCU1yzwJHlGgyu19kqL\r\neWDcJSbyFc0A4nzPU0Ik9SKssWwOTk2as//smAcKJogbGWczZ0nG5KmYJ1JF\r\ncj7PgsySdnEKmAHbfMAjKSHTayZXuEst2vxdCbHLGhZ2jZvYuXBrsJ3sjgDg\r\nhiDef3cC1urTAuMNESEckf/53RwZ53enEotjlqWlIzoWfxw0lUJh+dFXBsKe\r\nSY4X17uKRxjU28A4t8822/jJG22V8v6n8YNuEP+WVljETiclH087KNMX7wKd\r\n4Qt6MrHpqCiJGJH6/sTz5KI12FdDowKgbn0SmXpSuLtIGq8ynFb1f1pAOKgo\r\nJZfgrhlMibPNrcA/96bZMs97PUv/kMxzeUNX6Xfjf6zJ+tEyDDjmwYiuNXO7\r\nB551rAvgbEXLJNLfug+PFSM7ZyBCgvLtBTG46LDUG5cfEz38fbxwid3asXd0\r\neXxaPzjMacqUvqdeurdqFQk9fP95YSGbLqcRvqjUz3+aXcmHs2XxP9xLK7Mq\r\ndPL3LCVEwrPHjcJDXCjr53UYDk7xJ1QUQSvcczrGeZYuq0fArj5EfUAYJIFH\r\nsyp7yi04E9aRfrJnhBQTVjf/JCsx7kruAQM=\r\n=3Z3L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.a657abb61.0","@material/theme":"14.0.0-canary.a657abb61.0","@material/animation":"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-indicator_14.0.0-canary.a657abb61.0_1648154368602_0.6569423639803682","host":"s3://npm-registry-packages"}},"14.0.0-canary.443f63f50.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.443f63f50.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"9b2231f7f015c8ca6ee85f94f97f987cd02a1f3a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.443f63f50.0.tgz","fileCount":38,"integrity":"sha512-oppBbteF4A+gVeF/6sTioy5UzYV9mfrbtUnNlYjBH2ocQCCUHbe8R7EDKBSlq7/bhciudXJprERH8i9xmPFDBA==","signatures":[{"sig":"MEYCIQDMN0Z6uDzkzAt235XJLvKzrUWjzXHth3EDHRdd2kvcCAIhANFjG9UIBTEOnXV+lcSNGINcjNxtzUxVltIwCYB5IzIC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPkpnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpoFw/+IwUxaH7HkPPwomfKDr77aB3JBb6QkAmH8Rw3wEzuyEcOgtYl\r\nl9jNIIPd4qsCr7zQmADo80MoZ3xtJ3i54mhUqxnsEi8qpfmRdgSJNLznaHo8\r\nA6wsHdj4v7JXFAQfBsFVZV0zkcA8rE7hVuTx4jZMiztLqTYWiwcqgFKC4EmA\r\nLUo5TkmarvlAGqEiCHZuN0pIO/gWZdkjXCMNNomDeWC42TNToaMb0jvEf5dS\r\nSsFAppQJ7oO8Ao98JnIPYvTfwwRdskf5Bl4fzI2pbgbvIhtbU9qwWinWydhy\r\nwoADZntyzM7a5Hvp5PuPMRvS9UI1//czGNCg5W6mgW25l+nOb1R3XyQ8nz3o\r\nOZSCZ+6VeqnjFWYH/ckBa5GUSgHozk9+V4xGm/lp+tCCid4iUSaOdx7hRcQE\r\nXctYPFTwEBzRnYtI+0vAR9bSP17Y1qx6P1pHoI68fgauqu56taILzA0B9cAg\r\n/Yt3BsytaxvUDhvxKdi0QvOF7R4CGjl2BowJi1d5WakxMgzhsTMmVPB7Iu9C\r\nXY1uQpjnFbJMA4jDXSdC4VdXc36WIwlypomMZ9phsRHo+nDH2tdHZPccTZZL\r\nBddJQuOM6U4c2369G72VixavH6AiTEU1JcowUDFdPfVsJ7ORwNNo2LBdW2+E\r\nHQThXn3Zo/xmG9AAm9Iutpv2jDSpUQJgoCg=\r\n=Y7vf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.443f63f50.0","@material/theme":"14.0.0-canary.443f63f50.0","@material/animation":"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-indicator_14.0.0-canary.443f63f50.0_1648249447044_0.5816883850022994","host":"s3://npm-registry-packages"}},"14.0.0-canary.eb382f318.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.eb382f318.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e450f21765ee212eddd7479676c48dd2ab544707","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.eb382f318.0.tgz","fileCount":38,"integrity":"sha512-u3UrzDWM1rRRYgQH95vpOmqtrltTv3sdU+YdikPBKBCxyB12wmk+uXy4TsD7LlWnsc6tSVxXs7Vbf6OwhqYM6Q==","signatures":[{"sig":"MEUCIBrPzC7IDbIkB/Pje2JVDcnqCYy244rm7U0JYSPWYrm9AiEAhMJrzT78d+s3M7tQwlkfofJlZigejCnBuYlf9q/XBK4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQ0MjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpfFxAAnRZwzCVy/CP2iIXlLmOMmaH5GU8JiBTdEaVgVj50uHkarKtL\r\nWlg2DyI6ZryN6YEdeT3uH3UCez34TrSpgAixWQji5zLeilFMXstMR+ii6dDf\r\n91efRKITOyP1CcFB2TE900WuWqiHgyKJvXQuaprDBoqS3ZZOnYuaPBrO2WZ2\r\nFYs3aScBrBz3VAJq82jGuZ8jbeDv28hGrZExwWEyObX/BeDYFPbCWcI7Mjql\r\nUxoSMJtEfixG3chzDLFV3MKTgCNeZgSVlh5gcXvtkik9jzaibjOiIFLybJTI\r\nri52s66VZOtDdLpR0x7Ubo9pzZhP0H6TBw8dv4g0PtYRcv3e5Ob4jQgVQhMA\r\nLJc/aP/S3M4InaDZmBkLD7bRZXIq7+T4YTy3yA4BYFZZlPCByvYNN/5Tqe2S\r\nPg+QTFcpQK4iP02wQET50dHr7uiHu2BvCzzlslZEEbLUfq1zXZio8AhThGe5\r\n1PUKU1bj1O97ZcGfBUWxuQafeIppYUyrqCCpkcME+Hz8L+juy0KAuQzMlmQG\r\no2vtdCsAttkaDaoYksjLUweawCFR6F/ra8hNatCHeGs5exZqC0h0AXVecK1h\r\nPjdB3ynK/XhB4dXYjXqKEba7weG0RpQiOUfvrpNoAYa4sBS1VahlADzoFm6T\r\n7BXgLb+oBpGU+RaEunSlTN9M0quEKRqY0Rw=\r\n=ktPo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.eb382f318.0","@material/theme":"14.0.0-canary.eb382f318.0","@material/animation":"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-indicator_14.0.0-canary.eb382f318.0_1648575267007_0.7482049651902178","host":"s3://npm-registry-packages"}},"14.0.0-canary.344d52823.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.344d52823.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"95ad1cf141f1f1267548b0abd69ab64b8092ba7b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.344d52823.0.tgz","fileCount":38,"integrity":"sha512-eLYNInEzalx/DU+KUh0DBnamW9BDB++fTUUYcnAkbmWotgl3Q3ryefqCszwtUjbwcnfZ15gzapr/yeAPxeHX6A==","signatures":[{"sig":"MEUCIGJYz96Y20icP172V1WWq59O+TuPpRAOMzhQO1UBPcFHAiEAl0WtUa6B1k0rxA48/EfDnBSk6sAIwGK2ErFUJZxK2SU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQ1MmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmroYg//X6xSWo9eDEWpAd6BVXXfaSEo/ZJ9llh1ANttqrqlfnVslcXh\r\nINe4pI8gi+hQKzUbpeOaCiFF2z1mRM/egKS5F22juT8MRvIFzr22/s0h/vbo\r\nnDpFVmO6OrYk69+NFXfPIXs+pw0ZFAUnE236/svJT09o+qiG/1sV+TMZ18Sz\r\nTyf8EbR7LqMU0D7oQnPMVEihVvgXpZtjjJ1PBYpAg1Ab3LE9tQBdIjVbHdmq\r\nF8BKffGap/JEYkLwyUAt23O5Sa6afYvWrqzS6ysRuBgBMdfX99y6P5INZrD3\r\nYbtbACVQewUHXxR7i/CYxcZe+hcBXKU9h+o4yzQ9kDWMkFoypduTdITnZ/lf\r\n1VlRCy1w0gYF/eI2SH0PZYAmdlCWCxwq62rx6Im2NRkZX0YntQp727hBJx1A\r\n5sN6L3wLmSh3gZOxwfVymUye9llMaQrwYcuD1YTuT13kyfRMCstj2HruBoQW\r\nE+nmIHFiVa3/saLD9pUkGPYBKn+9yFF94oPZq16/ZgChsEEX4CnLV19MFUmc\r\nDSJboj6P8qJITrx5svBSwbqNEhi2f6ysCYI+JmIhAo/F0xt706n1DMk4xQ4J\r\nnwGeYu0ZIgy4Jp1gknGEK83OWT3BM8lFX7V4PuoxbOUF72cbShgxX9HJcwZK\r\nDhrAktpaNsiqR0RV9I4OtoTCWlxYx2Tfc8o=\r\n=3ky9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.344d52823.0","@material/theme":"14.0.0-canary.344d52823.0","@material/animation":"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-indicator_14.0.0-canary.344d52823.0_1648579366567_0.6062328270370045","host":"s3://npm-registry-packages"}},"14.0.0-canary.4e372fb49.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.4e372fb49.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"65e20df1ddf514b933eb2c2486df68c671bd336b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.4e372fb49.0.tgz","fileCount":38,"integrity":"sha512-RkKZQ8YrlBNxHCIoeo7Gi7Xxp/+75k4FvfDacGt01Fj7XCd7bScxuIkyOxZpGZY7+Dz5Mcjpbu6QJYbQ/BRzsA==","signatures":[{"sig":"MEUCIQC6i3CvgvjrtBSO3dN5tGLbuo6olySjxDdzdgNY5WA7BQIgOExUL5LZcrkkuU95pQfVfEa//bNjR8+HLhCTwhY0sZM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiT0pZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp0Gg//QYztsN9yS5IYOzf93VIqO/9/sHvfjYKPweDxLhmHavDCOk0Z\r\nxIg5LtgOubxQPh+hdqgUAlQo/38hOHBpKEQ8NwIro/I3x+uuiJPpTWDrkVuW\r\n7Ez8zCTYTPMD04nmkfc4Oy0KPY0aXOa37nDnKpm+nsSTvBNoxkr4wz48RTYr\r\nlnrUhKwWZjntEdCS+KsOYySnTem2JGDyA8RN+18LmUbvASjDpFQIH4nWNW8c\r\nw/V8f2uFKVDdUkA69xZrE6gUtrnnYLmOwC5Rk4F84sJYoNnDkabdGSa20WOl\r\ncYFHMfR1a+2ten9dK9sxHMjD2Kwo8LZmbZla1yHMspLvhFshryxJDXcWzI9x\r\ngeEEOpI6Hm/O1TUxmFMtI/kZ78OwTpU3ncoKnw3SsEkTErE1Mtz9ICSgmI+u\r\nxbuiniB0cMRaBmQwb9L3hDgUiYAa48ZqPb8ieNjJ+SQk3heY7HeQlBsNtOpO\r\n9TBAiM0g5EN3ESdan4YhM37mOll70lTQew6x8qDKkWcI9EcjKGIP6RLNcZ0C\r\nbjJOP+wvQzzj6ZuwLFbvbVSk3GW7HRRTmZoIg1dyqmQBPTgeT4IWbaSGOHu7\r\nJ4mLk66e9D9Z2YTgZzDHwHVmxl2b/aIBL7cv6apZR4HS/FlLugfhMTKqphXR\r\n1gKmmWLoqKw0p9+gKJVvYZWXx7HehsaqLB0=\r\n=u/MH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.4e372fb49.0","@material/theme":"14.0.0-canary.4e372fb49.0","@material/animation":"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-indicator_14.0.0-canary.4e372fb49.0_1649363544963_0.626213908292867","host":"s3://npm-registry-packages"}},"14.0.0-canary.3e30054fb.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.3e30054fb.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"2c1f0716a7d958598b029fe4cef89c477219052a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.3e30054fb.0.tgz","fileCount":38,"integrity":"sha512-qDQvIFN0Yip3N2sjBQnizRwdE/h9/4JIX0jQ5qM3xzs/SjsQ1SGos/GA8dWElByGe4x5Dhq0eg4hUWLIXEODIw==","signatures":[{"sig":"MEQCIC9LgeYCcY1/oYLg+BwOGaK9dCGsN5b6rlclhIORHymuAiA7HV9xIxy4xm1AxhYJmlTwO7RVVFC0wkkEFaxCokhkpg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiV0sWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmovdQ/8CMops1m7felzzO1DphZMOa5gIGQXShCVCxfJ1YQOI9x+Yo1a\r\nGsD5CVq95EyswD0ChVGwO3riagWEZXDFT3AWD+so6C/7gixQit5viPI7lUuW\r\nH5lOcGGF09DZefH6CWMpl9y5HcaB/wIBH6xKHKHf+REAZ9PaabYYHVKFNoUx\r\n+U9lbJRv8l0rM5Uz/zo9w/XWUk7UxOMdsVvusECFJpgOhH3ow/h4ujBTSHEO\r\n+CCiYYeXDYKAs2V7eveTep1p9zP4QZbNcP7lhwgn/TkX3pyxVzWSI/6mG6tC\r\nGW22892ELC5ShADqIwuSvbR7hNkaLr2KLe97+XYm6djIBc4zRgY7GmUhJrjd\r\nxrTs4BqWTOv6LOMOZED1wpZOkcbtIfOpdlGJSL37FBi2Kq6Je7owr82QK7cj\r\nKPXINNXMdAGbXjHZqgMkA5DLQ64QHeYXD8h1/TLiDfiDStp5CzsMPn8kbqT1\r\nQhdzPp4Bz7pMR8dLcwlGl3WVXx9ol2SAmh0NFfWlHnjmzypXQSo7d0CdDyTP\r\nlpX8lpxSMyyGspKjbWAOxL/6ZrAnbz6WsfLjdQC2S/ShHvocYmXeZCQzy9kO\r\nBnecN2z47Yj4CGLwEhuw1JHCVWZMqGUZi60XjO0KHkQ4IjFZLmIrynzL9WV+\r\n5ahOdSsR2NdQKSEyns+QAlqdRMm3h5/Fw9M=\r\n=uvjf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.3e30054fb.0","@material/theme":"14.0.0-canary.3e30054fb.0","@material/animation":"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-indicator_14.0.0-canary.3e30054fb.0_1649888022383_0.6269358729656647","host":"s3://npm-registry-packages"}},"14.0.0-canary.8c4da223a.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.8c4da223a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"4fcdf983cb67da1531150a9cb4ec3a5e02a6eef7","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.8c4da223a.0.tgz","fileCount":38,"integrity":"sha512-O2R2DKWhNONo7nXZDlhic4QV0Cp7RbOwiEJhLv7uK7C+qWV9n428UX9s7DzxEcjszaBnT09hSVTi6GQe3l6jbQ==","signatures":[{"sig":"MEYCIQCh/yrLHe5+VYHt1LGuO/wyw1zDy2xJ0ibyK9K7/mHEwQIhAIlKGqy3434QzRZKy1M/5kOExqHBf3VNErFHXhuKovfU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXtP+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmovbw//eRMpDG2lJvfYuyHQum0KION7v3JCTf3ETFVDI7lm0P5kBmLw\r\nv3QXzTwIzCSwojK8QqOhgberlHHt2Kt2lNPH1a8IFtnLZ/cRFgr+7Aa72y0d\r\nbLar3D2V4wlpKiUc165NpDACBszKcya2bosr59YkQr8BiI1Ha3udB3Xu64O7\r\nJHE9taoeLwLm1KrHrjlwVuFE4Q6FtCmJEtCqvJtCvkWNzoAewEbKpp4vYlnu\r\ns+gwEB8xo+u7zuv6PcCpJzrr6M97SYC9B2oCWrQUk4ukFAo0WxYXuQFmQEEW\r\nfK2fOQmSMGHysa7vEym1UuKK5gEG8Dwqlu09SL4yzi+yqls9BEKJLt9eQ6Qx\r\nisj3j9f55Q+coaqfiH0OP/UcbXQux/3OInj22KgS9FcCcJx7uD0f0lnUEvTw\r\nV9w0h0JIEcKj9jBCgDyf+faBxdI4vX4/nm21rlqFwObfKgczTSZEp0AgSpAl\r\n9JxEJenQXzINL6KzIvf2jDudDiKntaJuAw3nvIK4DWgT5zKIsVuaYjL15gSJ\r\n/LA8HIUULq7HL/N4aKbW169QVGJ+3+W0fgvPPHKgPvTmltBujGKN82x0vtcX\r\njL1n8wusZfgyQmoQEoQHznZHoe5ErfrG0/KKvPsHy874NFwrn0JqxpglGtfp\r\n5taXyUt8Kc3afJ0oPjCx92bNUiE20ATbZn0=\r\n=s/td\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.8c4da223a.0","@material/theme":"14.0.0-canary.8c4da223a.0","@material/animation":"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-indicator_14.0.0-canary.8c4da223a.0_1650381821852_0.9253697429541679","host":"s3://npm-registry-packages"}},"14.0.0-canary.7de8965cc.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.7de8965cc.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"5211b944ec902812a18dac2f9401b43a97f82b81","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.7de8965cc.0.tgz","fileCount":38,"integrity":"sha512-My9nlT69O8RzhYy2fgGlsIvuE/J4sUjwg90EIeRUDxm26aE3cIN3ZQtVHfVlgNO8lV1/WHrhPcdqCIrlhIe1Gg==","signatures":[{"sig":"MEUCIEc1QBbPGyDe9XxRmkTw0cEvXc9/H8iNHiXHb1yNXU7fAiEA95EkB2mnzqWBmPaxYEVXIED5hOmZQFrReBjTfSun20o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXxoeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrg2g//baFfPUXzkOhFHRnKcU/3p4mgNDJxkcblgH4I6p8nujqQ0YWF\r\nCYHORduQQmjowyLO8d2CjIf6D8evfDJU3pBs1Q/g8ghFICIobnSyyIEqQD7f\r\nKqkriNGgkfHqObEyjNObmEfNozuCY1gqkQngwZ0+I2RbqYstC7sUxHf2JHON\r\nPEjVfoHqTQ6JdejetwLsyy/9u97yLaqOrmrn8pZ8EEDMeUgYKUCQ2sylT+lg\r\nf9DftNF7d/hn8ovDrDxz5eM73dkuh++k+XEykIcqyfx9T89SLkxCCofv9nV4\r\n0Ofzk8PNvkMbYTTJbrlXUqtXLGdl/mW3n489XcrBq+dUxBcIkd0vgyfK1n1Q\r\n7sRfCKrbsIOVCorCtl/aLR+o9D4i8VwIFGRPN4Mrdr4A47A3tCxgPzHs+fLm\r\noHZbSKUTrdOuXcCyuh5R8C08llaychhBb+c7/zZ59A0HBfUwM8J0ss6VrY1M\r\nBwjVqMjLMbxdtyXeLO/FnK7jtssmaB7yGFZuzTMsY+WOOzb3P9jipHoviie5\r\nwpv0yXwYVMmBDQ4Cld7FhzZxK70HB0MpZYR6U726JlzvFoUjpx3/hQlP9+1s\r\nWQS4ozdzkonhLfe6xfVBZSpqDbzrjnV/J2RV1LEUCObgsCryRhr4ZMzlb138\r\naZEyGW9wpUtZkdyYLSwax+T3uNvyq3gZx1A=\r\n=LfD9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.7de8965cc.0","@material/theme":"14.0.0-canary.7de8965cc.0","@material/animation":"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-indicator_14.0.0-canary.7de8965cc.0_1650399774402_0.8435362117237193","host":"s3://npm-registry-packages"}},"14.0.0-canary.641ed0851.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.641ed0851.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"8a2dca89f4fadcad8b2a6b4f7e95ae97620d67aa","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.641ed0851.0.tgz","fileCount":38,"integrity":"sha512-YYm1dbD9IYmDIliyVtRHaw4q1VINw7OBPqxPFZrCN8wGW3n0jcrokRhMvPzFWdkl4w4mXAG1wu8keinCpIUmag==","signatures":[{"sig":"MEUCIQC4rqotQ/91AKLn1scdfz7QcSEdfgyRpdHk2mLx+B6E4QIgKHO4sExGdx6GO47WsCLSdvc5pVwXYhRmYEMmZj34hoI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYC8zACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqjvxAApMdyDQdH8D7p43I1rB1yTPvFesxsGHZRygJNXsVVnGPp8trL\r\nEdRP22p7llzxeMmuSh7DIHAMb9T0Kf6IMr7YZk+oblkfUqBqwzirlHB2x5nv\r\nOPa8PxEqAfrkFyM64SXpg79ozQrv8bRx1sUSB4G85IrUeZ/eH5LVO1PPwH5X\r\nlbLbCl6lRd7JTGgkR1zlxuqdKZ0DyrhN3xFHC0edNcxopgEN8ILqbZ8lgr/o\r\nJ9GQUEtBaltYKBrT82/5yYyQykwfIBHpIqZRMxmbsZ+KatQopls3tqpZPiU8\r\nn+mMaUSrHWwOquf3MwIyYeauMv3v+2QwuzbMA2F1io37gkA5GiCRZs+p/lW7\r\nov1JQf3nIvZz14uLJIIiIkYpeAPP3nGOWbCT+w8CWFiYdE+tfYpbf66P5oM6\r\nmAtOBuexFB9qbpCeMnu0HgrW+6ONQeI+xmsisYJYZcnt0ArZy77ExEAQFHZ6\r\nE6Fsd438W3HgRW4Yn+I3BadiB8CTrS1xRIoRpviZ7Zm2GeSC8R+rxpduhK66\r\n7ljhLcKtsCgsd/vGi56RA5vR0uEfAouIFQgVYeTcRnJ9Fm+UTV61IHQ4SjqV\r\n4B8WuXTR/O8DiugNWqZnNru7YyOkPhLYbWLyBhHqQDfzXStXW7K1XVvQ7QoQ\r\n+HHm5FDq+hW5amT7hbJ0RuKBES+ji53vLeY=\r\n=HGkw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.641ed0851.0","@material/theme":"14.0.0-canary.641ed0851.0","@material/animation":"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-indicator_14.0.0-canary.641ed0851.0_1650470707038_0.693240230344405","host":"s3://npm-registry-packages"}},"14.0.0-canary.e88f83024.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.e88f83024.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"77454d7506647cc1011cf67bcb9228aa312738ad","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.e88f83024.0.tgz","fileCount":38,"integrity":"sha512-V0PsQxscrKiAw3KuSv3lWdoJNf46zaAvrPlgq2B0omovMbi7dj2fFvumuPq61InMTCHbzM/g7c+Bos770IinQw==","signatures":[{"sig":"MEUCIQD+xtOSHO2fi5iIZKtHN366L6B3FV9WoLwgRIeWFWw+VAIgR0cBmZvA75wlDFAE5kt8+Un+iP/7NnD3qzLXBAr4iVY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYEceACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqIzRAAkES8xmeQKteasn56SLt7IUP1usbWFIK+nb1dR0YzBmk3BHtt\r\nrD0AcippfCOQDLe3IVvwyj/GUtnvJ8n2UIspqmuwKCCUP29UqILXiCMJ+1x5\r\nuE70uHM0rBKZmvY808ooa5QNfRjt3ofBKpnENJJM33o7t2YrhceLFDsGMieZ\r\n6pIbnyaTWV1Fn95Cm7lEwSlUUFIB/ATQX7ZRxLMkiU2UwzwAvK2Lef2v24zT\r\n/sob3wrK5qW6FZVmWS00fFDMpytkXM6k1DXH2oe/WXZtzWxgR+O/+3Xv7j3C\r\nXzvgGUxjgFNo/g90UxUQHyMagTEK9XxQAse0HhglRjlpt3HUO8s/Aaj8H4ov\r\nowi64XOE83dA/g0ce3MlhyZHbffVs8wwG5iKgap9/FgwzMC22NlkCVuAWYr1\r\nUCzVhSGZgGRLNfdn42upHsQQhRn01lfrSfo3yoeUUBiZHBB0zlpgujiEeZmW\r\nvpv/sHAi7Ak3ltU4kenZ2yv+xR017CpbMafuR5Lq40qP/Y02Bap3YfnkQoPL\r\n/PqYHUjS5CAswJ7x7bbvs7UVWnP59pgsUovLixati3jJYNT2kG3JOucq6YV5\r\nEDxSa12n5dHpmEO8PFtQLIn7gLzZPQktvXoi13gQKNHkaiBIqg/KppCYJgBi\r\nfePnPMhMmDaS97ArSHNGpzBGZ/aXWF5+V58=\r\n=ZzSk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.e88f83024.0","@material/theme":"14.0.0-canary.e88f83024.0","@material/animation":"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-indicator_14.0.0-canary.e88f83024.0_1650476829929_0.9479907805275629","host":"s3://npm-registry-packages"}},"14.0.0-canary.7321d6254.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.7321d6254.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"1f958ea548fc2711ca01a2b941ad18e39e43e5e6","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.7321d6254.0.tgz","fileCount":38,"integrity":"sha512-EU9pHI0PxBjaSLNuy7jrwozcww2dPozCkHNmD7SmSybDSLxbLWz8xkuoucPYWYJnvrkO7i6FqSKQQBJlgFB63Q==","signatures":[{"sig":"MEYCIQCLkZcdg5zAR/9MOBjFBlnZvp4vb0yC59K0E5052Qf2JgIhAO+s+4klMXHUFhDGcvY6Qmael6itWngx+LuLtAk0Deoo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYGjDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqing/9Gf1YxzgDZa0hn3AYDesyF9DQlO0DMO+wqQBLNJAws+AYV4Rq\r\nrYIqFSW5xYpqN1LzA7+cz5NVX3AaT9hZzinh2qIJp5wmHaEpANTjUePdXj+F\r\n3O6uGeNNDWjxTRFOCGOxcGm1vhvDZG8dayPHYbWur/spLj+p+K7lickthrNU\r\nfrU5u5/RZvoDGl339S0lAu8f5CVb4iOzgbmOjQ+t/Vx6MP6J7MwselOabOb1\r\nY+DALuaRPw3uRslfsdGoIb3fj8dqtR9KQdNsLKbZHvAgaQ73mhZNsCKebFkp\r\nuT19mV17mJyFxlVYVei59fPzSk2WOalEK5DObjGRkJMP+e1KEVmRyyhtirzP\r\nw50lCyp9fVuyKLQAhMB6NymjqslGA7aMSq9JBZQhcDh8B7aBXlUgbURMj9P2\r\nViot0QNOzfFnlngpItwqpWeMbe3LZMT6o+sDlSC84tfyREE5P5rj7ZNX9GP1\r\nmvGpQ/KMKoLkzC4LOZwGWG1qhg4pkzzyOlHZB6714jmz67qsxDBLNO+MlVko\r\n+KhapF9d0OP35KTdyjPWebLPjTB7WusUE02YpSZEruviYu61/IOKPrgTloKZ\r\nDj5sxLm2YIsGoI30xQTUituunf2oyr31Y0AAM5KvxBgx6K5xELCO/gZb0vxc\r\nXwkwS1qo0Ip17clIN/EQt3jLto5qhCYs298=\r\n=QILp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.7321d6254.0","@material/theme":"14.0.0-canary.7321d6254.0","@material/animation":"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-indicator_14.0.0-canary.7321d6254.0_1650485442968_0.6912727541992885","host":"s3://npm-registry-packages"}},"14.0.0-canary.3ab956515.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.3ab956515.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e52041f3a731eca6bc506726a5f978628a5bf34e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.3ab956515.0.tgz","fileCount":38,"integrity":"sha512-2SKQ8ZOteuIuch0Y1tE/oemqIDnVcLczwaweCOk6yTg2zoGM0p6xBVOdEP4+fPeArEyN19yVez9nIVyeGo7taQ==","signatures":[{"sig":"MEQCIFcIZG9M9yawjA4qQf9bSQct2g2E1ET+VcWg9cXwrqUGAiARyHGF82N41haGhgA16ntyfm4DevMzaWM2QJPlbmH6cg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZrfBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo6MxAAhSpIbsdbkMtHYTvBXmdAI8sE+HwJCGPCGe6CkYC0BgdY2E2I\r\nKskCKWHBi98xSj9OZBQyWFHH40eis9vj5doHbK7OilLvL8Cksc2tYoecnxpY\r\nK7BQxcZ1GrCtOwuR6PqbLCvqbxpxWn6uGOdyJLESwiPI+axu1FYylt24DNOR\r\nSrAjt5jsCg6Qye3uJ/pY0Qu0yGbz+NcYPqGZYiyKSnttd0xqdfXKhCU88tdN\r\nl53Oq0mXN8BX+iVdYlq3fLhlytoXiPmFHt+mYUOlBPaGu309o4RptgRsp7jm\r\nMLJqJex0rJlJK3PZLTZlfvsRgbfUciG3NHTwoXIc2T4d7OqQWdlB7a8IgGlB\r\nTBAwGOECPaB4GMLa3S3L8+eFGBr/UBlYF3AX/xqrtuQ4/8TAfX4vDkDVCb/E\r\nC1SrossSvH7yiLKm6VMYGDU8WreOZ+Va9QN4FIz0I+BsGkj8A//n09PIgb6D\r\nO3bBgz9GNcnrtCpVjjIvr3g/zYuf6k+rW2sWv+sYrY7N/V85EGP9H60yhbmM\r\nYoXtIw+dwg2NO0eogu4Rex2lzjwNQJgbDa200tVdtQUkR9+Nc7Q98rpOy1Eq\r\nXXAEaua8nNHtMwHDSlcHJ504h7eWO+jwpy8ELFeqoEAOY77IbNZDabMhYM+u\r\nzEiFZSWnR1SuzPXcwLQQyFfcfmoQkD0XiBQ=\r\n=nhGL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.3ab956515.0","@material/theme":"14.0.0-canary.3ab956515.0","@material/animation":"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-indicator_14.0.0-canary.3ab956515.0_1650898881783_0.9020726683213125","host":"s3://npm-registry-packages"}},"14.0.0-canary.53b3cad2f.0":{"name":"@material/tab-indicator","version":"14.0.0-canary.53b3cad2f.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"1bfccdf5319591cf1336402e89739df48a614347","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0-canary.53b3cad2f.0.tgz","fileCount":38,"integrity":"sha512-CMh5MuQamk10oYs0NpQwJ+JLPcY+WftU1b2NpAxbke+6yaV0XrcEkymSfHDkMB5itDvtpXR4fe2Yw9wO8gvcgg==","signatures":[{"sig":"MEYCIQDxWuLNAqyyPODLdw4l3t1oAsswOwz4jpzNo0FmKHy14gIhAPgR6qyN/PXLDsCjGH9L1SA8lqdsXVJ3Lx1oOYXvmXE9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaTq+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrdTA//cPr2NSRU503+JXO+cv1w8ESOYYM++NclJse0Ka9F8h0sGmNV\r\nODsWN87taHqSMx1fofEGx5sKRnqNO0P4xoqfQ7uxiMIwoQkYU9/u/oAD/2WZ\r\nqD27iXB9FLyH+xmYkB4yYu92ku3s25a/TzwMteTa7ex1Q2IUxtwBgjZCVY6b\r\n+gx15D7jTrlvoA06y0t3f7o2Cuoii+8VlflqWwWmSiEKhTFeYEMgjG8pXv1Y\r\ncyB3iVPscuE9ym+cLbs7EGtL0mav/zv8VJfRlenMcYQuUJZqVd1ahm2zbQPs\r\nmYPuXLcm1JZztiypRfbF3nUnXz8XLW+hl9Lw3G01wcHQ/jY5yteLfwvLSWnS\r\nYctesdYXBS0GV2wiBwGzPYUKpPHwv8zQZng0TdaQ3n8s4LPFo/Kl/HaFyXOV\r\nz36yM7CDlUfGap9u74nABRF3PjZIsO65oTmiMtcxLMerspK655EqLS1wWZEa\r\nkrnJ4OUn6/HUAuILh95i+oUmlAPTbnOAxFieNg+s0l4aWHPP1ez0CJ+Xug2z\r\nIpPPgjcRllraoI2sHcLjsMDHcmk1TpRIJg2mbxPSfWtjlApHIujq9xyXmGts\r\nisg2dKghxuxHgJU3ksxdMpwy9fY8n8w7WzBPhAl8Z/gH+arQj0+JQu9mSkuz\r\nYS4UHzHnfXyQ8Jb/fG+4QK5YRiyfmU3Np8A=\r\n=U3cw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.53b3cad2f.0","@material/theme":"14.0.0-canary.53b3cad2f.0","@material/animation":"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-indicator_14.0.0-canary.53b3cad2f.0_1651063486293_0.45196378011159277","host":"s3://npm-registry-packages"}},"14.0.0":{"name":"@material/tab-indicator","version":"14.0.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e55e5bf9fe1c52987558c2628d02d8f0c5c894e6","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-14.0.0.tgz","fileCount":37,"integrity":"sha512-wfq136fsJGqtCIW8x1wFQHgRr7dIQ9SWqp6WG4FQGHpSzliNDA23/bdBUjh3lX2U+mfbdsFmZWEPy06jg2uc5g==","signatures":[{"sig":"MEUCIQD12PHFdrxu9NJhw67SFu4tDvlZw+5XE45xhNwuTSmg3AIgPiXQQDsA4xGvXXH/q+ymxxvyBms1ljnXmWxijmXzoHc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":173742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiasb3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpLYQ/+IFakRop75ZTHG+6mdT1kxinT3dzWki/TCdHFEN8aXZ3R1L5P\r\nIY21l+bAHH9NbzBKlLBP1e05PU5ypKiNLLir6MBUBCqE/uL8qMMti86c3Mql\r\nNPOvT+47Cwac+j0Yb50mIKa+2Ysx9811KFoTHuPq0n0Ox7VRUbdBZiw/y+di\r\ntg8Kx/AxPHzycKrF9S5TmGlPgI9VWWlOtlxj4EEwcpgG5u8Qlesn4jlrJtq2\r\n4iCpMAl3OU+jVWEKluzPSD53cJQUA7Zm5if/T1J8a/Wkmpl64PV/y0hbvXyQ\r\niZ6VD5jEn45NtNYJis5YlUYpbekyH4rDkpol31kTZOfFsAS4u55e0XVqiaUO\r\nesdzHLD8axvgh7r9lXHxO8Hr/lZb9T/Qjd6nV3pabvxlD8WNevhZLTQxPFlZ\r\nzpnoKs6AhM0Giw7fGu6D4a2evRQU8rc0TCPLyvkzrVOVBiDkwdw29Q5jQabi\r\nhJNP6n0B060kmbO1qePKRNY+uKjJEdzKqR8YZccLLunQU1wmkjv3q3EJ4wN+\r\nWvmMnEkLzEQ7RnKt9aUP5UdsZ3eeBbsQPaFE+pqwOekB2merp0qIGC7udyuB\r\nWs7cAhERQrFLZU6VnmZ7o6oZTAYxZx9tyr2UzOw3w3NjCehfqTWTL77/ftev\r\ndc0oF/pHli6nWimnlgKBuE/qkxNOD8tgrVs=\r\n=CwUJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/base":"^14.0.0","@material/theme":"^14.0.0","@material/animation":"^14.0.0","@material/feature-targeting":"^14.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-indicator_14.0.0_1651164919174_0.4895047566138653","host":"s3://npm-registry-packages"}},"15.0.0-canary.432c815e5.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.432c815e5.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"77800bfc8ccde3950354cd3f0ea9ccbe15b095b6","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.432c815e5.0.tgz","fileCount":38,"integrity":"sha512-gsJZsJ5kw6KJ8jiavbUibYVT7GEhdsFwulBuKRwP4El8rwYTLPZb5YBN4etZe1mZpd55AfCykVPJHR1+jdxO7g==","signatures":[{"sig":"MEUCIF+9RGBbkMYt7Q/YMez172Mo1JJ0VSPjxIpk87wpWbjtAiEAjaVUY+1Ln7czB+cc6yaRcCrk8OCc5pAttQsp6Zt4eEY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiasc6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrbdg//R6RQhiHJ0cdETdZskvItdytuq8JbzBXZt7zNVfdlJLAIAye/\r\ndALxqMQ//48Qv6Vy4vQCUuw2XL8aN4Vun7xMjYaMtjuznUF3FLDbpLOyD/5P\r\nFW06J2/31t5XNC6Q/9N6Y5PUZZiZEfQR5O+TrkRzPFdyEXYsrb66xk7L0iX7\r\nqQA+p+hstvDc8NRyCfc/No7xkgN2HaMOouAJzfUHbExe9J8Lq47/DOlxyZj1\r\nRQuDoG4kl74Cv5sLGzBRu+SquqW0yoHoh68rVP3lTYIU6GAt8ECPHydy7qaV\r\nFB9itvoEGnt2SvvIFk50UrJziJUdnwFJ6T118mowwsz+rt5q/hvbK9cBTjrV\r\n2psGUprYBBZQldaVs+yqStUuVxXRSVuKIMZ1I/Zgdx5nui9uuLtLZgB7TxoX\r\nA8rCtqLQhLygfiqzlIoGA6rV6me3+XhvlxFvL7a08x+dSSPHWvvjFlpkJ9Zt\r\nfrDEvicXFg3dgHcela6iXLBYOFQ6kN+LzMfSEctT71N7EZWnOWfOwpOXVSoN\r\ngaMSC8ZyUwz+R5ZSDS0p7kqmHm8SiPBB/aarV2v8KmYEzhFSkMyW1Abq4cAo\r\npixSGtl6YuvlUBrVaWPj1p4evNTzMvNXfiK+ktKFMeISNxvG2S8JJH9I6QHG\r\nODqvWYI1Xi8RfILIQCtzmWqhoklroH2iNAI=\r\n=+0XP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.432c815e5.0","@material/theme":"15.0.0-canary.432c815e5.0","@material/animation":"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-indicator_15.0.0-canary.432c815e5.0_1651164986657_0.1011117329127249","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0f01f669.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.a0f01f669.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"bb4a125a52d24dc5f7d12113f0def023c4a67c9b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.a0f01f669.0.tgz","fileCount":38,"integrity":"sha512-CHsICYqsfXz7yGMpZdn5udHF2CyvvA5U13V0ejWW03eIeCneXB8szLt0lsy/45HQvoFYnN0lXpgNr3dLKzAieQ==","signatures":[{"sig":"MEQCIG8cVX4f2vgbCDBxYjTMBA53m4RPK2UZ2Al9/l9SYbIXAiAUALHD5AgCX0oIs7vO+t2SBNHUj8VTMWX8MzQzoRAGSA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidYGQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp/IBAAlhOIU4BPHTmvPPhqYyBO1VnISYCLjdSFEr24qAiXyPA0+nSD\r\nMkaXX6OWNeGnlITtPqBNmHNkLhzSz4oD7MSlgJpf4ZBrqQH/3nOJUjJ7o0ia\r\nP/r9UJk+0Dd4N5DUQ7ctgVXo23G+MBZ9mhiq9htjw0Uca3yqvUbuN69E5hnO\r\naWwnOB7kWr3jsD0EzV/4/9xc3z2AeO/+POaCVzIZxdB6HhMLhKPyO1k0UJ7g\r\nbCyMf6KJfhaNd3e2IQNWVVXna9aS/bugEaRjKQTK7aEEIyRcaOlzdFgKce6R\r\nEqc+odyAJPkuFAFaX4s0fuih5EVLWU3gcA7enS20flXZG/pbPGzc4Yna/PCm\r\n1GCjSNH6d0Rq6MIjTPC+kb8QCvlARgexBLD30Cklox21zSTeFpK+Tmlj8E+P\r\n0PALSOLiztZbaHTy13fxXFSJ8kYPh5PE0oeWHlbfM2ubntheO1zRB/zj0GYu\r\n+2OeRqHsFFBQZN4ZndZnDK+fPI9FULbPf3LACDVqkRPc8fKy8GpH1husdviE\r\nRktuDTAF8o9fELQvdIJxVc7Hebi7bI3STC8tYDflXbNJiycZv/jdQvO71rrY\r\nVSB0biJ5oUj31kPrOFAsVDvL3KMgNOkLEuHmIeIVVrt8Rihhm1aiWI7nmf0z\r\nghmVVAa+0KmWkGKXESmEm/6r9PI/yB1xw9o=\r\n=RgaC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.a0f01f669.0","@material/theme":"15.0.0-canary.a0f01f669.0","@material/animation":"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-indicator_15.0.0-canary.a0f01f669.0_1651868048408_0.447884497106515","host":"s3://npm-registry-packages"}},"15.0.0-canary.276cb39a4.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.276cb39a4.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"78904eb33aa94845f8daec3a6a53b3d36751a27c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.276cb39a4.0.tgz","fileCount":38,"integrity":"sha512-OvLscwGgZWab2JuGol6YadIYTo7yiMej/M2pBsJQ5f2bBa72D9hOS23wZbQvXqZIi64Q8T0qImPL4velNftkMQ==","signatures":[{"sig":"MEQCHys+31FJTmY6pqne1PJ/FpvWfDKraBFNjDsLYz1z8B4CIQDhPY14yHtrPndSL4yTokPnTON2ShOUpw7wDo4XhrRrEA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZOTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrP0w//UbXJnG2N3otZeZMxWYzBF/6/zEUqdyry0hzPeRg4eqCn22qz\r\n8k6FQ0s8wI3nCxmX60c0F/a51cfCHhUd1yznZGnIS13Fu7RQEBNawR6kdqLV\r\n5TUuZKfLckw4oB6NOo34DiPypfYLTsnEMaaX1YXOWUAvaB22s6Y034y3K287\r\nQ/m6jq+1yNgDO3I+q68jTQ18DN5nb9MqHnrX4ROreUWgoTuf1R2wVB/WMHSv\r\n2VEdfbDEyi/QcNBfDhf1XxJWtOpBjec4c4Nyqwz3XatLl5OWhgkBi/0bIJxz\r\nc/khkm4YPDiD2DyuvhegEDuViK59/f6f2RDeQqm4nAZn2C+QALOQtQty/1Ca\r\nOnX2XAYjgmOjCdIogan71R8Hjlt+Q70RJevzg3XlL4C6awixEhwU5PU18t/c\r\nG0PdxYRIKH94ETkYTFsqxC7mc9GWP1CPiO7cEhUOERuiOjGqte6m4xgv0fEI\r\nf50lU+CCc/XiG0/l8PW/sOSISrGYEAPbS1L0lRgCn3U0ItcWYaxVuMUID0ng\r\nKL5WgeeZ1ydFEJJob207RCmK3GDpaSvvjcqkHP6nly2OvEXPxiKEYctfDSX5\r\ny92d0f90p7u5KhLklbtLdsTuHRTZN22/KpRI2mlrbbqA8Ol2NJhpZRYmL0iJ\r\nYeW4LjXchLup9eqPwBqXynIbrpIddDIVU+Y=\r\n=e+lw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.276cb39a4.0","@material/theme":"15.0.0-canary.276cb39a4.0","@material/animation":"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-indicator_15.0.0-canary.276cb39a4.0_1651872659763_0.8793304905399015","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fe98ed70.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.4fe98ed70.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e86d43bc05a40acce1f3717063c6ed9f19d7dec5","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.4fe98ed70.0.tgz","fileCount":38,"integrity":"sha512-+rKLm+5HLdv2nEMXUMG920hvge7c5zC6/qOB4/k7YnWbBH+G+S+xhj5ibSKkt7a+LWVTnm8vaDvHnVgXqltf7w==","signatures":[{"sig":"MEUCIQC4S/jHussO8YlZ+HgzURJnYoRnBcOzYzu5UlRadnLKNwIgdf6IxdNeTKOkBNC+aeqfgsuSAqp4ZPBXKQPi26zs6wk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZlVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp47w//d/dBBKzJBrKl/YYBetadncxyflJxVdBvICPiCJuZSNGFFQt1\r\niiU1cdesFljSO+N9AwwD507abtJ6y9GrUUtZ5T7wn2CX2qHScjsVumGen0Xf\r\nhDQOl2Sg0QFE7OyCteT0lfT+iG/NNXnNsPwMYvih23TU6InNBM/FRnECGCEv\r\nac0IGLlUvKPcfND2MOpnnRiYzVnjwDr1e7UfyXOKoXLIw3q61y0gNam7jwvW\r\neZD0ffSExvKtLK3IB5NNkOig/G6yL5aSq8lfvek9cGdKzc5RYulRY2/PgpzB\r\nm0wK8NV0pJcppg+74Phe5Yq+bOUAswUBi+3C61ThV7uBzzLbWRkr2PrqZtt/\r\nWUtgNWUoZR839Oa4yqgWWu8etq/rIH8cnG0tCe/qUgFUGDOMTYbQrieFPZNW\r\npR8++GdIib6SV2Eowd8k421+s1HXR0kqMKXeIyRMX3PN0HZeCzvorz56/blh\r\ncbbV7jE92UfibEkIlhkZOAsd2axknjNmhxcPyGIC4IRZlUF1ritTV6QZuSDq\r\nqa7qwh5jEdvV4ml2NVX4NPL0mm40sJ6pMt6D0WMczwozA8lNAkgTsWLootD5\r\nXNEr54xNaTh/qWuFYurfNAdWvbECGESojvstQvv8GXg4sQFtnwwqtu/+cfhV\r\nR6eUTKwRgyOTVwSRFIW9pS0FWERu025lpsk=\r\n=jV2Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.4fe98ed70.0","@material/theme":"15.0.0-canary.4fe98ed70.0","@material/animation":"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-indicator_15.0.0-canary.4fe98ed70.0_1651874133004_0.7138975337166391","host":"s3://npm-registry-packages"}},"15.0.0-canary.58b130a3d.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.58b130a3d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"889e5cbcbbacdb0d0cf9f18e07ac4974e4810925","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.58b130a3d.0.tgz","fileCount":38,"integrity":"sha512-vfFnUHsUvZ2gs9yHq/JUJkfpVHN+tT6Pikvyk07QpBS8j3H9D8YLEb6/ygBUlTENa6nyzJIkfaA6RuEOacvzsA==","signatures":[{"sig":"MEUCICXaU2Y19Cr16Tcp4Ia9NWinb3ZzXyLb/GZz+L0hoRDzAiEAz7IQTTtjI+sNeVZyMmU5ac8RFcPsedHCTUqEvvvZ6F0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZngACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo19g/9EgMnR0Wp+ccI0hWAJNaEYGlyn7MBcw3Ab0DnNO2oshmN4f3m\r\nPBpEBhWTNhcwfhhZ7rZU4QuuLCHSa7glLxxS/LxY0jSr/CljaFOsETGe43EB\r\nYcwwPwon8eR8Ms3Tr2l/Z894zGEMqtBdqCj3Q/el6WRBQAWczCpcR6igCPH5\r\ntPjQY65nkRZgPE/FeZdjeG4Nr4cm7MK1bRILcedoT6i6yj9sUvjd7O3RriTQ\r\npzu/baPHyenh4TZQfdYMBYUj/O+i5NOEdWKe/qq3C8+RHhZ0zBtE9yvY8Zph\r\nDQTC9LvLN7niqqI7sbJ/K0rJaQ758LVmKnWq/dhjehhGqJQoO6rct4oj+9hN\r\nyafhmJqwZfnaGRWEb7BQcb1hB54JBV9/7R06qYpd5/nrAnE2qjq+F5fL3Sup\r\ncPM7Y5TnR40KzTZGbxCXnsjLl4QkC6mxHegJ3GTxCojk/ijFybEbEbM6ncne\r\nlL+yuHabVa3q/x0UsAlAltrPfV6csuQMGo3v6bY08YsbIDZ5wHt8EWcMrF5P\r\n9zozIiym3dQmwFfqGilgFOV8PwU0F/lo9thL1OVWd98PC4R7rKL50W+k+rEW\r\ngZUqgty6ko8YHIVGKu9Xf5Ipi/hQYncE5IR3OHrR8XRnZQArTjuTu0XJSv3l\r\nvYfoS0Fu0PuXpttfaExfI3ydq3MTlMmxcX4=\r\n=BSS7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.58b130a3d.0","@material/theme":"15.0.0-canary.58b130a3d.0","@material/animation":"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-indicator_15.0.0-canary.58b130a3d.0_1651874271804_0.8890923453951274","host":"s3://npm-registry-packages"}},"15.0.0-canary.ae278a2fe.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.ae278a2fe.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"519b4c200ebf0ec9d5d2b8fb3bf3109d300bb7fb","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.ae278a2fe.0.tgz","fileCount":38,"integrity":"sha512-ANjLs5ibq9IOiW55YlNdEP8qlpPZhbLxsWS8RGmvrygAZnV8gnzh1R92/EMntfDA0JnF+b+JD9Q3OiPR99NIGg==","signatures":[{"sig":"MEQCIE2S0qF6CopT2p9iK0mDuSf2+823RM4g9lxdPdsluq7+AiAtULDh/cZdRIMIgQL4g3rIz0c2kpouqxTQ/SqXxig2AQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieTISACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmre2Q//SzidrccjQn9Q6AdNYkxybwUD8d1FfjathO0b9MAbClNfpo2u\r\niFalXgMQnIEFdsB3eueusFnbyrxXmWlzOC1wgRpXDRSFKQY+8UlflEkZnJOB\r\n58FVdv0Cxq2gKwqjz1TCsPkrAxAe8s82o6TrOizY7YnfiXV0O+ZQeBQ1AMEZ\r\n1Ks16UkqCTgmDEACjfwI5t+/UEKnE9RKVKw0TW88+kXEzUBPafSUCqate53h\r\nLhBvzQevVQYCn5fQWNmJrCPoC4n+T2sEsJ3dhDChvDWigJec7Fp66z2s0Xfd\r\nRPIlrahll7VykYlW/5vKCEDvSPQ5CkqOVybkrrXwdUZlGtcGccMYPU1ZPcjg\r\nHblf6j4DZQTsAEGLBCaU2BRUnrqCNN/8vbJtM/PcZJ8Ox+dS3v9Vn6vGgPYc\r\nGgTiYs9Zcizd/TYuTle7bloGEZyfHK3/2b7n296pfbIpk6jxA2D9eK8y7kPW\r\nMxTEX1dvs168leLhxN/mPEB971ouoASQ471QUbO+6O+s6Iqq0zspXB3J9+Qy\r\nx5r7uL7wXG+wiMc3bZ915I4JqC+m726I+vHpTIAcxFb09TBCcqT3TKWRRQUu\r\nMsk07vnX21EdcquMRn9iRE2FRb20xdtxorMhkeLM5hJw2am8ohcABHrRwvly\r\nIhFMebgyNJe3jAYWWISy6tCVRJ5s9YQbEhs=\r\n=sCRc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.ae278a2fe.0","@material/theme":"15.0.0-canary.ae278a2fe.0","@material/animation":"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-indicator_15.0.0-canary.ae278a2fe.0_1652109842508_0.24642531313076987","host":"s3://npm-registry-packages"}},"15.0.0-canary.bebf5bfdf.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.bebf5bfdf.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"3dc8ba09553b105513f712d1f117b04e79ddc3e8","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.bebf5bfdf.0.tgz","fileCount":38,"integrity":"sha512-3iOZM2JOiyPJuK3Spl2/gOqMIZc14MVUxzRaSJMZN7DTHMMI46eYbIBqqQveVjJ3lghIEpr7sm40RXT/caXYfw==","signatures":[{"sig":"MEQCIEInLTIj8nY5CjU388xJo9+hrq/4yNxECMzzehRjYCiQAiAbIgzeoPwC20fAI36AUuKFEvb2dUmUrp2t0JqqTwwK+g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieyH1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqBgw/+J3dhy8pRD0sdZ8DANIBTdHssLv0X//j2PTrkNxoADZb6igeV\r\npKPOIGb2LygF6R1QspHOMtSwltIIBJo9xX6BifWYjo2vxGA05F0m4wg5zu4e\r\nVR1+vIFdilRPyWwtYmVYaDn3PP3p+Pm1VeGZA3rpkiP0S0cxoYRUeo/pCdsr\r\nKGKm0Bo2Lv82+gSQh7Q4kHycnarpL2ho7oyrVvuezEvavT8HHkZ6cp3tSkyh\r\nE2WONtBegXGYJ7uai7sYtfsbuhlQGq/VMUDA/loyfpQZiZK0Gsk6zADi3P4+\r\np52pb8izzpHcirHZjp6FJnte3E95d+AM7hVPVI/fw18k5tWcRJhf1mTWgseX\r\njnFlAfeZc/mt5zEavKcLjU8FiarByY5lLPDTqjmSseGgqQaw2zP88YBJvX2D\r\nQYCJ3Me4tABPmUbIGDi7VEFDJnkH90HrulyGe7Ap3OlnJ3MzeutsielcnhyN\r\nFN074ps6hsSYxNGihO7CtgQrg1LBegdIxqrmTkuy2Hzfda61T5ueQK5jnh3F\r\njOzDUyuDPdhmVEzw5IvqHNvD9UK+V4rHcoDgLIw44pC4wbPw8ubv7Hsz3QDJ\r\n86WdSnjAGNXVrqAclkZpVTHJ7oEUsvXpruGaglDIpecPrBO9Y+Qaupbf60SC\r\nhcZrRlKhzR65zr80zt+8Y/alHiddpJY+65M=\r\n=D5Ov\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.bebf5bfdf.0","@material/theme":"15.0.0-canary.bebf5bfdf.0","@material/animation":"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-indicator_15.0.0-canary.bebf5bfdf.0_1652236789641_0.8722727740811564","host":"s3://npm-registry-packages"}},"15.0.0-canary.e6072cd6a.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.e6072cd6a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"8c4dff6facd979fde00871e4690ddf6c0de663c6","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.e6072cd6a.0.tgz","fileCount":38,"integrity":"sha512-Lzeikvf0ih6IKChGG+/tbOygcFIuvOkx4mS/p363AIi+dmxUYj5dJqBYlS2XSOLOl2430pnNsCS7JDOgOUWQUQ==","signatures":[{"sig":"MEUCIF4cS1nmwoBdNjcAfR8rE+fvLJ3u7cQfj0RgRkCKC9ItAiEA0PABW/SxfJF118bEvGUsChIEcc2dMLJvx3T0qSFlBIQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifBn2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpckw/+Njb+9FWR6YNyFex7KJMSYyhims5yIAiW/MrIS2mNJiB/EkXb\r\nonZZoZuKjUXa+Tx8cpYnxhnCR1VqnRgIBrOdFecVoFlwyeWYb6wB8Pih91it\r\nPRhdEXQ/imZZOO4FPK2p9+nSESAAQCcNeRwQhw1/5gE3rVvp7WwJDosNNyUU\r\nVlxylXqS/Vq3M0GVY09NLRkX5UHzfn7jFVn1OQI1LlmwD0qNNKyylyaUnqzy\r\nv25bQys3+8bv8u5QkSuciQxgO43JnqwMTk5P4EHA9ZIC0Xy4FwnExuD+3yyx\r\n4PCBfP42b8ylpMfgNljMEh39gIB0K4ZQUYIIheS1de5NpFp0+AnwGzLMS7Ry\r\n6oW0KYnUQ4+GMZUzmcyWkGJLRIxRehbSnRNJA+Jvwb49+7ExEwtp6D5UdRh5\r\nwNMKxonZ0SArcePKhh2DwVz42vNaBZ5vVSmbDNa9VFKYfvkImClKmVOMU0LH\r\nygvik+aLN5AN5fsnts99hTSonVeS6Vh5td3i9IQHz4FEJk0cHStv1EG8DMS/\r\nZmxaPPHRsmtzil/U+sbycEQNd8isU1QWJ4W0KIKbFOMhUPFSfhHLwtdNgKj8\r\n2Emo78jxmXsWK5ySx7fOORBdnBugxTMbMmtEj6aMJRon/iFrlRg0rAh/6UwZ\r\nPx6wgHzDJ8Tlt46sKVLvnKkgwQtLBG73ssg=\r\n=R8dx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.e6072cd6a.0","@material/theme":"15.0.0-canary.e6072cd6a.0","@material/animation":"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-indicator_15.0.0-canary.e6072cd6a.0_1652300277971_0.5515658353460393","host":"s3://npm-registry-packages"}},"15.0.0-canary.5b40eb988.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.5b40eb988.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"d36b29f14b78bc2f556f6322f84fea668ef51545","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.5b40eb988.0.tgz","fileCount":38,"integrity":"sha512-VVcTEbeVACRywO1SvxoUoCQE6A0+ok4Z6DqU62JtotWjSiyAbjg13cU+4YRYCxQ1IqMnL5BZZ8+uo++aAJSMmQ==","signatures":[{"sig":"MEUCIQD0xgtOShH7v50OfqZ/FEfpsUTXPCBJhFw0pI9SIIZ7kQIgN+TnXiwF1jfgT3Kbivb3Lw1Gz8m1+f2gYfsP7jepAco=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifHRdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrIjA/+OSthZ5NJOBFgGJG5D1PGe3A/TigSOcfxuHWowhCwEptZYfNb\r\nA3TJQSvjgvrf6mzHmQq8JLS7/+ujm9ShAwe2/KG+5mf+30PIrxmJQKtIF/6q\r\ng+sJ3piR5wuDNUBHrIBE8XseCQzcYkUdpC3tMm7BRNCYKthBfe8rJNQkOMLw\r\nM/8A+UMoffF4eU16oee/B8guDJnDrLD1hR9biZGB4ucXrBFNIptQNwVeB6cK\r\nAc+2nSP/zOrECvHI9ttIThX9iWWHhRD1HEBktnkTQI4Aoz4eVs8LWcZKXuXM\r\nlZxgOnUoB/PDOHU/7G8rz8d3sVj02MRVsyqh4WDzmGX6sSFGvvDIfpIByq+j\r\nYC7aWzFwIPDM689903pjxGDyqMfWXZv3nqnXoUk6IianbnQnhxpV7FghHBGF\r\nsN3F1tsoE9fNIXzO1Io/7UhLO4y9fUoKCH6GiFx6akpQe4+/Nf1bGhI89HHB\r\niiLvShh314CX4gdFf2SGHW+FHX6G5KnwauxNkLJs5xM6elQw33fAFVniPaBo\r\nprM9yB0BcDWC/EFzhcLBVbFR4khia8sd4f4baw/I8/oLAWeo2ppOCgpg+v5z\r\nXlpnAgkvKlx6z93kw01MliGOKodJdKKOwHZw2NoDc4X+8Ijpuqp7KGO2hYCl\r\nts2yqilN7BCmGm6qkuJhvuF/1rVLNzHhtT0=\r\n=0EiS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.5b40eb988.0","@material/theme":"15.0.0-canary.5b40eb988.0","@material/animation":"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-indicator_15.0.0-canary.5b40eb988.0_1652323421500_0.2613311987384628","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a61d62f6.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.6a61d62f6.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"bcfabf7b8a2b46c0fc8c0e2fa1a9238457831440","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.6a61d62f6.0.tgz","fileCount":38,"integrity":"sha512-vS+7YpHi70rUxpoAdCiq4zR5fYbdf/zhwLfuSDSIV/eDGC215v7Rbq5IdcdwS7FmmkKbsJTSt90Hg/8lVNRq9g==","signatures":[{"sig":"MEQCIFM5BPnGtC07H7Xjg87aGsy4T3l0ldlTNQVLSHjZlFhtAiBfXtydUxfirD3R7Qkfg1K6v4VkGVZFZcxslFwkHOdAIg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifW1rACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpeIRAAnsvwOZvmAwTMWntfzV0131QCqz/l8rKuZnNeOcb/ypjAtNdJ\r\nLDyqNbMXO8u2joSxviPi5hemCl4DRV2RBC3wRDGOzMSHDGOpjhFgRr/kiR+a\r\nU2uDShU2WZgreWZgvSzlwCRo2P1wZHYqZF2lfU/UhoJw8mG6oaHUAZB8dcL7\r\n05z+wwkX/wP7CHm6uqgo6uHVMYOiaezhDoZxycCPDvkbmAc0PrukbQl0GVqI\r\nfe5xS5HHf8oySiVTWH0TzVFDhi1cVQc8QH5iGb+A2zt9KyVAxBXs/K/jlOBw\r\nvcyg9Z4tMRhdSOpADDACYV7s9XHFozxoQVccHuCEMkgZarBxCtugGzCh/5wo\r\n2SBX60BgkNrQZrYzjQ8rmUFuD505U/BB6c/1xG73oTCizIwWmbXhOcjoKsCH\r\nfumfOEluPLW9n80m58MOfQ4g8BcsEJo5Ggo9kPkKN41LQoC54fsJ1obd0Tx2\r\nl7GESuk/iHqSZ6UjxVs7B2rHce+Ud1SOPhZEBYEGeoNX8FNPeVzzFw/+Ukjx\r\nE3yUAnIOHQ8Gi8edw5aDurM1GnMObeXOGrxaHWU0MP1np1N17E4teao80dTk\r\njS9aIBiMml2NKiiuPxG6WEmyJT695x+36xxNLvkvJXjy4/8qSSXpNNXMoT4r\r\nxLnwnwiULGFSEjNFabZ+CGljxFtUx5sDRGQ=\r\n=WnIi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.6a61d62f6.0","@material/theme":"15.0.0-canary.6a61d62f6.0","@material/animation":"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-indicator_15.0.0-canary.6a61d62f6.0_1652387179105_0.6823535775871215","host":"s3://npm-registry-packages"}},"15.0.0-canary.05930a453.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.05930a453.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"6048f1b84b09a09659cdbcdd688555758fb2b4cd","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.05930a453.0.tgz","fileCount":38,"integrity":"sha512-DIN4nzqaV6UYM3YLthud+py0XRkf9mZs/2w05+rvDvdqoxsrR9xUtp/eH8ySpZ1nljrXwhnDBsdUu7E6YzXrFA==","signatures":[{"sig":"MEUCIQDmr2jWRPwMBFzMLk2QffLsdm/MtuRGhx+5JL1j+5D7rQIgU8Lx5tJcJ5Npw1Otn1eYFpoBxlTKofiGC9j5BuYLPxI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifqeiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqGFRAAj/hwaPm+hTbo2x8yKLpE1HUKiXcH8lAwcOx8tqUwecjdebIa\r\nYUY1ZfDtFUcEcaxMTa2/qFHYL4a3fk1Y6E2G6BYEqwkovjNdWDzC8rHyMGWs\r\nVvMTnIGo12Cztvy71NNJM/EhRfbg1+FKtRa7YEGgZG0oGxK8J7FYEPLlC8QJ\r\naOI8H+suguNkca9yNKl5xWlIMRzLCCoFRu345b1LhmqYWQ6IiGS5+9i5dv//\r\npCfv8nVLpOA35fa1LU89CCZURDnVbzeCriU1hEOnFp4FHzT5xoDX4buo7F1V\r\nz8DKWIFdQj4vhC5ijilG6uiXDKgjL0qQHQVHOUjjmbapySi0/+szbFXqFOP9\r\nw7yXj6l+7WMFaIaNz9dwRXgIAXJcnK1DdnZIbiG/9faBr/oxnAuwHfAkkvoC\r\n/ukNYdGHvEaNlQaFSgC/zoUg0n7cUHnWBxOw/0yAKtA/yIKcDHGE2W2TksWi\r\n8bJ6FCPi94f2nlzFpFxIX9NTW91nVfBA1XMKXDmmAfGt6i99p3S9h6dCz3ae\r\nmACCfdkeHDurdBGjpG4Qor+ieq0Cfoz1qVL1NaGB6k/GkT9Hiy2khjhXtSCl\r\nIHmPoLGBgdGzgzKQQIip4oHLlfjoZPRWqgAO3m9GZ/48PnxmnOCwI+n1dNAi\r\nha9y6rjQw3CT0N9IYTn/mUc+hmhHT3/1aRw=\r\n=gKu7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.05930a453.0","@material/theme":"15.0.0-canary.05930a453.0","@material/animation":"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-indicator_15.0.0-canary.05930a453.0_1652467618037_0.41102975180292445","host":"s3://npm-registry-packages"}},"15.0.0-canary.c0a11ef0d.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.c0a11ef0d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"8b47a5434c575a42000abb7101f833f6af907d5c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.c0a11ef0d.0.tgz","fileCount":38,"integrity":"sha512-NG/dkIuIob8LtjFV/VIY5n6fveJWssFGMVEe0JfY/ZGgpCLRyBrCrDT3p7t4I12ZrXefVChs313/R/eS/wH6PA==","signatures":[{"sig":"MEYCIQCFQAgO3CiYusHcLZdgaXVo6RkG1xK4Bi1evGIdhLqBvwIhAMJ0u4iBlnnSnsx8PLxqlrpqivHUXqB16AIg4OzOy24+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihWyBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmokrg//bSMAdiZpT9i6tmin8BRCIBMAfxgN+DXSqJAEXkh2kiEfiCBn\r\nfQzJbOLtKWIkRf3atjcrAE5qfS5lKF4pajd5VPGkwroTU0cclX29qgyfSBeF\r\nCUmvtooH195kRKpVj+tvoBaEicBFNa9Ku1nf5oPOF8AeSeYCH5fbGxFPdPRH\r\n5VHQXvEn708yFf1bQtRtp3+rYXo4RpUZ9QRvM+taTSAI0GfUfoqIg5T5HWfj\r\nxhGBkhWqzt6R5XjwKyMgWHh4AGNJI4L91pbaTsEsnQqUeCUuJmHlfH8n++3o\r\n3vpPJLqovRQktctASHNZYr2h8s3fqGrWbmeao5CeQ5bpB80HioxLrRZHDtln\r\n9fVoEEPWGvRSahsAQGY/egcaD53UltA0jTbODz+q7Ron53G46MgBhA5mpHhT\r\n1dWwPebq1Wf7deCkYS/GU6SBv9JjTnVTghJtPeYkUzojsl6LhgfzXgMkbh7J\r\nJy8LDIJ3s3N8AgFt6GXMEqxXA2QgFzoVbQn9XVru0CnysYSvxciJNmZQlbdT\r\ngaIgCVFSGi21y+g+mlU14bHWsR5atZE/bVAW+XAqseEZxogvMKauzVc9j3XI\r\n6xTqAcKaPhfz/We6NKbKtMj/nzWJzeCX+eyoYXtzRnngoJ4fb9ee4Wt9sOrF\r\nqUHRMnGGoM5UFBlVrRlSKcqJcZqLYWP6HWI=\r\n=DIfq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.c0a11ef0d.0","@material/theme":"15.0.0-canary.c0a11ef0d.0","@material/animation":"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-indicator_15.0.0-canary.c0a11ef0d.0_1652911233027_0.5794787641251258","host":"s3://npm-registry-packages"}},"15.0.0-canary.2f9b268c0.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.2f9b268c0.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c0311e4a1525ab9a23c9812fb9323abb0db336b8","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.2f9b268c0.0.tgz","fileCount":38,"integrity":"sha512-1rLBYMtwZX0KmSrWjbbX/QHZKajM4DbZzVq24ZFtogKk+XDxZd3X5AQyP3bC38Cz6z6wR0SPio4sngGMPcCByg==","signatures":[{"sig":"MEQCIEAB53Y4BFJOhFkwPlHDDb3L8MFZJimc1nV38qpWptWOAiAWwQNoaHD43JQk29CwNxkqKVcrBFIrAqTG85maAGsodg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih+y6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoQSRAAnPc7OS2ky48JXLFkmNiZNiSluvIWfkzG8gLVi3gzJPg0m5eo\r\nPzgUF2fMkCdgQ/bBlguhfFAtKY7JqBEIDipbsqPZx1SLrRJenjlMlOHi/mOm\r\n6I+zcdT2bXxGMpTqA64+4oOuIzZNATMJzY5rNgELItEX8Q+765qJI0VYOIs2\r\nXiOiBmTEA83Jc0HDIFU+SB0Uskh9O+1pLvm34cDE2hQFKkcKRnEz/oEFF2UX\r\nKAON++lfJmFiWaNjLSjOQE38walGDcVuPM9qDH8yQR3sbqNmOLXIAa2lH7Jp\r\nOepsmPimobc/rBkMwONT4fG0c1smYxthmM4Z7Li8Y5RZxUdHd1wD0sAUspid\r\nCKkSK27TvCJHBcUxE1ppQh8sJ0qSpjobL9fu0xUWbsWXn9Zvn5MtJmHn+WWt\r\nFVNMO8924Fp5lIJ7EilqR0ZHTyU587qVre5RY1IgE8pJgNFikEhj/eaEkwPr\r\nZeuS/+OXtD9WzEMS1OAO7fX880BWP4TxqBAkDF8VlrOuA8A6HbUW+68bcHLz\r\nJhpyYEFElnq4NwixNGeQaE7EcwR8deRHE2Gty1L9BG8qQdkE6pfJiHuwH/R6\r\nkresGaySWcf4yr0A4xXzaG04g6I8kusSKnxNcomIwO70Jzqsaus6T37laDsL\r\n2u/fP/EmNdQwjpCL1TzyrDrfUZ2sZShcbCc=\r\n=e0js\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.2f9b268c0.0","@material/theme":"15.0.0-canary.2f9b268c0.0","@material/animation":"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-indicator_15.0.0-canary.2f9b268c0.0_1653075129765_0.1780644207654669","host":"s3://npm-registry-packages"}},"15.0.0-canary.7741345b8.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.7741345b8.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"d0aefa399642b709c7b3fe33b18b3841c13587e0","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.7741345b8.0.tgz","fileCount":38,"integrity":"sha512-+qP7S2y+vu5PbE+DnP3HGEZSBZWg/rb2MD/htYZEUPPs7PIzk9P4l1dXaF+z3BiTTFdZcOmVtJSREQfRUaZ4bg==","signatures":[{"sig":"MEUCIBFvxZiGsVtb4ZCJzpCulDCP151MQoPF3lfbepc0T/hxAiEAkid4D54dC5slPp02dWtxCcQDjczzDRBnz0xL9u+d36M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih/PHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq8qg//enFZyEGX2SxnCfKmEHP4kHRiCFw+3DdJxEy/FtCYjWlk2Oe5\r\ngr2lvhyEKqtD3BzXGs8YN/MELR0yWifiiwVaO/nAaHOwgBhb3ZUJc5pmuidW\r\nWlBfQh0H+vwkCWj2yn2H6TvxjaniknjBdHy3d7M7It1bhlxM/yTubvl7CZKD\r\nC1BtTUpdZfHDPLYa6IFAI2koAquj/vk24C4siO9yYRg5YVpwMlYTi+kht8Wq\r\nA3AjMxvY5TcaYnWxr4M6JKzL7HNRNY9fPBYS5K+8KzTqI3gGyhXI2ifhK1ED\r\nc4Fc1a5dsfIjXzyeIxDmhbFfYMxYx/WkgBZR96Id/8TLrGbYrHtrgmw063YB\r\n3mGWYW3ZpKkevtNTrLLcUPTMT7L35wGtzKhbmoIZlwZ0TvKBkTEZeNgGdci0\r\nqePzzLwP7pML8UDqAf4aE1VJq1iunDgLibtwwwljoAoisDnM/YLANMqOeouj\r\nNK2TE31oq9W4Ryjvsam2BV+bff991Vuo60Cmn/TlOlBh88gK7roDzOTqPOa6\r\nZQmOjbhlRzhWQQX9LTIBM8/bBxWbAIBY2zLbNjRb7iOWauN0GFlK9tlA8EkG\r\nwLicUemujECnwznlldBOG2+HBf+y5RqD15d3V0ZkrKj3xEGxD3BL9rg95FdI\r\n/saMhw+YBireUq3W4Ky0fC/MM23v/QXbmqY=\r\n=AWsO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.7741345b8.0","@material/theme":"15.0.0-canary.7741345b8.0","@material/animation":"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-indicator_15.0.0-canary.7741345b8.0_1653076935718_0.9562177785764807","host":"s3://npm-registry-packages"}},"15.0.0-canary.f807e793f.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.f807e793f.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0fe6b9f3071f8042b842babf6121e009aa647191","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.f807e793f.0.tgz","fileCount":38,"integrity":"sha512-BCcAsyzTdub1Tp55NKAfN9Z8WHdKWm0wit5FHSSptw4F1JCc5wnZDxbO8dzTODoykcfcDsg2wdpolLZQWTDDfg==","signatures":[{"sig":"MEYCIQDrrQgkwV22PXDUM9cusH7XJPQdhoHC6+et3nfjjVhjXAIhAOY0AxWz3BKCsdEdEe+CN9wIai4Og/ZKmfnkByJ60CCh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiiBRaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoaMBAAm4ijgKYw2w2sxKxflyLiLH5Xk3Ax0FL+JSB05S2j3pP8KYIm\r\nGYP0fUfiMt+6FN0bRgZB3wIZGKA2GSlIfOJ3xBza8vMTBfVgUPycPDJZz0xo\r\nTzT4vYvNjrLTGUwQF+mL5gCus6Ei6NRTq33gPmDOTd3g2AR+coFS2V+oDtsD\r\npETLIgo76Ql8uSDcf3WFWX00o2a1WuLkQjTYWf3H0D1BePZYhLHufTxXvL1V\r\npxUI2Hex7AAqNKing5R89V9N45+8ZA6P0VTjcH+IEeY+ZSVZjDOleIH2zlBG\r\nW4JtGmol6RlSxTUouU+OelweiNwqA73c0AKIH7iaAedx3CYo9MRByaW6pyzE\r\n8BimUN8ucToJKLtSQaKbQhTePonmwZK5G1z3v6IrGvMwNxbWGBWUmIGVnn3v\r\ntR6Jo8tjODvehk35DAbWmEnBgV5tcfxz+sHE3b6zW1q+DZU0ow+XtfFLidT7\r\nwPlAQqj6J6IIdbRUBZtePI+WwF4L1OsHkOtyEmlzvsHMPT764sWBkQecIT/x\r\ny5uLg+sg7FhLFEpnuCGFA2jSa0od1wVuZZMlERl8USzGSwI1OwSEWMCXj2WW\r\ntONeSrG4KZCpv+cKknVkt/JnCYySjAV9+jljovMuienHrTuJqsxqkLJEj3us\r\nubuasZol/4AAc1Z9ZpYzmZgjpdlTGhmnBbE=\r\n=q+hq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.f807e793f.0","@material/theme":"15.0.0-canary.f807e793f.0","@material/animation":"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-indicator_15.0.0-canary.f807e793f.0_1653085274488_0.5334979568351899","host":"s3://npm-registry-packages"}},"15.0.0-canary.9f53d4a8a.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.9f53d4a8a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"2fc560e7c656fa700e9f52dbda1dc310e2b111a3","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.9f53d4a8a.0.tgz","fileCount":38,"integrity":"sha512-Pb/C6xn1L1sdSgAol1+ArxrN7Ac6R8uipRxWABJI+fohtedQExKqxIJm1ECeM38S5MOIPxbEdkB7tlpDQZC0jQ==","signatures":[{"sig":"MEUCIFPOsGeUpXL/+EQssHtYNQ+IbLG7dzzl/ZK+hckDE1BzAiEAwQhSIxEglEHTOENpeVlYEOVx+1ilz06WfCqKxrxwn+8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJii6DBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo6Hg/+NKwDHAs2W9M/f2igH9FVNERSP4ky2G54mKdSwXUFzbXrV9z2\r\nEOclUD6HjRPjMsMfgmXyuONaB6Ci6nbODnL/yUq2Zg8CZRCpFNUylXRXcxve\r\nXbCCcw0nlZT5iEyniFE5q0KzSooxyJnRyl0kKNY+Y1pes02M1QcPVk5jpueY\r\n3io3nUhmsgFcJHe9/w1+vB/5wWOEV7PgYtvbC5LK/d3Pn2OE2ZRoeKnUKqwd\r\nHg3QnLlFf49ReoYa1Hn/ud/s9QkFcJn/1+i6iNIb3yML4NM6lCILUm8v8Lmi\r\nniivNroYgDcklLwInlrWe614Cj4E8zo7/2AvR8MlLE9uVQDosgJNnCkd2Jx0\r\nmZYBLBlLCK3ntxXqz4BK+bid6tf5oDK/2UtpghhgO1cd6bMDtsry7+AgmSl8\r\nr+6Inbv6KypoWy2BijsVng+y+a9nkx8Ryb9irjv0uwd1PF30D+LqejVmuYnt\r\ntmfiw0ozGRYq/ObB0i4CDVZ+PcTRf/513veJh5O+YP+nl7OVogkVo3AixM7p\r\nd80J5tkaM+Q2Z1EuYKWpVCC3proJdmFgTSFS43pW490OC+hQ3FQEjzQ4hes3\r\nmObNs0kx4IupQghLN5Zio00ZOwWT/bLtGwIxz0tuVtmdFKu3WJmxU4E/wtmd\r\nHpk09a5letSCEC1kH0UXFvTYBCP9OgJt5j0=\r\n=MpzC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.9f53d4a8a.0","@material/theme":"15.0.0-canary.9f53d4a8a.0","@material/animation":"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-indicator_15.0.0-canary.9f53d4a8a.0_1653317825544_0.6618321225180526","host":"s3://npm-registry-packages"}},"15.0.0-canary.77cf00e37.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.77cf00e37.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"39d835570114c79d674389f87d28146ac969f2e2","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.77cf00e37.0.tgz","fileCount":38,"integrity":"sha512-TDtPpoEdYtCgzc1kwkwLLksvwaiNSRWE77ydpD5KKTHvgSdmXRhbor0iHGI+rS3CMTy/iuOySneAKIdGIx4+AA==","signatures":[{"sig":"MEUCIHMzZs+ioq4FGCfHvimWeODVsZRFgZwpK3Zk9sQzl0l3AiEA4zdOqPmgie5HZBax0rrB7mBtUnMdnbvXU+TuZDU2BRI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJillK9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrwhRAAmgCl+/YhsUTrSFhFEcQw5xDyoGRLJEdE1vaM7ca5wJrT+x9U\r\ni/zzbY6chj66yl+Z2V2rYS34BWCcC0VjfGHY7cNKfAZoSHxKUe1Az/L0s9OW\r\nRLINtAcDOUrpsweMk1WrfU0SNKXd4jxobuuxFR4I0ZdnVYjfdot0hBi7AiQ5\r\nEoINgp3/hwEMzPGnu+W9pMS7qN/6wH6Tbn4eEcq9B5OT3i32sE5b7XLwj7s9\r\nw3+q7inVYFUn4Krdp4P6mzryYyWvV7Ql+p6Npd4wYQj0u1wL6VRVSo3NiuJn\r\nRUVK/0Io9aeVg0UWfC7wsa79B9DY0tfr+zuewB10tbd4ggXLmkBAPAZ4Q5ij\r\nLRO+ta8/rNJUTqU+7pW1i2Ok67Yb+sm1/9ZITYCRjWZ210Nkg4KNmPD9vPwe\r\n72y/yOJIXYSCkrZLIPs8+Ii8R2gOcjHSs6IpghQGOVGPPxJOq7GAo2QQWrpw\r\nXkg0MijkoV5bPXS/W766Ac8GX7XRhoVLfZMjLyl0izJ108PYxmgOmHCagQHA\r\nqZ+Hns7UofLe6NUkfxmMndsuHOgpDVfALBnUYXLyIDbzSJtz7bBxtG4SKZ7l\r\nbTjnP/xlZXW+EUFzRNxIEPq7bZDcilNpeG9iZWmCldPXepEpQEujajuUe8v9\r\n4KQeqiS0c9E3Yvyb4jDF5SFH1K3mpv4PE+E=\r\n=y/Vu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.77cf00e37.0","@material/theme":"15.0.0-canary.77cf00e37.0","@material/animation":"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-indicator_15.0.0-canary.77cf00e37.0_1654018749529_0.2606145633643435","host":"s3://npm-registry-packages"}},"15.0.0-canary.3c7b844c2.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.3c7b844c2.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"64983b48bf51976e811583788455245a9391933c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.3c7b844c2.0.tgz","fileCount":38,"integrity":"sha512-m5fIG604/rOq0sEk0IbZUfXusHR7CD8tsWWzqxa7zIRKzT/VB26L4/6tFuMjWDYq1q7YVo8ykYhrP3bpYA0cPQ==","signatures":[{"sig":"MEUCIQCxZqHb1M6sZgy87wk75gLtCfmMIBxRAYm0poe8OK2rLQIgcYlJjSwtTHoYzGAMLCLk2gAihEhXClNd0AtYFhd/ktk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJin88oACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqBnQ/+L8uDlbCdqOwKG+E3Q+lqgVrI5fpfbhrAym9zrMcxy54vKoqk\r\n1uuWIOIeieaW0K9Y/84ln8WlOMTh73+aUgrVNz59gain58xjGPZcAbVyUoH+\r\nUDsGcrrturB20WPb5dMA/+dHFRsYewJWaM+6Y7gpebisAsd1PNnVCnUeLpXn\r\nHdEn7Sx1UehDackMWqo0Sy3Bjh4yDLMAwqudeBo+4C45bquT26xYzeJH034e\r\nx8y8z5Lc+JMkU3CrRo1seK8kQ63tVVaxS1Gy7FIg78990qLPGmHzfVAta073\r\n1YlVs4yNcg3KUpLuE8fuLErJ8p9u9yFfQfxppHxotmpyGeusGgvhLvDDuQAC\r\nH1aqcaatxl9czS2GURb4yhpiRnQ7jer9FbaTQCt93R/lDXm0gtgY8LHPJIBU\r\nBe2tvfnOMyhIE78vI8Sm+gPr3kc+c6XgiLdLmFhLvEQJ4yXPOUsE2ZGSB8gf\r\nSCbSxvDE9QIiD5CtJN+vwZ6+TYTzoFXMVoK65TSx7TxhNJNAenLRNkgkuTOv\r\npyYLOSxIT6V4uIu8+hd1izFNKKP8CNlxTzgizWz/4aFGeGkE8A8zENgs2zZB\r\nA4xPCJDtWMBb2wBy1GiMM5XaVV2TExGK083zxOa/JBhMuTG3fHQjBlCEh1+A\r\nBJczTRzLh4l2o6rQ7zL6Roiu78fqoBm+Azo=\r\n=91n3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.3c7b844c2.0","@material/theme":"15.0.0-canary.3c7b844c2.0","@material/animation":"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-indicator_15.0.0-canary.3c7b844c2.0_1654640424464_0.24354482720329385","host":"s3://npm-registry-packages"}},"15.0.0-canary.df47894db.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.df47894db.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"d64e567170e5e7a2848be0c1dd9b049cf16f6a20","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.df47894db.0.tgz","fileCount":38,"integrity":"sha512-I2wr4HjyOsFu7n/CcJ6YgveGPBV9aCDNSKHamqZlgmKHg+DW2LBt0HxTxQKqM61pFSd+I2lvCKi3TOnFmM/bTA==","signatures":[{"sig":"MEUCICXnp9+p9phCsj4dZbek/w9TzjHjPF0ytI9jz+KAzZAkAiEA62ry3jJTstCoSmF/xmWCIPcTOhN6MKaUnocGOkIDAgU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJip271ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpvoA/+K1HhlquM3a3qkaylCpNrgmJ2m2PNp+6V/EOf3WtVDvqv/+oI\r\nPCFybNwWpA1VGJvgoo6gck/xwuOZkM3sADoo+MyZq9oQachbKgcm1j8y71Rb\r\nDY6qSwAIF9sFjiRlmseCpfmT8pj3mVIxDP+eXbygKiKx7qO8a9FKvm8Cbj6C\r\nh0lSKELlZZ0EE89mVUZ1pmh6COlY8643UxgyQkW3t8UxI7TwGBKJ0ly5C6J2\r\nbTP6D/JAT94JlwDtIKZCRaKYdZT5YaeFZg+l8ibhqo/OeNWtrHWJw91plQ0f\r\ng9Wpa/PDlNzJxxL5HWIKcDvcKjkC0zN8/AujuGmxUwuwHzUej3YlmgSE/pbj\r\nMg1SAnmvnfQa1wU9C6HTbcS8Wa8u8V0mhgdYTv/tPS6LBEiKRV/7JsuKVqcI\r\nmckPGbQKKNm60Ir/KUMDE3+r8lZ6saXKnIdX+1wSpJgxsMX4/P+Rgpptt+fB\r\nk5PqEl3D02b5GtV7FSPrPPDTtZ6uLG3fAZuReYfOwQr3U0baFuCzFJXiI6rX\r\n7/M0i5/76tFH30xRNEPDOFSiMIKmdmeVsk9rYtnRmFGnKAi8yQ5naZDSQRrs\r\nZMlXF/wqfB5Fx04B4qugu/GOnHgL5oOuJu0oas8ibTc3VgfgKi8NS9HPiJc4\r\nBl7Rq2Kqc6fVVT4vR5WQAJuel1q0c0VhKQY=\r\n=bcIB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.df47894db.0","@material/theme":"15.0.0-canary.df47894db.0","@material/animation":"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-indicator_15.0.0-canary.df47894db.0_1655140085667_0.6029745806112223","host":"s3://npm-registry-packages"}},"15.0.0-canary.b18a873dc.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.b18a873dc.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"5d35547a793807958d80c3da7121e9e1241f334c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.b18a873dc.0.tgz","fileCount":38,"integrity":"sha512-q+pA3UBrc4y75+GOYsm/qTW8vOem6Ya3ikCnTIHe94Y7ATU8yBM1lojMcP/a4rIqVvyjiHwpfnKll/ezAmc0LQ==","signatures":[{"sig":"MEUCIDZH7NblZIDXq3OFiek/qsZCJcYLoIUUh5DDvEbIMj2DAiEAp+3NohRn9Phi0JI5irfHoQRwGPaPq6KtY8IEOry4aY8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqCrCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqPzRAAlR3tuStzo9M5O4KinkUjTAQeE8RVHD2LGkoayWDIG1m2zvsw\r\njHPCwOSMV24HCfAv9aKr0Ao67UuChWsPktXHpZN61rXz+U6CTLwg8tKJb7gj\r\nVPNeT4pWfXpB3PHcoJIU9RIz589H/6EGu39qmIIoTRbps6Y7ScDqqQVyQ9AQ\r\nJqVShZDhc9XMLu4mbEk8AYVRLieH+hN7KS4ejAn8ax4TRGDP/YKyPv3QdAdc\r\n1zZmwBEw1K7OGv0hzDTIt9n/yYUlGEVHmWr2QZSepATN0rWKttTqfQGd6IO4\r\n/xCqbE1oZX9w0TpZsIUtPkMuaUgfHwPsHqigo3EpIlcDQuLRitolW/EvDgmD\r\nKdkwQLP+hEWrpUVh8jQFsz10X2QZJQy9EpzoWILvikAocewbpb0nv82kwpao\r\n1bAvpRRdOAYocBsssMmzW30AgBNa8z1hR4KDwYN2BE+xjfnLgKMBC1VszPei\r\ng4NH8fN8Nogjeg/vEWHUs39r/vZ8GCAtPXiRAPIpUOErnLCieNtZ0kXwNUwe\r\n2O8c07BNeSRPZcUSGppBQwp06oOWuGfducOBJiLr/Hm78Pru8S3tx5BlU6sy\r\nP3zt2rej5VmZWMUpbFotR5KIlXCk78tHaLperWbEEqMmFWYNLnUPSyn+Sawc\r\nUgvi+CvcbKXZzaz8u3zXm/0DN325czkWCUU=\r\n=3q9W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.b18a873dc.0","@material/theme":"15.0.0-canary.b18a873dc.0","@material/animation":"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-indicator_15.0.0-canary.b18a873dc.0_1655188161863_0.1366165655572109","host":"s3://npm-registry-packages"}},"15.0.0-canary.ba9c29637.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.ba9c29637.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c70d75319b98153fe51055bdd2394c7dc99e06b5","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.ba9c29637.0.tgz","fileCount":38,"integrity":"sha512-YkacbadNcaYnvQ2kl5eWZLIlKXdxL+Yrtshoklj5Qk/o5TJ6g298R0GtrXCsOyLCy8zpuPj5G9w5RXKGgmZsjg==","signatures":[{"sig":"MEUCIQDxLdpEGCSsuH/PvGJBLijiwzDTvTUaPGaZvmnc+yFRjwIgcVkhxOBKzgCQaT5bY+Eef5RRdsYjtHH7jT9h8KRNlX8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqNn9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrzbRAAn6TddYmcFACyoSLbyhw3nnqw1DNpHNbKs41zJ/vm9H61jRZq\r\n9XMtz9oUeVrEFi2mZ8kjchcJLEd/Mfg+fgLgizFKY6D7Kwc67YJAKlqdm9PK\r\n/7ic+tl0hOG4jdrOGLiKVHPYhMYmILq1HLM5iKkQ+Ei3qE/T2wZV/ktdCcB7\r\nzenz7xA3/vgNloVWTzsXqtbdBs1a/PL9JCX7BYuKWw443DAp8WeqrjJ3hsli\r\nTNXCnWHC9392iKKD56euel2eTfritEMl7rPAlGcFqmO4Xq24Q4nuz+VjuXjY\r\ndX9EB3VSBwqPpF5U0vLEuL2tJ7QJFMHm18Q19qg0/1Au9FnEvIpem4ZgJUXZ\r\ni26ZqhhnS5QCTsap7Yp8rv23TMTE+tykubA/mkuscAnAmtmQrgu6ATcF1zOs\r\nalD8LPVQYTmTPAZkPJxc2Ea8Ial7pakNavb5pNxIE67d5khIyo429DuvKB6m\r\nsScLJpetrFkv5ki45UTKcsKLF2dNXKiJ/CRL9FWkNkQISv14j/PoyuxYQrhG\r\nBGGZgIAPtUCxYaILGhEJnrlDtOMmumFiOXxByWWtj6OqXHxXB5kVO/oD0FPp\r\nEdg5nIvUAWn6+g2adczpD896GQqpv+mdPvswmxt6XM95BhUOJXG3UC+xl1Xe\r\n6ySChcKLbZed4RZpMzuEPVC2ZURg8trtJuk=\r\n=pqwK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.ba9c29637.0","@material/theme":"15.0.0-canary.ba9c29637.0","@material/animation":"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-indicator_15.0.0-canary.ba9c29637.0_1655233021118_0.2102270158353472","host":"s3://npm-registry-packages"}},"15.0.0-canary.9bfd12f01.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.9bfd12f01.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e1987b5c4d8aa7019d14a371ddac7880dd93c6be","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.9bfd12f01.0.tgz","fileCount":38,"integrity":"sha512-vIN2TF3KshRPR30JrkpQ42HGPgijIR1yL8tN81S6EYCe2FVv9lHvAp16MT6wCb980dVvz5prm7y2p5dnyeo3yA==","signatures":[{"sig":"MEUCIQCgXI79DCSXxdu0rIpkjF1uUSV3hQ37A3MTAj/HjyLLOwIgXg9uSrfBMxWnwU7oJMIe912ZmIC1UvOlloMrHAHxWok=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJis2vcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmobZw//aHINLT2F8GO8F/jX4t1PyI8ATXqh2P2bCljQDegF9YAxxao2\r\n8xc7sqNEwnaMkmcGUAYewSXJzlwfcBd/6Y2f3jp5TDvDnnrbhR+prBQFVBVt\r\nAoD9TVzpV8hTOXBEoBsKIgEjx5vcfnJPHiZO5iETbdXX4mSPrCf/xghn3yG5\r\nZEG7d+CVLiejgRgukTc4bNhjlXP6sVBILmMkXMmI4/XsE1lHmgtEir0E9G0H\r\nMyhzVMCcRMtOnM+j2BhB8f9PziqTT2XwFAM59JDRmmJmKCo0GnCGsh7CV7pV\r\nJ2z8wXZN2j39pCirPLhBfxF8SIecjkfSjxSN6a8agdmvRLkfmbhCNK5StKUw\r\ny1VYVaNY4iqfendvCY8FApc3NQ0L1cC84J4izHTjTG9koflEjLdqwdI3tsqF\r\nlLAw1LlN7J5HeEvE7RBS8R45kDSTwwEUkHnbRfJFL5r8SkYNla8hqJGNivdW\r\n7QbwHjw4KZPtChuyVcIlreMcCTASgYEwXEzcmMe6b65j/XxUjMp/HV0boTXv\r\nswk8ZrUYXO6INDEY6kxV7dAA+ppkUK20DUG2mjJm73T/dR3dJ6Qk7uk2H7Hn\r\nJqtXdm7QhEhQMxrcY0nXF3KHZs6gaKdXT9+juoEz21UQcEPHsVbmGtycrvoI\r\n7f3VfHHCbCAQ/xNiTxfUw5CkyARccXYzGMo=\r\n=A2/9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.9bfd12f01.0","@material/theme":"15.0.0-canary.9bfd12f01.0","@material/animation":"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-indicator_15.0.0-canary.9bfd12f01.0_1655925724333_0.8802622516253025","host":"s3://npm-registry-packages"}},"15.0.0-canary.764de225d.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.764de225d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"087a4602a6f8c9132a52fffd118accaaffb82859","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.764de225d.0.tgz","fileCount":38,"integrity":"sha512-DWElguaN8T0UI77wTFcX4TYwylYoX6wA4CELZsgtQhs+HSP5kxvBXoF4ABf9QVikWbCRnpXBG2JG1Pd9uQwSPw==","signatures":[{"sig":"MEQCIEOzlSHf4sYkG4LaUW0GmTs9HSbI+YqgXbjKKisuUH1RAiAdWA7vE/SJmOJal0p0clPz6RHj/9v1dN45TOW0RZ8sbg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivH1BACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoH1A//Z51IIKgKeAtNO85OJeFhbdD2WqAh1iWSbNYwbi92ojxGPYF7\r\n2zONWRnKGbbrmCK7DH3o5yZ8gyitMq1qXRvPXMMfbgc+wrFc7kXpoIvW8wqm\r\nXiU66TNbUTWc5PIwKkwBCUnC0wu9dnd+tV3gJyo+Iglwf1t2QN7ahvRFLyUD\r\n1zKZCbNWc/trVGgSO0J5u8Zdh0XPFay9gbMc5xvqfCNJIlxS6KyhQfUn6u8W\r\nYxHTDhkz5ddlghtTcqf37WqRhVLh9Mz3ztlyba2aFGhjJEvgMO4wXRzFYMzL\r\n2kwqFGTw+a2JeGg2OYlQgGU/jeh1GI6SaeG7yFoRlqGreUXPQOpNTLGo6ITQ\r\n+11a4X8JvCFMXp+H63Dcp7HSuqlAHelZCaxJO6JmTAScVimUPv3JRPBf0hCv\r\nqX7Pw8Z8p6Gpeh7XJrg8TxL466GQVGQv6GPSFjxu9npvFaV35yJUlxsu3A7m\r\nxC/mWWtTqoyTMnac5zTdx3VP5ZuLJVBdGP49ZnjMlI4e0c49Zs1U6OLV4EY1\r\nFTFS5W36/Xqe+kmztZCDMRrFZ5ucbkxj+jXPc2ghKqgPapj/q4lkmSrxTtfv\r\n/pkfkZM1jYWoTh9tdeurZ1JZXn5scsMwjD94KpvL/ptX5RkhHXvDPG7Sp7q9\r\nSx5QeNC8Up8Nn6JGml3pHcvLO0HdNyERh5g=\r\n=3bMo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.764de225d.0","@material/theme":"15.0.0-canary.764de225d.0","@material/animation":"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-indicator_15.0.0-canary.764de225d.0_1656520000798_0.17234408223987718","host":"s3://npm-registry-packages"}},"15.0.0-canary.31e517cea.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.31e517cea.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"f17116df0df53e98040a58c72d19b163cc4debd3","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.31e517cea.0.tgz","fileCount":38,"integrity":"sha512-idL3XTYsx2exXrmCP9AJTpRFYtz94V2jBgdSEsdkfZJHy1Qu8C8fLSVbaBiIJyOTVpUkJaSJ3gHW1RSP3i4aOg==","signatures":[{"sig":"MEQCIHWS/IBaMed8wuYD0BGLyX9tG0P6YzdxGOmsCVLuToJZAiAdBv+8/y/s0HiCW/Nw0dBOOEI8dWkDqfJs4EqcQWfP4g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivzyxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmomiw//fsBAmBma+rga4Bwx6In/FhIyVQhm30pWUuzWg9u8kzPyk6iA\r\n8QoruyUmm4LPQZ05JHv9yo3pTLfr/Tvvi/QFsfJjqwKQgrKXl9v8bHeZd7qW\r\nxJJM1s5b73M3k97SHy0pUY+lnpxKmr8BUbPJxB9TWbb6iDTTl6esNYKa5yku\r\n5x0FyhOPgUjU4gXi0FcXDHjNl/sSsIW+mC8H7KvyrQXWg8QrfLJ7W6NilJ7L\r\nNEyZlYkkaFAx7MiEXzLzBmTt2SUmFuJsblxuIeh+6oLQBbNfOyWsP/s0bsD/\r\n4ioi20yzCY/kzvrVPPLFBDTMJ15XEHG5b9wKxyTEGiFGkXac8YKMmz5qdmeY\r\nIRoTZuDiyNVCwmo7zi7rjJnmhXBS4MMRxuFsyUkkk6gapkNUdIjz0qsMhJva\r\n+Aw2gdJ0y0NbAqOmpE6r9A/qBhd11q1qb89QvT1ID84IOBgZywRQ8f8vJDhO\r\nPV9WlAqOMQ7mJ6zp/mlg6AHBkLHRK4aFU9d20/LyvCOLTy11sVw7sjn/TM9b\r\n8XeZuBOFFSCoCUYDknRw6ndbD6rXeEZQf3G2GijYId2Zu+ajLrx22Pd65qA1\r\nxz4IYj80vp9vz3Rrw5XaOAqq3LCEOOo3EF14gc4pPkza9djvfdy0fj6KbSmz\r\nyfRUTZcG4uZUR+PrgkvWkwY9Qeibvn4Qu5s=\r\n=0h+D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.31e517cea.0","@material/theme":"15.0.0-canary.31e517cea.0","@material/animation":"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-indicator_15.0.0-canary.31e517cea.0_1656700081420_0.24597224598339396","host":"s3://npm-registry-packages"}},"15.0.0-canary.9ea4e8e9c.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.9ea4e8e9c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"7f044c096e6c0c78ab230593c4e6055231ee70cd","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.9ea4e8e9c.0.tgz","fileCount":38,"integrity":"sha512-p/T/i0sot3gtXCT/Eh11UIt67/D7PAMemLd5c6ZSUyMMu8M8394J4d054pu+u0bHyKMYAzgUgOBAxGa1T556rw==","signatures":[{"sig":"MEUCIQDc6xNPnQT0nJFY+wIGRit116+C6Zqr8qi2r6AXqRK2ewIgchPLI5lUb5DYk11U3b7Ky3NnBW7zcJ1xRv2SmjLQ9nY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiv3stACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqKGA//fXG692Lw1ijLhUjo1+XGamFX9j2pUQRZju6vyCdGM2e1bH25\r\nBL3P4DD+hssVoEIpE54pJbohy3aeOA/7gyPEx08ZOnOa19n8P9/pCrfcpFcX\r\njsK0qhxsZGT7d1K1MZHGTyRPtxjBz3GLTO8dtgVTEIU2aFEb23PUz1s1av+G\r\nOx25oUpQLFbBDx4mh9L2ZPCzPLxqqoboFZoJRmQTViVzzzXe/kiGE4oKGSLG\r\n7Nt1NnNI6g54AohbJ8xrVTY9J9/KYeglk6FvG9cRhukXZK/xoRvWhHjzIS6o\r\n4knMlgTIhaQretyyJmonQAuTR5mlOSXOChl/mjjLDIEN3ms2DsQKBMpgv1KG\r\ndbBeQ13CVUf2zcCEydmtIEAyDdSuD3WXsM1NyV7bzM2NzLuChaozb26E/JS3\r\nGrhWA6ro94BFyuR68U8R1AMizol7moZJaR1MVuuYU3HBAWQNKV48i6+9cWi0\r\n66bxsJx/VO0n1l8HpTra1Ni+KbXG3yjY9S1maCW5mMOX7wmFiTWzNPCzGAAG\r\ndhJI4HPQt13R/DZvM6XXAVHhw2qDoWmSvRM95LGaBx5AiHT8VPCry3R6CUEh\r\nsm+wvGzThGavk+nAx4Hg1bATunWOHHhySmA9t9ft22RGYCm6F8vHlMYgRKDs\r\nZPVYvtjbWT518yp5X+5uf2aWSULfEgE+4r4=\r\n=pc0+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.9ea4e8e9c.0","@material/theme":"15.0.0-canary.9ea4e8e9c.0","@material/animation":"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-indicator_15.0.0-canary.9ea4e8e9c.0_1656716077021_0.4478954185437558","host":"s3://npm-registry-packages"}},"15.0.0-canary.cd5bafabb.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.cd5bafabb.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0d287c9c88e40650fa725517eeea3ccbc0bdbdb9","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.cd5bafabb.0.tgz","fileCount":38,"integrity":"sha512-1JF2PYu9k4JuiEvdTcEX0qchE/zxWYSZ+VvZF0hvXrCA+lIu3a826/TsFfEKe3KXgVqMUVAIw6kYIq8cfCUO6A==","signatures":[{"sig":"MEUCIH0B/lLBhNp5210BrYhnDDghHmSUle1KaZQY5kvPe2VJAiEAu2Nfu6XfLqEeO+fuZLR91ueZdemcistQZJ2CPgDq4AI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixcw4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqjgg/+KtHDxAg09E1C7Cbk6XmK9IvXPznY4ibvk8WytztnMO+jVbh9\r\nledgGVcicKNgVBYYoTynuJS7bEniCM/sdxN09n9Z3l4y4/vRFvfSW+UOQMtU\r\nl76BabwyoPGrBx1Xp4J3vTWoed9lb/4pIGbJVuUi2wG1oY71KRq2iJdHPcYD\r\nnlI0NKCnZGdfFbr10f9eto0Ql6rzI5kyzVeTWmLKcKe3+GK9TWc0/uyQFBhO\r\nYfCRPVkdsXW6rUPuApJmCuvdtXWe/kBx0UaMg3kIO25LMyKVICDd4ZjJh1bs\r\nXQqvbL8U4ysyQ9kADLeQS/Uwz7Ppj/Ai3Yn1NuYnkB/4l0R0G5ZgDWloutW4\r\nN9REuce/lV8iYUWrQtlKZ8rxwmohZs2lNv5ies9IcATNb9euuYfWq2QLIIwi\r\nLzWrQvpvFpijNedgZe7l+2D1TbrRXjlrxa+n1OvyAZoJItRub0zhRoYozbdA\r\nRfOsi3lX4iSV2tA1mC98gBEWZM5FAzknZFK7YMtWFyMOtbaMwNvEC+kZv4qV\r\nVeqWOTEAKggfN3FtpJdSA0M60XFY1M2t2W7Sa7Ky0DbgEJKV7t8Wk9KpwXKD\r\nwfIYaLgkxsuJ2FqFZNsE1x8QDN1VxTKZodRCSBNvv84xNCdl3i7xihuOrOzJ\r\nJS1iKPMQMuluQteCFX+yvL2ZGE/n1Tha80s=\r\n=iNfe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.cd5bafabb.0","@material/theme":"15.0.0-canary.cd5bafabb.0","@material/animation":"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-indicator_15.0.0-canary.cd5bafabb.0_1657130040478_0.3711879714347659","host":"s3://npm-registry-packages"}},"15.0.0-canary.a02fe49d3.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.a02fe49d3.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"874e475d16ea5fcbdc5349b95d947982812e3b4c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.a02fe49d3.0.tgz","fileCount":38,"integrity":"sha512-oWLJTPd8xF7ZAp6KKYBgA1dkrGPkfiZ7vQ3zro+KxGPn0rdqmf8BradWbYfXhUw/qnf07i8yejj8ZVpVvDGEgw==","signatures":[{"sig":"MEUCIQCuNpEs7AMcjgdNGsBeAGrhQTCFbqsVZ8KK6XgtIURsQgIgE82bS7JUy7s2Geye3TSPfFFkpw7oaki/CxeXN2uZJ+A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixdmBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrRlBAAlS8tcje82bcVpYor8xK34P5rlDTQXEOa7N2o3nhZaCinJGGZ\r\nmq6LRwRovtWaCshkktTmFIXQvyxJvKtF0LbxJ0JrYv1reQ1/waTTqlybJH0x\r\ny8Kvryc3o91AtC3ozZujIE8Dfg97O70hhwAAOD+qdgrgMst7eakF1pmYGM7z\r\nIOvZgk0VHg/+1TrEAIaBc33OZKjTztKmU4SilGEMkhpjgin/hEoqm9BfDVve\r\nM/dIN8uB2mxUeT2e4/U6cYdt6izP3BYPArT4M2uGjV8rTiNexB4iEPnouRRa\r\nEHfKS4AJQbxlzGPEAngla0llNDvheubqBjvjfychghvEqTjP+Ifc/l/QK5Aj\r\noRRZl1uzY1uPgKR3BohwwJK3vY4314vw0arHILqGQ50VTiIaF/Eso4txXcOD\r\nkXsKdkMOySaixf5UWz2ONcxnu849jzafuy4Ejvei81ktc0kJDDWz92IWdOWB\r\nM1ifQOzBrYPktAKvlJzimZxOt5LoOTx0sAWccbe7PIsD8DZvYRCyPCF0kb2f\r\nMAs7g2VlTsADFallF34Q1Ub9dS/T28YQouFgDrZugm1Xmp1sZgcJNHAigPfT\r\ngikXX0INWchD93P4k3Bg35S2FhpX/irtjpX6GWxREuiVElSuTkkpKw++WbTl\r\naMLK+Wzcd8vXKRBp+d6TbzsYuZDoueGc2pI=\r\n=AThq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.a02fe49d3.0","@material/theme":"15.0.0-canary.a02fe49d3.0","@material/animation":"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-indicator_15.0.0-canary.a02fe49d3.0_1657133441540_0.265024138298094","host":"s3://npm-registry-packages"}},"15.0.0-canary.826a3d8be.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.826a3d8be.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"dc2c69331783880e1aeaf63087482158ddbaac0f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.826a3d8be.0.tgz","fileCount":38,"integrity":"sha512-eHTBUvsL5+dJ6Oj+wZSi5igmozhqDme1kGEk/dpjqhCb+A4E2jp98bmJWf+4GKALCwN8eDvoVbA+7TkRPZTxyw==","signatures":[{"sig":"MEUCIQCqMYXfYnbSwIf9y/fI4GWmSYDpwVG+ZqqLrOQrwX+lJgIgQrfgsNt3Tpd7Z0efyIl/arj+IY4DtY0Ew/iXsiFkw30=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixeLgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr7NQ//eZNBtMgsGBQJTgy7lAkiThwFa/ZXw+vj7RqUutjsbl7Opkqt\r\nL+lV+mZxpUU9O0dnz8Ri8WcVqBeKc2fo7oe6tnuVOU1Xul+X3irsdpjKc8/m\r\nrubbdxRh0oQtxNVFhOmXbBA8YYU+cBQcpkggzVuwBfQWFqvloGfk4DNT5nHk\r\nXT0t78fDXMnK3LaVD9GNnXwWvWJbGSl5pORNg88sPpcIdxTgAAoPRTOyCwd2\r\nmgLkd3za9EuXfSKfrMvPMNfkiCaS6QBCKCx+3l9oIGcHPZabC56w89UPvlYN\r\nlYjTOlfEzHdmHq7mQAach17SIV0xAqCBPrzAzQj/YhKQOuZ95ZA02b8xmdnh\r\nD0ZrQT2Mcy0yBTVDaWlmtMjBsGVTEUesWbFLfiEvFEEZ4eX788dpQIVE9Sq9\r\n16k1dLmvjhaSmqelMpi67F+ZWhAUkhHIy0Hqa1Fe0+rrG7U2GlXmRtQKza9+\r\n7oDwCsQwFxOomcrZvuzvgIudlNcVHEhrPdzPSZnT7D4UAVYl0eKorN5dSNvE\r\nlP9qitNIxWdsCQ8JT6GNdeEm0rbbKz1XODFtXxtvQNqsaSB1MFXgf4yyWSNo\r\nm8JiX2I2ieAuGAyPQR3r62njuXyN8a3pmGGlmMOOcgYINXA6SIyeALX+vxIG\r\nU02US9ueHuPacJ8xO25zJu1w5lyycbXo1Oc=\r\n=WXUu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.826a3d8be.0","@material/theme":"15.0.0-canary.826a3d8be.0","@material/animation":"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-indicator_15.0.0-canary.826a3d8be.0_1657135839949_0.7356529639485025","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef276aa93.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.ef276aa93.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"664d365e695d9e9f19d4f7588298e0b3f267a4a5","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.ef276aa93.0.tgz","fileCount":38,"integrity":"sha512-rzFHwDbdUVGGmhRoneNsR99cjWxbcPtjud24GkIdNQ4SQmOArZnG1TI+kXD5Mq4Th8H7G5YPEDkeCMZT9NHL+w==","signatures":[{"sig":"MEUCIQCEMb3sqcS1Rr/5sMTEnzH2VGB9cmLt2ccG6aMDQZjNzAIgbXS3DiAaHHKTeC2TRqq+wz1q01rZ9df3XHB/YuBAxMY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixxGXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp2/w//QwXRMGOF35WTK/hdm5R9G8E8WXgosRD6BczQ/Vnsx8SdCJAo\r\nA5XWoVZPVRxxGKLew+BaPnKGJfFs7coI2DGEUukyb1ix3pKtN/DNRaeeBxr3\r\nho4K0yDSVsGCyS9uWqR9jSLkeVETZE04DFNO+eh7ypsQH8ucPV5XRtuMjbMr\r\n5WwCtIWSaIOgeWAQ8AKPIVOFS7i3F8z/p/ohNQgZkOw3zs3fZJN7P25+PoaR\r\ntyDvPZ+B21CmTSDGWkg7tvLHNyvujRUv3DVzfMU8gw7e7J3wN74EmEU63hbG\r\n9yOoBTG6iVNY7hcLd8s4z+Y+aqtNRHaFt0ahl937mFg0flyzdWxZUpKgpLvc\r\n9mbheGbU/yChyMTAk8Mr4F4ZElRy2jITWDnpoe0Dmk7xuuWAD6ZQI+6GBLxS\r\nY2IDTNADCLSYyA+aoVZbWUwLGUSPl3lJc2WK2uDe0zbFqKjLTVukKqs3MLqM\r\nsbX8hf5ZEihE8TUA+e5VGr+F3CYp2Ir/GltbFU3GzE28E7DLf1yzKlcsBmuM\r\n53MieHnyd9pfbz/5JID7Uipd2CUz/iznGi0jB6j+JMVyvQeaNSC4wf66nkSP\r\nPJiRDh9TK5GQ+kE97yE8RH8L1kO/vl8ezJ1mcuAdhG+uJfqJE/bP/f3PQ0rj\r\nPHFcJJsoh8iNeS+0+hi3vWilyJO6OHz8EgM=\r\n=9t5t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.ef276aa93.0","@material/theme":"15.0.0-canary.ef276aa93.0","@material/animation":"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-indicator_15.0.0-canary.ef276aa93.0_1657213335190_0.36461858183033136","host":"s3://npm-registry-packages"}},"15.0.0-canary.59cf61d6b.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.59cf61d6b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"6da6d4e5734200ac0f649797a192ce12992f3e8f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.59cf61d6b.0.tgz","fileCount":38,"integrity":"sha512-qvHAmj97a8nzRJRq4gcphzvId/CVXqah4A+H8IFQz3/CHuGukfp8e8AX4TIAbEg1pWphNMDKAlKrbxGe79+eYw==","signatures":[{"sig":"MEYCIQC1og26kly8g5ZVOrAPy+zYu9SSYMLakZu4+029QMQSXAIhAOcjr8yyP0ehLRKF/NlH47YtxrnjwpkvTTot95JH0Gay","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixxhVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoxIBAAi5x/NCD/UzzhwU7aZrgaV/Rbcayr73zFjHXbuBns2koqf33u\r\nMx7gvc195YW3OjoAn7Vdxk36kN+XxdmvHy9raCNyypNMlM9pDGHkcFezM0Op\r\nPk/hfrJIJSOF/onsTLXHpHME9mkOge+SS1HF9Ko7IsZevybNlTuqNXdnCCTj\r\n137LQ1owl5rAWNXXbcTUQncsbDGKBBVWXBeSLKTEM5WQf9AJqc8zcGxCJptH\r\n8s800J30ceh8PFg+F251i/C5Rrq76BZpdSk9P1vmSzoqosYekksF9MEZp/rU\r\nHimGH23Nv9H9CkUmfieqBEnBjU68w9i3RUA7gun+aPK7BpYP4J3zXa7elQZ+\r\nedllaGxjFtczaluZIn1NsaYD76TErIY9Z6nLOELS4EKI2yC9AZjFsYgvldp+\r\nu8oCeK41rErIcHbTocrUUm5+AV1IQUIGgxKOw46YExl1SVJVttHJEbgsL18c\r\ns8bCK+bCgQuuMXWNxpYJbr8eGw4iLoKj7axjw37EPiW5/dAkWJGur2aeN0pY\r\nSj/rXtuscdKVEMnP2mrFCm/SWqUb2/p2Pg31wEwC/mfJrNI9u/TEuGTf0/9/\r\ntV7ZRGHMPRE5eaYlmvB0yERk47eT3RnJcOuSr7H1UE8s2Re4VzjcPgsrpLTb\r\nvNFlkjhDgvApAxv8VtGs9zLLmYfqFFjNgEk=\r\n=PvRS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.59cf61d6b.0","@material/theme":"15.0.0-canary.59cf61d6b.0","@material/animation":"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-indicator_15.0.0-canary.59cf61d6b.0_1657215061416_0.585869011258134","host":"s3://npm-registry-packages"}},"15.0.0-canary.8647092f7.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.8647092f7.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"80c3eeca344eaa5d1b0b014b4ffa7a97c503c4cf","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.8647092f7.0.tgz","fileCount":38,"integrity":"sha512-nbL6dLWt/jGeNQ9Noa61P7u51/ttl363fiNo3IJ85mNH23l7wnYA8Gn4RprFMBa6GZXbsh8rt6BI773iYLF4sg==","signatures":[{"sig":"MEYCIQDG3QpX6EjiQJKELhV3FJL3G2grpGaRTcEBbuQ7EvfhzgIhAOgLOzmvIyJulv7cc1ZyBiPhjKBfsSc4G/ZHGGhUt/Hr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJix0Q4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoMuA//Rq2bc0lCkX6c7w9fQnwiMdp8LSoTdVlUvWYExbu68Wri6b0X\r\ne71PlBWzXrJl40leXEFKwlD2O4az75+/G7BUNeGZpHZ231GgcFlCtGfpfVR0\r\nLdNL5pNsNA3Ppc6x1cCWydcguZcZB55QhnA/ms+qDJJjEXZ9m2a4gx7gednx\r\nCHt94l/us1vr8IjZknyNbj4i1mUUpXIX4q5jJE/CSylcZ/5ZD/+yj69zBuTX\r\nqSIGR2Q7AFxESkBBVaw+KLFIMqvKSQZFF8hLMT9zoXrPT2sX8u1bx+EUjF2Y\r\nQXADBkzJs+qkTbSENnifm6Ml+RWH84qQnnaurZeLUn9yHvYeWIO72v5wD3m5\r\nhZAvzLIZ4k9shOMzJuI/Tj9cBs0DGrsWg2KJbdj7jGoLhEflofw8iht4LkKJ\r\n1KQingLt26tmV7+9zGAE4xB3+mf65ZGb/K/F7B1vLUD6w9p+D7DUJ71wCJ8d\r\nlc161C/UkVbhzD0rU7Qj4pO1lCsmSBUpcE+8WITPp16dR1uiybPb6HnvQay4\r\nyag2BlQ6D5cyQ3w0z7J7fpYoqplrWaeI4HxsIjW1CUcb8P+RANZRk70T5kot\r\nSJpJZIvd77dFFjvgdyejoVr7AErukHrn6jG6byi2s87H10BvsceHcmdjia3v\r\nuZ1gVRfSpWp9qfjO6bz/Quzm0aQ1qShA02g=\r\n=dxUw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.8647092f7.0","@material/theme":"15.0.0-canary.8647092f7.0","@material/animation":"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-indicator_15.0.0-canary.8647092f7.0_1657226296451_0.8637353999453607","host":"s3://npm-registry-packages"}},"15.0.0-canary.02ecd4d85.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.02ecd4d85.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"8949cdb5457454067a7a06bb82637d982517c354","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.02ecd4d85.0.tgz","fileCount":38,"integrity":"sha512-PRqWwwInLo7nYjKH3wk2DX4/lXLW5mqXmu6y+e1vZMk7GzmcjX0ek01gbF2voBpUi1TO1p+qYxQPBez0qgVElg==","signatures":[{"sig":"MEYCIQDY8S18G9qe3AeHhFNQukAEP51sTv52yeKOPVR/H0E+agIhAL0WIfZh4OlkWw9CTJD8kXIRkMylvSD8cLVek+O16edx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizFIXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoFZQ//czt/UsA19BnOoZUM08NWTonzie5E6qjZ1PRz/ks9ArxjGHSw\r\nhQB/f8sHgKV/KRQ9bnB8GxDyJFhPwAfytBYwWb12FAjpzs5Ud+cyGeJUU4gI\r\nhpSc7WNOSAufGmzvwGgTe5efAF6vXDvJiMlXycVRqHvau/L2TanGt8g2EYkU\r\nvr6/9gSEBMtFBerTQ/dx0A3PHyuJG5bBUSojflb741zWvQBcz42bFJCETAqp\r\nyM/vMMil1kZ78oFlcrjxQ3L4iyc2Sa1t1qsj2gh40GTCEwpRpOUOKO6yY6Uo\r\nr3usvzju3lJ4wLXRglwzHd0QnTnJpgFY2fBLWi+HpsSOaOCb+XphZgxJr+bF\r\nzc3woo83jrjJZYYsM69KFaM0aBIe9bB9MrxXNF5fCz8cHt4WHkCM8hedZSj/\r\nlopfdFEt4NNlrKFrar4hwD10RLAFAYndGiu9omtd/icRcYHiIEepWA+f417S\r\nSP9dH6tZqZLnx3XH3Mrghf9YUXHzZquCJU9DG5+Jszw3OA/m74Bfp40pwLGI\r\nufLhtCqoPk8o54TZXR0wx8aXxg3aCtJD3nMuNFNi3866jYRxyj77xjcIhTEj\r\njS2Sekb7vYGnIC585DHEuJF7WVMqUSvB1TkRaRSf83lUcLS1q0x6xA/5yOz+\r\n/94mf3hYzdF/m3lHQF1qHBUqiGUflnjz9VI=\r\n=7+wi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.02ecd4d85.0","@material/theme":"15.0.0-canary.02ecd4d85.0","@material/animation":"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-indicator_15.0.0-canary.02ecd4d85.0_1657557526917_0.8675605623819043","host":"s3://npm-registry-packages"}},"15.0.0-canary.63d3a146e.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.63d3a146e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"45fd62b5feb48210d17dc105ff26060d3e5feb59","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.63d3a146e.0.tgz","fileCount":38,"integrity":"sha512-uMmK51+hdiZorx2XLqFAelzSvxYPk1J+RemXO3+FZ/SjpNQAY6/ncdJPwKn2DzVhoFjOEX0+++X/SYzT84R8oQ==","signatures":[{"sig":"MEUCIB54KuQrn0hcxdjpNWBlQphiuIZCgiBwRLKX+0UCuYEbAiEAsaJRLgbbrj+35au9PCho78RL1+YUNhNoBBcEJf0ezok=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizVzHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqgQA/9H8o3llM7UNoKc8mMEg3aVczp+y7xHzTZTx0JUVGoQIxCgZ9E\r\nqXnUilWY0TzENG7CtQEKAQ9SdVdrf8+VZY2+U1dgsH58plI2aPaZfQ3sprsq\r\nnbyVN5mMjvRynBCsBLW0bMirjvILbdlDSWwreFK/T2iafaDDCX90DNYdZJmj\r\njTszaUeUcEFCaxXTFmDTGy9RXOv7d6mh3FP1Q6/t0+VeI+FbMNU6a/qcPUk1\r\nAs7hs5Ot/mNVV/Su0KX0dnV3IL9sPR7OUVEBMDEsxlNj/kQ5z3ioQc4n53Bx\r\ntJ/ZM3/mwg2vFDxLoK70baA7XGUHXuclT07pxzuWOfPJTu04sko0w4XIDTn4\r\ntq+Kf6wIEcnqbhtv1mP7M9rraOxSuTcXaMdvNpc9L8/tXSomL88EIE2n2VeC\r\noqyfAz5eVKSVtZygMqmXBCWGvB5JLNiPeLWNH4J7uP2pslEJgTt64yIPFpQm\r\ncXWYKo4nH3YfE6blXbls9M+yLM2D1o7p2IkLclwY5FcHz5+VQdoPToEEG6Uk\r\na1MxV9hot5eVQmk/3N9HdiwMSMtoyNqpxhPDgdQnFpHsHasTrkmn+JNkg5XR\r\nAM3SR2BqMTMIguKykLKzMVOBa2sdPn0o4QD0JFxOwclSy26JLhLFdvRVLCy+\r\nrhS0y8npNWM8zXmgX4PWMEuc2fqskBcA3FI=\r\n=Lumm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.63d3a146e.0","@material/theme":"15.0.0-canary.63d3a146e.0","@material/animation":"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-indicator_15.0.0-canary.63d3a146e.0_1657625798949_0.5386679022830609","host":"s3://npm-registry-packages"}},"15.0.0-canary.88db01990.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.88db01990.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"af0b4ffb77bb6197723586b420e9bb5d9ba4c212","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.88db01990.0.tgz","fileCount":38,"integrity":"sha512-s2RkOR9Q3A8dDqLrwdMW0CIcS+29foN0nDZGGkEPi3gjaMJ6149Q0Ezm3JEm6L+nRDIo3xaLDy0O169FnzKu1g==","signatures":[{"sig":"MEUCIGg41N5vLh5MI6E9TzOaM8veaFTA22x2GVAsMas9txtmAiEA2Fam2C8zPw7ryy8qeloMFLicE7eBbJvd/IJjTEpUXdU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizV17ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrMbhAAilLQpr4/LgGc3Yyu/zPLPKEqzCSF74z/PQJEuPR4tNmIvGUW\r\n9wu+tjTzF4LAKzze7YGE704/+IM/JVlCSNn8hZEY4fEnF75Y07VoAv6+K3ap\r\n0MQPf/KJLsQDNd9++a+689GXoeOBh4gU/oqbW0qUcIatxTAP5qA6Xd6YdYyv\r\nbhki8KFFZx0vfd1lJpTcmzfRLlT65BN3z5VBkGTL4v1vu24jRnmTCFe+L9fz\r\n4PMfE4/zOsSEyfU2Zat74w30c2+lnv0n6IUdw6kTG8JzJ0WiCuate7u8Uupd\r\ngs2EOoUKfo5uRwb83ACotFxAAh/yq3uzMcKNsABQVj8gpODJfAvX1Q0g2bys\r\nUwscyj40U+nydvc7CPKd4wZuGxuNPNe7ekpG6f0H6MNcAfRQuFyZrXH4zYtr\r\n5LqO43X8NNKeDrRttFHNiBNLlT0g/MPx9VdP3ZXryj042AhM5HvYKW+WurNq\r\nxzWNvTPuoIU/dkK0QohtClL+CHei1QqY7yauV7l2BsgpwyEO/xjpzGrthXur\r\neIQ59ca1ajKds3h9rE3jVupJfgQ/LlWrvpVU97Xcst9WTX0Yau80fTS1YZ+m\r\nAZ9c63ejP0lIhQ/DtMgoXk5oEcEsX0gUCy/j/0Oh96Ll2o0UFrBOt1KxQVsv\r\nVwr0U91aKkdkHhODT77+IeW8xZdTU7Z1uEQ=\r\n=tBGJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.88db01990.0","@material/theme":"15.0.0-canary.88db01990.0","@material/animation":"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-indicator_15.0.0-canary.88db01990.0_1657625979519_0.07182714248414901","host":"s3://npm-registry-packages"}},"15.0.0-canary.6432d8fd7.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.6432d8fd7.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0595782116142a4044e40c1d10951c96109b1137","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.6432d8fd7.0.tgz","fileCount":38,"integrity":"sha512-F99iJz1labUjhRwvz1jBYiefwCn7d/giPGN1B+VvyHepUYI3u2MKFNzIOO0BqoU4R/lDk0+YEHQEfI7f/m1BOQ==","signatures":[{"sig":"MEQCHwXzDJKHqybMrzXjB4/v4wdMZZF7+stDwVjtkHdSw1YCIQDGmJVARk8ZkC0t+GFBD/LPtsxDBHrx/g8yO3BETj2LPQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiz8WeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq2IxAAiAb3IApsSUmRuwcg6l9kCCWUr1JPU4IKoIO11QFxRyro7+nR\r\nupArMi4fRRkvo71DuUrWzrhyf9YiTg75w/JtYJyosjUa8yTDysaG10wPMg6M\r\nnRArdwG/Jv3LX434pSZgh5M5JYY2l1skea6DaA7HILBkO42mDD5vLvGn/QuB\r\ntf5y/Jiy84XsSAlEw41tGtI1oroWgm/7plBG2cn/u0p4yc6FssNf/JdC+m5x\r\no2hokRjbY/zofJHub7i0NTx8vEF60MAAtBUcDnTfz3wJ8QyqzrenY7p13PTH\r\nlRfch1pRIsiRGc8c9q7tYULvb9tf2bOeeUik70vjYv4y8V3kLbRwqgbsDXyw\r\nf1UHikmZPqJqoN6+rhZgb8gAfDqlz/pMV4OTcXqUm8ck4XUvbO3o77aWSDxH\r\nsXF2RdySG3gc4i6nAedKB8SF47x2jrUzbXbaI8gADUI3dZwFUUlFS1z6PyDK\r\niKDI2Jm80wMDMDhLb3DCdd1xGVaDhxTl+YV8y+tkDb1EEg7mfumgIQMOxgpV\r\nPC4STTaRSZ1rY20PBKAiPG1+Mw9VNmlgo5dT8BAbrEQ+pAhq2S/oCYmfhwSO\r\nEjAO+GCtXnJYs2VJicngj7ANgD10h6uNw/FYT3ftf0Va2+cymr0wp9CGmrkk\r\nvEWU02/GboC57OzpdovkBrV7YR296qkHE14=\r\n=nJXa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.6432d8fd7.0","@material/theme":"15.0.0-canary.6432d8fd7.0","@material/animation":"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-indicator_15.0.0-canary.6432d8fd7.0_1657783710574_0.14717899211244867","host":"s3://npm-registry-packages"}},"15.0.0-canary.085f9b25c.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.085f9b25c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"1445582d15022ec4a675439d43e6140ed8abdd0e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.085f9b25c.0.tgz","fileCount":38,"integrity":"sha512-HtEQf/ajd4FcNvj9T6+F/jGuC7lwq0PWomF7qpbY/10eHkS6GLr6zWWFT5rewxGG3CeTTvMr60upt8uTydyEUA==","signatures":[{"sig":"MEQCIBOg4wPMxch+zRYTP26aaS1Wq5/YKQg0jtCCokQB+a1CAiBB0lcmQXLrLIwRciX038xK0EIcbkhaaGBjILf28Hi5Iw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0EWbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpm7BAAjE1uvFzPAuIoiCd7J1pA+jUitqK9Nzt4pBwBfqqjv/f8UHnd\r\nMDdLxExwwxTdOCMebhhigzO8MpqSxlBiK+lwKlRJlpQt4hspwAzLd9Lzy+WG\r\nXHqqvIEcsHsNeBnn5u+M8hYBmRWqLzQmLkQwd77Q/KDMPq0WfwIjotSCP6nP\r\nP/MceOslywnYB9CDN5cdSokpmRUfQT/MJj3txgbRm4f1Z654bbyiDVDueDuX\r\niodVTp0O4udUcXrb5SZIdlbCNCvLk4pBF3wpM+0STXaPx+7pmmL8bLKtvtWV\r\nYr6m5MppHb9Ns++9vZpiF1Q6sIx96OOFHt2dxo8xMAFiHRTKbr89spgWCpGk\r\nbHj7liDiOkvP4tWT6r0MNm3yK5Xe00gUX4WNeOfWvLVsKOzqHEBh4aGiAyJA\r\nKhyO8LNuZAoqzZvr1CTKQjCKBcmyh+8JEUx8QBHbF6PdsfE9intk2ArHBJNU\r\nKU2W2RDsCpgpI/owdF5G+EIwHNGK+1t947QPx1wU68OqK473qydSecewlRJT\r\ntcAucz4csuz6jilsdF5n/0O9Bfg+uaYrPYYZmuhG1ToKC3YMtAtRzySojCGD\r\naetvyE9hKSrT4lWdAZflMMo8VsjZjZwKaaf1Hp7h6mtrtADkCsZup8s6gWv3\r\nZUrvbs2ey2JMANfhIm/m3Tx2mecDuiDC+dY=\r\n=wCSE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.085f9b25c.0","@material/theme":"15.0.0-canary.085f9b25c.0","@material/animation":"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-indicator_15.0.0-canary.085f9b25c.0_1657816475169_0.45748512333241975","host":"s3://npm-registry-packages"}},"15.0.0-canary.39f9424b3.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.39f9424b3.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"065cac78b5b33cfdfab5df57d449c3d1e87c1d54","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.39f9424b3.0.tgz","fileCount":38,"integrity":"sha512-2gqfUb6HEEnKagLvVIGlcK+DMei1TUoFXbkgDhd48uQIB55J8U1fZf3yMlYq9rSEGP/88mFGSrW+MSd/IR0xgQ==","signatures":[{"sig":"MEYCIQD1y1CMRfntHzIrQBs1GRVOHB5AvjNuGMIvBJCsoc4dbwIhAOHV0ayg1rJJIFr2AOdCkQswrIMRew7hRs8VmvKtG+eO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0Ey0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo7GQ//dl8TSs7Lzc3DpQeoED0cjQFMZPUpMZnHdun8qMVtHQLs8Lw5\r\nMlv5hg68KhA63OQ+aXRmG8kc175Yqst4KUKPWehxrafNcmUwAAuyLut0mqYN\r\nLpEfw8u5fXf11SbPjVbzroGljmFuT+j/AV2KY+OtZ1x5PMCHHDUQHXQ/KUDV\r\n4zqGf0jQbe83Ak2BcQkRE+4iErMCskG1L9NvbbofGu8JupV5Gv+SBmXCjr//\r\npaWkjVS7FSYGZfMPlhyipgYXA9ustIjRJ0zkyA/Av7a/k6Gvde07YBTKKHoa\r\nnzs3Lh5HSVoWBFN2xQBwIVGoV13PdWeojyp/V6lEVv3Y6I0d8nkdJp7/HV2d\r\n/cbuMWXwaOCp/7sOU3fsWHaWPQkd2e3IR9sWbrzI6TCOyGfmO4Se7IHKS78b\r\nW0OeV4Sdm59XQZtNeZKroTv1UnvsqqUHCjT0mdnIXkbp8ZcvceLcfs12tPHr\r\nkmRh/EXo6b9ajOeqRG0LqOrBmslhyS3TTaQp4mEyBy/wf3lh1o8BollyHoa9\r\nX9BRZ1it2gyg6ee6h8yLjVEnlVc/rXoAhnDGVxnR7qigyiZvYIMDB+Mv5iVq\r\n/Zg5q1Pk4tg6wHWZnups0yuOHlS6Yh9cHj2RfQaZV8ho9+bInDpB8d4EsspW\r\ngtdccZxm5F1/YxGq8J09GTiJ9PISordFWm4=\r\n=k6rz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.39f9424b3.0","@material/theme":"15.0.0-canary.39f9424b3.0","@material/animation":"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-indicator_15.0.0-canary.39f9424b3.0_1657818292081_0.9383311483411196","host":"s3://npm-registry-packages"}},"15.0.0-canary.ae9fce587.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.ae9fce587.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"203c1a89c7a0a93ed5820792342d45d3d4ef5e65","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.ae9fce587.0.tgz","fileCount":38,"integrity":"sha512-3sIAY4VMKmS5tIWkvP/nMkcCUiWwbg5g2JfIY85LVQA5F2Y0QpmpavlAzF9X9pH48yjcjYCc2M0e9IQrzWF9Dg==","signatures":[{"sig":"MEUCIQDu2VwY6hRudxl5XpJb0PWavZ/wDX+/mpuqRJSt8nhs+gIgSFt3chuyu0Uv94WYW8QH3PNys3Hw1Ya4q1hoYzPg6aQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0FtzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmppmA//QnPGWlVjKWAJCLxv74g5gHUrOXmnI/dj/YJZNrCHT7LhqO2+\r\nHnebZO53DYTiA5IFXaIs4og1TTNTycNKXnxV5Ua7/jsAIQYukhiPKyLkZgUz\r\nIbohpd7aFevgi5kJt0W7Awe+FYAtyxqI9eZH4aO1rARpllTLTxfOxUOTxEX6\r\nnRv981duwhSwatDHNRjdwV5UjGWJEyo0JydBOsOKYHlw1SgZObETa6jcI4T5\r\nmpzfTq1IWom/JIz9SiLTnmCFESqS0Un4ffX1AZzIrcj4Ghq6KiZJL4d/tIYI\r\naNvtY2/nFaZHvT4/byoEbLnSxK2AGGF6QLYC+Z8RJd2oLwcn9ltWR2xD7G6s\r\nFLM6WCnygn55KI8OmGTLMcAiA9gm59yCQn4zADQhF8nayCQCYxOI/kpwDLyU\r\nS5yLXEjqnTmhxok7kabVeVmUITPSEA7XBnMvSfgq7NO0VNtyQ17lCJrEoHFP\r\nyOqouBp5+6UikrMpNUIkxGzpRr4KSiB+xx8csK7XH0fOMziaJyut33G62EeZ\r\nzw7a33xDPR/ZksEnDeFgmCezX8Sm24pTU2AK5AuNb1cMO0fTN3nHbE/5AqJF\r\nR85+zHFeWenvpweJmWttXXQ5TM5PYYjNZzYy35MyEZGHxfpGt9oAQdDWI7at\r\nNn1n8dBKYH4yDT2KRc4XEbCj3hIsKeteLt8=\r\n=csWb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.ae9fce587.0","@material/theme":"15.0.0-canary.ae9fce587.0","@material/animation":"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-indicator_15.0.0-canary.ae9fce587.0_1657822067658_0.40172779239675815","host":"s3://npm-registry-packages"}},"15.0.0-canary.1ebddc343.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.1ebddc343.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"b5109c2e933748614683723b7cd888886771dfd4","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.1ebddc343.0.tgz","fileCount":38,"integrity":"sha512-AAdCq/4DnLMyJQbTJ37I4xwJ7W0LcAZrCGY30gig449097lXNO4O2elAhwrUoVBIMC33Z6BltbPkXTFzRT/k5Q==","signatures":[{"sig":"MEUCIFehMFqUawCcJNW8j4BaoR+rIAMX3Vyy8xwXeTjyseuGAiEA7kkGTF/SajxdDFhr+KLfhPhbHgtEFag1LsKU37XmSwM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0Sn7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoEpw/9GIaGa9mjW7uLZvJeGXgpw0ukonSuqp1cY4A0bmNLd6DSErVr\r\nM4Wr/GPz1H3HZv6nS6S1S9Z3QZATdhQxFSVAfxpbU22RVy9R/LqrVHbqEta4\r\nHbLN90pLDQBWKKCWfy9lsN3TvQ1qHQKD/xYOVa93FbmdF62s2+OwGhOgxNfi\r\nYwW8YAC1hswUpxq7U7XHzoZzwQvS+z3dQauJkdBmpdb3SCbMKmcfZj41nTlx\r\nrYp/u8hMPRIIt4FDUD6jyOp2A3MycaNPMvoA6N23tUorriYw8sSnyAKuzWAR\r\nOgoLOLRJHB6ZqW63t2qt9WU6vIhLoRy4+nJpZeJaPKpYAHm7tCAEWkd82z6W\r\n8N0jBEzxBOnbm9sdehas9f3mW5ZVdUOrvjCRBOzVoqanVbpfrDJqxvvnU/mZ\r\nqjLtliHRKh2SMDWIViE9mUX8TvLpFLXhxf8f93rhfaQD2HHXgiUKefrxZCJ/\r\niBgRF8IHo1OsRr6RZQsACFkwzPLlHOyE1KWSaa7HJsVLxZfWfJIpSHtN/3As\r\nmvTGCB5TRBAE6V6LfXEW7TYcP2dw7elu1M/C0qbFtqBJH3tXRdwykV9YRp9z\r\nacml1D8oGZ2j7XIHTM9p9B3CNWtpf1Ns/fJgo9IKp0Fm+yMlrRmFQWLgivV3\r\nvNbCNncRvIFbND7HbmyjF1yG3K2CoXeotUI=\r\n=C+eY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.1ebddc343.0","@material/theme":"15.0.0-canary.1ebddc343.0","@material/animation":"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-indicator_15.0.0-canary.1ebddc343.0_1657874939231_0.37569675972990524","host":"s3://npm-registry-packages"}},"15.0.0-canary.c5018840c.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.c5018840c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"871f5ed66c7e7f3571ef61d7f8d73c36ca2bda13","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.c5018840c.0.tgz","fileCount":38,"integrity":"sha512-1MRtn9YDaKCFmIjvI6N7ORWM9uarhkvJSPh+tsqYu+MDhtu6jV8L7g/Ryh8YRJ3IxDFyabdzdbaUsT1gB+QYQg==","signatures":[{"sig":"MEQCIDMBAfBSJKgTbA78pTR9opX/WQusXqgU0o/drov1xrDYAiBaO/Hi1MpyxASrEZ4OQM0WBGSDfIwWNlhTtihcbvjPBg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1SsYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrrGg//er2Bhs+SnykSsK3U6v1eVUqS108tt5b7GxlIuFdyERwd7RZ3\r\nWf26e0rDel3rkq98mnkZf+piMBLbkhictCejf9eH7Y5Ji+oXRD6BBDZ1X5hf\r\nt1ik6zcNo4YSl8yVZbxmCLeAQX0vSifNHLe6dMTlVt3sk7b5yUKTiLxT4mrR\r\nIzCUhBBBngIi6QK63ueX4nFvUms/Jlpznjgn8XOhlBNpiOa4igrlG9GWAUvh\r\nTf4U7UMf9wfn5/RWQrS1oBPNpFchNGNetGlUqmMIZNPdVcl3xn8YI0deNhJI\r\n0gEIqZjh+pvKKWQ+W8V8l6HAs2C219zqdR0qlloZ5orKJd3xJOlomXDDAK/b\r\n/Y743uOzpY2RMQOC0IUXhg7EGXjlWswi6EM8AUNok1O6j8Uhg49i9psmRs3G\r\nlR32E2V1QXjfE1dwMxHIqMwOjTKvLQNCuWIJY8DEKwJuvQ+7Tq/EihIJGw6i\r\n3hzmbplkQL8k3xzzTuqzM6DsqouvYPV5YJgeYfaIET2IY4mMM7fDV1WO5OBk\r\n6/fn5zkljmOmc5R9tgoA8mDpSw1Njxf+e+Wyz8NpNnM8OIObUyp8dCgyuoW1\r\nxuccr6j7eYyV02pJrCKJDO6WJMo2KF1dYUyXm1CNvfKd4AYCzWJf+T7ikGPc\r\ng7JAC87jLNSEc/o5SrULMlU3wXYKUxb0MhM=\r\n=DlVE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.c5018840c.0","@material/theme":"15.0.0-canary.c5018840c.0","@material/animation":"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-indicator_15.0.0-canary.c5018840c.0_1658137368743_0.16675627504878276","host":"s3://npm-registry-packages"}},"15.0.0-canary.551b40d18.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.551b40d18.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"db83ca622989143be7c88e5b6dd1c3c8a7881b38","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.551b40d18.0.tgz","fileCount":38,"integrity":"sha512-LYZUjio7f/kxt+k4+fij/9hP4l92S5s/m2qWH1elOqgXkoBS8e/U/cHpQ7T55YsfIIdiQPePsxNimS6T0R26zQ==","signatures":[{"sig":"MEQCICgJak6o59SxNxnAzhEfohZE8jArcr+1hf5Lsf/lnoO3AiAgJkHfESkYvg8U2ju/aHb/LZ0136sNuwsLLVW8Xx2GFQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1S9EACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqIfA//fykzKNfEELnW4G2fVwbyBY+kGPu6LzvaKqnsPPJ9kaeyH67L\r\nCgPsJ5rWrdV14ml1bjXPRu+2skVUOVI63KT52CNAzFtwekOHEXNkMHH0H8Nj\r\nC5jEsgfc486ZduY9kw7oWM6Jo2iWbU7fFTjOp1SuLhM86gqOn2pcjRwnHLnR\r\nSqTdON1ccnhrF5gJs6svfLd45rR3D8ElgyhvIFEhJXCSVFY4WY+Z9u5eheaS\r\nsPqsk7kBMDfkAIv5yT/71oIRy24JFR9urZTw7psq0EuvdDkL3/h7BmFjjeLy\r\nOS+3eyCdHsC19Zj4NaWiKVPgsaNgQY41hJJ5qu+1O6FXvCK11tf/+Iivllsl\r\nJw7r3Q9jy3ZPn0w7bMIr+1ryShS1E+CtI574IJHM+cp53DvMtRzz4CqHnRqH\r\nwqd39f+xDQyd/+JnGbvNO8NpbTve2wyIXBvp3FjjvPYUVcoajjkUagV2l/u0\r\n50TcX+/4AOnw/BrljQ2XfhTRpwhGgtAf6IxhG+x83Mc4BlX65IbLNM8Wgj4X\r\noNNRcDa4XW/0kiigA4m3RniXeYa8+KPiUryJsw610TJm+m5S7mF6ZFqOiPVk\r\nEsFQOAIbJ0UmfqOPBXe5wBM6K+Bnn59J3ZqPjM4nlqy2sbbTxlraoktBdyzn\r\nk/GljbWvEUPiUkWw8OHTzivKeR1ZAAL1/nc=\r\n=JppP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.551b40d18.0","@material/theme":"15.0.0-canary.551b40d18.0","@material/animation":"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-indicator_15.0.0-canary.551b40d18.0_1658138436085_0.45342659209016234","host":"s3://npm-registry-packages"}},"15.0.0-canary.cf9f12371.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.cf9f12371.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"75490184fe703f599208d5ae83a7b82f9c605d45","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.cf9f12371.0.tgz","fileCount":38,"integrity":"sha512-xC6S6IQGUU+9mj8drLBV6gpjt8/HeA2Fa4PHXULaAomNTGxTfQUvh1NbXqi7uYwmM3juiQfi2AmfLa/ZlAh1pw==","signatures":[{"sig":"MEUCIQC/uXEDZUXMKBUGyZsvZtSOfXzjsR4mwGaBtO0g9+HNJwIgPo1/KpSkasQOH1pb9qJ1ExtXwiAOm8Gemi1VNcRLOR4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1TA1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqSvw/+Jxg5xFKtNeeMNumsLmsL29+1WQUxx8mfkbjPeGUw22r0YScW\r\n/ou9km6lQ+y3L/NJ1aHIEYGl4HJvYts4OOogoPCU2TiQODM5V5zpGUVvbq/6\r\neG2M2TX5pB6PKihM2+HJQH5qb/2UfWfORoVPcK6eGOXgt0kLnzSSgNIkc7PI\r\n/b2+g54adq06pOO5OSUsAnjo9xp4wRl5+p3PeDZEvf7bazxRXrO83tthNNgh\r\nK1odyOyTvh5m6zVK6H8lmsAkOTaB/JOeIodF3AHeL6CvSs72XX49STWMhC8w\r\noF/9LKC/ONSTEiDLwSntsxOlL81B2lz8PVWiXQwSVfu1c4IQSZ9VvzKzFl42\r\nPnpOPcMKZVIGdhjGf66Bp5e9fCCb/H/Bj91J0eNej5z6qA7iL6l2Lc6R5i9Q\r\nqsiYAR4wbr27gSRAH8XJtZy7yNh/rVTulIQRA1RUjGuoFgkY5btVVHGorTpN\r\ng266CArvy0NsOVWZmDAvE1M/zbUvcQD9751lJlstd18RpadLlBXaYfuXfeg3\r\nEonlUT3Bv97aFXzZ6+8eFv6h2FOaUN00h9CdSXSIRc6FmrKACHCkycIkPGBr\r\n8X8uGTkLl15fJOm5NhcRPZlMkYfZfONiIiVSLcwGoYp7cH9mNeYSp+cEL/e+\r\npCy7S+ICeau08lQobMBz8cxjTIX+9b5HGxs=\r\n=jIVu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.cf9f12371.0","@material/theme":"15.0.0-canary.cf9f12371.0","@material/animation":"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-indicator_15.0.0-canary.cf9f12371.0_1658138677650_0.4411021783590403","host":"s3://npm-registry-packages"}},"15.0.0-canary.2797ff8b6.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.2797ff8b6.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"1a2037a9002032a9aad448a85b3a5713503cdf34","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.2797ff8b6.0.tgz","fileCount":38,"integrity":"sha512-ngzqep7WSlctsF64UyxwqnDuFC87d+QMddYkb9Da1dxoQKu1LHhAa/8cYnzafNTBN9tobx1ab1yWh1H7qAWiAw==","signatures":[{"sig":"MEUCIQDKgHyN79MA1MLWgrOnzPAW5lUt0k1ziI518mc5jpB27wIgURB5zVq8BXDI6lyj70gdAkTER7osiSVJN/SpMOmTwuI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1fmQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq95g/8D8GsQFTKtlBi5AE629KSEoo1uPX223VLu5TEvFtUhJs4ydrE\r\n4778Lj39Krkml/Xz1NzoBRHGmjk5lLwKHBcpbGYiDtXDXY0DWQ7vgpSH1bB7\r\nv49yS3AyphPMonprTU9XBM8SMRg2F4miE2I376YazwhJBAg2W24aP+J2wSOV\r\n5XHXwFID4lKM4+tLyX6uBGpJAc7dzaGjVySCCPE6Ys+rmzv4TPlYSaxgPeoh\r\nB7fdx40q0GbyrJQWcUgNhyQBUO5Vx5gnZuQOolmav3yHDnO84snGioEjcYbm\r\n3LcYpvN3VqENZtisqsL12vvEiUOYUv145uNR3I1FW4Kq4NVWbRLv6VGwus2r\r\n2bVV32WVuFAalCDklA5STqmsayUtBFD/FE7dGTAFnmSxdYP+24sUwh5Bzrej\r\n2lFBRjoNpBWl2tJ2MOuUkxMnxTMeEtBqueSHa+amd64VnWN/Uen0vwa/bE3I\r\nTPw1HZ7hQJX5CEJWHL2VrQjnyHgMEoIVjIhDni2diwKQ3JnaIR5ogUdh2T8j\r\nHUUAr84Mm/7uCBCjV5CHQiO3MkaXLujsbTvmXqhq5uOcTljYlaG3E8x6Kow9\r\nr6gCc4rjj/KtwQCPh1vxPHCE66+YeKh0PHJuZ5aIMtHncntIooC7KyQ/KgFc\r\nQe4rWcugEz5zwqYaQFCkj6Eq/x5RYn9hEP8=\r\n=ALZD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.2797ff8b6.0","@material/theme":"15.0.0-canary.2797ff8b6.0","@material/animation":"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-indicator_15.0.0-canary.2797ff8b6.0_1658190224407_0.17750412721836462","host":"s3://npm-registry-packages"}},"15.0.0-canary.110fafa17.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.110fafa17.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"098518b9b520adb8f7c49774b0d17cb4efae259e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.110fafa17.0.tgz","fileCount":38,"integrity":"sha512-U3JlyBcniroxi6+AByr8+r9nm53kuMkIMgUZCSy886zL4ZOwrMgO64uN9EckApeTTYyX2eKuHT9j0Ku0FnO8fw==","signatures":[{"sig":"MEUCIHrXEqqCjeA0UVpFim4fDaTHwzhtRCPigoIeUjcHG/3YAiEAy6h2a2xQojt+/GI0vVL8x33AoNV8Dd/phrfDYyNm4Z8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi17LLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqrUQ//Sm/RnkMB6RRqHaxwkq93vDB5Dd5ZW5VJ3wrEIJzG8+yt48G+\r\nOeKMg4crkuVvF1tHyj0JXgyC4GAHwBqjYeAjyV8XoJyohue7nyxTeKoqw9U1\r\no3E8Ls2lDnF5WWRPO5Ffjjkxzj/o7EP1fnh8/rsOtactpbbDIRSyEv0sDXOw\r\nyV+blThEBPNH2SqJWK4PAXCucjrZqd4E/NcOn1ZJwkJ+5Z72DYEWiN6XTlzx\r\nmlE1QVEddR8A57PlzxrEcKgC1NWSWMoumPe+zVkBgfFq9/3TV8feExUiaOfD\r\nI3fywlKA/6sIC92UuS4HPsuwArEAoVe7cvUsA9p6SLM9SWy17Rf/LeRGg2Kb\r\n7MP/61gQxO5vu+Q1vaFNRP14q3cxWO2BC7Qx/jq3jzoy8QN8AXVKULL/nP4O\r\nSklkweV4BK0bl38SuxUzmifFjPjqpQGE+3tqEsiiOejIkuQuedIjJbrSFM+p\r\n0nY5PFSfqW1Emo5+TnU++AX09XWdwzhLs60uv0r6Ym3bFHCEcZjthXEZx6LS\r\nMKlBkkOONygn1f7zkngUsjXbZDWe3sioKQPFHwIWLh0fTfSKkkHhp9LZE+kn\r\n1f0KW7hYfnPWtfowS2w12F/t9aS+jjekQfYoQxaisRlUo7Vrv+/Zo9Z5UPob\r\nRmUxVzhllV31zWr1g/V+oDocuAxTp01VNlg=\r\n=eEaV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.110fafa17.0","@material/theme":"15.0.0-canary.110fafa17.0","@material/animation":"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-indicator_15.0.0-canary.110fafa17.0_1658303178757_0.932042580993933","host":"s3://npm-registry-packages"}},"15.0.0-canary.386ef1d2f.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.386ef1d2f.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ab271878e3614daa2568ac5d68388a1be690ed11","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.386ef1d2f.0.tgz","fileCount":38,"integrity":"sha512-QM5H8RjoefXswMoTCcN1CpDV3qRYYrAVqhLCLlHm9DoinMFHKEkScAdXAhMp7KeTvlCT4SnY1Ei+1dhvox7l4Q==","signatures":[{"sig":"MEQCIFlosWI8a32c1+jIp1m+7BgTHesIDSX7mdRuNc2CUJv+AiB7co9+k0G1RqzfMeubnwBE85xEu36BxaMmcgeqh1rVng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2EctACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpMfA//czWlQEwakru97Li+1c8A0G+WqQXjrPniOPWLMk1ZbCg5hpK9\r\nXeW9RgtNHuBwyvktHuTK6coXl1WCsgkw6+zyZsC0CTlUiofiAkRhaVCqFGAC\r\nLrdYU6TnXEloL31gqcaqx0UqIcp8V5sC0rLTpjKkaYQSKHA8LXO3rFY6qGZP\r\nHIp64FmD+Dk6AnWNT0a86m1y+4Fb6tzYsMW+jCyCUuENJ8EwagL4M87PFzMG\r\niQc4fWh6RXCYnzWVp4k4DCTtH0mySt2eEjeZF71auTfOw/xQwdSnNscYWOd5\r\nAwlGw8gjKrB/Qlu4N2106ymCCne185V9+9Mgy5rBlwKbZO6yjjXjDqWYvCFm\r\n8INZlT3joi96fwZ7xrX2ycJqJjXCk3Q7D52aDp2np1jvsU4TVyu7REu2rHsP\r\n8eVMGcstoQoJEZS3qZrIwXL3buVieNTJKd+H2gzfDRmkxrrJE3cz3/MOsLny\r\nZP4kcuw+L/9cUEd/SyOOzCWR483t3W/GullXoa3kYB5rGYDAQmIPoYI1irE3\r\nOBkdQo58JSs8cEoDsXhBRWiSN/IKdt2LhzxJAv8h8JMaGcvZ9kFdPmHC1qU+\r\niHkVKzgKdLyIMH3bunf6v6l2EIs0m6+QdeWAwI0DBsqtdBS6dXIJsWG68iLc\r\nF2xy2iTF/p79G+OFHZ16mXvbbTSFe/yzIKk=\r\n=tsNg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.386ef1d2f.0","@material/theme":"15.0.0-canary.386ef1d2f.0","@material/animation":"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-indicator_15.0.0-canary.386ef1d2f.0_1658341165554_0.8309592215654489","host":"s3://npm-registry-packages"}},"15.0.0-canary.c3924efef.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.c3924efef.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"086859efc3e10fc9097fcaeb59480af961480866","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.c3924efef.0.tgz","fileCount":38,"integrity":"sha512-/vu4AvCl47e5ty2VsadmT6zjeG7LZui7hsdtMdY01PRgk8DFD44gjc2A2oSGrdg6ktfMYJ1QT3n95zo9rDgJ+A==","signatures":[{"sig":"MEUCIGgCP8kk8WM+gFKT1y8PO3I+Lj6Tn9ae0EK7OEcFyDh5AiEA9fBDaFeqgPhfRBl9Om8IONe4DXvXEz41ksZ00C4KCxc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2ElqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoqfw//XPIkWKPTPYFjFBhNw7nRDVgLPiQnBPeZXgaHu7bhBTcl2i+U\r\nNlLsXBi7qDhTF3Kfjp4Gux4g/M7cvRsr/orXuXrnb4hHhzAefuORUGLAOOVp\r\na8M5F56832HN6SvkkeXtt4PUHJaYV+R4iJR9Zlyd06zqYlmsxZpo/bwQecg6\r\nxKkgS4PL/ccmQrzYQdfN/Onjofc2CFr5n6rEOKFb4J676J8V8SwtLOOmkYSA\r\n+3l8vQ+0hyzkORX5029Eex2iJuDi/Yf/o9f4YTtp5HzUSWhdMtNtXevVUv5a\r\n0Xudcag5WkdsduyoveUOGqt2EgEoBMnhQBWJXL013wKY9n48LM4rEfhU6Yes\r\nZO+j0gJX/sLGD3QM7gpfuo7jezWT3bZCOBbFUD5pIMVlT+2yisHW577AGynn\r\naWClPQ5z6MEfM0/iacbq5AWMvrCvtGud/RnPJAunT7QBhLLrMJRkkEP+DRmb\r\nzS4RG0qdqmzS8yg7k0rMw2/WBptdk9VCPOJVA1Kej39eV9XAsCSwSIcrIjhQ\r\nDzcI6XSEpMUHSluorRXjm9rbLwXW9a703NunAwPSaOxNA2LLdr0U/kqDSe8s\r\ni5CYrbjtQQOa+8JU0FcLQ8aQedIleJ1ygb4OCPaooNDQuQzwXzcwyy5uDILr\r\niMPRFtVXjNK/Y9cFRbDKZfXnH9B5XD+GpnI=\r\n=DFEd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.c3924efef.0","@material/theme":"15.0.0-canary.c3924efef.0","@material/animation":"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-indicator_15.0.0-canary.c3924efef.0_1658341738086_0.1549037815793013","host":"s3://npm-registry-packages"}},"15.0.0-canary.cf5c5907c.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.cf5c5907c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"b02cfaf25f4be6b7cde9c415e28333d73f9aba1a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.cf5c5907c.0.tgz","fileCount":38,"integrity":"sha512-URL7osAZYnl+mVuTaCLDqYZvrFjcDtlPUaJpUIqOo+NdHJJCYMsxI5HcyaBjnCTpDn6hFPqxkGryrQIrLxk9Bw==","signatures":[{"sig":"MEYCIQC9wLBdgXwAMnI1tZB1x4wYyTViYrIP7+BHr+J7Wnv2JQIhALdbL8KF4f4AB6lTm3/fGSU6HWrsoRGlDVRF1vrnWpPD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HHaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqsjg/6A+YllLtU9FuAmroECVu2/HhLbWeCn2rOffpq9CsgWf1GJ4mF\r\nFXeEmx0H04NZ+wkfpHXfhA356PgWm+5n0SlXgvHgGYNHy/UfmpYo+E3HBfbB\r\nWhPGo0Lryb1mwNaHOw1mZ2Zz2a5STOG19m+knFNXhPO8QR2xHL11W0NiAwmQ\r\n0EFdR7dhuaF0OtCrRkwy/WLVFwH8MbE63ZuX9L0ZWMZDo9wLynpHynB3uQlh\r\nnsN2UCZhJrXJujRbAfUHnRgUThXUUPo5cw4X6mNbYEaKW1eAzNpXxhVT0B7z\r\nG8EAge1rUa4whlur+u+B1KHKT9JFoSb/fGqsgVFUPT9hKL6FLj6urCtKfgLL\r\nI1sizwVEqo234gyQO5YvB/2H6niey2OHbiGonWZ3DRGwELoH5CFmVIJ7zyJc\r\nWFJS3pR4X6stuu0Ze/t4bwJ0s8uCL0QjSqJS4ohQL+L05Zo8G3xAJQrvwnxx\r\nQB6vUcR+8FcKaYpl9AfcT8uFeJTiI/yB2FxZeugnGEP2QH3PyZcQpdVC91NH\r\nS2GmH0mYo4fd1PD9jBMtDROcx5YrPi5eO1RZ8l1AMBedkivKa5SNssegjObY\r\nfB65O7BZGr1mkc42wpNOfgYf7WGt79Lay1HztJ/Zhblmag+HwcjMeiTK5V6v\r\nyz7+vK/LvmpVnYuRC7LY3QGbjkaovJYUv8w=\r\n=XDhs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.cf5c5907c.0","@material/theme":"15.0.0-canary.cf5c5907c.0","@material/animation":"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-indicator_15.0.0-canary.cf5c5907c.0_1658352090312_0.409282460319242","host":"s3://npm-registry-packages"}},"15.0.0-canary.0617e2319.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.0617e2319.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ed5ed0005391f2c6182f73f8e79b8a653e75dd36","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.0617e2319.0.tgz","fileCount":38,"integrity":"sha512-euQzoKyLpO1BZDpnkt60vk8w6l/lnqkAkrm0DilqUzvR3kJxhW7TLAiDrxcMIt5m+hhbyJ1Wwzc1gs99dQLFAA==","signatures":[{"sig":"MEQCIFH5Jz48zqhFPq3+BfgIOAypw1qzRDXvweLh89dg+CSFAiBJ8MeU8wf/azvdwdJBkIvS4hr6OK9qgqIqSdZf6rBh9g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HYbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqAcQ//SMensAY9j6tz2c7KDNiQXugiwx5HH1Lz25xzU9HM2RC/l1xf\r\n36PaWJwy9uAcAHd96GBJj9kGliGxN/KQQJYUCB+hD7XMNXpsbP+LLyT3MzaN\r\nqnLlWX5zgoNSJmBbR8ffUWJwAO5uwRqGT4XGL20btnu+dVUPzzofdJWtj1Pa\r\nycMKf6RNBVGJq6Twrv21Qgy1Rp6FeOuqirF82fKEX5u4NnT3O4YzNA0r42hX\r\naQhprBoOZel4CBAbqRhRhtlu1WemdSAPGW89DkI7pyLGlewvvivhWZv6nMrO\r\n8azLz4xZhq/bn9zKBkPKSPjJhQw4JiFL6Sg6Y/iouXo1W8X3jhvK5D03MrNP\r\n4EyQRDhgxseQxgZ+TSxtRcQAksLXgBqF+v5Yi9BuCsgOt2zTWMVKL/Jx20UH\r\n7IMxP3wASd1UxWKh51ed2Cj63u6p7XiM+xLPTsxDOVeMH3Hd6d0cyzlS4aIT\r\nus0Vd/mhMhQ5HVVvBJiy8gX9UarDPNKW4N4+EYn4JMyeqGYqPxVfsN1tzTso\r\nljIAlMcG/VjCkOjeIiKfvDOsb8eOFpS2/Oy3k0kvoIFmJw1Gx/KHvJf3n7eY\r\n8B7+0ET8JVvY8kOJDG8etnOvOoBVq6JCUlxJ4L9GyWnzGg6hjD5wO+YVs4MK\r\nPK8hYXNaRKZ2R6vPI8FBasetm+ePQQxvIYM=\r\n=L/l3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.0617e2319.0","@material/theme":"15.0.0-canary.0617e2319.0","@material/animation":"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-indicator_15.0.0-canary.0617e2319.0_1658353179539_0.6445413592659011","host":"s3://npm-registry-packages"}},"15.0.0-canary.a743b7967.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.a743b7967.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0d10e7489dd59636c1f18c1dbf4afc212934d3fb","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.a743b7967.0.tgz","fileCount":38,"integrity":"sha512-V/er9DAs2DWWxZlGWaNJ/pOFC0Y74akYC5HkCthHPk7h6jCdE6xor8T8PwWh2F8gS94RqnaFo22nSu2D9oocKQ==","signatures":[{"sig":"MEQCIFGLU3lAQxYu9mzVN8eT3tjoRg8UvNh3QgnKwoJvFqCZAiBToAJ5/jzik/5kIC524HsRCaITef2XF8QympmH5F5wLA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HogACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpkKQ/+LvfAN1bX+3+YmfLFDT5XnCVPhTrly9VIL4oTQwUsoDxYtXJ9\r\nhWBSgmK6DF8W7F/LaoFfOGsZH/3comgCYqkawCu3rh99bwOE826vR19CYfwm\r\npIQLZucj6GPCOhOMk7XkCw17+iKXXjS1iI45oTCzM+hffdNHa7pu/Xr6UpL7\r\nnwmtglHTHcX05G5qhCU/6X5KF3s6aoN0k8lHvmJ802Jx9d498JsULDTZi4vg\r\nyTqkT852zSCXJQyyLOdD2h77X5kmhgMW/Gs3CvOLBdkdzO0R7jTcQNcARuN9\r\nFfsuESMzVSKoxqBk6DjklTvOHGyjrUogKyt0i11iciNm7MKrZc/jal9ZQVcV\r\n1wvQ2uVRbBFM/ph8mKoAElFmosawVbhlrdC228gSIOVOKSeAdq8yenV6TlBI\r\nr2Z4xeXAFEI9FLgxKrd0M+u6k6div5dCAKF42epEk7MN3jNot2nIEls7dcv0\r\nhRqbGQ8KBAlgp2ijB4OV8wclVBnmgJW+qWKetE54/acw/Nqr4kRIe6UAsqf2\r\nsNtcAw8aqOQN7ERD1jdStDzGu1ECVjwou63zRgo9NfgteA+ChtQP81tLo1Tu\r\nvLUFyGtpj9Xy9SU+bT63R7JlTi/iUg+MaCC/UisxCFknD9ht1kmvQrQ+SuQm\r\nZ/1OjO4ycHPXqB2VrRD9b+JOhgUjgvxz0dg=\r\n=b0kG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.a743b7967.0","@material/theme":"15.0.0-canary.a743b7967.0","@material/animation":"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-indicator_15.0.0-canary.a743b7967.0_1658354208222_0.43460513913718435","host":"s3://npm-registry-packages"}},"15.0.0-canary.69fd619d0.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.69fd619d0.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"d9c655cd3c8320f0cd2749efd232b56762134b69","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.69fd619d0.0.tgz","fileCount":38,"integrity":"sha512-C1R543IkYjTDoLpNSTwNhlYPkfxJo82Jmr/oIY9SUYVKP8Q+9AgAPJbCV5habaLoD/kvCJw52g7OqVDGfNb2ZA==","signatures":[{"sig":"MEYCIQDnk/gFci3gpL86E8b1XyLTbjNCLqQh//hDAca4xie9eQIhAN2A5lSRHPF599lJksAVbbk0BatsqVHDjxlviThHBwIy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HzvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpcgg/9GSiU3nBIOapMz6qA3X73nxTEQ36kzpMurUgY1W1uC7gwrh7b\r\nlu798Tz+qPS83zfTVpjbcy2U4D4nbzLCkTXdgT8d9Jvj5GmZodhCveZBFSEp\r\n9rcmEHWT39CgwyS6IcSNpQumZhSPTZtURCGesRwHPefmuMCrQv6fX5pbLcCh\r\n00tfCV42wB/gsufpFHf0FtLpRyCsuLA3aIDMSbFOxb0+O/kUmInZ7HMreB0t\r\nLrquBzD04uGOjc7xKdybO0nH2w9ORn+lWeigP9m7HGZva5rRrZBERcgEv8G8\r\n/KkYDY3ERs6WLnivs+juvOeXqkjbq29aKxUf5p6Y0ypGQu0RYG6fc9K/kSBM\r\nViDdL+0ZeC/Jmy/nquEYW3EX5Cbnc1d3d5HLhnx61rQvjDimfx48l59Bd0AM\r\nqvqYF+ExmOt7Ck79kI4T0d/IWXhI5CtewXZjeTSXe2a6tKpITzKMR5oWnFf9\r\nLU47Z0fd7po6MxqaCHnwLVOJ4cCfbV3yJXuyWr8qeABKgEpgbkO2AYDAA8RZ\r\nlJjDqjHOxKn/v+ey1qmJGIqn6nBzWvfbiHe3hSLZx1UCv4utodyaRMSQrk5+\r\nL83gaWb1L7y09i5eHWTKgpXtzX8DVQxEzV84zDZin2y/3NtmoMagn7aWl1M7\r\nBw8RT2F8QTMseX61ybolTgJt2q9TKxTeIA4=\r\n=MPeX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.69fd619d0.0","@material/theme":"15.0.0-canary.69fd619d0.0","@material/animation":"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-indicator_15.0.0-canary.69fd619d0.0_1658354926911_0.8553803197981262","host":"s3://npm-registry-packages"}},"15.0.0-canary.2a6ddc1cf.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.2a6ddc1cf.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"338cbbc56e139af17e3c2a2f47615a59f2b3e369","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.2a6ddc1cf.0.tgz","fileCount":38,"integrity":"sha512-kwkMUU7Ic/2eLZ754NVxDqiJ/hi8fYAuF9lFyHX7ergAVZ2tNoiMsdtq9+kTYA6VNMRkXyXT5mxLp1cU28oL6w==","signatures":[{"sig":"MEYCIQDG+NcoUyz5PsBG1F6kOH7wHrXhbZJZqznJwYaAl+1WNAIhALaiojFEvxKdvtsgQAj6j7wxFoQjUgJMR1DB60A0AGH5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi5AT9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqm5w//dt9nEkURIsEsiKfztjwy8Q4kzdWm+M0K5d5I/oNW6q3qY7AH\r\nBLwSawQoPo/3JIxXTrSIulxyfDoG8Qiz26qZdjceBopM7Ie336d0Rte41Wsk\r\nrGQ2XOHsLGR804y+EWbdioz6l9RGJ8+XeNXBzOtZl8/oOUXA/JKxAFi4KKss\r\neeBauhZTIzNDk92LtEoT/Eza2SezULTiHY9LAodk7r/yj9Ln3VXGAHGU8jVp\r\nJtyLdnZEDqunzs+roSUqc0kHOUx96GOlD20SILjZAGiFrQzRxA50N7FElfH8\r\nwEGnz4aEzmEhWYnXdrz6fncy+Z3LCgyGxw6/x+S75lfNeOya5kYxG67FPtHK\r\nPacV4siOUQz4bxxxAJ9CVh2SrJskEh8XH/0FBHnXbUTnzUMzlHUsAtCrktp7\r\nXkCDPY9t4sWt815VD0YYJmgnuHU4tQorvK5TFZmQIvDdTuVUlkQy0w2EaaH5\r\nvRWamOfgp+drkJ5MYKpQK7LrmkeULbOSIk7s5/k3sTlUlAiUKczqYx5Qq0lr\r\nNzqn+uV93Ttq24xu4+FrQHkI4yvKzBtI/47IArZi4WzYdSUEL/b28Z6qSZ07\r\nVYQoqcdPAVD5ovCnvBnjhwGMfMTiioVgvzUKHGO2X4DqnP1d/b2ccKs3LjIM\r\nq4dntfTqRlYuLtjbQSm6h9hNTMPCZeP3J6I=\r\n=JPyQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.2a6ddc1cf.0","@material/theme":"15.0.0-canary.2a6ddc1cf.0","@material/animation":"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-indicator_15.0.0-canary.2a6ddc1cf.0_1659110653437_0.31386320331934137","host":"s3://npm-registry-packages"}},"15.0.0-canary.86efd56f6.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.86efd56f6.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"4f6d24143dae51e8063ef0361851cb352fda5332","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.86efd56f6.0.tgz","fileCount":38,"integrity":"sha512-9fFhqQ8hU4kTAivr/cU6Ds4s1fGGkJPel6RynVve9mwY463x/PGJIFLtjKVg0pHLD+Ve/93SuLtw1noAfhGjjg==","signatures":[{"sig":"MEYCIQDF5Df6LmIy50HKQ6su1ubAvET58xUHoiZ92VTg204tIQIhAM3/OkRDHXug4GgDPQs6EgWRi8mE1xcqp8FiP/3zFEQK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6Th3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqeCw//cHY0KD4ZhjKCU7o5QrtoTvk1dC/lXWgZyT5acVpO/BJGBFt6\r\neCioemRXwgq4YMNuuwkmyKlWFt9fNYFUjvT4FVeiFKr6qcl4hAhGaY7Qf39v\r\nXmhL8zpoEvRhhpdBKh0iLDchGsSnGWSr8RoVSN6PaQY9gW0e6bMUK/yCC4KI\r\nhfIX8HdYUVAXuNdmiQe9rZqOG4V/UwUXQ6OE3fGsP6WAb6ODGPhXqrkp8dE4\r\nff1TB5UAULzynJlOib0s7DrKigarvM+8DV50s6ord+s8BvoGpxqHnn5Na7Q+\r\nOtfDpeNr4xf8XdQ2c92t2phe8VwKWq+57yhoRkGUZAUITHjNzuxJs5/B85dm\r\nd8HNkzRCW/4If17zDtaLPcG5nOylojSJsVg4ubeBMwI510w5wpLpymwSqgVG\r\ntN4OP3Z29NiSC/561spCpy1UKlOVlrLVYUauUpPv94J8aWWtTFmgmKLSnDPb\r\nHOr/5Bia7FWd3bqc6CjVK/KILcp2kcr8dYVhO9ySjeDk9rG4V6WFaIHqk/nG\r\ndlTvvgjlJgqtdBGKv/YHoRwbKUvyXJO5e+VtHnB00W9rMAGKi0jvlOMCF5Y7\r\nFMYREwCh/am+x/FIbwRSxF06VoJ8u86hVezOxhRlXqp7d3GEXTMNBWnD75KU\r\n7lmmlHUt4XKI4CEgqjqePK/jUGLWzB3r2kU=\r\n=7hxb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.86efd56f6.0","@material/theme":"15.0.0-canary.86efd56f6.0","@material/animation":"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-indicator_15.0.0-canary.86efd56f6.0_1659451511553_0.9500766761331552","host":"s3://npm-registry-packages"}},"15.0.0-canary.ccfc24d19.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.ccfc24d19.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"91eec3634107c5dcfc6da60ee84af5455ab9de80","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.ccfc24d19.0.tgz","fileCount":38,"integrity":"sha512-RvDDJV6ZxhuTgRE4a3tBSiMuRMSWiwsrXJ358arp0UGzFtJV13UyVPP2rQ4xzIrdFRyr8SCOM3TC3oTyF0fGiA==","signatures":[{"sig":"MEYCIQCt7VcptXhFGDyLtTvnEgYRiAnm4PUZdVH28w6sMBzcPAIhAI3cPBtU18DTO5l/qeH346wGbx/Lkxvo1FL2srHiVnY0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6rqwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmojpw/9ELN0T9nYNN76BG7NMg40Is2kxlvA9CoVaAudATF6Ih1at/hC\r\nsmP2Wc0MRO3lOltViTy1F/uFtZBIuxuB95FTOyYT/0RW4J8d1ODWe8vGXjYE\r\nxoTD6PEjJr/4vEwT/HOkB8nsYVDea/fO+K1edJV58v/d4zBlRXlvcTD11jNH\r\nWN5txGCKYnW4d+NYcq1nTQlpYNejdwANvq6LThWVTEvTc9KQIboOIM6wHnd/\r\nwkPk8B75pseBwNixMvhYUqcwf7FFHfpwAillpd5+8N9uDCT3if5cDWj/ZMBn\r\n1Wvy21hdyLpQI0BWdzWbIhfB/dSSen7ESeFXT1u4qk8pz9izKlDI5LUnoKBS\r\no5106oX12OFdKT/FOYZSvl0+YrlBC7GB+2UNOe4Tvd20Krg/5YbvfU+8360J\r\n03OWwyLS24Ge+lVngIkOuWTs+TmgP1mxRdbcQIM4rx8K4YkLdLSHUdrn+joF\r\nGgEqT5XwRLSIITdLQTMTKPmyOkCfSZD7sEwmsIvjuMGhAgaoKp+di7pMKlbS\r\ngvIiM0EbT7opuue3fAunFoHJKaRegBsO49mfGoUajJcPVEOo0wi5mLmv6hQe\r\njx3Iubs/nv0Tn43CPGDGAE8QlxzqRluFK+80TFkVoLJd+AAMOo8tF1INfi9l\r\n03odHOsp8tWBvSZvyxKJjIIwXu8FAgRbKEE=\r\n=XdHM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.ccfc24d19.0","@material/theme":"15.0.0-canary.ccfc24d19.0","@material/animation":"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-indicator_15.0.0-canary.ccfc24d19.0_1659550383954_0.022292939297472225","host":"s3://npm-registry-packages"}},"15.0.0-canary.e4570146f.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.e4570146f.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"82f8f43f9255e34886c0c47c7be38ff3924fcbd5","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.e4570146f.0.tgz","fileCount":38,"integrity":"sha512-EDm8pW1+IxSW04e9atDsGr777YGkoOWb4SWyg7C0GrJR2wdXkA+8JGclAuBXiUsBP/d+m7kZkbeYpz3HxJ0qcw==","signatures":[{"sig":"MEQCICC0h/0IhfL710ox6ESOHW1hAMt+yhS+Y7qnRY6hpfN7AiB4+MXpIiCVnIwLl8xYArN8BcTLQQcx1KPQC0uVpLisNA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6sESACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZ9w//agi774qZuPaKPBJQAQsymHby+vJZOLmoWiYZB4qL7bJ6q91l\r\nz7/Yx8VuAGC9e7F8oik182bmiluGGvx78V3WD9+RNWJPUzdHy7begCzkDIpb\r\nyrYD5G59WSEZXDFWf/hFbSs46KALAmG5qYaZ6/Ee6jtp9lOIIC3kwosCDpL8\r\njrP0qZEDcqkNSp70651AOy5Hdn9YY7JNqOD60RoWIpw4XT4FeFnC/iqW/Mq8\r\ne+hjKPIxm+U4q2o1T7btW8lc8lQBbGNtYofygRv8HyOxnqxg7LznCwmnMx+A\r\nTZSxNE9C2xjfUnycCum+NjtQ+fXY4EGMdAcaRtmq3DAJm9WqHXW6HI/8va6d\r\nuezlpTwwiaAJKtsU2OYON7+b3YBAsuiNwTHJ5qDVFUwaA3kqtToZuhWl9TZ9\r\nVfh/PNO5lt37nL0X8F/rweQ9aMqDV7hNvj5ES8ph6KKapW0PFdBc/FcNrMaZ\r\nmKXbv8a5TB6LhMA/LfASSJPaRC0deQ++Lkmng2L7nKE7AZ1fUmLJpZcZBKCy\r\nAd8uSmUuZ73XQJLkppe4x9recvetDqkA5dUyK4uUxieBriflIPQ2oa4awL2p\r\nLhM1GjympF1jz13XgnFS05rN59QrdLFleCOX7oPD6ddQlWEJ7rAMKygXsgPu\r\nLiZRh3+RNqfweK70gAHupyMb1krFd1f9Ah8=\r\n=CQki\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.e4570146f.0","@material/theme":"15.0.0-canary.e4570146f.0","@material/animation":"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-indicator_15.0.0-canary.e4570146f.0_1659552017761_0.2191951599309665","host":"s3://npm-registry-packages"}},"15.0.0-canary.6683a36cb.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.6683a36cb.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e97515794f372301c1ed5e38b4fdc2ee5c897725","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.6683a36cb.0.tgz","fileCount":38,"integrity":"sha512-o2F3y9mECgD51QnFcS0iXnQd4q8VrDlpu+Tj7R+g1hpd7QZ9rhQsZeGx38roDrop7kne+SXm2pPdwHnE5uP8zQ==","signatures":[{"sig":"MEUCIQCKjAbQnOYqcGveUPvYdHTROmykH+k099DGOvADIEvF1gIgLKaJyrcjYv7EH1Zz1JPNcOHTwL1nphwep+U7b3VBKng=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6spyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqq4RAAgp2q1wmTC0/tPqbDb0FCEk4oH4XIiNY62dKQWrgYOwg7GINl\r\nhEuHHvt+iDP/Uo/5g1A8lsqDRYkTOKjBZ3CucC3US004OZ6FQe2tP4u+8981\r\n5cIhszD4oUNx3dhZShDnIoDt8z0NfsRhjfQGD6yM9bLsQSR57ovvsO7OdCrk\r\nLXCUqYj+jOX/Yg8gacdaP8msJYcAXXJG6epRsMQnxV+Z2IlviZRgw5+I2LuT\r\nIluKSgZKPc1VeNPz75LuBlrETUALeyoFYMnllxkhUHNVJ8wYZNEu6MqYPQ1g\r\naVGOuqLbfgwn4zHjtzZ6r4VGG7AuF5RMmyQw93mEf6tHkGI4fceD6u0+uB87\r\ntw05QC21OBUFu2yMbrywVl1yj+NCpHhAzFug1/rikofPCKDyOy5F47T41kVr\r\nPmZWTjgKVqbkINLkS8KJquSgym62WePVoc+oF6tWZfxDkpgnbfmBZiGPunNm\r\nX7vjImrIw889biDchoGeQTPvVQU5BKGWpFrKztQ9t8tGmENA5YoG8dOGPXAM\r\nEm8L6o/KG8lYIHUcGyLUs/R7+ToHwINYQb7Vwon6Z5VnCjChF0nYl/mwvFAu\r\nuE/Q5wLUNObm0nq42bT43k7z0zdOfKZpP77nkrZL3w5cWHWg9gkL/Fc7dnVi\r\ni7pawrsVe/6jGD75BxvEzetmVZ7rk++BMzM=\r\n=QVDl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.6683a36cb.0","@material/theme":"15.0.0-canary.6683a36cb.0","@material/animation":"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-indicator_15.0.0-canary.6683a36cb.0_1659554418117_0.9025746270084885","host":"s3://npm-registry-packages"}},"15.0.0-canary.10196647d.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.10196647d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"a641ae1971941f0aef0c8f28975ce5a0ae1d7bfe","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.10196647d.0.tgz","fileCount":38,"integrity":"sha512-25pcHmkkZQRUdmxLkJALG4/l+lARi651YmjKSfDzXqdr5Eg2ETYuzmkEih8ydXReTaetycFl9AT4LuXZa2GdmQ==","signatures":[{"sig":"MEUCIQCPQkdjRpNtckVNlQ3++3aB14P80xM/pOP2pzKXKXFsnwIgHwMNVzggOlUF54IPCRP5BU+CQ0qLJoutnFZQGsTK/ok=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6u5TACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqggRAAmGaa4LIYtoTCIIWFJTi7bBXepBzQpf4RTztrjryR0PaxClyu\r\nUrJhmdeJEKQRtF/JbZK9BNABolkLkBlzHgQiA149rlDAYxnxiWVFv7wtDADt\r\nWBIbU5lUmjCrBNOpkaHH7Hs12Sn2PSY1Ykv1dfmU3no19x1aXu2Vb7AnsjwR\r\nE5JqhuQResbuxd9ztV4ZbEY2NOfW0oLBCpF3ufC1L/fC09cfy3kSOCyxvto0\r\nAD9DXRJODCdzbiRpGbDNytFU106QoT33qxx2nCwibcw192kxaBhyLk55yLvU\r\nMe23MuF+voo2sBwIjxAlmKKo9+m33HifC3ptLReBIDRZFFfDfuPWT86xA5XE\r\nSj2UJfYR8qdWHi53832593keGe4rsXH9Sfv9idFPKMKwT3jje1Xt717sHUD9\r\neNUpQkGgnMtG4eGqklMhvVYpGLNc9z/fg37OSRPUB4tbjPVxlW2iX5CclEtk\r\nqXGiw0267MDNpzi28wC645T9nAzr50x/BEb8A/HPIgT0+dymcOE+/iUdiDYD\r\nATkOe3YwsGV8wy1s+q16muY3USJN3Ugtbn9oecGT9G+m/Nt2dHZkOZGKFG/7\r\nda2SaKhBpSGSYJTAXc+8N7mmti2ELf3wKL6Z5Fr25f7GQOaK1rz09Iw40vkK\r\nqjLucA78QvkrYlyUPWVYhnepr54U1hjnjYY=\r\n=MVEU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.10196647d.0","@material/theme":"15.0.0-canary.10196647d.0","@material/animation":"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-indicator_15.0.0-canary.10196647d.0_1659563603523_0.6087996616555222","host":"s3://npm-registry-packages"}},"15.0.0-canary.b20d3d73c.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.b20d3d73c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"f932f847f92bdfa54a7089133736f495999d5cf2","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.b20d3d73c.0.tgz","fileCount":38,"integrity":"sha512-mWG0XKRr0JeF9+r90/8T8PT0v0yN4GQ7hTl1vKdfO9dfa4Lo1z3k8VggtskgY8mYtrlgrUnkB9cWmL2+u4O/QQ==","signatures":[{"sig":"MEUCIHDHYW2FtnlYD+5c28q3TsWs05RzBgjfQQe+tw4+wsp4AiEAmLt2y25BLtKyOZ5IJ0M1JXY46XJnxqOION5Ym9LrSFU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7EtVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrNaRAAglRv1XOEPeFwFQzbWTRlUJxepCSaNJtUEUapd+QN18KtWall\r\nTksQXZrErqrSjN63iPjBWglQFgvmgklopeZhtG+DyiEErylatu+v2D2OZUtW\r\n+kAKwMjVicme5VR9es2mMaosKSnWJd+REoFU+dhYkgugZOoesKcOet0lp1Pm\r\njdAETOuETO57V/82stMUTP4nvjQGP86+4vU36o9yJ79YSej8Ccm4qPfNIqRJ\r\nSBssIhiKfTIa70GMq37/RlVae/uQhh9N50p4wXAQITqr6bn+iJF5VsKiK0/G\r\nRSh/gzMX7I1SyDP2j2DfIxvzZB449bQir6b68xUv4/V6K2KGSsi97XVSf/Kv\r\ney/CZN5QfV+rjci15Nh+fKPWOYcc0lGg2i9uEt53yYCCMPVCD2IE+rJvL/4m\r\nPgAaPrSHfcanku76rK/3b16PjbjHT7+HInB2UZJcPp+bDv11CQUOada7nU6f\r\nZVLV+I6XQIh9MXIE1JRm0oud2e9F5J20lFt67QXKPPBWXpidcouy7lQdSlJq\r\nK4CRKy1fBbrSZ/b2o2HqqlajEqIRn465h3dq4HQ2Wu6xa+LeoYAc97f3fNgQ\r\nUoMcDvOul4uPNq1g3Mh12n00RMHafl9XoeEXtOAievL0vG10gvYV/sQLIYca\r\nXAEr7d1Fl0XZhITj1Xl+iecs/7ZZcd1cfKk=\r\n=jACh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.b20d3d73c.0","@material/theme":"15.0.0-canary.b20d3d73c.0","@material/animation":"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-indicator_15.0.0-canary.b20d3d73c.0_1659652949185_0.6601075170915667","host":"s3://npm-registry-packages"}},"15.0.0-canary.47c0c6b1e.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.47c0c6b1e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"a96d5a46437bf577bef2187f5f510ee9ee4c35c4","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.47c0c6b1e.0.tgz","fileCount":38,"integrity":"sha512-FxINVd8WzVOm2vedgcmvTBqbitLphYBzg29j4PeCPwcRHoaedwRLtDbsSAcTHKkRz3TVKXoUqw/YVNAN1nyFcw==","signatures":[{"sig":"MEUCIQCC9ryacP260wgqdoNDVqQSzqI1bP+mm3Og1enZAgOuiwIgHehp6tVffO2VqOJ+mJI28ucygeOtGThEm3J8WCEsh5c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi8nsgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmppgQ//UY8VREOjnpbOXVxCtWrsRCGO2cxtasvsccDyggeKGJPmrzfn\r\nykjr09tW8EAtCWvHFvkByUczvExz8ZnYJzK220UYnxHOEiiBq7/24DyCyNaW\r\n/TFUMlA16HXMbW1Uvh0wTJB2cKdnOogCR7ngdxF6F7V1I0RHqec8s7P2gB0n\r\n6kvEegyksv6CpTMxe0BTfuN8QUGn2IHbQkRSHeQHJ4oOj9rYtV444Mx4n/l1\r\nJOVn/NLa5h+DXxJ5hXeQNisTqOojz2+flLpAGYljdzu6ocj/f+wjf2j1IHvl\r\nal7e6+bTTOXcbjVBYihOYdVvJ6RI0vz04E4XR1206DkAXskh4GNnzMLDC8uP\r\nukCsVfIB1mK1zFNtIznWveUMFak+UDUNmINrTSBlDJrDzcKjjRKleV1L7CTv\r\nQwFvkcXXhpjrmagPKpHjhjI/Yi4/db9qt+ZKgY+mX471vL+eeBCbtHQ5IV7v\r\nFTYoqW/N6wqAwBRbNtmJKEF8XQTJWVwwiFcQ8+3xub3cG9Qu1tOTlzenl+5F\r\nX410TUiMgPkY7Y54oWnoBbl8L1rMfvSAqHARPRdwbiXu95R5ar/5OvO289aN\r\nDT/xacvijL6O8qchIfAUGyV/cnZsBfUMk87DMqUnoFLb+A+OySth26DPkq2g\r\n187fCBAoxbkUopYhwttKSGMJ4dXxUWnmiAI=\r\n=LjlV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.47c0c6b1e.0","@material/theme":"15.0.0-canary.47c0c6b1e.0","@material/animation":"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-indicator_15.0.0-canary.47c0c6b1e.0_1660058400046_0.1132791125608621","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e3dc8e38.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.0e3dc8e38.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e16242cafa218c6e4ff6adefbf55d8a31a18c3e1","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.0e3dc8e38.0.tgz","fileCount":38,"integrity":"sha512-R+frL96fFsXIs26mxsMRlRG/uxF/uwJw0hrhsqg+lxGOdGL/M1Xfm7ne2cGDuG7SkLknPck7JuCvRqqwBrA9/Q==","signatures":[{"sig":"MEQCICcBeJlmBW3qwFresqh0dROCZyOkOLtmOnMnlQl/tTN3AiB1aLOTuBdbhbzvluYZFzlIJNvv3ZCsiAcyEnEeS+o5Dw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9U5NACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqNhw/9EivmzaPEDHRkRumOYwzBm+CezQxccz+hWNe8ou5UcKYYt6XV\r\n3h0NvMDp9vVLs7Ii4ZcYmkbAZujD+ST2pBcl+FJ7zlEFQs0UZTQneaOVZxGR\r\n2NK7JA6pZTtO1UsiZJFHi4ZJTAE+WkGigp+d+dN+rJ4ujvx9v6ZiW88BgbbD\r\n5R08ZDh++AmAgRBG5SUeJ2xGrFu/YcfYNGpE6vzW4JJPvZfbiGPRrgYZaCRe\r\nx+qggdfXFcTUXtTlS074AqZIvFPrfqKOp2Pgs2nFuHByaC29+XtvTLvugv5I\r\nF4btN5aI57BivzYqhopGxRQnf57sV6il+2SesHhNM1U3OAzo6DjXAbjKmX5B\r\nuTbhlRJWBwsYuyAdVKU5lKfZ2ITxQc/kcFhQt5iC+pLBGthttI6GHQHYcz/q\r\nG6lNk9ihIVZPx2pKu/Z82WuGB/pSedI1LDYjJM6zfTAgp2K3pzKL2JHfFEae\r\ne4IBHJf8y23Mt/K+TXFXN2hR/3jenME0E/kBoSa8hZ+g4vkDFw6pykPiyvAX\r\nQ6IAK6jx4EEiQOFg/cRlcd4fVUZncP7v9shpaJR7aid6XmhNoP3cRjXOtm27\r\nMdZAfJ6gugi96mf/zcYt0uw2ngv2g4k1IZpaU9KYgmU25z/XUAFVPZw9Sbb3\r\nh4iv7pN/mMFLurnX5lJIdoyq9RSRMrWiQ/I=\r\n=4BAL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.0e3dc8e38.0","@material/theme":"15.0.0-canary.0e3dc8e38.0","@material/animation":"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-indicator_15.0.0-canary.0e3dc8e38.0_1660243533283_0.3157316035505795","host":"s3://npm-registry-packages"}},"15.0.0-canary.d5a11f1c8.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.d5a11f1c8.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"bd95d85c048d9933c037fcd0c575c2ed95532c5c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.d5a11f1c8.0.tgz","fileCount":38,"integrity":"sha512-r0HqaqSGv89HPiYajT6I/L907bPeciGaYsH+ULSlpN0hT2/q8njPuUpZBl8vpL4l99fA876lP+9OsXV2RVdleQ==","signatures":[{"sig":"MEYCIQDusbGHbT03kjUnTqobVlw+2/K5ywYNKl7Rh7Wcbobi6AIhAPzS9NUnCdk7f6H4+jyOl+Dn8QXu/FVRsEm9NL9YOwu6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjDpamACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoSIA/+IBRWipaD2vfejUVvowpSuq/zY58QLjo5EvVcUgvNaNF+nkbk\r\n3iqzxW2HErROaOpQYdwKxguuHvpgvJHV8map5WpSccInbXsePewMJNiWJS42\r\nBvab0OxYvrTmR96dPb8njfb/KG8/xt145Zh/aPuXW9sGxnz5zMq1arKweVtu\r\nBU6bLNLaQAmeEELtyvgJaFxbh3SEhunHZ0eAZTmeuJ85wTJy4kqQ3RCZZxm1\r\n7UBMiKcTK6YLafNOqxQlBBiv24YP6RyqdZZPUcBFeGxtbrW2nbvqNFDsofrX\r\n3qhXPZHb7EDPuIRUGVy0jp9BySCViiM/p+/bPZmuGsCBcU9sm8+tVy1PcxY5\r\n6poBy07oIaeWdzMypKKDdrgS258AzAplaBn2UjPslyW43kWBJNPnDxoyEidV\r\nXSX6c6ZsHuxzaZ3zFF2rxIx9F/ZJDsbzWklclDgp4eJv0eLGEGtDLJ37F0g8\r\n6UTvuX380gK1zYjVHR2amoyQXbJr02LyrzMswtKCYAKMRYdqBxhQi0eZmn4x\r\nMMTdJnMxEwttdFNyjpY8fCb3e9a+tAjqvteSIpqlzB+YUwJuUvIa7sA4QKio\r\n6ORiiK8Ca0AVQyAtxlUrxpw0rwNNMzA4PwcYaoTc+hjL+eezNsQzQp1hmSrL\r\nESaEb+IP0Ike9U4QetxVHCKyM8QU53gjZX0=\r\n=8GTj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.d5a11f1c8.0","@material/theme":"15.0.0-canary.d5a11f1c8.0","@material/animation":"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-indicator_15.0.0-canary.d5a11f1c8.0_1661900454235_0.8507217672475513","host":"s3://npm-registry-packages"}},"15.0.0-canary.bac992a95.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.bac992a95.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e74dbe44cd6cdfb5aba3ad45b65f2672b584ac9c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.bac992a95.0.tgz","fileCount":38,"integrity":"sha512-n5v/QJQLGoYZKaMarnakQ+xKiR779t0PD1EGDJVto9BfbQiKjwu3hjo+hskglmmUQxapI/aXJjSlbXQOO99yLA==","signatures":[{"sig":"MEYCIQCew6/wEHZgQr9tE/TG2Fi1nRHKXkmZBYs5krQUoPQUlAIhAMmGt1PqlLzyPi4ePw3qXMPeC/fGa688UMkLhsTnCZMk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjEFmqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrq9xAAhhRQEWztQBtWyAJkLpbppZe0YF8ug+Kn13llNDRLH+vCSsAt\r\nMwmPMk9gzodQ2r8iZzBp1LT7kVZqbKfBnBqvVrE/4N1ZIcRPXp/Wrp4qdW+5\r\niRy6VqeHefpx6OyOEPQPnUS2O6iMg9U3t7HVK4G/uJWiisGq/U6/3w/apO7L\r\nRmTW0FRlLLKWUsMSa6wBfsmwnejodC1jbjuwqiu5nMTFHDK+h0cBWyqV5JQV\r\n/a3DELFzVKsEBmKbfuAxQRh3d86LJrudaVHSnMCnctjUuIcT4m9zQs3e5Pm8\r\nso7SuT6QjPlp862NH8pk1AF01kl02XcM2CxIcwJQvYsaTxFPPQWkAYqU6X6g\r\nEQE8D//zg2hPwQhtCqarwizAmzX1w7F3ymAyaqeXXVquxm+Cs6TRzaVjwi8A\r\nR2/S7Kp3P4Ozgxy8SG++NyG5THiFnrHdgC/arVs9xQKDCvxTLiodzD2ss1vu\r\nBJ60+yJqZW5dgM0NONBlyctyiKlG3iMwb9t1jyAiK1lZTgdrU0YZoR+iAvGy\r\noJAIwZidlpJUdIS52Mhgd5GHm+M6NHb0E7+comWGcOHkvYcqPY9osMItT4zS\r\nwqOzgcHSStwYjQm7qCGH+395YNt+SNc9/ajZdpgCSpJjY0gl77gpX5rXQanN\r\nIu2xRKVhlyhZEa524Ba2+ZNRasKSfuo3DQY=\r\n=Ye5s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.bac992a95.0","@material/theme":"15.0.0-canary.bac992a95.0","@material/animation":"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-indicator_15.0.0-canary.bac992a95.0_1662015913880_0.8515126545135827","host":"s3://npm-registry-packages"}},"15.0.0-canary.d25f3404c.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.d25f3404c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@15.0.0-canary.d25f3404c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"912f500f09dba0f0076751471b21b8617e854afd","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.d25f3404c.0.tgz","fileCount":38,"integrity":"sha512-U2Bs7fEiyY14MRzOpuf8w7gWgMPqmHIX5nXQpbDWV1f212yY7GtrX37TKkKOwR3zvOAQEmMPGxR+vGEjP/h7Mg==","signatures":[{"sig":"MEQCICZHdrLgJ+uaBeyqWLrkvGWgytQyvNSAfry+HHHXXi0LAiASOPvoesLyTTnHGUgvdDIrbU4UqbvPqBh5b3/RZvXS6g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjEH7iACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo7+g/9HK+uZvQqdY4ZzktXmPpw8JOdnsqsS/6tg7qso82gAwE16dCo\r\n9ryz/9utfpfwejg/LRY4ILQVL/ZIHPRe0lhXeWxYT42BdTv84C5xkXK20aet\r\nl8j+szIxNWWhzJ5L2VIYkTBBeHP3Z3TpBFHt4VXnAF07VxTvlg9q+rLiWJCR\r\nRAL+AtOBvAswOyRayO5aWBO0+0KCf0QwzdMvQvZa+OM7Ty/lSIEVvl2utHMk\r\nlUto/WHMY9RIJI1UiinLX3uwuphKVMJZAPkEN2VwBoEXj2pDj6n5M6iEsqWG\r\n9z8zbnsvmaj2HSC47nXZFjJU7S+PQQTniedcFz1BxpcvIR4KvdvDTJ6oWG8w\r\nbjR/ybapTWf47ePalxlOLbYsUuwqAxMHadhYKmVr8ochO93Ahi5vz08oqd6S\r\n2GWkoMvBjakOprrr+zCaeDEAVn/RoSrl7XbWEmvwAD1kvQmPQaMXRrBHLh+y\r\n0o5sZsW5DQvyywuxKeCk76NW7bOj4Q1dY7SupLU9Lhpy5EBtG30JcU16o/Zh\r\nN0LHaqGcP1T66zXTennBa20XV8MEh/i0ANDSSMKWXYvDIV+EdM68vpCbyANj\r\nXGfEZCWg/NqBOUbNP/GlaJTiJ2jZy7+VU1ZCit2Xk+vq/oORs/CLuEdqnEVA\r\nMvh5BTMs14nBT9AEUVGqbDCOgdl7havAJlM=\r\n=6r/G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n","gitHead":"cea256990068cc2248c9bed32c4a47fe622a3286","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.d25f3404c.0","@material/theme":"15.0.0-canary.d25f3404c.0","@material/animation":"15.0.0-canary.d25f3404c.0","@material/feature-targeting":"15.0.0-canary.d25f3404c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-indicator_15.0.0-canary.d25f3404c.0_1662025442258_0.9451443497251018","host":"s3://npm-registry-packages"}},"15.0.0-canary.920d8a79e.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.920d8a79e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"aaf1cf4b863bb41c96ad37d3ea2896f071e0b64a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.920d8a79e.0.tgz","fileCount":38,"integrity":"sha512-AAFrFp8NJj2mjd+N+9TGBXzYIWqkkDoNoreCMocTKboLzaHX1tJ6rpscOFhXRjkI1at6tb82s0H2gu8R+WYfiw==","signatures":[{"sig":"MEUCICig+5gXuynMFAIZIWRSOSbaQEI78XqojQbkSYqsv3K6AiEA1dCvJRrHN6LYDacQLU5aJ/AuryB+zSmRA42ed6JY4tY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjERQQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpUNA//W45roABUVY+ks/12aE/5bIumVyXLjXOW68enCVPGr3KH0qxa\r\nPwg9Yvjm6fTmqYHpBAFVf1ugp6w1MzgrQjqvcoaiphZbwq2n1vAX4zk+UBTX\r\nMJeWhBd6QYoy727xoFaAE5mZIFCVvao3E1/y5oFSr0vCCIms+jX6keFK+25H\r\nRiEzZ1UXKag1seAzqM9VzhBvAo+uIBRwtKWsEW33nlGtvPk//RSWmqrJ1krI\r\nNHkBbE7dCHO0l0lUOMgY0/s7AfxagKz0Ew/zyv7epYuLUlQXlfsK2wKulZaI\r\nE7qj5J1mDizmC2CsvBemfByC+YuRm0MAFUrJnZltBZ8oBBHe0QVNSJ11dbhT\r\nllOnh60xerxMzdrcNW1ahbZHSGKWFWbsySIZl3mGyrczvwQXkxLXWAstcwtP\r\njU8YXLvmhRl/96m6WczmpUygaa8MPZey4uEHyyWjvQ5HtePqYjvGEueCAmG4\r\nuJQGJjf3YeXT1r24S9vqvFEozPhp8l0t6wIHpcbMEdbXkLW9jXLOnq/9WI0X\r\nlMF9HR2QK33PDXZmzrKiZfMBKr03AumlRjGsnt30beNgnYl4zPBtnl0B02jy\r\nU7k1lKR418ckOY4pRq+s4ga+6fK0hsRjPe8ElMP0HaQA2iDII7hjLijcLE7a\r\nHGSHyisxHxJTkX+ZHboyRfiNcsWRbGMEBAY=\r\n=5kZ3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.920d8a79e.0","@material/theme":"15.0.0-canary.920d8a79e.0","@material/animation":"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-indicator_15.0.0-canary.920d8a79e.0_1662063632252_0.3876250055145285","host":"s3://npm-registry-packages"}},"15.0.0-canary.c363f267b.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.c363f267b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"43ac55bccb5bf804803d26adc17c412430530cef","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.c363f267b.0.tgz","fileCount":38,"integrity":"sha512-BdrUmoWNozdfqab344on1QB/qTLAVoFtUBSfGzXhpO6+3sSlZchMnx4QbJRXMjVbwUYSp7ayzOjXUhN/bNH6vA==","signatures":[{"sig":"MEUCIAku4XXxtik3nlksM+lPhsYErpKJDkzejngjEvUgOO58AiEAldviKO42NgVc2Nehl+TKLBjMk07DfUX8Nx7ZDYC0Utk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjESGCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmorPQ/+Pmcxz8C7PeH0ZAeRQLuNTMRKln7wOGcQMiceYS2q89yoQ/6s\r\n7bh7cKIslKrQhLHncrpGj5bknCXyHD77jrWnsr8aYCpmu3fPcjzFYZQv7zsb\r\nuXH8YDYFYnR/Nk64aCAodeqVZjJilJ4lEJeJbzxoGuEVqif3/y1PXWA+TrtH\r\nT/buSEN7kDwjRVweAYcKa/FtmZmPJYdRppXdTR4/NOEJZES9iC9yLXRq+bvE\r\nNvUN7ic08YazXgYFLCMezSbVc4DSe2r6uAUhXpBFCMmjIjV+fWvjCxhdQ9Sr\r\nRIgJ1eNe5XDUpUe1u+3f6fX46svt6/cXJmqmKsfBwSe6MUvnI9KAOGSAh/11\r\nnLgR8qXP2nwQO5sRinCW5DK3nlo1nRRiLbtOf2IdsOvau48AEULyKeVWB/6C\r\njketVyrsNPMTzCgCUW0on9ptaPcbwrxFLB+E3sgDjEgj6H7E0XbOwgUd89nR\r\nN/HVGZzd0jREzxs40rMnIfkxNwQ93QlcAWcPjfjvCidKUZ3vOPksJQPovbvm\r\nK7WVDM7trQ/fbJpVJdfs4ZyfDe+jSfVWcsMzfWTZapYcrPbh+Hc5lx9KcYI0\r\nnx2nPBpfAW5uAaRf7vfis70gYl5mvrLTwFxiABfuQ9jwKf+rBHxQ8dKHFczi\r\n0l9teBzEtmNLTxkLexcUq/QEvwLs4928nn8=\r\n=jAaY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.c363f267b.0","@material/theme":"15.0.0-canary.c363f267b.0","@material/animation":"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-indicator_15.0.0-canary.c363f267b.0_1662067073961_0.19773861196681142","host":"s3://npm-registry-packages"}},"15.0.0-canary.a4eb4937a.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.a4eb4937a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"80d9f62ef296c3fa3b4d379cd3d8e4bb2db1c95f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.a4eb4937a.0.tgz","fileCount":38,"integrity":"sha512-02aPymXZudT2Iql6rnb+MCKjWSitTGer1wKhjUI8t5fdbjMF2WMpHpCVkWo111RXMzQRZaFf+fWPpe1boq0esg==","signatures":[{"sig":"MEYCIQDBgQLAfI8hSZsp7NW0IGrFWkDSfjNfOBe/PDk3GtQWxAIhANFuxj7bCI+rg8zw9BaDu8RfGvIBIocuLXaTuGasVuu6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjF48tACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqz2hAAgbDMK0qlguMvt4fppYiEa5lPmLJfxdKxcCZ7nhyuUB5KfnIp\r\n8KpJMWxVyc65dVH8kRCvYoZw03l2n4iJIuxu+YsxTzK6Z52a+kXLObeuIG08\r\nrNaY39fkViKyzcAtYT/shpOxjvn+Oo8gX1N1d+zc482tkKpAu45NHKBgqbS+\r\npPuuqDtWb9dCc7EO7Ld/HI9/ixeXtVSM67qi02D1gmTbLcMVjjvttWovxMQ2\r\nIBZ6r3ME5LnqxRaP+k47+rLFKkc72omN5fKVvMC9iQHHMdDYj2VDf8q0bdtS\r\nCV7IX9R0X9Hug2oC5Nyzpp2/FrJjrUPPzbHurid08ed2M2btGf6hGGkwYvWL\r\nCz53seaRLoDH2yf2maKTmikHdLNVwfbR7SB2iZudD487S2ZsNT0NHzXXbGMC\r\nocUqy1Cud2J3orauEjIKl6fENSuGAIP8NxdoshSh+sIW9Ohuth/9k1CwTRbk\r\n1wDbTeDn8RqH6mcn5wYtO8cLq41O3qg479qzFl11kWOvhm0BnCd3BZ3/7RHH\r\npf2vdpGjUjmZyFjTCk4hXgbx+/S6Vzwah7ClcEIaiFiMeF+xXbLgDg+hP40U\r\naZ0eMbO84P/M39oeLQqlgKNvAFI8DKePbH0lyBCkzbSgS4Adz0oe6wN0aZuW\r\nXgCBaISuf3AJ7MdbsnigVJIkU40AfbCVC4o=\r\n=3Ibo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.a4eb4937a.0","@material/theme":"15.0.0-canary.a4eb4937a.0","@material/animation":"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-indicator_15.0.0-canary.a4eb4937a.0_1662488365452_0.7835327329104749","host":"s3://npm-registry-packages"}},"15.0.0-canary.4299717da.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.4299717da.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"249ebfa4923569b2c434d208da554b03aeee8524","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.4299717da.0.tgz","fileCount":38,"integrity":"sha512-kUktXgi522A6/g9foiCrzNDh9dJHVe/bRi+H1z8/8aUaHwySnEQf2d5EOZw9foWz7wMHFd75MXOLRnXk0cIa8Q==","signatures":[{"sig":"MEQCIDUeqZf98w51EiKbUUuJA9Q4IDizfaZea5jIaw4OS/2zAiBJNvnIWgq6Dg+9KY9zWBUNaBHbqWBhrS5e7BcWTt7Nfw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGMOVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqypRAAiG7DPE4/sTlasYpcyK3tQpwzPo1sXY4GZhVKonBteMGxwhhj\r\npDFpBYyTKJ0+Abhg6RvnKybDbJ2FLwNw48qy6i4ajTvw26tSKTe9sHgWJJq9\r\nlUZx1j9h2EpL8w+NvXDvvCWVcRUEOcE5O++oHw5pxdiL5avzTC1FfAX4b9j8\r\np9l55YMEJTVmUqClx8oK84xkyrOcpDHCfCX0EOoH0HSNlkbuj5fRcUVB4Fxg\r\nDR1HcVvxv14UsSq3sg33r3KQVAQ6bwTwGxMtV465sq/cAOAaBJm1hPThdogp\r\nMb73bN4rulZ3xGHFsvRgsgZngj2Ypt9R9tbj6mbwb5HGgQRvDxaNgIXVFXOs\r\npfuHWx0Yuca1+fhRuZHdtzITD1OpLCJcZ+POTMMXYEuLod7s4LpsHGBcZfB4\r\n130nmeokifcbPJMa9TSEAkYq6akmWZq25mgFsxx5yCCmbBbD3xBEeZnCXQKS\r\nPopCxFfNALLdWoM+Cezl1oh2dN/vzKLYZmIWdWP814NrlhYdXj96NGbwUXy+\r\nG4mfi4Svwf3e+rtbBS8Jqg47HksM4n9RV2NYlc6LI5JzOH0DMmqdR3/UnOvK\r\nLfbyusHjUJD/Gp3IDFgxZk7VCxYm4CoDpWwewwRGxZVuOCnWHP8O3/X6xi9Z\r\nCyQrFslhQBj3yeDlDSNYPUwlmPcle1ALmpo=\r\n=4LUG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.4299717da.0","@material/theme":"15.0.0-canary.4299717da.0","@material/animation":"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-indicator_15.0.0-canary.4299717da.0_1662567317549_0.4438271900984885","host":"s3://npm-registry-packages"}},"15.0.0-canary.fa7d8d44b.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.fa7d8d44b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"5076370c97032381941a8555e686206de8696dcf","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.fa7d8d44b.0.tgz","fileCount":38,"integrity":"sha512-wRDe5lxaDeMnwPT5FevE2ENqEi8ri134k1ywodwLN7hK8NlJamukv0RNRVkb1i7xOQTxoyMgqUuUSnKBB/zRiw==","signatures":[{"sig":"MEUCIBNk3uZuzx8uDIU0VP7SU8YDeiWYFeCnrMy9fZjlkIK9AiEA+VlUbMmHelUuGNGQv7vuSeVGjFJPl5SNOUs8PZGbGXw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGO5/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqsUg//emKafjf5FV6dceAlPHKJdgW91UAmddOtGMm8Sr+JZRs2VAju\r\nDzjJSBOP1i9IkPNYAYC+7vPlCPXkQTGUeKDt/nVOEkbOomPAS+3udpKdJhUU\r\ny7MoZrZHXK56Me3rfzFf08bqbr0mefEC5CoUdMieA75bnyCmS1n9Ql9jf3d7\r\nmlL0aWRe0h0sq5T7liDzB5EzBTjdBsVvnJO1rBi7uLOKB00v5Zx2bMrI2+/o\r\nOraiGhFF84Pa2Yv6FsmW4+o8ij3CXOQ3SytV+iZobIOnr1wMwO5iQU1n98gw\r\nQlYMBwfhZGYqsLMdqbdq0M72JaUcXXv/o6UVBz3thBmarOVDKZVMDH0PbTX8\r\nycFei7ziBOOrMEcTOuYPBfvgJNFVV2pgUfwyiZI5wxFJ/7w3Cz4i7Q26YOIl\r\nfiMxJcNyNrpGUJKF2kaoaJhfPGUh6Srfn2oBe2dFPyqtpzacztL09dBqhiJt\r\nRI/SPUYX8Y3EwIu8veX0vxUfu67P/GXRgXQncyp70tnm4PTiB+xvGMwR4iIp\r\nMt7yxLZ30K4xbMn0P/aIgLNGvre0YPNo8Z/SVSK/NFyEtuLzyAHTyZ09IHTy\r\n06TY//wj2uNhqBOt6LxvW0wWVArd8FaOczA1/Gvty6JSS3yH0BuO+C1dBvUO\r\nUjNwQKdyrMvS4tzDNmd95Un3uGcN1nEDTDQ=\r\n=Ldae\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.fa7d8d44b.0","@material/theme":"15.0.0-canary.fa7d8d44b.0","@material/animation":"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-indicator_15.0.0-canary.fa7d8d44b.0_1662578303105_0.4085891525718124","host":"s3://npm-registry-packages"}},"15.0.0-canary.a40e3c768.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.a40e3c768.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"092949ef9e52bf0fc78ae40c0bc6ab2890aa4fb9","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.a40e3c768.0.tgz","fileCount":38,"integrity":"sha512-/FwRziaDtfj/OE4K3OUk7vp2o2ThoMZ1iV5mgZGunP2NtiV6kRgqGnhVLllTg5uu5q9lQPCekMRqsxvbRfLQkQ==","signatures":[{"sig":"MEQCIHfubi1dns+FlsF98pr3eP6eYcO5lcc3ofUk1MFDuqr1AiAlMBOzGJ3cQbncAyo6AZkfE3HCHuLYDDaqphTM7xeZyQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjG5wWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmphLw/+LKvL+FYG9B4J7lRmNiD6I643630WVk8fm5fOOlorBM2QY4Jr\r\naAP/ZvHmKja2S4xA/DE2hddSP117IVnDMlVKuOhLCPmYzHXzh/NPwmtn7tJI\r\nzme+o7u9zDVbpacFqnPQd6C4jOTkpqkolEshet/rvQkVANp5XnIhPK2Wph/B\r\nIwvtnJrZhH1uPtxGzcSRvKzbGyUCuuPQXQYE1SVeRJIokRagL4zSoL8Aer6f\r\nnYJltGW+7c7CeRFeIsfqWevIdTTnF8N/1WJs98XYpHLfLZ/O01k/2/wEq+AJ\r\nf2GAgVTbONBzoOM0PC8dcJJLBOOyQNkInrEayzHan6UDX24OK4MsNm53MhAG\r\nBqFSRzpqA4L2+DLViLD8QLsrEtsoYOMYzjiLSnm+nRYoFOr5QYPaug0pdJf9\r\n43xZK1xJnmcd3PxlVvHJ1w29UBgmZGfdYoMBnr8015T9rzHDTgNbATeS/77+\r\nJWhLB5vCtCwLtoRvVX+SPfstHIl/l8wqJL6tSmm1sIhRlxHsli6gwpaf9RH/\r\nlquGdRjWnVgxS4+59nqc4NLdVrlb5Y+pRhv03bJrWEeF1ASQT+MRbGQJjcp6\r\nwINiq5uiDX0qMRCGK3sOJpvXOLiSAYWiDfyNSSHcwWSJNDaVbgTsA0AkF7mA\r\nA5652bvVJC4oAR3PNoQh5GH1FANhedVeveU=\r\n=S6Q4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.a40e3c768.0","@material/theme":"15.0.0-canary.a40e3c768.0","@material/animation":"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-indicator_15.0.0-canary.a40e3c768.0_1662753814341_0.5296023071833698","host":"s3://npm-registry-packages"}},"15.0.0-canary.18cdc9a00.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.18cdc9a00.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@15.0.0-canary.18cdc9a00.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e60068bda8756d902f5529ea3a9300c3fa4f8b50","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.18cdc9a00.0.tgz","fileCount":38,"integrity":"sha512-knCETbh6BqsAYSyc3ARKmcrLm6svmDmCswBm9P12C22Wd3zQkMYrSy4KHiakZO22AGfEsNc/s0vibKDBl3C6mw==","signatures":[{"sig":"MEUCIBdephODSeFF8iQAQd9SM8M9U77tGwew6aPE5JP88xWCAiEAmb2O3/9meXiyWCRC+/a53b+dtKrBQ7nU/UIAhfDfIS8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjH55nACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrgRhAApQ1eLB3+GVAuQGyyjbtfiRX++L0ufeVbfPFKwKM4U8yszhc4\r\nAH/fO3b5/IjkzjeuAt2KddrqT5zgdGMEupI0SVDSjqynvroJoTkfP+ZfPhra\r\nfD0ut16AJOKd4xS8t7jIIL09/bv81CLsreb4g3YCzf6dOFJew3mRK4v9cvrn\r\nbJ9Jy1ubryTyJHf9J150A++ZE6S4h3wo4Ruvjl7YOWQmM26Rzka0IwvnWcH5\r\nYZj2LDT3gJsT6bzLjb+ttm8XqBy+lSLyARbOpYNYds+0S1Lj13UTgWyD4Tjs\r\nJdU+TVxE33xzNoQInl/iswc0SKPIdEY7Zbx0BCcHtLZ1vntloL7B4QkrgiDz\r\nHZ4z+hg5heLkhcrdFajCpyi1PHUoFor1QDb6uy2opAdKFnfR8hlVome8rx9R\r\n2fuycZ5o1Xh2+QZxOjbuPJBLkNBZj26XJ9FRX3bpHAlJbdttDnk9MHN8cw7X\r\nkOLIIVHPkFi+I3BWhcLlhQm5clj8o3cxf+JpX5271E26XbQDHdH5hofyKlc2\r\ntn0tCQK08o7A+LFpttIledtkzGq3QsCIFCutmIBg+fNtJTXejtHxkmpqYiki\r\n2Ffim6XtxTiL68W8mcdVgz7AS2Ek5qp+pkAfOKWTHcKEKdS8Ga1idA/cdcQF\r\n/vCe/PBh7/9HHCcSDX7edXdgrOhG6fHt66k=\r\n=cT7e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n","gitHead":"85b7dc2034fbd68e480826d635d6d061ba62d3ac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.18cdc9a00.0","@material/theme":"15.0.0-canary.18cdc9a00.0","@material/animation":"15.0.0-canary.18cdc9a00.0","@material/feature-targeting":"15.0.0-canary.18cdc9a00.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-indicator_15.0.0-canary.18cdc9a00.0_1663016550903_0.22997815217470063","host":"s3://npm-registry-packages"}},"15.0.0-canary.7ab3cd3c8.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.7ab3cd3c8.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"1c13c49f8621bb86abb94b94d0872f809f418623","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.7ab3cd3c8.0.tgz","fileCount":38,"integrity":"sha512-TRR0VecKlq7lPFiz2ZFY5k3ALLwp12M982eE+glFLf1QIAKe3Yu1t1DrXzbMeJL6hytsZMNnaQ5TtRjLASBRpg==","signatures":[{"sig":"MEUCIQDXvVU1v/grgYyHHMmuYiSPph5P0+K8EGTMj+qojpLOlQIgNqin7tzvruDHB3xJvn446ByMndyq2O/G8LdgCUpkdVM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjIQZ3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqC+g//UyX2/STfUgJ6IfjFIuJfJdj59FTw5GWeR4vxMtIvu72rYJBs\r\nGZmUrDlMDaKaS20g06QmsMBgfPH/i/fk+lsDbCflXp1BC/RtUQcG8CSdvyED\r\nG4XUilTKyh6kt9fPNLetCYlxzoCOQvIIdEk18Oa7Uqw/LRlJf9Y23lwYcSaa\r\noguLqufmU5bIoIemkSyu7LhtE9dL9iKmC+LUCIXtTASHHh/JzWb8zCCt6Zwp\r\nXhmoEmY89YUL2FjsiU3hxGtiSJZpeRqnzfVfhMhvLlJwi1RdAN0zKt19Ptbr\r\nf+3C2N8Kt37a6YgPYxx1aN4oBv6vdgq7MjXQh/BfMz+PhnJ2EJY1Ob1MLDVr\r\nZElbeMUEgSJl/0kz1rIVUJuwdZYyaCYDSyLd2EbtdYYq+CuN66lvuPi3RA9o\r\nobU4SAPwPJ3393E2R7XUdGFKLUPsMwQbp+CxpM8BsGA7P9UN/32kfvueOvYw\r\np3CKvxQJpqADA+XZx0IHoXwQCaag8XjK4Qoj9NXRi1tZ/um78iuWDf5Lwg3q\r\nhz/LTN2Z6TqDvAGc0jKxRJYXdBYShRaLFlTgzh+9hQqPdUQQXqSSQkH/TVyZ\r\nfKg9TN7gCBybaDQhJBwcHQ+fXeDRp7x7InRt12o4VEaY6hfyW2rHM//NkkKk\r\nA1cRtAxtIJj73VzOV/XGnHyVkJ1LO+cG03Y=\r\n=/Uvj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.7ab3cd3c8.0","@material/theme":"15.0.0-canary.7ab3cd3c8.0","@material/animation":"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-indicator_15.0.0-canary.7ab3cd3c8.0_1663108727500_0.6891285161791327","host":"s3://npm-registry-packages"}},"15.0.0-canary.2860d244d.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.2860d244d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"8f577f651a32e639ecafe8f88248dbed2c45634f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.2860d244d.0.tgz","fileCount":38,"integrity":"sha512-9GIz8k0b0LPlugpFjV5LF2y6Opassn46N/KFQBIOC3dtydx1Sv4SRSJbg+a6OiZRLrQuU5Eh7wfQ/WO6JceIaA==","signatures":[{"sig":"MEYCIQDp4BwUmaIL3JU1M9n8Z33/PnZpQSKUau3AJOjNLVcLPgIhAMFYKB9QhdXR8x3xarvo6k+w1AkFAEbKiu7B/5fXbNWx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjJP6kACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr5FxAAmqjrzcbDEsh5gQ6167H7NOL2sjyR2hBZsD8jh7wD1akAidUL\r\n5rWbEDBM46NfJ6sAHp5zlsaLx9CX5jg0NRLloeGVEgySdIJ9fqGM1ss3XUsj\r\nnxuAiWyLvzI3bh9NrPZUgYmUsA7dHozmvaXyqSRkObAm8cw9xlhBWUGGrgnL\r\nFj2uQZjfENbCDeCBDQpUtT5y+xehUISbGnNCFxuv5awAmjxaU9GQu1tMq8/s\r\nXunETzW3FGSU9GePXNV3mmybb8lpg7erIVBZwvOsckHZ/SXA1USKKCK1LH94\r\nQh/bmR/o/Bl3mOt+gUeMT8gOAG0r2KSDxDoihfh1P9gzsGo4EJAe/V5Mn4aH\r\nVWVvHIuGbxSn5HiEhp4vSWzIkKllD+SuoWy5fyKsuaVgUK85NGM9H2qLSYct\r\nmY8QANpr6FcnV5Gf1gX5RZL4FcQdmW8FPlrTeZsvVzdgmvGx6EQq05cQtb/o\r\n+HN5phT44lQR9RA+xnAsTzd6eyBgqSsnmadEj1lGupxVgN/+Y9DqxufNIVDD\r\n2MelEz4w17JMyQLdhmHSlRdAFD41l+yqvaDQEniRsQv6yqovAlRW1otYera5\r\nSgb4IcXL3qKw9kL6p6OJ94AMiVLKKb1987qYg3XjyEp8mhgnwsXCYQegulSI\r\njiWkqcU7uO4ZCnA+4MH9t7zn5ouBCKasUZU=\r\n=L5jj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.2860d244d.0","@material/theme":"15.0.0-canary.2860d244d.0","@material/animation":"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-indicator_15.0.0-canary.2860d244d.0_1663368868741_0.37869070595130383","host":"s3://npm-registry-packages"}},"15.0.0-canary.e8726533c.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.e8726533c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"d9d6bb38ead5406813fc8518376feca4b9976662","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.e8726533c.0.tgz","fileCount":38,"integrity":"sha512-D9/dAJMraVUC5mR+w90+PJd0tVP8ilALgSIdBrlGZcG7qkFumcGHBZFWk6LyolDq+wHDqDCdA0UtnAaXJZLg/A==","signatures":[{"sig":"MEUCIQD8Ug8W0XWv1ZfgoHtXnxKc8emmvW/eDjBSwyxvWPESFQIgJO9sUe5qzFOh0ockHgBrJTSqokN4JmBFirN4/3yOuz8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKh/PACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoCjg//aiTiNoWzKXHfD5AqjqS8sc9VGlJJbgCSlnuITMwnvtuKHWPg\r\nmbeo40LNKJbcBlb9jy6lp7ibaNJC+qlKKYS70dlQhSyJwux2VhfzJPdD51IH\r\npHc4V3vmZXzEalQZ434xGoTQYy6A6MQl8WzRGRbhrNGfTBHCbg1d/qAh8pnE\r\nRk24ifPo3xLkopcH27jdwkDdqV1tbAAKdr/Beybb6WQXsdSkScNDlvOMq1ZW\r\nziLKOYr7TAvK9VGE9Mnc4oRqfECpTq7O7m92iBIWF2H2NIlMWluR9bpx8wkj\r\nwZ69rGQYN2hHCf9o4rBUlkQ27I1EdyIQGG4B1hJYLmEUUTUd+CYGCZY3JQJT\r\nkqIDaOEbJG5GrMxPXdOngq9LLnOYxFeyR4HkF25HakCRFy0snY4QWJf7vm1j\r\ndMMkyijm7EKA5WdQPPHI6TGqg8LW5LxzBZfj0YMl67Td7f5KDjynTiKl8PXW\r\nbsRwjA5YRDPt8mWu//AUdYqW1hMG1FYFzw9EaPHqOy/3zx3sm1OJRcgnVwi1\r\ncK0Eucv7G2m7JguN7VOM8K30A2+KW9Z4rV0t0XUJDysLVFja8ata8gzAV+/2\r\nReLhqIpPhuXZMpB45StuA6jNCS2ioBjgCyCFfnxD8ZA63+gZ3SBoMl1M39Jd\r\nZISs/awlFQ60aMby5SHgVczsXBYb2jgLzOg=\r\n=7qTT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.e8726533c.0","@material/theme":"15.0.0-canary.e8726533c.0","@material/animation":"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-indicator_15.0.0-canary.e8726533c.0_1663705038888_0.8184780572522485","host":"s3://npm-registry-packages"}},"15.0.0-canary.00d8de0aa.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.00d8de0aa.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"a1476fdcadd27bb89dbf1e53fa1713d021a5faac","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.00d8de0aa.0.tgz","fileCount":38,"integrity":"sha512-/cRSe7pLT9mZ0spY/lMeybqVTySgtG1D7WC3NmgfwauskKz1p5NN/2waf5acc5k2hmFJI9BahOAXv37vSBW8GQ==","signatures":[{"sig":"MEYCIQCX9pe1Fj/Cit6Jafq5Rq9SNMkp7VMFS8P/IAulnw2KGwIhANUgb38IQjG67RNIBx0IssK3FQZz3rYS0w9fatuHJVJV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKyuMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr1zA//YHLH+GkKD87jAKAcksVsmVYaVpXIwS8F81FMcxoN71eEEZtr\r\nUknQeX/9TYHYQRIM+vEkRkMTkAjG4eyNi/DMvQ/od+nQV4NG84U1boAuXPA/\r\n3nfr6azLBe7qmDmZOc9G1ESXGW5opImEmIIsJ636/rdToBz+mnDqQBaIrlHs\r\njbyna0FYqNAgRENRZhYEm3U511wobve4Bi/WRCmPClvimTiOzxn8ua/WufV2\r\nzgI9v7Jaj+MTUV/+ZlbyH1GJGQTcCtg37ZRqkfNCMV62ns29r+X9/CaQXZzH\r\nkgGLxZ4YeT5nqgcT0x5r9xPc4iDAOFHBp1myQ2ETHwFFmEukeQrtKVXOP9er\r\ngYtcuQSmHCN2Zyy2hpFnD6r4RBe8Fiqma2UYTXgCUW2HF4BN25L2TXqaJnAp\r\nYusACcpVWaqaEKbruPQH27BXvj42q0nKxh7wHIm5+rbJRpHEy8ZqppPRzpN5\r\nJubkOH/CAxpQRKVc0u02YAVA/DgLJjOnKY83MCix0yYMKNsHTiqsCQQKp69/\r\ns3iZ5eChgFXS/8TJXSlKWASA2it0RoqD+sGde9x7kutbmF8YiUdb6zoqJuyk\r\nfxC8Vq3Ruu75++fEdnnJkWgcYGzg0P4VqytlbruDcCvirUY6z7nNXOrcj6WF\r\n3cSUFvsPsNJdBfFZK+ghSEpd1q57n8Z11Ik=\r\n=aRLb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.00d8de0aa.0","@material/theme":"15.0.0-canary.00d8de0aa.0","@material/animation":"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-indicator_15.0.0-canary.00d8de0aa.0_1663773580666_0.025775694223136414","host":"s3://npm-registry-packages"}},"15.0.0-canary.271aedc30.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.271aedc30.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"75a5f2dd4ad9b07610ae2a36e52d712e19af4c29","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.271aedc30.0.tgz","fileCount":38,"integrity":"sha512-EJ6CE8x6mJ8Z4X55fSKgwaEzHrCsprQlDz1o7i0POxoDvhQcjAbTNRSqtGzbTjHM7Fz/bXHRVV2eSWuh547vqg==","signatures":[{"sig":"MEUCIQDrBJHPIkU2UVhca3SvUQEWNZ5ElPXvm1+6lpDeqzmlCgIgQRJA6RibKj9t99KkjxU+cKYv3Z9Eb/ZuVUjManmx6KQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKy9AACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpWxA//a10qoylIpvWO4m1AzXOK+eC6ypxJ4Lp6iYmK40lZU7hOTTtE\r\nWOydF0p/faJ5qhdEiqZsLA4uFCBI9Yt4IG0yPFX/XDWv//8myvRESGdCWE+S\r\nmsgn+SdbspBfDgvY5M5aIWw95Ilv8gUvGnGx1KLp5Q9Xa2BJHLkH865bd4/5\r\n9Q94eM8DcQuG4GUs4Qg22dt/FtG8YCZAxLwkCgHSZiWnIEraQmcnlxjlzHJY\r\nqku4WqHy/CSTENr3zH89XeHouS+x5aX5/b50TmCg6y0JBGlv8PqbJMbRS34x\r\nrzkw75ulm6Jypdb8fHxH3YZlW2FMXZ8PxzSOR76Mk91rGDeBS5iqmiZjciDm\r\n8wjIcCdsU8dxxYb7JhHdlOEpc3TDDRfrHkqnSHHqXIu3ZswETaf5PwfY64iT\r\n4NN0wEsmUxDoTiEsOhX1zeuDCVmMll6I6aFQIqERqTGW3YyMSqalRxuZNHH6\r\nkjNmobabGDVhDAQDMQVTTZqRuEpzSTc7Kk7BD6znlX4CmoP+2NQn/HlsgNrw\r\ntGMqHpybOY+TgbMiJ8rWN4+Dc2CH0OBeX/KqKo9oBue6WM3AWg3qQvm0huyj\r\nDCpoXQfq8yaVBlnMuy6Lvwf3lFVWi60ICsDbp2gVlqscZATiz4P+zqpUHezk\r\n4nyh9zTV4EknoXCMYoV+oBJdgPwn1QaVZPE=\r\n=4i69\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.271aedc30.0","@material/theme":"15.0.0-canary.271aedc30.0","@material/animation":"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-indicator_15.0.0-canary.271aedc30.0_1663774527903_0.463821349649437","host":"s3://npm-registry-packages"}},"15.0.0-canary.9f17ff2cb.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.9f17ff2cb.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@15.0.0-canary.9f17ff2cb.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9120bf75a8e0140017e8ef7ddc5f7fb4ade5dafa","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.9f17ff2cb.0.tgz","fileCount":38,"integrity":"sha512-RIpGYEHld91xBUSpdHw/VVYj61Qexg/jvaCDIpL/6+bIPsdij1ff5yoenAA0YtVDndUXYXNzJZwIAVu0bwzk4Q==","signatures":[{"sig":"MEUCIQD2E3v/+8xQa/+3rEWYJx4AFLwTyl3dvJMrLeJVihlfzQIgYUs67LEe4rRtSR8ttXHVBjr6MWxit7aAFEAmtcMsuJ4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjK1L3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo1oRAAkm6ZHKJ+Kf+Od5HizftgsG4tnFxKb0RyaZfFmSW2Ebwj36wb\r\nawhNBm8LTXzAcBHcx8Qcss2FDBJlgv3+ua6WRoI+ciI7pTPR7hgotrD0zz0X\r\nErVNhXtHyvAnwFHmzXNiYwDIM0mEnWGC4v8w9vp6NIVkKGGeiyr7T0accR8t\r\nLZJBf0Zm9wqni26mRbX/z+Z5dSf6AfOMpdMRGmbd3VC2UJhCNu69mLnBsxiS\r\nQ980ycu6D5bIIDDJ2R98lceBASOtvHIStiqwpIGnARlb7Pdg2H1ow/1YCvz3\r\n2miWmr7CsfOAYCAJyM2C0TfUEvTRadVpE2ikTxFfyuyAUakN62wShCbpwPO2\r\nks7HznYfADXBTGCgC64Asls7Oc9Wo3PEEoK9RogaX2uUkoLwaLe3ti+5wF5P\r\nzG36TggNxHcSYmw41PgQN/o2rX3MT/uDfSOnAy5ihX1jt0qM0/IIGEevULcg\r\nzmXgMAnAMx3DENnBjBXM6P6GHdz7NKq6Ay/MCqn0M8c0DTmVXUd5d54x4qpy\r\nQnmPkneK6MYBFFAkP/y2XzgAlFCT4EXomUmdHVZDEYoaH9yq7cxiyD8G7iS1\r\nC4SbrTcTiABuggehqXTF6imcGcb51+zZm8xaSc/MkVJDHWe0/50kVWkFVgwd\r\n6pzIP8AdOMy2JVct7/1daevIz43JeBhNQv8=\r\n=vgO9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n","gitHead":"34e73eebdcebc0a0b475c8b2f9fa0dd4a4c3397e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.9f17ff2cb.0","@material/theme":"15.0.0-canary.9f17ff2cb.0","@material/animation":"15.0.0-canary.9f17ff2cb.0","@material/feature-targeting":"15.0.0-canary.9f17ff2cb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-indicator_15.0.0-canary.9f17ff2cb.0_1663783670734_0.8254638535496399","host":"s3://npm-registry-packages"}},"15.0.0-canary.d3344c16f.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.d3344c16f.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c702c0d597bfc6b7457944ba3ccece6ac3f40589","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.d3344c16f.0.tgz","fileCount":38,"integrity":"sha512-9XVffugs3zA3vV9dYn5DH4H1I87l5kEo4w2J+e+M8sX5gPu1diH3aVb6M76UCl6HnhdSIAb3R5v7ZcFlDj/6GA==","signatures":[{"sig":"MEYCIQCDO3zTGMD44kOsnfDVEKMjwc8+h5IiqfLv+pRtEOkglQIhAMbIDViyV45ynJFmLugraEZAvsAKtd9Um6aC06FDn7tm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLCmxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo4fw//TUEqico0gRpljrTsKKdtGotvpOc8DmbOIl1IF2LLhY0Ab3cz\r\n2r80BS93wJlZUd3NJDXdHokxzibem6fwUcty2qPDEX+mDReXUJvP5zAsAyZs\r\nw71XC++/YWAUlRH0KE5hTZ5oVj7o2arf6xvNjl3YjgnVrpURvvbsO3Glmh7U\r\nyhyyaTBjjUP1PjVxZ8EWtDIErWIzZgkn1eBVlCGxmcdifPrQKKU17aZJUu33\r\ns31zGoM6A23Nmjw24zW0dP4V5RZJ6p4oxWldUFB2XnLULy6OvUeBW0DmwsDO\r\ngx70CAsI7aXSgxSlU7NJuPgb4//JFhKFOM7zoxy7A4g9XhIKs4Rl0HHPg/rO\r\nUF0ZcaTmLx4VaKTDKz9rY5rNR7xjl/5g2dVxaIg4VF/ZHPJcne9Btz2PcFuK\r\noPaeI9K9Ob8oBy0dQFWLGQJyXIrMUpuNhEnLc9JIZaawExWP5+epO25GTnDU\r\nSDBSiueimJ50EDXH9x53MwtjKM0M96c+p2frYujQPEbuT9Dl5DdgrcIiuuZD\r\naSwlFR/rfv1ciUpNsaiznMtUBF9nWW8Xb58WE67/5ESM8XnWnmaAj58h1638\r\nOhEvyhm5QUbhcmcovDl8D8UgC4sT9CO9cFl5H7J0yelkr3O2hh1v+PPqBXqK\r\n/IdT9/HRWsqPplVOwTkLDucrNTHAp7kEuDo=\r\n=uaZ4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.d3344c16f.0","@material/theme":"15.0.0-canary.d3344c16f.0","@material/animation":"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-indicator_15.0.0-canary.d3344c16f.0_1663838641188_0.1256015312640637","host":"s3://npm-registry-packages"}},"15.0.0-canary.94f20ccb8.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.94f20ccb8.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"bf552a0155c533a4c986ccb071686a93596ea679","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.94f20ccb8.0.tgz","fileCount":38,"integrity":"sha512-f5lIFOxdXez3S1UTfRnSVeQb04Zx2Xr8EWULarEGHUNW5KEbkOjWBfbKlIsZ6e70dKPxT1aFwjFX8eNzcNsXFg==","signatures":[{"sig":"MEUCIQC7KOk7xdAmhuTca63yqk2t93qvSipBuoHChUC5+rvBIQIgea5S5F9cCHh8GZqvUBBYNBtTmowd64LaxKJOtk7Rkmw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLMnYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo5dg/+On0Kt101cZ0FB0TaLvkyjtokRgvRbp8j5AKrmmZu4JfTDymf\r\nZ7GgchtFNo1qhqVh/XuaWVgCJy8+y51HXIx1zqNqrjBmj3QD/dXn2kNBJtnJ\r\n+OBUXAkVIbalhGi3T4J1bXpZl/bu8bZRWHK584ui9Hrb9ZZJAo2fiH7f2Mq6\r\nB0+jCpIaAjQPIsf/s2ULQ2wf4uOyW1BF6NLu/Q6Fk9Zr8CG17PuolhEomnzX\r\nwQbfUyPCv9Zrp+MW+d2lKax9IgUymn+R7OXm0Gm4seKLP3zbfMa+KbVxLfiL\r\nBdXH2ZCpx+9e7m+lNetsksPGXrxvm0xN7a3TrAkUJKBj4wkwP9zqUA911vlc\r\nOBKMI0TXa04Ah5J0LZziQgb9AxtgkZN5A+L6/XxMBkLE2oKtsDccA48enr+V\r\n1vpY3Yt2LEVpH+P9dvmJ7ZOhsCjslfDKf39eAD5zHDQ1a72++BSyIG2satmF\r\nVi7jCPmq/L79qcSv5qJObYcqFA/Hl1WLzSUTOat51q8kxS7hr8WFI16ppFHG\r\nzCWZ9AFwwpz4+VsEF0pfgZOTV1KLwF9bfl6v9CC2fIicaLJh8vLiTNKNwPih\r\nJlsI6Vvj66chYztDAl9V6Z8P7d76ZDv5TWafIy0abJmsvC9JhzSRz+NXi6Ob\r\nWrkK5Ao8y9grCqdaXt1iMqxBUM+CKIlrPsQ=\r\n=E4za\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.94f20ccb8.0","@material/theme":"15.0.0-canary.94f20ccb8.0","@material/animation":"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-indicator_15.0.0-canary.94f20ccb8.0_1663879639805_0.26466083216514225","host":"s3://npm-registry-packages"}},"15.0.0-canary.81e4cb7b2.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.81e4cb7b2.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"a0d2db601c54064774979e25e47958b71ede9443","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.81e4cb7b2.0.tgz","fileCount":38,"integrity":"sha512-BpgM3ulkWRbOigl7cUs3qSRidVOYn6omeuKCzGYQLP5KS05muCOGsX4KB7iTrE0HqZDQD7GfBp3H6wW0xPUaRQ==","signatures":[{"sig":"MEQCIGjPDyZjzJPgO2/Ek2rCGKw5txyQJZAnW5tI2Wq3pI+8AiBAhjVBjPFMeNS7tDv9n9jLp8nxgZ3lCsCAbRuOy0TTYQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLcu+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpHbQ/+PG/IZpdqGiU3hbKP2MA2mnmPFgsu+znsQYJuIzpudq+cJ5Uu\r\nIcTtfjgHXWYsS2mnFinKuUJUdxZ4oBwl6HETvEEpxYoljihveFwjEtJU5oWV\r\nEmdm/tC5mQmGHDGxc5wK18H0SG6kErP5yMutOhSL4Grq0mzjLh7IQC0/rtCO\r\nVxG64Gzdzpvlegx6Q/U71DqBnb/txMlG4iGqXQETJGCOMC0MWaTj7LI+zv0y\r\nqb1FZJFL2D1nG7bZXUyAtpvM6sqAXVIilmsGvbtiuQ7dll3f7hiPSnyCVZTT\r\nDsB5yh7ODyAkljBrsi29vVTR4Pk0g7PSesdEfajCN0ZQBFFqKi68V0V+VJHx\r\nQESPvfztMR63AQl8NvCsYepXJG5OFN9FY7CVfeSHpfBM4bjz6P5lmGMhm+SJ\r\nngKhMqD8FivZryS/qD/bAUsfZYZ6i1U2eY8TX4z95RVb6o3iDH76qAw31xLf\r\n8dRuBI5FzgE9OoDImdG//9kei55yBq9t8Oa2pH6YIIuww+RCHAcKErsJWuNz\r\nn/Gnswg7DzD6IAN4yg4cWunfbFAalCqbjY37+HMvL1W4tD0PLD5NZNLyauoE\r\n/Z+8cl2DKZ80f6l9ufIQvHkm6DpsSzlD2yTlRqmILbKoNh1tgerfRbKC3eqn\r\nTUdsFsj1NfsY01DLCMBNtmfl2aYl5xwfds4=\r\n=Lb/4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.81e4cb7b2.0","@material/theme":"15.0.0-canary.81e4cb7b2.0","@material/animation":"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-indicator_15.0.0-canary.81e4cb7b2.0_1663945661826_0.012962775505426682","host":"s3://npm-registry-packages"}},"15.0.0-canary.aa85f9413.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.aa85f9413.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"8e246dc48250f7bb726fa6f3f11b55e1b5111b84","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.aa85f9413.0.tgz","fileCount":38,"integrity":"sha512-GacxXM2SCLuTe4RvcvhMIqva1v9lPXF/tKKnCY/oWJjdXZposC75b3BaSyLjctTtaBlPV9uCUPHuJUCEqL+S4g==","signatures":[{"sig":"MEQCIBubkvE5XY+SkpzrqBkOs+rAycKjocQ2KX+ZAWhZrOgsAiAxY5vsnV9EtwPiqyRCDmcw2juplOXtKpub2CDTrJogzQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMeewACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpJrA/+P9rhWWzzonGpode8beJ5OEUe3MP7AF11wb4SaBY4em1t9gYv\r\ntV5KQK5EN10cvi/Qw/sVWj3m5qx9evyJReiwgnKiE4Z1OOEp2BbpgkjJAzlM\r\n75jX5TSx00/+UepmTIfJqVMCX3MYOT4omYbjCneq9Zhk7S5ezpsfFK6wVfnb\r\nQbNYL9f+jsNTL8D37hCgqXjnt9EcqA7HSrc6LltlQRZj8A1OYM8opHiwUJ4j\r\ncJH/mcGmLnhGvSiv09RiqssFgXH7clLLcBlD29DZRy5xrjgjcknxAmqLyyTc\r\nb8DWFqcTYFiCtPDi/0YfWBWAfuO7EhQAY5GxY8q7AH04SadmD94MfABv3oe4\r\nbzUfpL0l8mQjAbLyBcB4SHkJuIkNBon0aT9cFE7TIZgNrmjc/KsczaQdXN1M\r\ncwf2vRD456kYjAFB/Qq5ZQWA5qxJ8iYRilalSr46SQ/bL2mBQ9KmS95O5m90\r\nM3E48CdfMikComXuWIgODbkaieeZaTJU/BI0ZIMAUb5Llm+a32xkUoDwDo4e\r\nOpyXZZ3GdCjns65R4BgsfVHp/8gvlgeBTvm+lE6BsNy6RU9rbT3m7pWwHcpH\r\nMTyUy4csvBxcRMjkbsraPdXn77wOCTxOHnLDJh+BHfoBMm0LXpqZtAeuA60v\r\nkNzKvVJBYselz2KV7G6PSyRf0JfkC9wpo5k=\r\n=mpSd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.aa85f9413.0","@material/theme":"15.0.0-canary.aa85f9413.0","@material/animation":"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-indicator_15.0.0-canary.aa85f9413.0_1664214960300_0.40681808274205156","host":"s3://npm-registry-packages"}},"15.0.0-canary.7134a7752.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.7134a7752.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"edfca081d689cbe50a0fa87bad5b7ea1f501dd21","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.7134a7752.0.tgz","fileCount":38,"integrity":"sha512-T+x4qCH0dgzseOwvoudT7VNBh/lQVSZi7vL6WR+2NP2KW26IcjQju+l0zaxsAcofuSC06FEna/tK5z5cs7+r3g==","signatures":[{"sig":"MEYCIQDNrcmdCD8/OBtP+xj/ab4InIYYSQiBDtC0UJN4r8ZBBQIhANs4ZfboP3Vz0XCpeaWsEVjudj5JWU88vuQAXjxknXAM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMiA2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrN6BAAkSoOUnLxhz9HPptKfp7J8hv04M+2rPIhf+AdQY8vH3w5BcoX\r\nRvDyhMGBZIqEiWawaem8PILog4lNYa5mM1miRHFYG4r5BU8NDAUlXtNaGO9U\r\n66amwL6nY03kVyqO3s1x7VgL+DbVcYKuxguIGoUbTNq3zRPfa6qCxQYFY3dF\r\n7X2xKgzjdeCajQX8S/L8Va06Q5SBehPEE9IDEWlw9ShW8A9qrtSuSFG3vwGG\r\nigy8w/kG54jwSBnNchAebeWS7InIFKJUpeBnjzZHw7Xr8Cu0E5zch9+3iguU\r\nriQw5n2kH638sKu2AeRprj8wJyP0FFV4lrKFGSrH+rVCTBIp3U4MtF8VLaB2\r\nLZ3j6WqhAvK6ekcmi0h00R+6J7LK/Qy0HztEa5Qc2KCL5pLQL9h1LpkLF5y0\r\nwWsYSNA/ZbNas8yAnFl+ZM3OHANNSJGD9AmFX6ZhbeLQhT55ZCnJ6t9Eb7ds\r\nv2bClTtMyETSU5h6Kc3kZDlRhe2aXQ/J4z3pHynh7TEg5SrcRNC3uOvjyZoF\r\noBMf+0V7QbbVrIyi3A9BuRh8FcWYz6ly8Cq2gEA7cKBRDD5ul68dj/1evTKJ\r\n2GKSD6o+aIFcb9F85Yq3urh1cYMtObKqFahZoQotMGeljRv4qrr4RNVxF7wO\r\nHbp26oSDPadF+Wjj8CBHcmiwGM4Ro1kSc+I=\r\n=fDUs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.7134a7752.0","@material/theme":"15.0.0-canary.7134a7752.0","@material/animation":"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-indicator_15.0.0-canary.7134a7752.0_1664229430063_0.531985364567398","host":"s3://npm-registry-packages"}},"15.0.0-canary.70b8ac16e.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.70b8ac16e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"b9945fbffb15e593489c8f18e0f695961783c405","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.70b8ac16e.0.tgz","fileCount":38,"integrity":"sha512-RL06s87D8Bh7zETtgaYhMZVYEYHuZfS+jMsMoyGOQhKdIN98rxfIFTAsj5+vWEBdNXaXxsXG1BH+3ulthiF5aA==","signatures":[{"sig":"MEUCIQCa+cDzvpvCGPJdPXoG5IJFcmd7lhWdP7001RRvwM0grQIgXIhjxWsNT8Qra9+m+cgmvlS9w/M6CQB3R3X0HAdLwxU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM3zMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq7SA/+N83mNsD1wOJZn2/9UAKZhNyiEdgrXdZdFd79baHI31+2oHhl\r\nH1zHJWIjEHOBjTD6bpbAdchzBMXJSQT3fgOQAdiOVTFyjS4fVFkIMe5jk4HO\r\nfuvzf8uEFTM24KECy6GTqrPTo4bHhEwz0atILNlxucoh8rj07sWYGOE9a/GK\r\nY8xH0xlXW2UFBZiW3w7/PL3fJZRrtV3pFPXQdTk1v2dMex9+2sXf0m3NXge8\r\ntlP3SHKZt0zK3vGz4Fyc8RlMv8J0jH4M22mUfN5pv+vhMCYCjYX9GkaUdQHw\r\nNIeaW8RkFa0UxlB3WbXFWbLA0fHAkHCSBVXnCr6ZkR+LwZu+ymDXy+xqVZdu\r\nBOzlK58HPU1lWyr2vwvviZjVVrwKsu8FgpN8WHaEEST1DFxgZZAeGjqtBBNF\r\nb7MObUF8IrbDNHQCij3agB5k31wmbQ64GeAsYpurugSa+sfaQYSmEHpbXivg\r\nVQfMkQtgq4b69IFyK+zpNppXJ8NqcspM68klhvhDDGFGLnowVq4uxk2yup64\r\nWAvDsXdQ/RDiv2To28xvsuqn91Ycx5ihp0wSyP+g6LU59KAWj4ntW2NQPdnu\r\nGds4qgJ5booGxEVZ2BfmrJ+HOtpzn6Ulx8b8WlIj6MwZWyqYJo2B+n0I8xSm\r\nzBKr6IJ0UZ4Jj6QmnCdZdibSVlBz9NOnm7s=\r\n=O7oQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.70b8ac16e.0","@material/theme":"15.0.0-canary.70b8ac16e.0","@material/animation":"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-indicator_15.0.0-canary.70b8ac16e.0_1664318667843_0.41203939492247876","host":"s3://npm-registry-packages"}},"15.0.0-canary.c20d74405.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.c20d74405.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"da44dbe027baddcaab97f45c86d79fc8f620efb5","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.c20d74405.0.tgz","fileCount":38,"integrity":"sha512-rgTyNFNBcDnAiLByxyc7qrrAaY7cgVQe8m1JZaCensB+qYFV6kEPw8CdQrtz/AhRXHApixLtIpzAhkfVV01gNQ==","signatures":[{"sig":"MEQCICx76tGWUHF5kca80nxs20KgOkjSgIS8cCKMOqR7R90YAiA5qWwr5peMq1vVonrizHsx/U0d8FD/JlBnO8BTklSPZQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM4eoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpe2BAAkrms7sZEdVNaHkuAnquDKPZ+P0v2gHGu/CzH9XkQyE1uiKAv\r\n1zdhACREXK/45fBG36XbEqY4+AWGuI2S23fMDw/XbzbfG6CXpdi/qnkgzLzs\r\n98WZmiTM9lOBv762nG05UCOGJ3kzHUyljtkbVOmsnt0+B7uAi79Sx6wf/d1A\r\nD6tfD2o1hgBw+klJ8McN1V0pmeVkf8r+GcJsJdRF0Duw23/QA8SPzI/Qyb21\r\n16/BH8At/vTVZei9KFY3FUHsL/ujU3kizZGiyHFFueJQpMwCPSSpGRZTaKGO\r\nTMkJC9cI0IdepPie4amtExrKyj51d9IIlbenQg+P5afexWwz7ApPuzEG2LZC\r\ngRmkXRAbIBZmdD79NzOiNaiE98/7adxAnOwS8JoBzrJSuywvDA1BbgqtVLmk\r\nRouEgAuLHQB9ZdlDvwr4pT1x8BNrt9wvnb7X2FN5tdVESE/nubFrHYNipwl/\r\n4TFtyiG7k7WDGLazH5U3u3UN5QzBZqEOhvHNKiZKBYqI45k0YXrjOgE5b8/f\r\nAvkgMjdFfPPG53mbLAGnHPYXCpCF+SlcHuGwy0r1RT18cFBTERm8tdQm1xkc\r\nXEQ05/sgdIpaZG4Ih4oFYfyDkytAMQPZkg0sOw1hWgohGNN7YXEIiFxDxSu6\r\noyugqWS/QilovjfbHnLbYmxZOfHH7nmLIjI=\r\n=AbE2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.c20d74405.0","@material/theme":"15.0.0-canary.c20d74405.0","@material/animation":"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-indicator_15.0.0-canary.c20d74405.0_1664321448648_0.3117629792533987","host":"s3://npm-registry-packages"}},"15.0.0-canary.f033fc8d1.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.f033fc8d1.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ee696ff186ca2ec0ba38c96b7f3e8eb0064eb59f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.f033fc8d1.0.tgz","fileCount":38,"integrity":"sha512-AwdklO7csXMTTR+aYyXp7cTJXtBg1jJylYtyStwnbqY9MyGE4Z3tWkAJWzaYgt93esM9ycMq/08d3hLIvnt1ig==","signatures":[{"sig":"MEYCIQC3aO6+8eZRjUKyrCrsVuh01o5rrGw3KTef/8oSIcS0bwIhALUHsni5Vk0a+LYPPqN2na7dy/VgPIlFJtl4B1izL88Z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM43FACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpANhAAmYElFvbtIQjUxZGwiWshUvPV4HSZYoorDe3HuCaAkg8ipk3c\r\nBY+bbPbORtjDvBnoFVrQ/701jeciTwQUxK1ZrVubxdoK+jNy5hMC/vWTuezp\r\nvMhsmIbWDCsG2ttcm50n8UOXAakyOZkJP9qgUgub9OlFiP6WNaJ9krov9k4L\r\nrwXxUwbbOHJkmYPyHXaXcgTrBSYUMTWLNAXnvmiJ9PKZZE3Kmy3xQbg33WH8\r\nVBXJMXzUEtmKdTnXvXoY4jfHvieSy96M0CH33NWM+BUn9NkHTo4I134ny+dL\r\nmVEUJbWDvWlro1VECc3p82WmxSgymAmFUCryGGd2OfBK0O6uQc5bu4UaOwhi\r\nbPbo45zsP7YkU1Oiapu/hPwB9oBOIROjsLx4sbTYkX5RdfsmWuRwQ/WFbQOG\r\ncKDcCwzsLk6ZPyPahDUNVfzd2/y3AH0qQuyS+aLAzu47CjkVv3tRxNTvGh97\r\nWh1EHD7QlQ/gHfwv/m5ohnCyY9y1ZIGJqDT7U9VWHgXsotuSPotFiAwDhQ+U\r\nJc5inq/URYntfG9oDgWAFCb+WcHafO/lhR7LE6OK5jf5pOZeuSkUh3iO8/F8\r\nXkEa5K9ATUESIJCU0XUpX/RIzSsBtSqrktuXbQmgmf10lb2qDk0fuKyVrbqB\r\nZgxpNa9Txk1zskzAny4YNJY0p63t5PWkSys=\r\n=ZXPu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.f033fc8d1.0","@material/theme":"15.0.0-canary.f033fc8d1.0","@material/animation":"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-indicator_15.0.0-canary.f033fc8d1.0_1664323013779_0.11158455617837548","host":"s3://npm-registry-packages"}},"15.0.0-canary.8d7ae912a.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.8d7ae912a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"370f8e39e60eae21771dec3602c1d0f1266eb3b2","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.8d7ae912a.0.tgz","fileCount":38,"integrity":"sha512-6zEqoneyv9V7/bzCBtaZZ5wdbpGsVSaEOfRbM1bE93tGqmlg4u6UCLarnIEqH5FkbCEGTbPdNRFKk9Lf5FXzZw==","signatures":[{"sig":"MEUCIQDMePvsVHzMb/jc317SLmn2/lEWUtZDRV8CJpzvw36YvwIgBzFCbJmVV9frxmMhPYfZrFZfbBiE6PAr60n26L7ewj4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM/37ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrfLw/+Ko2CVhsGve4j+R0QHeZeF3T4ZeFikRTGRc0p3u+blpPVtRHT\r\nxs5DczzJBeVtg9AKc36OsVM97nSyiXein5La+rGfUNGVds7d15ArFCChPrh9\r\nYAtbYYXQ8m0Yz/kO5mkTP+2YcRYiiN6Rxzd6hwCWbMbkF9KgIQF11AslM8vX\r\n8qme0DtRD/up9KKye3MJvb5aZHWR2uwKi1qwW688H5l2YNsUUCoAppCgCYGd\r\n8OfK6aHQTQBJf7apzPUvGa00r87Tv/+6XAgM1CpdAPrEjilbQ8bvwGCTFJJC\r\nyzWqKILUeVN2+HxgB1u2c5Hkob3nBfiorUz+ajChecnlODANI1/Y+WRsIgLK\r\nhVoaeV5IaRUmAoz+XCFzkx/HT4H6xXJe1D2xOTt5Lteyf5poYmOxOwb9HU8X\r\nEAz/XT1ICACcZ25WBIrxRekQRpMiamA0wm8eYihQd1eyAF2Z4Z+iYv14TZeL\r\nkyHS+D2xD8/QdtLwVfmIhzhz821pVXXFSRZt0y2LziOA1/t+b2spZKwsnkck\r\nJOmcKZFWd5xeVuYO/MeeRmQJoXpKhLh3X0olR4eRvppa8x802MAvRRuC9VmE\r\nWKSdmnxH5JzkOgZ9RHLuvo4wmP0m2xbHRRMqvgppwoPWr/srQTvb2BoPA+6o\r\nA6OAYzVS6YhtsJ5780wE1fx271ROgTvqoGE=\r\n=JPgE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.8d7ae912a.0","@material/theme":"15.0.0-canary.8d7ae912a.0","@material/animation":"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-indicator_15.0.0-canary.8d7ae912a.0_1664351739469_0.18958085559896665","host":"s3://npm-registry-packages"}},"15.0.0-canary.db414b864.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.db414b864.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"dffa2b7a6f171da12f59f3d7e18be38a47b6721f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.db414b864.0.tgz","fileCount":38,"integrity":"sha512-ivMCD0KYX+K0cUyXe9LFTo65XYrMf4AiO0ZA+lqtLlrpL3CrJauz5023uWHvK2O2oqKff4Oh6lP4lvjmLJLZwA==","signatures":[{"sig":"MEUCIENRTl1S7KoIr7wQhqmQGai77YzIpmqn+1XdS3jwh1LfAiEA3RHcdDDv8ZkwydUpY0HBEUMWzGeJjP6JVPQgg0O5ZRI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNF+ZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpPNQ/+PVvOLB5WMk70BaAXqX3R4Wd2rhnQnQEpE2kJ0e/BRuGh5TgZ\r\nmLE+30jzS/Zx2M6MkYGNafAYsg7XvFD1HPvExuCqxe4k52ZTFannkgU08hxC\r\njpQ9NfjH+5lGl+q/cRBAY094MmtfLhb0e7m3iPVW0JJ1tA5tV/ny5QPc6lEg\r\nVciZzJURhuR/U8Yaazp3O6JBLgSdEPhxAimLwri45G//HJB4yF0W5g5DmEie\r\n+b6zOkVzGsGhtHlSaXa/nUJP4wih+TyFiAJ97K0WMTNwj9ClcfjS6sBtTz4d\r\nFTAGDmDwQZLNEp/LedVV1ZFOl2Niub337KwYsHUfdFfbxxoF14wXmXXbFRSs\r\nXzfHbbfCrEBqcGfy+zF4ND5W0wpWxGzY3ZkCXLRHyaAHWWpsDV1bo8pNUfwc\r\nF/WX0z1o4lQKfcMFhTp42zun8lkHDYwctBEvnWSo2LLRzI4dgmrQzxTfrMgn\r\nT1/DuRqtjodutu6ji/I5ZYMW7ctAWvsua4nkwBljO37chz9JoyTmg6Rx5CrG\r\n2cQRnKPG8GWvCDHlYmY/Ug1loyWOBz2obFIzk96Wdcv4QJARCbm0Ap+6C13e\r\nqGn8uU7kjhRZ7BWNrylTwFSimSz0X7ppL7Bee8/fssgybLqZaWU2eu/u9mRy\r\nwlSa+SgaPTxmCmqkOJzzoXgul5Avg1f98Gk=\r\n=0VVI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.db414b864.0","@material/theme":"15.0.0-canary.db414b864.0","@material/animation":"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-indicator_15.0.0-canary.db414b864.0_1664376729067_0.15964123669613728","host":"s3://npm-registry-packages"}},"15.0.0-canary.c0462d134.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.c0462d134.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@15.0.0-canary.c0462d134.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a698c29d40779771aed6d3b02fd33411e4a33d5","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.c0462d134.0.tgz","fileCount":38,"integrity":"sha512-+06HRX3GJg3LYR1AvSOhKKHxQOR+mJaCalZvu34gnLshnW+mq0O5TmufxF05e7W6/KKQ4+qmDivgb68IE4stwQ==","signatures":[{"sig":"MEUCIQCEs0y8500OflRK1wlMgEu/l6PLfxOkypp6bZ7ruFHm5QIgcMPUgPU1yJ9QOubFdufTlFolFLqWHkbAmHF9HivZKUA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNImqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr16A//ZAaKdjZw3zSQy4IIIv7U0EGj+Ct5h/3mAzT/kQTcO7VR9GJB\r\nYcITQbXnQy6JKOenVxaMRcitl0SrantG/fKBuPvBwabSZXgNBFL2JPkgvuH9\r\n5mtSS4wuN7ehL6xvop2aZmVG+CGC4u6xqWyECEIQ0ZJMfZbXFzN/XE+Op/RK\r\naIZDDQ47AUO1o6vIO+OXMIZrXK2PTmLv6NWODT0Vl8epJ42N+zM2iSBoVlJs\r\nYK889Imeas59JoCmrAV8qhoGHR8CKADzJVhPFSBVl2grjolmd61iA/wx20MQ\r\n6FJEZ4Cfmqzrrq0XXXjUiGeqzrsqYKcCTNdyh5zdTw1zfJj35Ygyx+6rJ1ZQ\r\nJFo6UmhdhIhvsh4dDjd3lUTVtFGEt/Kh+JkuoEYHAt/ZYBe0bI40gBMJp7W7\r\nOpLx3sMoMUhKjNRYXDflpAkbfrReQH7NJU7gRPbIfFFH/4iDBBtVb8a6tq7s\r\nOI9cXV2qn+d98wo0I7FM6CXsNp4r+whsvCojr8//Msr4gt5dG3kje4/G5COu\r\n+pMy8xVP50bvOh2OgpEpPjdYW6fIr7HypNt7nBE5mUQiNz6d75kQ37b0WH3x\r\nGBhB9fn8KdtMravzsJM33C1cYv2jUB0+IanR2HDbsj6KE/kaIrryCtKHTthk\r\n0u4BfH+TMbEZ85IhnZIebuyxUltK8j4JUPE=\r\n=FLV9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n","gitHead":"ac1e8bf31f6e69539e68b22f40f639cb7eaedca8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.c0462d134.0","@material/theme":"15.0.0-canary.c0462d134.0","@material/animation":"15.0.0-canary.c0462d134.0","@material/feature-targeting":"15.0.0-canary.c0462d134.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-indicator_15.0.0-canary.c0462d134.0_1664387498187_0.7905092668358651","host":"s3://npm-registry-packages"}},"15.0.0-canary.28cc6791f.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.28cc6791f.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e1b168da9bcdf6249798655e529436d24a9f5568","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.28cc6791f.0.tgz","fileCount":38,"integrity":"sha512-FePV72lKugLVl7jyLTMhAJVfgbt0YqiWwB6OoyUfZcFRfY3LLEt95MLN2sBifhUzySoECpahV08YDUrSIcaP5w==","signatures":[{"sig":"MEUCIDBICpux1IikNCrB3iKoAkkxcL2U6awHXmUeUkNeh7kwAiEAuHe+FkECJFQ9+usNx0QM2rtGSojMjScKkJk3UMwYlcc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNI0eACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrKcg/8C9u5WNyXf3TUrmMJSKb+bLFvwfr9eHVrR7WmCJrI5vUbkF4Z\r\n+1e7/qty9JsuZTZI1aikGdp8IRVTvfwOKu//J4wTJaTJQVDptsGgiwOYhntf\r\njs1rfg43uOSiFWlKR4xwqYyxllV9BvAKf7enchROwoesSvKrJV6qzKa6M1gy\r\nWihLgBlswrbeHC7WBx8NOKuVNetu7fRAPBpcCNiq1JB7piYWDhaNmk20yZW8\r\nE87jrhixW/hKLeOfKrZ5iI7yifUl6TfYDR2bHqiZcM6nZL8feMEqJx6n+1it\r\nifG7Rxbv/xL74qmlBIT5TR8rfpXrVen9tBos46ga3mOUwjPfy5wK2bJhQQoR\r\nrwgAUMPMnF+q61aY/DT0lTYySXBVBLNxzBC4wOz7g+TgqNsGWHBZWwunuBq1\r\nIYYsDmt6kWwJQYb7xc+rwVyfoiDriWHB2FpS+jKJOJ5UJCCNMGy6JMf1wvvc\r\nFXJc0qkHc2ZAnH4FbylGCZXAboftp7JMN9uAoDFLQFsLg+JkfoSizpWFgrgy\r\n7c+Y6UKt2IUzIj1w6MVsixqVQtR2pET33kd6VnhfCb+w837Vv3998We/VouV\r\nvVu/8XDysMAvOIhv3EFjayu+SYI2G8IPJQxvWChYs1j8qF+zViwuk1ROWsNI\r\nfNw1sHnIHrE45YBOVPaYh8xfjIkrFrhw1tM=\r\n=H2pK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.28cc6791f.0","@material/theme":"15.0.0-canary.28cc6791f.0","@material/animation":"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-indicator_15.0.0-canary.28cc6791f.0_1664388381927_0.32261584807741306","host":"s3://npm-registry-packages"}},"15.0.0-canary.a515a2d18.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.a515a2d18.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"468dec244853bbf92ac5e3f59c7b1019869f55b3","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.a515a2d18.0.tgz","fileCount":38,"integrity":"sha512-LwXOmsu4m6H7b0wFLzb6/Ep3F2nEcj9duHWm6l16uTbXUIcRVCQUiJzWBalaphYM+SwDMzbTo85GUoOCxDZQlA==","signatures":[{"sig":"MEYCIQDZg8hlBMctpgjr/wxmRFR9ol/mPwOz4c3xjy/c6B3XNgIhAPcnUBwBNBab4/IDqSUj0lN2BRsdiUU31NkF+Wm2K1sK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNJiVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrFehAAn79YIyMg/zCg6Wwgdot/TZRRs1HZkPgLwP8mN6VTCVhEo60t\r\n0CQCKeBBy1aXkO7VAr8x9svtNInZGTZeKpd0HirATytK9ig7XS3TZfnpSTVH\r\nxChDI8f/O1Qqza2KyP4u0WnxoqFTgQ1MhiyRcUzRqXS0ugwDZAy1WMUWWXaQ\r\n0JF2r0taggRRlCgA2oHy7ChBnkYt9pkK670pISwYJO9zL5MF8R/DrD+iQqjO\r\ntrRBJIsogYlWV9eECxsM2C84L0wovsdYyxtIFdiQ14AtE4+07IaRx9HD56aJ\r\n9HW6bvKT/tTju1g8L2l+E/ZQSVy111XRhNw3VpQGYie+EW6ldsWTQQEmFUE0\r\nNSxwwf7nOEjlO3+q+5bmSq+GvZXBnj5GUa7rvlbYIaGtluyPG00TRErTTJWV\r\na5XweuaJG7kL97NXt5AYOBMHY6irls02OQCrW8rvv4psYlE+QpA8SpcVGEyk\r\nk8tEfT2W1w8wbOSDJgivfd9ycTUnbznWE2f6xUSNFj5zBcv3HNnTV4LDhbK7\r\nBkPwAHddnxXX0cUVjgdLV0wgdT3IdaC88QCojbudxkL3vVmuABR92a0RgmLR\r\nw2yxOdXhHTPfeedEeH+mQXHgi6eo/TBRpBV8yaaqOeMDRSogTXg4bk8s4XD8\r\nswhw62LrpvI/7UOCXhiCXzSxRhRn9iiUIuw=\r\n=iSfZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.a515a2d18.0","@material/theme":"15.0.0-canary.a515a2d18.0","@material/animation":"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-indicator_15.0.0-canary.a515a2d18.0_1664391317360_0.9927455992169056","host":"s3://npm-registry-packages"}},"15.0.0-canary.ce9523167.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.ce9523167.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"3d2eacce67ebd1aa1268f3575d0bc73957183864","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.ce9523167.0.tgz","fileCount":38,"integrity":"sha512-2Yvgpz8ByemJ94Mv/bWN34wVenCM+Mdc0T/r46xuX6dsuAbaTEanCgYY0Uoh50LKolQ0VrQ0P8ZU8aAxFeyUIg==","signatures":[{"sig":"MEYCIQC+mO0k7XdDXR1nq3EHnCMcPCslGRDewF1jneaejpiV2QIhAP9gqAIw64ls1cOir7hqzhsdhufOd8NIR9DcJAVgSp1Z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNgBzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrqLg/9HIWUjehQfBo7v5eDAGrAH6/9+F9EwClZykJONqQYkXLwKbsL\r\nx52KlfKcsSsAbgT+JNBIfEpmpzk7h6/i/LeOFaQOeu+d0Jxz4Len1z/rA0o4\r\neFujRqwzdBRe5a3gop7GWXyu+xvcvk4qdBRHC7sAnWDZnYPzGu1NUTLaPX3N\r\nh1gU+1GJ3QIQ6xgENode21JQc3/TTOwN3cHxQrsqztzNMFwkMQlqxGzYeC4s\r\nYYoZLQOM3iBmpQTF8m3gLOru1j/YTqiil58zDq9uOblZbxonkBHy1Dqy+fe9\r\nORKGJ2zHjOJIi85v6mJ4b4JGW4TrYyxFQT5xFHY+V3USxxeNVUXILn/np6D0\r\n1CDBRpMHW634NSqqaKGyywow8GrTq7a7NLaSzO9TBSaJPB58BJuSA6sJ5cOL\r\nkVwU62ZPl0RALHK2fWNMvhVkd2wuTVsibeMwMPgNjVXMBqA0B7SHJJXvMFaS\r\nHsxooRglRSK06X33vg8pzevwetx/DosK3Ek9y/cVCpC+XcivTzSv97PWvYaG\r\njjXlUX9NQYu4NfeHIntP1/2A5F2wFJTN1UE5dQrWklNaq3U+yw8YPeODw/lw\r\nnL+2lWpRNWigrQHMP60zfkwuorbzBdchGo2zq3iy2BFN7wmbcHO4wp9qwfQU\r\ngd7vNB7HT5CXsSrSTyLJofXnJQX/ljHJII8=\r\n=c3Gm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.ce9523167.0","@material/theme":"15.0.0-canary.ce9523167.0","@material/animation":"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-indicator_15.0.0-canary.ce9523167.0_1664483442908_0.3231331607868686","host":"s3://npm-registry-packages"}},"15.0.0-canary.b2310f7dc.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.b2310f7dc.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"296dca4749db8bf4cf0a39387fcb0a1c27bbcd69","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.b2310f7dc.0.tgz","fileCount":38,"integrity":"sha512-QZge3Kc2ZE78d47iWRNl8r20r5ujfC8dNUqwB6fl/To+w2RI8RkKvBTZoK9/QwTVX4o/pIzjGoXckAiWq2DPcg==","signatures":[{"sig":"MEUCIQCr5Fz8XxShbqzBxMLj5sSyK1ts6sV3I0gOh89CNsnRpgIgPdwLfjoATXgecgD1dJ9PvzrBylhPqj2g2B+HR+8Xz6E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNjSkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoI3g//asKSeDbyNbXdxUJOa9WSg3Xs17iGT4Z3HxXwGJXIemcxsQvC\r\ndDFENUDnxwu53QQKNwdUZAgK7+5smya6OuTDUn6z6jFeLe6XW4qHdCvvRkmq\r\n4osCJgOgsdRWIFzhEOJM8nbheWIThccPDEjcHEpgXa3EGpwuT94UQRAvM4QD\r\nb0k1xklyrFTQ3zNHE+bofV6y1BAduwEDBQW1ZK13lsZglmWE13xBbROcTPad\r\nITujy2TC5tQBgV9dAtk62KRHAU/CzL1jZVZonJ59dgdKKmg6w/5pj4dQg6VM\r\nb7CC3RsNYCbB/RlTPi2a+LdMMYkumbN0opRrCfPD6gyAhibIh2CB+TFRKWT+\r\nxr8DCptUv2lWNxyaSAXPbyRl27iIkj6uZZZQsOFvOeLHc5lXrwZga2/Uj11X\r\nk7MezWtteo4/xgSHQpzx6vDEN0YCxEF6klHOiGuKThsw39Kqqjq3jdSNwa1k\r\nLXLLGQrxGibzBUVwj39m0ccuEn5c4KQ82+S/qjKIMNO5JrMwCUYho++VZFGT\r\ns4ZMyk9Vxfkylf9VshdTTzldBJl3/NAXcbpcqSbpR6qJCp6B+P+sivg8KyZT\r\n9pSMuU4HGL+22CpYq2wWi4/LcNyRGbXIuil59Bmp2ocaxpy5ARtadWvjL81B\r\nTL1oFZ53WjuyjQAr24r+vaqD3PwiH7G7eCg=\r\n=Ld9R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.b2310f7dc.0","@material/theme":"15.0.0-canary.b2310f7dc.0","@material/animation":"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-indicator_15.0.0-canary.b2310f7dc.0_1664496803827_0.8223714920129057","host":"s3://npm-registry-packages"}},"15.0.0-canary.a44241e54.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.a44241e54.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"2b20dd6b6f379afcd629fadafaf1cb8a1a99145f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.a44241e54.0.tgz","fileCount":38,"integrity":"sha512-2NwEjeIx988Ko5ck+JdNXodB1wjQb7+OIjg1GSzl/eFhaz0PBkkV77/WPIOCfwsRF1RvXTwmQS94mkT7FQ1Lfw==","signatures":[{"sig":"MEUCIFvpY27O+2q8eovJxlCvRPAoj5sjABnZvIcEB3fqTB0GAiEA90c8JaGq+2Kzj3KpjAqlyErckP3EiE0toJkcm9lETBk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNqbXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqCVQ/9Fir1QsaGwVpm1OS0MEYUQANFKxskYxR381qAU0awGZ7zSdL4\r\nxI+UT06S7HZbE+9iEGDszxWjDZteR/YusBCMYtBD5RvQmLGDEcCnZ8Y0SXLA\r\nuuQCg/NKLUqY3RlH18JbBNv8dSdwawEC8al+Vx4TrsPV7Jj755fKGlZnvTw1\r\nRZrquv3hOGMPuoggLwisqlOLCazv0V6KgR50oPJYRFKj0yG2wvOpXRLS1rGC\r\noJe0EemDhjfQxn/cXUG0Vq3w2b3zJ3QPKEv49RHWUDIedAsnaqahSpO8Zmob\r\naSBEp1+e+Lx7Jir0+IYiJ/5YS059HsGmlmV0C+sw3NdFERM8jPkAdcguEPcI\r\nuxOID9giH6NHOYFpNEuzYmo5c1isY+yHfPi3bMFV12LE0nmrBluxuh22qc9Y\r\nQVw5BAjL4QZ5B+wvxSMWzByHo6dUuwoVjqvMC/EbV8xJwQWjbVs7jgyMCRnR\r\nW1wjxNMV+qztvdzywldaa+6Tsgzrf2+sCcaYRVJ99LguaKNQQRDrCGNPLylO\r\n6qmDxZJ0DNOsC79uMa+CoLdibemo8C2Pn9YWVWoYnQO2JhcxyRjvQASViuDk\r\nqKFwAtQ91/ZzI563+e+wK1oxFTsZDmZTsv0Rq8WGmNJ67es8GNU6UzLKWhJq\r\nP++7GyWYHpLRWj5QLZ1hoALH1hO2J7wJ+BM=\r\n=OpAL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.a44241e54.0","@material/theme":"15.0.0-canary.a44241e54.0","@material/animation":"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-indicator_15.0.0-canary.a44241e54.0_1664526039394_0.4579769019940634","host":"s3://npm-registry-packages"}},"15.0.0-canary.0ce81e115.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.0ce81e115.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"a265bdc9d001c6b207ac9cea0e4091f87e36e220","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.0ce81e115.0.tgz","fileCount":38,"integrity":"sha512-ISi8AY1lOC5GIx3FcL++OQ/2+q6x17NOXyiDRHsntJLzCbg3iLQlJxWEctSah4u8yX4Tz91qQW7VEsequXrZxA==","signatures":[{"sig":"MEQCIHMM86Q9SAHoizwPFhbaX/2UCG++fLVmtHC7a4iIejpDAiA+NxUxKMWZvtVFYqjEfFbTZQ5yeD+y+78L0WD2B0j9yQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNzLIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqMxQ/+JHMvu9OrpjdZoiTeyB9JSzFKur8fUPVUgC0EGkcMXHWN/9DV\r\ncSMoOiwDJR2W/6AQEaVwNdhG9w3TJ1MTWU1iie3papBO8JUsv4piXYnsMR9t\r\nQASsA1pcyVaqoWkzSoKXQievxUksKBZpk9ymD+d1pEJZP+K46ZTCC2QDSJ9q\r\nxbKes6Yi4PnUxH8FMFSuac7/ClXwxT2uTSdiQzsRU/P6HR7TVWjDD2Ii0XKe\r\n/z2dguNyl5sD9lLCmw9FSO7rW27f2/WFHlTD/WrJKBekW/pSXE0oxfCa3BkF\r\n7Ihv4+O42d+zUiFFFpE+403WknmeURv7eMjzBzJXYgYYecesN/F+JPEl7tlX\r\nqvlHSXHhNp5hGMm2XdV4wkvEY9TJM/z8jEO55HFKk7RUgpk/UAfLWvyPVr3W\r\n5hB08fIsT33ucKAK29Cw7cDGNYFisVmr80nqhYD7y4u3AFhyqkKu95j/1Kqz\r\nm7oPvR6gXPBY3eInApxJGk4JafqqW943DkYXBBFYnv1381JkPWZpOaYWFKvE\r\nhr2gUBgf5okeCIuMkMnQ95XqDf9pGtVR9LVWoL4ODG7kAhBT6Mfuj6hln1XD\r\n4UcqjZpCSKzGyi/ORjD/wOoGlbcNSpM5qp9rwd5iZEg7xUss2IpPGK9V8fvu\r\nFR18p/kVZCX3PS+AHMRYQzz0Mis1lHtEb8g=\r\n=J7cF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.0ce81e115.0","@material/theme":"15.0.0-canary.0ce81e115.0","@material/animation":"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-indicator_15.0.0-canary.0ce81e115.0_1664561864141_0.5951410826857455","host":"s3://npm-registry-packages"}},"15.0.0-canary.3cc30f6ad.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.3cc30f6ad.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"675c56d6cf834cf562f759f1ba06a4dcf198dea2","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.3cc30f6ad.0.tgz","fileCount":38,"integrity":"sha512-oUWK/L9eucQEDn4qfVu8GZt+yKnZd7WwnnSMzpH+g0vs0dBZSREF1PTviT1b2FRiOl1eBRtLsFM0z50GqUMfpg==","signatures":[{"sig":"MEUCIDHo4ednAtkjLMMyTq9uR5xUnUWLErD3e4A4ZSOKoRpdAiEA8fRbHi8Qp8YVm/z7sMicB4uRmFD+pFzabqgobjtNRAo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPGr2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqPjA/+L7Pn+mKCnVZdm4aabrFRUv3BbEqEWuLjCljcOZq/1H0f648q\r\nouSSZq7cyK/uOkXSy4qzlOoubrPil03TBGtGshK5YazDQZ9AnEd0Ot5azDQd\r\nV4+0svMPtFoRUMt4E7nyelRXmhXi4l8KrWEH2hZiuFg38TVkmhdeTej5GKDV\r\n+2aM3JLMA6YSxIZkwxbTVR0qCkOtlhdYk3UZrEb3J9ecjQ0UEQaGUu7J3N/q\r\nb770xRxTvQXUFY92xitc8wFxvKM4TknDIvr622tps+amCJIfDf3hudx/OaN7\r\nsUJlWnDdN0sze1cj7fiQtqO3qm6Js+i5PDQmDkIP61zczHkS66Fym5XSgWxd\r\npkwZwbHbWk7td4vJHgngxqjv8hGVHwdxNvjrkc3/10dE1cuu3WglQR8gsaqu\r\n8gaDD6/o1pbvZlR0PPzFNpQx1gjzEDuNiJ3m1yhkzm/32eBk4nQ2GMKq6+9Y\r\ni5VmWCQ+1VOTV23XRJrq7d+KSqhcjnn6m/wv5ufROVwncDPwVxPSERJGAto4\r\nVLlen+dtrnNwqflu4HbLIBY4uTxa8aGEi61n5DWUXQgsTSuvGjj5uXRdIpTH\r\nhcvJ2lUOCSpaJHjc5sSQZ+/JejWrlfP7Pu5NUTEnxbTzh7uQrvW0ZJqIYLTo\r\na86h8TGfxBC0XlsS0RmOP5yNZB/RG0eWVsI=\r\n=GLHd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.3cc30f6ad.0","@material/theme":"15.0.0-canary.3cc30f6ad.0","@material/animation":"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-indicator_15.0.0-canary.3cc30f6ad.0_1664903926726_0.6173222956111037","host":"s3://npm-registry-packages"}},"15.0.0-canary.d9cf98e60.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.d9cf98e60.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"1c33dba0563cc559503b61b069e3224082360704","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.d9cf98e60.0.tgz","fileCount":38,"integrity":"sha512-FHhk31TE54SXDTjqm9ltt2QEPfRdZp/2oe9pbaNgIw/C1u/IamHJd/XlwZX9P2/RCSSxwt7M233ZNum0VQa4ew==","signatures":[{"sig":"MEQCIFZiIwYyxtEcAVnpL1SGVpuIawpwjqG3jBGDGSqy5Z7XAiAytZvdXMIR4/VAGqrMYYY2OdtQSiAHfJz935RRWnubvA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPIN1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrQPQ/8DP7f+0I0C3blcf1DAejJ85oUIL2qa1yEzgJv/EGF0jq4PuKr\r\nzHFmoKpUtIsyT6+cBT7qYPGi9XdMwQynOJ30qYeiNSeLPXEy0S1FeXY0fKtX\r\njFVB3AfB/yOT22vb6/UhRS2uwgLkLfMzNxOsFsEXmgD9RraqJRtf6tG3TDSK\r\nQkbvQpQ1gNGgL2dyz87bmwqPWhmmZFpgOll3Jt3USCqo689tWVTn4e1SCL3K\r\n2ovZcQEDw8bN1QdjtoJf6P+E7J9e26wgI2kmjZkYH3IX5smmK7ETgQHZf0uX\r\nYY/6iot3hdtKnS7FG5R2crBY5SEWgf2rhZ5Nl7qK/ytLh20yMTVODvJU9TPY\r\n5py2qyoAYlpO13JdSIJ4CYIjIxZjyINc8rX18eQA1f9ecLB6gYx4GzckSSd7\r\nNs8LK4eZ3QObe1Z+0q1jpQJGKxaOvtxrHZgtXL6UPaOHGKauMpKyIjxp84Se\r\nFQsxD5DTeqyJkQdkQ9h31o96Wqc6M57W6Y24lsl1GAI+srgtP+9Eb7cXX/tV\r\nfe3Kv1zH4M0gon6kRvgdwzt2f2NWHzHzXCe+rHBZQnszgLdkk/LPRgw4ff/m\r\nNc1Rm6z0LxZtoxfLPHU0Zau14hN643wZkG4UZVoQ/t6gjmnUC7Gtq/OLNUm/\r\niFMJpSaGUNIDFn760LtBEtA7uA1wqBHOlQU=\r\n=JgdN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.d9cf98e60.0","@material/theme":"15.0.0-canary.d9cf98e60.0","@material/animation":"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-indicator_15.0.0-canary.d9cf98e60.0_1664910196829_0.7798520766900332","host":"s3://npm-registry-packages"}},"15.0.0-canary.d71935c8b.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.d71935c8b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"dbf9ac7d8a2bc80a8490df9aecb9fd01db122a39","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.d71935c8b.0.tgz","fileCount":38,"integrity":"sha512-mijei+cLlnTJeXAmH/O+SJNl6WvMayPmuPGFelCeM1lVJAgG8CWuZnikpSCyRTQsIILKLK7VFJ3TLmowQ6U7PA==","signatures":[{"sig":"MEYCIQC1g9gC+ky8zQGLruKTMRZbpoBfIyB6WvoXJnk26PUA3QIhAIiu+6iwEsaLyA2sxa64qmjVH4cBUeZQ2SH9GfXnG52a","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPo5gACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmryyBAAjs2aYQBSh7Q3BXV96fgzG95CMcZDEN2oqZY0Z21xz5DQhURR\r\nQSBwaqnieTSAmlwpTMlBq2XPmPOZ18BTrNCEZugx5q99cR5KlTgrk3zdaHPM\r\nfwIr8mbIGP/BOVaPphDrfRCwXIO/kXkvjSYFFtWn6BxK7ha9weW7tc+rTHok\r\nnjJ1wrEZ+2wqnIzlbgk9uh6sanaXgYKKItwUq6YmdFAj328z6QSXapuDGkhr\r\nr4JAGdud/U38OL4oOhDE20d/y5MwxpkUiIulEwmqB0ouA1k8RHNh/VExWEK7\r\nbjEsjp8b3aIGWd6L3947DCmB5dMgDZ6MYpqKTUIhWMCxtoyVv7xl/8ee5pgK\r\n+JrfnNwtYueX7DNBYz6oDCvpLs91YvcF8FIwBgMIPcEgDgd3jbtKh5nCTxZv\r\nnsyezBfNpbv9nIhKRAQSdeNkd9byjfsmeKBz0aMUu+SQ/qIfCLSPimAD9kM+\r\nJemUtQJ18Vm8zDeQ/V2mg/IrvC4TEbTa4tULXhze7eVjmYX4Lfqt4UANcaXv\r\nfy4BYLIu+gatLVSHNx3eqnNWh1Q4kMFPU0kchc8Ic8Cajf1IICibget4K2/m\r\nINvUXKUv4aK0dA9eWUv5+qMv6kIqdeC5j8G30o0NvGfd7l9tm2haHM7f6cwJ\r\n83m/8lgIhWwU3Nk1poVHpVpM8e1G56AlQTc=\r\n=3XxD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.d71935c8b.0","@material/theme":"15.0.0-canary.d71935c8b.0","@material/animation":"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-indicator_15.0.0-canary.d71935c8b.0_1665044064357_0.7067486782071914","host":"s3://npm-registry-packages"}},"15.0.0-canary.49c56a25d.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.49c56a25d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"d8465187187c08c22a7a0844d8fcd58ab38f7a31","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.49c56a25d.0.tgz","fileCount":38,"integrity":"sha512-qCkL5zEiMeZDfgxxmbjv+hTz0WOEaonoe+wHpq73j9bRoEyu7HZYgcF1q2IzufOTWmw3F5FPehoV5RTshYXQhg==","signatures":[{"sig":"MEYCIQCEbUF0pvPH9lOsRQCul6PKQWtsS/WYpraiQXTEDxKQHAIhAJSN/pKj0WZ1CUSFJYa7NCTosqCZiXgRKq0q6D/rSRal","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPyN1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqcPQ//V3gLNmOxy472HCAAM7s+RkG7OZxZr51BSrpkLI8u+GyK/JAm\r\npom4GCqFa9YpfzSnoRN6JWRr0ga1zdOazFtwCVdvp6l8eRtB7oh+kd1pSU5c\r\nvcGTA8jPVxzaIF1VeFTTM63uc2g2z4Q5kx7uMca1GBSyZ53KhGXOpE21qM7o\r\nlgB/rMCzrUWPAToptyxn3QFvYlQT7TSw2LN6nQhJOk0A2k/Bor757WwoDB+4\r\nQ3022ndNUhhXDnNOJo8KgpYe6Ha9GtgrN8xt0V6sQhwkO+3cuMSMCJjgv8ou\r\n9yYkuon/Zrm7BTE9jAuL1msKLUtAskSGKs0Q4pcZfuotEp/2WoqAC+SLZlJ0\r\nnG9GuS0uP7Jr/14LbIStIJAdAToHawISlCaHuiSWfoeZr4ra6U2+XyNcsZ6C\r\n9vBUJOQA0shetiwMH+6mAcZwcojHEAwoBdsI+g2AXrnLlfIXDzPtlexbQije\r\nTQTpPzVsOsTVSdnwR8AoyylC5WMqGTPVeShX0sIiVyLOVijMbrpKcBI6RLJT\r\nYaLEU8WVj6fbBsg4KifW0lYDW9AcQ37gBPUHaH37fZiDF7Sf/dKnZHr2xYHG\r\n80KKn601YmVf/FzEz/wv+KoWOsF88h8UUBC2BSV8KQQF/TFYZRcp7Z9aFxnH\r\ngJi7k/+niBv/UlMvHOEsWjHL9pev8tA8zGo=\r\n=msPj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.49c56a25d.0","@material/theme":"15.0.0-canary.49c56a25d.0","@material/animation":"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-indicator_15.0.0-canary.49c56a25d.0_1665082229184_0.1734476271937493","host":"s3://npm-registry-packages"}},"15.0.0-canary.07acddef3.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.07acddef3.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"7f4ff81e8467a6ed82af64c5729982fa49f86919","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.07acddef3.0.tgz","fileCount":38,"integrity":"sha512-qigiotgxuDT7xQlg35WQ8wHQMwqC+qD5Q7DZnn0GpSNixNze7/CD2AzKbKhoYn8Xh5dHktmvQW2QISHh6WEUjw==","signatures":[{"sig":"MEYCIQCp7OLU6ltQAAygI+DUE6KZWd7Cle0j7b/GwrLfsUj5zwIhAKheA84cXv3xjRPH6+UKNSafDyTxj2PeBj6LPqByoiQU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQJwAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqHlg/9FasgZF4YJug3SlNPB6mN7jfEHS4FzT56H84P+2Tvxs87NtkS\r\nLJAsdBSOxaQmkaqAbpRluR5dmvSfT0NyC9lt/5QGEpEHkK3b6m3oDJ06PJMG\r\nayBUACemEQTdmGhbrtXXT9Y51I/R+iIGRkf4oFdowCTbPX1Y07fSWRDbei9x\r\nJWLBITMBsIVivF8NReeJw72ZzVkBCjQ72YwQ/74FC23eGxFC9q0n8IfrauZM\r\nT12WgEBvS2h3iRy9cnYFHS82tMNptcb5PIgSRzgizkFTduQ6ZHl39yyeGOB3\r\nuujJw8MwrtM4lOcrE/yu/64oyU/cb5sC0rnQFTa6uvyZL7RvNvmPZvgp3AG7\r\nsb01LRYfofssWkbuuBiOxIpra3AouKYT6fgg6/6MiWEKLyKxJ4DI7imEO4uL\r\nSsJ/YpNwBtd3KqV6wIXJ3WnrxJDvqz1KtHVo0NXKfiCDEXegR5Kyf7am8ZUr\r\noZn4iHE/yjows/4Ar2RpaTITstx8qBbGAS1KpVqnRr8hnMc0xsu4F7Lj5yCC\r\n4Oi4/rw/2t8mANQnKSe0QbF+1mj0ioc5IokrbLN2OoCGIVvvxzm773jk0rgn\r\nA73/fyB7VK9Ex45vMyr0/jO5XkfeDczQ+EfFrAR8VgJXn7B2/8rqClO+GOQH\r\nxhaLk+7oZjzKyyIwFLCUTDpN6eAaREhoYds=\r\n=Sc4V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.07acddef3.0","@material/theme":"15.0.0-canary.07acddef3.0","@material/animation":"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-indicator_15.0.0-canary.07acddef3.0_1665178624035_0.495615206392805","host":"s3://npm-registry-packages"}},"15.0.0-canary.1c74eb2c0.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.1c74eb2c0.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"fbeb53ad384c658b351f320c649064e38f959270","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.1c74eb2c0.0.tgz","fileCount":38,"integrity":"sha512-c2Jfq3ddU+9353uFRxPW43Ia/gtyFvCCwFhHt2RQd7ccdOv9WQp0HGiCSxbhytDhBL3z2y/8juhESeTtaWNnfw==","signatures":[{"sig":"MEYCIQDz0P5IXFQsgdkyMsgbNyVduqWS1qK0A8Z6G7t5TBMIIgIhAJxBkHI91RfqrIChPon7MRcxsuaMFGfBRcHTzmT5FXII","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQKAbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrGeg/9GaAbqY2Jhj4kY2rN/Mb3kPt1s3QU5N7ryxps6aQXembx4j1B\r\nVAwEYbjWjcFea1+zGMiESXhKOQgGLFNxpWgmBCzWJ2yn5sThPmmn5cSBeXGv\r\nNiMHPnFir6ZWJ8NUaKHQjUJ+BaC5NlTdZwZ0t5mJ6SIHI5xLZ0vmEXbsWvdj\r\nnDjNungcD5+R9fcpv7ZmRP6jih16sGHV23TQSXmKybPpcksQS9/TrrkHVHho\r\nDXxH3+JhNw6CoO3pclDknF3oN+KSgdKZJHZlbdBBquqy6elcYcR562R5FBx9\r\nvuvY7vzjKDeD0/GN3Pws6YcZO+KantCom7XOfCqJpL9/z+eBDKmCv5MKqL6f\r\nnwFAaOwn/uiDJXWvgikHaW0XAQLfJQR9llNPpKM4bcPRxe/bKGi/1tY48ghp\r\njUU+M1a93yeQoeFb/rxm+HJT0mNlrFCD8F9HiAAXdJElZBlaTw0WB3rwvwcs\r\nwgUHsq1u4k1Ye81GJ8fdVqCc0RbFGSTDj7i1m2TddqNha99A1sR/Owl8C+5m\r\nM6w5+JrTWdnfg7ein84pF3gUUXYa3lBXHNDPYBM/4pAH3DriLWBM0nnsnEJF\r\nKQU/ZEE+vcX9PgdYUhDksl8HzBKobIVEEg7X2UPtw87/qXkFZ2ll5GjHzGbT\r\ns7mDK050jUe4neFjIGQvM+W3t1VC6HvmliA=\r\n=Y15c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.1c74eb2c0.0","@material/theme":"15.0.0-canary.1c74eb2c0.0","@material/animation":"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-indicator_15.0.0-canary.1c74eb2c0.0_1665179674447_0.711091792016598","host":"s3://npm-registry-packages"}},"15.0.0-canary.dadfb713e.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.dadfb713e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ed547726457ccf24a8bd66661526e1a3a6e80fb0","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.dadfb713e.0.tgz","fileCount":38,"integrity":"sha512-7jfehBzhKiQu4eO9oMGmBjekQC0ImIoyB6T8YnV1t8a37atHpbStgbxNtUvY9EjtlK6pYAKrHLEh6Juq+kN1FQ==","signatures":[{"sig":"MEUCIDglyxISgliwxg6DhkmHHREMljWc7hRm3QBCDc8sAKmIAiEArqKbT/5ORdVTEB5q69LgkC/IrTTp2NPwJR1Hf5JMrYE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQQUQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrIlg/9F6YAClyO0sAkfhFGVFXktfwfGyMhcMPbKOhGiCUyXA76Jowk\r\neAyzJE/mj0embSMd8BGKl918VOAKaXqd8CFN08kyndelVRn5xp1VvK+4PT+6\r\nEoqQJ7getlNrRTQy31BzIbFOv51eNVxSrAnczFnqQe0O7xqVmq1+2IlaFnG6\r\nNM2HiDweC5QPGvfmmvP5/GzncQNs/wg+bkkIoSQVupShl+GSxVjSNCXp6iCQ\r\n0j6diJGEYEuMs9bPSnnjVnZC/s5hI3ftyTwju64LeVWOYIl0JtiaKTHa6bkY\r\nWEVGW1d72elbEB+DHHLYXZND8JlZoBC/S8nQwJCROnpFEeq2S+6zjxdzkS1c\r\n1TGnfFkqGi21qgwBAYTDsOer79wuUd6rpxkRRqX+JMVOsk4HoFzwAuTFtHCP\r\nBpURTekJsJM/XZCBSggzzqXNV8FAmubKpibyuwRddZ0J/+fTf7j9oFLETY9c\r\n61/37KgVfky5heFd3wS7zjvI46RDyGHADyFZt9NkiPMag/tzkU5EeeEKwy90\r\ncP8BNFhpSiZ7Qu75Su4lEGPZqDl5HV2fDyfoyXRYXV3/5naCPRorY8XTRxAw\r\nyQ+ZGStlylqfyUrwB89qn9FMnXF1Ch4lIYIsu+qbMFJdPUA3M6uUyAs/ye4U\r\nbE9J1bA0vm+RRSni6WlQuW7EdY9ye0qdwso=\r\n=u4zo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.dadfb713e.0","@material/theme":"15.0.0-canary.dadfb713e.0","@material/animation":"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-indicator_15.0.0-canary.dadfb713e.0_1665205519859_0.29730519418081713","host":"s3://npm-registry-packages"}},"15.0.0-canary.395f1ce61.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.395f1ce61.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"5e1fe350754b126fc39014a4957796ceff3238ed","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.395f1ce61.0.tgz","fileCount":38,"integrity":"sha512-XL3TdxZglczjYGF07V7y12LOK3WW1LuL1M+YJqU/tQ7VGPxd5AFPQV37uL1sv3cEmOMhw9pgWTLZXOC6AvHQQA==","signatures":[{"sig":"MEUCIQDh8xABzA7QPbiuO+u/nvADNed7NMOo6PoxCsdjdy2fogIgfg6eJ7uhwEvJsz5Zxgft8OsqEXE29wB4goYQTL+uVGQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQQWJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpQPQ/+MWoi0owiwnB9Re1hcSzoOG0WlXkJF5gfPk5O0xdYw2K3hnIp\r\naeXIxJrPW5B3KaJNGfPNhjesh7f2CzcKDDeqRuVOWxRiZALP5bU0CuQwha4G\r\nLm1I1r1RgjnuE0VOwR9HLaW/+pN3Jj3QjOmIh/Npn8wjbav6/Bcldt28fAFo\r\nNPw2T5wZYnNtq0sQW1qynRyleJPDw7iuWSW5NlapJu1+lw6OuYVtZzejwoyE\r\n4hEgGYFCpzkJRrW5SivfhGbdoN0s5019NLViA5nxCUZIbT1rZ1S1HpjWizG9\r\niEO2efJH3RqOKG950t4jugaAMjio8NBDTFxNmn5w/18zA3uZRWyY+DCeIh/x\r\nGQ1GljFaSxCgqGSoWoZXWr+vJwLK7bsQaxQbZGB+fO6Ca5vLJXplS2yYUg6W\r\n7Aru0QvoxXzvYNVI6/4VPTsbr6hC5C032baRi8c/4W62l8PFdnrPPrCbNWKZ\r\nvcDDTPz17veFcRhUpHELGxYGjOcrxQCl8a39dgDvrk6trHmpi3sItZkmHQCw\r\nejrhfrlvE1JNbphSoGOEOZ7Dvb5BLkw0fNwzoo0Ix4wlSXl6GwYOPVwuM/NK\r\nU4JVpt15bIY4ygmDdAawOCuNlZ4rmRWoTDsJVnkUchgl9w2LyHkH7IfZQP4Q\r\n/1Yxc1U+FIefUjs3D6nJgb98SG2xx3P7IAY=\r\n=qJii\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.395f1ce61.0","@material/theme":"15.0.0-canary.395f1ce61.0","@material/animation":"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-indicator_15.0.0-canary.395f1ce61.0_1665205640834_0.07020944846233901","host":"s3://npm-registry-packages"}},"15.0.0-canary.e741b5c82.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.e741b5c82.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"3f35776728f270e860fc811b1f98e01b800aa9ae","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.e741b5c82.0.tgz","fileCount":38,"integrity":"sha512-egDy/Ix1cx0YBioJ18yS3y8kHKIoG4NhQ8cQHj1pDY/Lvxp9HGj9ps3cBc5fQxZytRmhp2HE54JCMRTa6Y0EPQ==","signatures":[{"sig":"MEYCIQCkUHvLIig4O85Yz4mhF51vIrrt1lp5hNijhpL1+0jFIwIhAOcEAYTjJ8o/S25Gw6Zvyr0SHcwwGKX03KhG0v69lcA2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRFhaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq7BRAAg9rbjxlnnbbMr7Zs988L7jSavBY89znpNKpR7sEBmn9IIO71\r\nGDQWniJrJXxvBUre7zoX44gZwaaPvsRe/DaD1jbq7Izacb+w7X+TmFxuSEo9\r\nL468AlmYnIkIG8w/ig/yjw9h0ugBth06/+AxIKNDhUeQm9WJeHqqE6/O+NUN\r\n4Pty7FwnPSfdztTKjUlYMEdMWwP9yUTQU8/I8iWkGDj8hm0KhNgC1hPzHEfk\r\ndaJ5cZdK73yPiakPucHUV9Rz5jkJBmNuos+WVzl1nfV9hf3N6ra22rMiUX06\r\nFfhYNj7DAl9qD2XHUDtKKTQvhOjalKKNj1ztv/Soh4EOXWNpk/1bp22u+sIf\r\nXsKsG4/Ury3vsjHut5IpzvTJTsh+klBZJSKc8tpVn2RQhlch2RTqzjL3iCPC\r\nSIjnUL+gydNwBJbBPm2OhuxSMvoLzAR82MK1kepEauLCeL9QHOts6MZgFvzm\r\nugKppMFVQe2hbjkpygJjWZ3bQetQm8fdoWCEyqiTXvGTXKvkMXUjumKW+nNE\r\nxUj7lx54tcCPbdvTQOIgVv6Dlsrz64mfgM3Ui/Ohzs7d4qIRNp6WLTwbzfRq\r\nDIJHCycJ0LWdb2RN5rinmt6CsA1RWO/qE1dOtmuRXJR9Xn+5KCMW1UvmjbRg\r\nHWq/E6ZKmJK/f1kXzzloy3o353b9/4ULSaI=\r\n=AqBD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.e741b5c82.0","@material/theme":"15.0.0-canary.e741b5c82.0","@material/animation":"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-indicator_15.0.0-canary.e741b5c82.0_1665423450607_0.6403011744781297","host":"s3://npm-registry-packages"}},"15.0.0-canary.582f3cc1c.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.582f3cc1c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"baf2e94d32de897bb316ffd3a0524a67c84f2fbd","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.582f3cc1c.0.tgz","fileCount":38,"integrity":"sha512-5WoAypzULUGLMmIlxW5659UTtYUA7bLfcTnwlIHvadqUKp8ko/u0dHnIhIiEJr2JySZUKUHqYOjfdRQGPfO4+Q==","signatures":[{"sig":"MEUCIEyD6xXF9b4YCXva9Lm2qHOGo26UgW0i6kyliMiz9sG3AiEAmuYYnfrB8pPKeTF7pj+/r/WeQ6zHWBKWNrJhlOwY2s4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRPWbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrC/w//dpcbS+LX03izbg6xW3f0h0seH6Gk5dWl4hNeIXFkcYhZyKNz\r\nFq22LdxbLOYomZwLUQDQ+ZE/pIVaVlfeEypuxA20zxOpp+cqnnlnwrbxHhap\r\nkEKdbclVEaLTg4/ItHYJPL4M/9h8ptdqzgQuYnknJJ1mV2Rdqte2EcL4VBQF\r\nDFSYsaoRx406yLRKUTzh7Cevq1VhCyh8YR/8KX8A+4PGG7vewmT5yE1D3B40\r\nLRB3I0S35+4ke6Rug8GnB6HzIS8uScYg5AbhpeEoisysfZTVo7NbVCusX/ta\r\nQ0lemmJpTK+dSRdP6HKd0uHkameXNDocA9hG3xo6kHaOi0X4rr0ngZZV3+6M\r\nX689ccTGuQsAzcHrLWdiMhr48LIHyCZY5Ay2cq88uqBWZPpE0PcXEiz1I6Ix\r\nEs9KiFeLiT4h56DzG8ysk81voPxIZr194aCPAgqpg19pdfawOAj0zxXIyRQ0\r\nfHW5g+ZI9ozuatVctPHjx9xAo7USg54gqDah40i+qq7XCZj5hjw0/CExUmNe\r\nsGG5xxY0uBN+1B9Gz3v/Q4GUvS0QUIFkrOViXz5uGRkj7PDX65SNP1JInJTx\r\nEPGMdzvGVVCpEtfadAvz1cGOUL//m2J4Odh4SR+KTf0OmcvyxaD36d3C+O7u\r\nY78FDKwmMYy25t1+KxCWJnrPbV0b/cGZZb4=\r\n=EBlY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.582f3cc1c.0","@material/theme":"15.0.0-canary.582f3cc1c.0","@material/animation":"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-indicator_15.0.0-canary.582f3cc1c.0_1665463707355_0.032812470127218996","host":"s3://npm-registry-packages"}},"15.0.0-canary.b1a6e3e88.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.b1a6e3e88.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"1ddb389653668840b928e79599de3a230f3111c1","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.b1a6e3e88.0.tgz","fileCount":38,"integrity":"sha512-VvMc7n/X8Bt1Y1Je4aNq3NwIWdHWhkHcaE1atdlirYoU637mIQDsds7gz/EbVwMkbAdPfL8D5L2CdfhLv5iY9A==","signatures":[{"sig":"MEYCIQCHBWCynaxyoGmm59kp3iY3TFsAP74CkOwl30gLF5pRigIhAKwZfNKv+OWLcsW9PcxVwjLWxuDQxyr2PVTBPK2LxTQe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRqytACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr1RhAAlA+bvBgeU0eLfH88DMa+XTiROk/wScceO0bzCIdwxtjm8nE6\r\nwCk31YWPGzh6hdijN02zBlNwZgbflHM2awyB51R0Dcpb7UyBMZZ0v7G2qGR2\r\n36b9/aTBozqc1EIkrKbWKk25yi3Oe+fwysI05yIa3QZqGTbz9QK+ZbslOIIh\r\nBy4E5qYD1H/8L5B5U2jM3OpoS4ZR4W7HU6MBp17YcokmUFJw7/azuPRCTFp7\r\nP5J8h4Xu/29yaLqoou4J891xQowaknMSMBAsPh9iAumQowtuLHT+WYVoqjEb\r\neIsLGRKRu6ICqfcLgueIU3yXvHUezS54OE6gcfYbtSymmYz/Am4r8g28IHsI\r\noAdrWs1qSfPsXdi1nKMVuaWv3+vRLueM3GIzoqo3jvT4duuSPAcmTKHfnY4F\r\nY2WcwkQgsdnu2qctNSIuBgYeI778MFjG7qBHCinps3D7BVoegfAKqDxx3Bny\r\nMIzrQDQouIeXAN6CO7OFKsoCYAQhQ3NE/DY1PvDZCACl4pcQK9u4vEIMexqC\r\nxT8/iVrT8m7R1DAEVd501t5JKxO5Y36+diSdjV4NXpTVinaoxCuzHTrTCDpq\r\nBKnX76gtxOWwjxZB+MQRqUg6+j1T/rUZzj2Puku4NG7UafTCEl/zOSjl3NPC\r\n358kSTYrCJQGBJ2RxrL7r+jzaXNvSmoZ7FE=\r\n=JC3n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.b1a6e3e88.0","@material/theme":"15.0.0-canary.b1a6e3e88.0","@material/animation":"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-indicator_15.0.0-canary.b1a6e3e88.0_1665576109067_0.1897495661538915","host":"s3://npm-registry-packages"}},"15.0.0-canary.c9b1a31e4.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.c9b1a31e4.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"f15ca54fe54fcdacef2eb499f3cf7e83c11e29ef","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.c9b1a31e4.0.tgz","fileCount":38,"integrity":"sha512-jfaY8UZY6RnaZOU1HsUr746yCxv0AtXdBxzlDexR1o4nKK8MTVu3XZYIxtA6N2qczwSC7c+rABKY3fAPhs0zaQ==","signatures":[{"sig":"MEUCIC7cNNqean4HuJPnd6KmDQxFd/+eTm250hbnvKFCtOmfAiEAiZNLg4pXaj5WMh0pN78Bl63hHABbKKQx55CtSotiwro=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRvISACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmontQ//VJG0fk/sG4sYLNBRCpV9WyD1HxLv3xylYaCVkhHHKHCdQ3gH\r\nMMELuo6QGz7oEdNYq1kuZp8oB4gjgKSbx9JqBsWKAUq7e4zBqwMH1rx/dcNk\r\nqXEySnRV0gSlV9DDxOlqdc6azHfAzNhuJqzXX+4xznV40uaFSOBBBtEl4Vm2\r\n6mHnD5nmxZXPbEWnVf2DxR/5cNnvOgnN1czdx8jSejYJXX7eZBfJM1PTGp8r\r\nFMkTLhO/YbSgNL3TIYDwhPtv24XXK8QJqThIGMnm745mug6mbAb8kc8gleWl\r\nDNxS4S0Q73Cs52HL+pd4cCrtzXRjTA/KsxmbxokzYUoiqD7HXQeH1Qh/Ahnb\r\ncLYvnLwd9nzTpHwqYdswd8TCSWHHxCrJkCWM1JopTdpeCN1nAqfr57mBHh1I\r\nNu3v8pKP88qiIvbRnWBhvVpXQU98DRym7LF9dF+++khKpsjSG16bsrcb6SRu\r\nAo07bh1qA8Jzl6BTF49PYDEk7kX5GGvAVhO1lPllXOm+AwFPhow1SvK19zQy\r\nqkS2RywiW6727/yZhrGdLTWjQ+APesgrW5EZVCqdgd1OfqYS2/+b0oXyZY+a\r\n/URhGEjLj1kC9ZHq232jAjCZSRkQrkpxJVlFK3F95Pa5bzSxxEC5sdKBQ+If\r\nzUWtOI1afZDdgxrrrqykuWE+LO7wLps7nLY=\r\n=YjDk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.c9b1a31e4.0","@material/theme":"15.0.0-canary.c9b1a31e4.0","@material/animation":"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-indicator_15.0.0-canary.c9b1a31e4.0_1665593874202_0.13833398996227086","host":"s3://npm-registry-packages"}},"15.0.0-canary.13e9b0d1f.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.13e9b0d1f.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e6434c2b0eb189c31a86372a5a3ff6106944c6b6","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.13e9b0d1f.0.tgz","fileCount":38,"integrity":"sha512-fAruC00xNCFAL03waT4dEbooIDBbxhZ+I2Np3H12mxahMzM3sllefWcvDoBnpm9JDg7YcofQu9o8LdchNCq75Q==","signatures":[{"sig":"MEYCIQCmrROWlJ5k8aL5finpHzTb7pClEDXKaGXWhXwEv8xNLQIhAMp9LIoRNl2pkYejsCk/sCuJfwINHgZNwnN0DgsYvtph","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRxN2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqCBRAAoP+/jRkgDMqIFflR0ReD1l+unyx7pGQxvQ4btTbupe61spk5\r\nh2VmjoaiDbiKix1vTaZbwZEthsOwhl/n1DOcNPOix+GQ8L6/RRMvWOEk2D7P\r\nxYAuvAcYiIJEO4brx3yhVF/nesfi7XzekAC9WXOha7vlbHUK+KVBOr0kWhGr\r\nC87WYw2GVi2gNSDLFno0Pi+YVH0gTtieBqMdl/gyAMQY3hYUDgcTvZ1OfbM0\r\n9BAvOrj2FItnB5az8HyqHtnoi36FOFi92TXcYfOQ62Xx5nvOnyKsoNzFHyfW\r\ndNmPptRqSUA2Pd4msf7nzZiRIlxNK72OliUDY93jyGamtbq5ibQvKRKFnTcg\r\n64uwmK3K/FoWSjhj3Nqh7AAEnl5FDYfNH5KB9UgIPMy7+BL9qB4v7VSHfOLA\r\nmpuW6+B/GsjsaBh3/28l7RKQzJbD3S+2L5F0jL6D44+dtqPYm4nfkUDpmfuG\r\nc7D6PmPCHxhWDQusfG1kiQKQumZ9Vv58qQUgZM/Kj02RXWxcuju7t+T/1KP0\r\neJiIfu0dNv2HvPEO6pJt6IpPDX24oT6AAjS8LMShvUwFlsTLbYuuQuu4nkq/\r\nF617PPaJsJpJrHrgSWh0NC1sdbMvSvmIMXub4l4tjYtVkAWm073981T7OUAC\r\nhaFY181jst2fbVLPdFofVJ0Dv+yiNjxTyXo=\r\n=U4B6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.13e9b0d1f.0","@material/theme":"15.0.0-canary.13e9b0d1f.0","@material/animation":"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-indicator_15.0.0-canary.13e9b0d1f.0_1665602422474_0.11732017990922738","host":"s3://npm-registry-packages"}},"15.0.0-canary.1dc797e7f.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.1dc797e7f.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"2149fc249d28f0159cd9b7f2fbc952d44a4291b8","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.1dc797e7f.0.tgz","fileCount":38,"integrity":"sha512-oY8QGT4M9owltf6UP98ye2k1GIRXqveNtznFzun5ZyWBJLdNh7q69+E1/2p8DErDeUXGIyfSpA9+x8/qpgg0mw==","signatures":[{"sig":"MEQCIC/5KzG/GuGoK9RbpVvhKkkgJ5jHNTV26rBc/jx4Qs4MAiBtQfKdo5u7pt8cYSkrTy5NFLy3e236xi/og9afOSngRg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSS6nACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqy/g/+OTwQ7flG7QXJQGWN5Ee+Qhq4aQCTSbBXzo8v9205fziS9YQq\r\nwjNZmk6GKQbWBQ0emsV8TJ8qTL0ABzI7A4tvPSlGG5SJQhWPlvKO8IMhv63j\r\noHcmY/GKff6zjN3C55tXoEvEcHUlMSrET+hQXweOYigX9f9YpvtTu9i9Lr4b\r\njKRqSLdFrN6ySu2Rx/IfDuNptwvtrTn6fnIbYc1Fh5ZxFak2fDYnjhx+4vRa\r\nm+rp+GQhit1EviRBj1NTd8X42VzrIMd3lFmluQGnJKyaBwVH3p152tVLQeeZ\r\nHuJ79b3VD/Vw68sxvysCCxVzKa0S/rL2QO9WltPG/mC9HQfBpX+GVT/b0H6o\r\nlzzkTlE2ssf/RTYvOKuLcFCLhV+myqZ07CYlJ56CeYFqDVQ+Ri8MhXrvkTVi\r\nrI3n1Sycw4sdFbZ/tE0Vr1/zBRq+qqvUYUgjQIfEms2bvWbyaLXlxUDc/YJ+\r\nrtrYJJhXeC0akEyW3AXnSYKWP3RyogURzYA+Tw603rHpU8Lh2uaPvPYErKvU\r\nxsTEpUsb4qG2g+sMe389vDCp5McvTs2FEc1IUQJNfaJ0uVqw+c+np8lu7+/A\r\nYnKvLaBEctzT03I7Y6bBa9K9pctjukK240c6ZvEiyGKi5Ng3b4hRxdDSUINP\r\nJAv5b54k/MTnvnE+ch9+zuM3ql9aS0NTeZI=\r\n=lySS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.1dc797e7f.0","@material/theme":"15.0.0-canary.1dc797e7f.0","@material/animation":"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-indicator_15.0.0-canary.1dc797e7f.0_1665740455593_0.9131053648705185","host":"s3://npm-registry-packages"}},"15.0.0-canary.ed4009397.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.ed4009397.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"1bdc519148d83109a6a72165669ebaf50f29df18","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.ed4009397.0.tgz","fileCount":38,"integrity":"sha512-fsTPKERtkk8wd7adKdy4v65g/niIjd0pwU7TCx7htZ+baDH3fzGnvfsqTELLWJ9uAxcbu0t5hisvvEHMcbxCcA==","signatures":[{"sig":"MEYCIQD5tYwHCY3eF1nSTuIrduoiEHcolAT0ANRuCbzn/+MxXQIhAPj8YFDa9uqTZa0W0o5ZtSeyqwXFULp6m7deGAczl1lT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSZNjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq6Og//TGgBjwNOgzewqX5oNsKUwjAJqZ6s7iCTojuAjIk8uAsReVtc\r\nqZ1lUX4WF1OFVJNED5rvWpa5PjoCRe1PfqJJImcz/p9Ypj9B2LtIT4AyCxuM\r\naNc053p7MNxSbFTuUiZf3i3T6AfjTHvRu4lG1H+7DSJmSPTjkwHkucBA6WVr\r\nrqrlJwtLdbGrzKjP1LHgau9SVtFTX1knD+rwSua3Ud3t9YQ8uU83aqIjSh6d\r\ndx9ATUG5+ne482ruMpmf3mzuVWLd4IXoUYwnpUXQ597n6sX3hxl/v+sYs50z\r\nJ6xiv7WZ1t54RwA388VMnWloyX1WYUfW4zbrIUhQgarfGlH52joyLKE66xjV\r\nyWlBqXc9KfYCywafxUFGa3q6J/QPVN87rFBYHa8xoYgrkb10XMtbhelfBpbx\r\nlEzqt21CnYhMY6GK3GRnkNxhlapPZEnd11bDIaaWNR/dF1Kq3w4dDuRLLK5I\r\nULXKlmokQlHXRSYD6SKfnf/XsPIkIEETqMD7VOLsvTANeWro8sVE51CAdly4\r\n2ni5qPhI0deWwf/cToDTIn2uSaFsO3+FAhH65bLxgVFF3GBxlNAC8D/WIqHd\r\n9aABG0kGfq6euDR+EEX30JZXOeemMJ0330eN38D/Wie+lTx3lZ34CXvOZE2n\r\nCSUrx6siyIiiZYeBg2tSF+xS79y4gW/RR8Q=\r\n=r9iw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.ed4009397.0","@material/theme":"15.0.0-canary.ed4009397.0","@material/animation":"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-indicator_15.0.0-canary.ed4009397.0_1665766243549_0.22005179962964627","host":"s3://npm-registry-packages"}},"15.0.0-canary.95ef196bc.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.95ef196bc.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"62431978c91c051892c25682aa898d3ff73e46d8","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.95ef196bc.0.tgz","fileCount":38,"integrity":"sha512-Y34Hf5gC0uNwLznnYWP8Cy4Nb6jvpbf59kOHY0geWqKwp/zqMxFVoeOTpfoAcX6rUqKHdz+McAI7j+7FktH7Ag==","signatures":[{"sig":"MEUCIAN1m2cW3ooohjNXmLykQtc5oO6DYkqg93GwnH6Spyj3AiEA16h0P9/krazOYdrk/sGVy2N97SonJXPIDf/h20DbucA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSe0SACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmonXA//WvdUnDoGd+RA+IThXJEDcbeq8wb9WVu4kiRMZ3jNp2FuWHyj\r\n8z8xa3JkddmsMXoGKnkRevIGo9EVDQHBroAV9H/+M1iPzDI2Mf5FIukAxyo3\r\n+cvKY113x+Jd+w/U973PsaoFnCZEuTMw5zF3dfUp9oalFmOVux3yAZHhXDky\r\nODd6Q53ubaBKjpjOtaefq3XhkaP2UBQX2btWR9h/aYBNmyYTKNo+MzGc7oFm\r\nZ6S0CelKiFJHs0CFe6J/5F2QcgxdUahgczWBB1VubsxElGXxcIJUARVKBbcs\r\n0kIRyogOF4LQMPcCYmfQ4sj8AJFcp8w1ygf77IXKkclYvFJj2bbmCtz+AXGU\r\nfG01xFetYvUvmkQFyEXe4c+WJxJe0KqUckBwquVaQ+hRWujVL6i95oRwxlR3\r\n4P5YSeuoM2lHmUOx12gKTUrje3cKocCqt3NopKMkNIqCAHQCVz41Q8HpAJkC\r\nAEqYysFTent58XTmgmjhu7KD0247p1yuxmvjn70aaMCIlEsDGJxY34TS/EIv\r\nviDkcmHsx2/Sc1Gar6hYjZEp/HXF1aFl9PU4Iu0eCnXALnibaFB5tKkoSEDB\r\nAm9B8BCEcMDnq2fysrS+apjJDbtCEYaKMoTwQcVQlVCJnyz3BFudrvGckYSc\r\nIhFo9qcsrphibuZ45Nk/felIewNeU62ddA4=\r\n=2/9E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.95ef196bc.0","@material/theme":"15.0.0-canary.95ef196bc.0","@material/animation":"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-indicator_15.0.0-canary.95ef196bc.0_1665789202675_0.3816875515778939","host":"s3://npm-registry-packages"}},"15.0.0-canary.13eea1b2d.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.13eea1b2d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"9eac088c088d83e59abf075b034ec7dede67911a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.13eea1b2d.0.tgz","fileCount":38,"integrity":"sha512-cfx+uOtMP/snxBK48JQCW+zZ5I4lskKytVOddfP7RBaVRsftVrTZ8cJRNQjc1NKzU7rIACZpZ9d0uYaQY60IFQ==","signatures":[{"sig":"MEUCIEzdArfqfUceiL7kUnj969y4J7Kh7v4x+ywVEPuXt6OWAiEApGEAhRHVJUayKToRWSvbEulFLfuSBxIMBy5Vu+BHN5E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTNElACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo1Kw/9F0yYJJRQdbnYjoNXPUDWkbB7+OfvvAmlIRmkWEJKImP92HNc\r\nyZwRgNWTwLYXCA9mdxOPtF0hbKlTJBNkj+UdNhHgk9XreOsW7sJ7xKCDFx1H\r\n0xAYqe1QjFydsZHMTrZ+F5SZ9IKPzh7ANR48AVXzEqhEeH4z9EyDgk07FL8A\r\np8jYwSFp1MGU25ewwJRzCVQMCaCIsp3UG6cCuULMnazL3veSai1ZQPdtPqQj\r\ni2bXTnGWoVvcYmHpGOljQKxyZlVkvDWrvuZqIE1q5OMhCAlTHqfSrgsBhMBM\r\njHUbBmrOT1s4Qs9IEqTEEfZ0DEa5TCQsxmlFe6lh4bAEFQJV7ivMhveyZdTH\r\n5vXWwXrt0qhTKESPioJbEnRfgSBaT//cNcq5GHgwvChRYAVyGWWH092ANbtk\r\nZtTPRfh5DKSRVWj6HvzHp1OJZBKWMJtMJwf7VbTS1zUGIl4BAHjtZRgClZoI\r\nt5I8M00LTK/zepEYyC1hhE3ktRtim+rTuyoTAOphFFJ4F+0E8tyR+GAYEEwb\r\nxfgEAUQKWMrDhXmqIQ5FrSSSL2CBV7L4Km+2WeX96tgLmcMzPyfIiN/1mQSb\r\nTUi4GKBtVzdYubg1O/MJPLTES3ry5cmH5mv6PKALsTykS9LyDzlsM5v++j50\r\nJJjRZlCFg992oVmndWTvhDce/G50/Xombh4=\r\n=HeXP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.13eea1b2d.0","@material/theme":"15.0.0-canary.13eea1b2d.0","@material/animation":"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-indicator_15.0.0-canary.13eea1b2d.0_1665978661309_0.7433644936034214","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef9b2babb.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.ef9b2babb.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"b1065711209287b71499078c91beb283ace751a7","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.ef9b2babb.0.tgz","fileCount":38,"integrity":"sha512-Fyb9KDBgRw4KKbPDrnFPe8ZB1bE58DQN5uIlIWCW4SipYFowzaSWXb1CMK08tazpVw2t0LLjKfbbB+8t7Pyn5A==","signatures":[{"sig":"MEUCID+firIBO3altUXtelweTAI2/7rSy4hIRFFzadlT01NgAiEA/oAieS5XsTqbwTXx6RXn2aixgJQDBXbjD6kX2eB/AdI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTR2gACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrSOw/+OtrraojxsideaS0xdJMycpXSUedE8hgGrkMYZtG59NdN7nZ1\r\nBBc6Jt+lQ6q3N5rYDMnw7JM9/hq9ReHJTsity+jO+ceHtj9ek9gOZVuQ/syz\r\njpzVq8lUK/7ggujhfVIcwSr/VVgi1+0kNajiVgYHCKDlQ8izDHQ61+zP+loL\r\nujyTErke2bHk6W8sBvjR6Eb9I+RNDVmikeh+SPh760tYbEN8bFAwkpqbvCPC\r\nX0xILxPOqj73WQOmFXPg+ZWM5B4a+8gchdalsnOK+xMokShWO9oyQezFzbdh\r\nNELn7aLBBgfLDzlIo1G7zv10g+jXIo/slGLeGPhvMpdZt4+aCR7TrojypPEU\r\nVFMWveNQMD9Cw5E0IGJDhttMljkgeD2GRyiATXC0TsoDr9ir+JVuZ62dBBR6\r\noBvRT3kRQKaNrLbIWIpumDaPce/9sNELcjXT2AFiA13wyUIpDVEVbt3F+yCQ\r\nIYjEegJPOkXf+YaunYMuGvYu0lVzP9pABEbdl+cja6XfuJwyJ6mlNNJyxSb0\r\n+LjhIm013QjIge8DF+iNd1ylQdNbuB86yYsqiyCHKY6BfDjjotmlq9nCFn5R\r\nwgxrj2av5By3H+ej5bPgb31TKxGaEOv632rRRUiTUx1iqII6sJ91K0SFskUf\r\n43QVKYtfVW9GLVWJxeOgcIMmUMW3sQO18ts=\r\n=3ml9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.ef9b2babb.0","@material/theme":"15.0.0-canary.ef9b2babb.0","@material/animation":"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-indicator_15.0.0-canary.ef9b2babb.0_1665998239989_0.9392787797209401","host":"s3://npm-registry-packages"}},"15.0.0-canary.cec7fb987.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.cec7fb987.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c601940e91038fa42120115bc7e2a720bb5a30cc","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.cec7fb987.0.tgz","fileCount":38,"integrity":"sha512-3KfqmSvFvRxoNPTtmlAcepIC7joG7l6xnr3DYiby6tgoWKjXTQuz5LA23qasplnuoytZ/eWnFS4D0FR0cbbmbg==","signatures":[{"sig":"MEYCIQDaJhAUrMqtAg6SItOVnAWwFU+6cSciY0srwEfJZW2SbQIhAMVRKvoN2PjizWQpf7h0BDdqXE5GME7iwbFkyCuI8eD9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTTSwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq1Yw//VVhRsWTZv878rL1ZSxWIUn1jB4lDqdtNEtS9xxlud+rMt+8W\r\ndu52IDRIx9zAk42ak8asxMLmLEbnwfIvaiEOiGYKjtJnd46AO5bpvexmChkb\r\nYAf6NLl8HJir/ipm8Mi7pFAsgLAqwVDfOUuHmzYMPYDouWZiZ/u7Q7vKt6uE\r\n5mh+KISNJTKbtyTa9cBN6IY2VrFZS17l0NbhSwX3rkR5P9iDK5+0IwSqZIx1\r\nGHngPt+75evhzS1yR+ygy7FiKLY/OQtZhXmM8mfVUZqBguHtR6M4BpF8OCom\r\nFrsPN1Ao1aXu2AKNnt795ncQxJMBhvQFmiqWuDBLsAIMm7BMASk5gnVlGY9B\r\nRJShts2J1ubw+c9UzrzQDOUMKoUmyrN9la1Ta59ctuPtpMf2YL7muYcQ4ET/\r\nlT3Z5F3FovxkAdPfByfhv4Gpp00RQmgpMXt3sZ6D5DRbm43TM/Z9nKqEWZjE\r\nN6jSRGGe8CA2an66GlAENylnvHDoPMxSelSJc9sXvzExGDzrs6M1wXgbRydj\r\n1802PJKcz/pz8i7tee2LbF1cwanYZV07+sv6djc2v//h0rEd5qWYTeGnS27A\r\nq0EC6aUbMNix7N7ZeC3c/jYGzPdrPfi+Uh9EurrfS4I9nxPxfptLjHZXbXZz\r\n+4jp70WY+jIs4v2+RFBtyvR2LQ1K1L7eWw8=\r\n=JcFd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.cec7fb987.0","@material/theme":"15.0.0-canary.cec7fb987.0","@material/animation":"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-indicator_15.0.0-canary.cec7fb987.0_1666004144004_0.2526446622793228","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fff58b08.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.4fff58b08.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"d68f1dec8112621d4d13a2195ba227876b308944","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.4fff58b08.0.tgz","fileCount":38,"integrity":"sha512-7eCbVNGcyVv6TNRzX1buHzfhORTLp9wRp79g233ZLm3vuK0LfWKG4IRBicDGVKo29anj+f11eTc+X/VLOAnylw==","signatures":[{"sig":"MEUCIHyP3ElAYDqbkRUmdsiasCG1TSL23BXsEswUcsDT3kueAiEA1pZuH2K1G4NxVJpoF+xyModzZ+vSA4H2uTtCLBDrvAI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTXMPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmomFBAAjIhW/+pfKcwy66HCX6k3psNrFXBWLqZhveSEJsXlsCEWNcT6\r\nFc2fa4EynbSi4FqnY7MVkh9WqydWJYDF95npmMIwH0vlAlCckGx5D+/aSy77\r\nmFfWO8nu10pBSOEpXzFz4id2SF1iemx23za71D893NGSEn12Z4AqpMqP3uZB\r\nEfqm2+nF/JOeljSOeycIEgLUfnluQ7Ij+nE0TThT3dcX8HQ4WXfd3pOYYbop\r\nii23hem/YqwT8vC+3D/Z5h5soWq/NkcfABrTn2LZEbKDppE4T/c7SSWuGfP4\r\nsnC3Y9hmxJacm7nFQy9JR0Ez49/lvm2QB108JLElhq1KxVV0GNugaavCLtHw\r\nFy3A8ytGZnuFGXauuGc+yqWF03UrLoZXexT/aMzdMcYwgm4a0YWHjLD0LiCK\r\nHySRSbAYgQ/kCUqtn6GhyTchiQd9KzByMksg928tu/8sb8NbzgVjzW87iTbo\r\nP3upZzYsc/d6UWHrtuvfCBO4VmuJyvHuWVSht7pzO8xY6DYUVj2fVkW4vm6P\r\n9M16S2SP83uyGwHYqrt21aKFcZhzJsp/3/bqQOvJaSak7dybY5aNBWm/Lo+Q\r\nNSJ/ciZjwJt+jjPYR2GLb0dJTVtQtmCk4mhJO4JeyFNeWmy01PkYJRpVBDnw\r\nPDystJPmGK7233nnZKMfSlpwcjjf75+BBWA=\r\n=F4wx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.4fff58b08.0","@material/theme":"15.0.0-canary.4fff58b08.0","@material/animation":"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-indicator_15.0.0-canary.4fff58b08.0_1666020110782_0.6679009714570319","host":"s3://npm-registry-packages"}},"15.0.0-canary.587d8f871.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.587d8f871.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"cee02b588cdbe7fcf709c31ce4801e91f275f85a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.587d8f871.0.tgz","fileCount":38,"integrity":"sha512-Nq1ymYcOoR+wCYJKTElg58oS3898NbT+fPPdH/miLlpwhxM8wEEHxULFVm6azrMJ+xCvgKsxOR3CxMbmuYJukQ==","signatures":[{"sig":"MEQCIHbpGXSd267R4e9gpV7u0xQsiSFHPyS7Yxnznai3zXALAiBrkhfzz5VUUQbck9jjM9Zjm0pwdy7gxZS/amj7biNMiQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTXsxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqXAg/9EJ0vx8A8tm3P8x5mAMVXa14s6Wipi5tbbHk+OS++7jefFAHe\r\nfVUqcZyuo8H099flQwu19beLRW+NSNeqIJiK/hoh/KRv48o792Z3s+KC8Ljz\r\nrLsDCcwCOsdOJioinxijAU9WAN5C019L352QjWisKmSWj2SiSbLfroNmEQ0k\r\nJwGzID2atDSHzLTG2wdoz6rAUmeY0QxZN9ga5SdvSRz5xxDYgrllv5mdJxcl\r\nbM5TGPTa9tbq8LyAIkSpIcVmvNkAPzMKU3GSZ9Z2DP0U1hPv64oaRBC52yp7\r\nj6m/y1epCBmvomtwzqXtOPowjNauEzuQ0gpltSv2kDxYEwONz4iSh+DoFd9R\r\nyHyPJCfc8Sqf6F7tAB1/8vrTefTk1+3dkACMZN+ETGdtVy6j8qt4iPsuCgZc\r\nKJV1wMhov2Lbx3wvJHgsznkBhlIRXIW6Yraj7cPl4IMRLwa2aO9tzLyQmPXn\r\nh9E9rcJgKPcPEy6V1nPXefUnEQ/5nk+IGD8NDSSgfVhtXclsgn6PiuT/ewRX\r\nfIarpaDyoOa9d6Gge3vwGkvcFawqhjY/LtFU3BLYTnQFWgUJyEageAsyPHR1\r\npIOfDDkD2Va5N2QUV0BAH6RpSnRZPGU14tXCEXoZlUV5FbMQcTFL800w6dYA\r\nGRWXDufQ+gX1PIQoFDx5Jko4mb/6YK0Y2oY=\r\n=o0X2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.587d8f871.0","@material/theme":"15.0.0-canary.587d8f871.0","@material/animation":"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-indicator_15.0.0-canary.587d8f871.0_1666022193350_0.022489767449433096","host":"s3://npm-registry-packages"}},"15.0.0-canary.edf4b98d0.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.edf4b98d0.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"cc5dd32984acf7fb85f2d234a3ecfa83741e285b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.edf4b98d0.0.tgz","fileCount":38,"integrity":"sha512-edzFddZl7i7fVaFzxDw4x+r4O9G15MEmGWhk+VFjzK/wyrrcLnJADIYzhQHZv3HC08R6KVIoZCJcJrmkpdsIiA==","signatures":[{"sig":"MEUCIQDY+MMcN7eYlhcEgSDV6ES224ojBalxtePQ5IIREQg3twIgXL93K5e27SOwSVbyRWXqEVzhEplVXaHkkxR3n66rbXg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTYVaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmphRQ/+OBywJM08yD5ID62lHO9f3T0mT1cUfe0S8E7a+CnSTfgSKn+0\r\nWvGjk5ApabLA7cIgqvr7q4s3ECO/qMYDNWD3948ecA++uoNoUgLpzr1vsNkT\r\n2PVIXDjKo5LJghsADAvgKZNtBckF6OKGSa1nX/z/1NFRJHtsdWixL3TcX1lD\r\n3jcilx2p3mr1MRhETCFxtaUrvMhV5EjJfG7JBUDzpQqEgMdNLQLeT4iTsADT\r\neNZffLdz0GHy+NPZCe+fsQvDx2Ikb1DYx3ePavBjtWgY3ZsFgL7Lqw4VKVaZ\r\nlnO583qOxGcY6jhhxDrInnlZZ72iBQCtgDJGJw3gEGQZTyFk9+H/3IQPNCzm\r\nIDo/qog1r0nTMTridTYbJKTITFiyRe26PqSu4kiLZ5Oyalcq6FVVBTs45j/d\r\nGRd4gSOJfjijZFqJSoAZWu7wW7IRzZ4+EQ4Mo+1rsWAxQ+U/jo3Im/Osxj2i\r\n0kmabuVjRpkg8jFzZdG1jJqLBsQClQ9Sats05//rz9HG0YZABVQfNDKMg92q\r\nUTpK6/UWJN1j19a7wf3cF5Z0KvEHPAGh6EqAYoXyezVVuz4WoxynL+BjhMOO\r\nSQvLo3MqYeVD06By8Lcyu+94GjGtmOHFJXA7CBqkR64Z/Cv0O8OPoPGln0Y9\r\nYSNSui+Vhci+FCr+F7D930uOyv4zOL5ntHk=\r\n=odEF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.edf4b98d0.0","@material/theme":"15.0.0-canary.edf4b98d0.0","@material/animation":"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-indicator_15.0.0-canary.edf4b98d0.0_1666024793880_0.8735921990119333","host":"s3://npm-registry-packages"}},"15.0.0-canary.024ac5f16.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.024ac5f16.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"fb3c719c5e8ecb771b11a193114160698e3f7dcc","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.024ac5f16.0.tgz","fileCount":38,"integrity":"sha512-5L4IeT/myLsAF54hwK3BzlUTBRxhsHZy/Zr0UaZLWEcZM3TJgsxSEDMDATnrDVvxsLX1jqEEdRi9Uqo1Kb9X0g==","signatures":[{"sig":"MEUCIGYDfUfMzw8Q7qwrv2uK77H4CTfCmBTqFJLPc31t+b4DAiEA1mVGqe44AnmYv5tYf0TVBZ7/QzpD7gfIMreFAP/W/xU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTdopACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrSPw/7BIEZGvIdjDMLOKjMSvg/j3uE6J+vkyuVq5IH4ufz2RdpCJDo\r\nBv25EQe3m19xyJDqhHHiNxDcndPO7rbFZ9yt0vUg32hRCDvbYKlSn/5q8vjR\r\nTbB+VZxAGQRiJDSxJKaGNn1yfAMIXqvtuFyp3DJ2xgdJ49CO3t9yMHO2IW54\r\njH2uB6VOQ775ELqIpnnVPHjAhEBbBrb4DDblEqVuPpIqgf2tZSi4QmLDxsWQ\r\nN1hTyp5le4sAgF47WlvfNS8IYVEMmLhCdl4PHmegj4OHUzNryF/fn7+z3FCp\r\nREJD8KQmnr7ALzBNNUrRF9vZn3cxDNtF79sh2pq4ojm9pDykkKpkEHuCVY0K\r\nP/tVNZRDfd86ozXGoOWyIqH7MGqwALKg9KxBEjDq0kmUNFebh6Kd1ozvSxE/\r\nJgz7iQJQCUpQ/LH885smK+nyQexm6EznsTNBmb3NpMhLcEYkNwxl0/7VJRFO\r\nqxdCA0kvqNUtCBwPVSRVFJ1LdwiSas/n3uzJtsCUKMZAoTJaSnq7UxRgET5H\r\nCR1qR86L9xYZe/41v3sPTiKt/WLrlg2pb5U9d0Lvxc6oR1R5zjXj91fXuz1A\r\ntxbPmF5YGH07ycwE4QRtwB07TK+tcqjrzB8IKzC0fJ14XMh3AainqGRvynw6\r\neQi9O8tbIucSNkAfLo6BlOrMhdfiuaJ9Fvw=\r\n=AG4j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.024ac5f16.0","@material/theme":"15.0.0-canary.024ac5f16.0","@material/animation":"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-indicator_15.0.0-canary.024ac5f16.0_1666046505360_0.8523325380324374","host":"s3://npm-registry-packages"}},"15.0.0-canary.c8bdf6144.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.c8bdf6144.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"88aad3ccce53f51adbbc53175526d1ade476eb1d","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.c8bdf6144.0.tgz","fileCount":38,"integrity":"sha512-8ET8b1jpLiqtksnzzW0KFMRKvQ4m+q2gA5kNM9Tn6RVg1mL5Z4ERX0/rQFwDW5tVX3zcDSNtqq3XnH9jaMD92w==","signatures":[{"sig":"MEUCIB7pM1DIHppGOxSI7J8Ep9jrxPxKjmytPhvZ8e/eXJZ9AiEAnJDiCfqK/2fP1CBu3dW5Yvl/7pUivVqpYDdi5n2dMVc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTu76ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrB5Q//ULNnqlFjRv01O2qau0X+AT7E/Cd/rifofU4aU6cJcaWwPLCH\r\nyTWBZkD8rUxdW20uMYrr3KmeaT1vhbz872ZA3MAXixZB4+QDvpp1KnYA6DYm\r\nYOD3MpBc/WISHP5sQAugcuzrGFdA5mPwlwXRAvxTVI/TxExkwo9LqrIXj6q6\r\n38AXGAycHTrshQ90Kcd4gY+GW2TeSnJIC6t6Qgx/uDS6jRSuuRtA0C8CXhLj\r\nTfzgUo6bwGNHirGS4qRJNIrzYGfA+SHAO109x/lEjXNoZRBYpbNaeQgTlzlQ\r\nRm6yU3jhY8kNzNIx1c/Xh9YT60pGDzY3hyDM0BcH6NGFmlft0+FDlgYNxVLb\r\n907UqecuuR+2iRjfniCd8Bx+7a8CqYw7YSbFpJ35beGRVGvWWuA7K9wOOOvS\r\npJtj5XeZU9xdK0ucu8zuMBOGM+Ff0ZYNWs8QQpbJS2YGDIWRRwKNcRfKRd24\r\n8oMijdpm4Ke0Bvx7b2PRFGTz2RMHZCiZBz0YAEiIbrroyGKH+vWrxegPndCf\r\n0xuazRVsi1BCbvoiKjVyAjccUQxi8KpYIQubvsEFH2NFfDRGcEtww87sSLXn\r\n/QPY4wBPvIu4m9N1NiZxGBupzgId8qhxZI/stXPzVXriaQl318IbxXu4bsq2\r\npDrLwrOmqQHRWye7atLpnaEqyE17shlEk/Y=\r\n=nMvw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.c8bdf6144.0","@material/theme":"15.0.0-canary.c8bdf6144.0","@material/animation":"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-indicator_15.0.0-canary.c8bdf6144.0_1666117369810_0.9891420084806959","host":"s3://npm-registry-packages"}},"15.0.0-canary.bacda4885.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.bacda4885.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"2a575d76b4bb05773611f4c95ccd07f1340f1e99","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.bacda4885.0.tgz","fileCount":38,"integrity":"sha512-36oGh1iKTMLQN78opwtYy5lMDn6v1C/R9V8Vt4SNZzW0SyIB42jdEGX84lSkkIz8qIFMnaHIEAOcd3RTZWZ8sA==","signatures":[{"sig":"MEYCIQCpGNVTmTvzl/UBcb1agO9+YzQoA1ISxJJ6p1jEv1M5fAIhAI5Utfy3zuGcfL9RbfyO0wXKDwIMLtqpXj08cq8vo0Sp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTvN/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoHIg//ahDICRO9z9r1XQfJTdAJrvQh0/oD0l1pICj4YLRjOsLwDhJM\r\nHPg5O0VwCN1OQ2sDxAE67wJQ6QKlPN9O23OjwMULRV6bOUw0VGQSrncBCkDV\r\nb147wKi9OEL7X0/2RxXG+TcVzqgD52NNxT5U5q/lrlZWJYZtu9j8lEVAhe4X\r\nQ0nHdTO1PukMP0lNLRVkG7/5fUFwBCjEjIc07E9KQN9hmzbDo+8THI9eYptt\r\nK7hSNzufoY7bQtOXeax1aKNBKpDthWuCqPhHdsOTTNxLQJirCXyKBYlBMPll\r\nqklNOdWc4Xt9bw3WDVLZSRgToPwsKqmDrs5nS0kr/mA1E+fNOb+Xj0sBCGFC\r\nDZ5+CLomfMEPWEt53u3U9smBavi7VlIAUhso/UPMgFgvOtgN/yTe0T39SQ6Y\r\ny1w0lP5865As8gOQ+F+stWst1MNCcvho05azCsCooL6SJTdAWdwhYQkSU/0G\r\nlp6qJJT9A14Bo4KpKbEuc9NFWT7sJ7l2MXkODfKcLttNS0idg7B0A4u+r/Yl\r\nWvOp3uIitbQC5I4kaca8GmlmEljS8IwPWS4a8UoQAO3sTVykj6FgDUZJhfxW\r\nulVNhqjPD1QmQ923iXyrnxQdzRv4MXlwV4LXk3omQlH7uievqIZioudMqFE7\r\nXuCl2BG/K0BAR4yfWZSMzkaMJq7FlEzYzpY=\r\n=mdst\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.bacda4885.0","@material/theme":"15.0.0-canary.bacda4885.0","@material/animation":"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-indicator_15.0.0-canary.bacda4885.0_1666118527555_0.40474571737532283","host":"s3://npm-registry-packages"}},"15.0.0-canary.92b2556cf.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.92b2556cf.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c3c908ee47f2fb0fb0ba0e9745bf07e59e612d84","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.92b2556cf.0.tgz","fileCount":38,"integrity":"sha512-7T+zWDC3azK/07RVrO54StKgAkAqK6xDf2cYrS9/CztEPNKzQ91tBE8ut9jpiz+Cw+NCWAU7jrN+6ep0r7FhXA==","signatures":[{"sig":"MEYCIQCuuBMIYj9d48TCU3jyDIufexEZzOm9ltnV+uUtlGaN9QIhAPmTdVYXjYwaMlyPkGEg7n5EePJM76NBRLs083IjOcCa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT08TACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpPYw//R+MWC6bNJHv2NtI+ys01xYJJi3/lElT0qHXlkG9UpAM7eyNG\r\nclhIXUp7qkM84UGdGtlKL2/ISt+GHJGdA2txGbDRfPHbmCFjgtIptJSxSJPg\r\n2koHEm+X+P7BmkfplXxFjQ1ppQAT5ogXIBHmnCleszFGmVsqF+OdGemk9LNs\r\n53C5/8Phd5PkEySDSiqaUiVLkPN992x9kaSXqRsRzHgN+lZEhGe2oEp+wUcd\r\noMSCOs2lOWRbZQ0czwyn2cXg65/7LK0JGW1+zYqBE0Vz3UW70MBnoZ4llXya\r\nAotIvtfSRUhUKdNnzJtiVvQbP70yUe3cT12tE+XcpCBEXKaw1IIYEjpP4LWQ\r\nKG0rEcTir1gZqrmxfQdSddi6o9r3Y4pv02OHUhiAGveg0WIR2ixdloMD2Uqh\r\nrMQ8A+H/e9up+YKBDZyesbeakJRxnIrzB9kdjtTIUS45s/vN+sl/cfhVl6NT\r\nqYnDtbfonHySfnmvXiY2zov6NLt+Z9qkbeBzoVkbmNL/NnRlZAngqjYQTY+6\r\nK1ODWM5zT4e+iWixIMG8OD/KqrVuZ9HgvOANkOLCTYJauKYEc7IO9MuvO+Nu\r\nkf1tOI8WUn3pIf09oPGg1TpAo/Ay5w5cDbnPad+bVLgDvwYDMHZDdmQlYXJe\r\nQ5lmE5jZPqLWmWjTitDvWc+n/vRYIHqTH2o=\r\n=KaEZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.92b2556cf.0","@material/theme":"15.0.0-canary.92b2556cf.0","@material/animation":"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-indicator_15.0.0-canary.92b2556cf.0_1666141970933_0.2991675611704985","host":"s3://npm-registry-packages"}},"15.0.0-canary.cc804509a.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.cc804509a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"d450d0d63f58544a0fc21131488cdace2011c6af","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.cc804509a.0.tgz","fileCount":38,"integrity":"sha512-h8v+wW5y0CNtbETkcTWUFpttWogsTTdLrY4GSVGEK1eDgA9TiRnbwBQgvyTEQVW3IQsGTmc+2ls+AKFyoSfTGA==","signatures":[{"sig":"MEYCIQDkZ5adccUfbq9ZZeB9ljEY3Mp02HHmmnwS9BiHzan41gIhAJ1hPRxoqVGo/KrqU1lmQdF6CGXkmlMpmjCIdCrPOiYq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT0/2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp7Ww/+K7U2gBLL6jOKwN6IDLhCu7STT9n+7Ut35ke8U7tmlZyU9ybI\r\nP7uOVlcgjisP+10yyaS4wbS51Xt/clckYJKhp3++to3vpeRYNOQ7V5kbC9/p\r\nPpSajKRR+x3DX2GMHVI1qTrjqgGEYd27zM+/LIfCOuKtR7RpK9KTnGNbDk95\r\nfkBQJVhS44Y2pHex3ayTJmzjFVBhr3BhA4MZILnVMY8CBExc1WVy0io8hvEQ\r\nt/9+k7t71IkIoZ8uIuEKQ7H5L+DHZbPWXJJjfoXnDX6aI7UGFAMFZiIVdY41\r\nDfKZPsTdTBUHr4sam1hWN57GEIci2auSzWxspWQDZCSUkAXyhNmOrJ3viPIx\r\nk8V3tO9UnjahTzv/wX0ty6GiOwo45Ct2+3DXosL5kHJ6HVyoiwoo6htVwPVR\r\nJPja6+wS96tADvD3/HwCftwgTxTGtW4aAaS5AfKSJRJL9S0IjBxaB5IuYVav\r\nr5Mu36hqzPX9JlEqxFffUa8iW81ZESqSaC9JkE03SOtfdqq+dyIHPybIoo99\r\naczxecQHBJaEs2xu+qFP00Eip2yY7YugWtqtKS8RfYEZDK7K8dp5iKtGmwYl\r\nK7Qk2gkYu+E+RwQSDI3gLIATiwSo5d/DcivlRLrE+6/jPwioAM5jp9Q/1RQq\r\nVJnuo67xmo2/0WSQP+lstl6C5OsUt/tc81w=\r\n=4Hg5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.cc804509a.0","@material/theme":"15.0.0-canary.cc804509a.0","@material/animation":"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-indicator_15.0.0-canary.cc804509a.0_1666142198476_0.27627353218932793","host":"s3://npm-registry-packages"}},"15.0.0-canary.982bedae9.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.982bedae9.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"6f8e4690cc4c82f5313d607d885487217d43372e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.982bedae9.0.tgz","fileCount":38,"integrity":"sha512-AFc15nZBbxEgcOF6bUh4ytPuo60zXt/p4pqzwPviBMhAbHVs5XDaPRXdiDElNhveAdmLUkSV8ZrlwClKFVMiVg==","signatures":[{"sig":"MEUCIQCnNptBQyb5f9OYwWrGzdfj44wsj7461GP/Hn80DdoOqgIgKXXkHsjYQNpTKJI52u99Xl58x3hWw8kPTZfvxd+LHAc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT1SaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoB5g/+KvK5k9D2I4i22JkHBcX8Ozd/bQX61b5orXAPnRT4loRtmC5Q\r\naihFvE3VaQTu/oDHNBkLYq6Tvn155tH40id4opecIGgZ+vppP5lE8Igv70G/\r\nRa9haDlEPle5UBzClVbJp8uJ+2V7sIGEGrXsWjNlWejbNKZAjSUFmLPusad8\r\n+j1IrYmOGaeVExeySUFyQz78bwjYEexTQmcLrf2t1xvdC4zKUEBR/tDq7nys\r\nS2w54H+sxjSQaZHLB99V/2kmpRj80ClvZEwb21FJ8hJschlrj+zzSN6/Yn48\r\nN61OF7Z9xXozKN0H4kGGtxibjjjzcLDlngIQPgFwOgQ8uTyCYMgmtr1EPfYQ\r\nO9jXMEGzhvC0a+G1w95N4GwCWWje1JIi39dimAELGiIejFfOQ2kkRC3liFPj\r\ne6cnuQEAon4TGrKwUXlEo7hZxp2U1SmgT/NWTQtRsGyoL6K0bgleYmK/L63q\r\n6W+IOlwm/ZUZFhZdcFn8oKOuYJjhFvziEVPJZs0bIgxq+eUqSeWYN/BpH9Ye\r\nbZGxxfROeVLVOsbPhitxImmbAJZuqBrf3a6CJX751sYeafbu/0LpDHYE+Qwr\r\nVoFJAwg8emwfkPkMfd+6Kd67H7Yf+rR0sMx6zPDKYPfkc441zJV/uo+XH25o\r\nzvjiQwC17FU6BsvQ8wN7L0qsrdMXNWy8lho=\r\n=sRAu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.982bedae9.0","@material/theme":"15.0.0-canary.982bedae9.0","@material/animation":"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-indicator_15.0.0-canary.982bedae9.0_1666143386551_0.09134628817139645","host":"s3://npm-registry-packages"}},"15.0.0-canary.ee40081f4.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.ee40081f4.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"b87fa33b27562d649b2c1e9f75630d3d2d27af2b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.ee40081f4.0.tgz","fileCount":38,"integrity":"sha512-VlM39rrKuIaebCBl2JCvegb9DNpLoM0TLjAbDgk75iWIjm21uU7GyC+Ay/jR5v03h3RQy5H/3tk5P/4cg/UaJQ==","signatures":[{"sig":"MEYCIQCvLF97VmQXtXbmGiR0qwS1E6WIK3Mxiy5nGcEYlpsNFgIhAJ76dVHaRs/sGxmpQ5r5vz3UOF/RXHDPNFF+5Ne/r4Fm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUFngACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmozeQ/9FMSs3zpx2vRt/ryjwErrAri8oL87IkfB10ny9K5YnXMlp+A7\r\n9YxhFpG7qS39xEPSLq5rFZrDTIQWuTKRM15FJkUWd3hthoxGUjdgUDCtHytZ\r\ncUXaK012A5J2rh4P9k9CpYzktgcHwNDUQiCGHX9NIfMzGr1BTmIJ3Fq52Ool\r\n1Mo95xEti9zjzYmm6lcLLSTJgPunTObuz6drc6Yl1giDy4ix3OCbg4vFD846\r\nPBZ6oxE12MxZR+1U9oR7aqEyOCOH2gcuNbr7JrEVmKUrgmSVTmwSkm+BifIS\r\nguY0nXwsxeJUsW/VtQC+/bZ4Vc1Ywk0k0YQw4MjvVCjR3G0DQgSCrfQVZqZR\r\n0hJOJ5/zOVoEl4Zu2sa0tRdhbQvavT7KWonfpzR5Tq6QClrJx0Adr6T8oGAK\r\nrdFPXcVJQJu+e8sV+cyqSzwpKMpwkW1sOn0bEgEGiVtdtY/oUguQsVQXbaj9\r\nrScr+rGk/ggttYk8xRje5+1oyvxpAAwpkFzgo1NcT6+YRcIBXDiZkan9BOzQ\r\nNs3KHGP2SsjIOTNkv5tH/aCfNQm635qCqCw3KmREoWzf1tgFcIYieb9HVRk/\r\nvbornqKj1MgAgdSAQT1GfvPVKEx1wNcj+S+IY7HiEDpQh7vLZUxpfc5ysUpM\r\nlLHHbYAz4WEbsAvipq47LUZdDnYeOKlpDBo=\r\n=wqwg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.ee40081f4.0","@material/theme":"15.0.0-canary.ee40081f4.0","@material/animation":"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-indicator_15.0.0-canary.ee40081f4.0_1666210271776_0.588495379190132","host":"s3://npm-registry-packages"}},"15.0.0-canary.98f1b54e2.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.98f1b54e2.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"26dbca9f4e19faf611d66a9db1b7fbbd3c7d2ce4","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.98f1b54e2.0.tgz","fileCount":38,"integrity":"sha512-Z2z9jTy3zFDxjHmFtCK/EUdYJW9DgC+1yPpgwGoaopGARG4hmeSDTZcs5Xd/rVYUDEos5Z1ei4TWi0oW8XRGIg==","signatures":[{"sig":"MEQCIF0vt2yeY3/6FLXqVtW0+NjlcZObtF1IpfbdhNVCCgM6AiAfs5CLJePYxcy/4zjVcxVLr0H7Gr4mZ+L7BvDK6vrezQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUdIKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqPGg/7BfvJG01pBtnPBteBKqZaKRwVwkcg1gOIaW2SRn/JPAvdfGgg\r\nOTLwPA5Py5oFNaWzAL06BmtF9ILhPdzUsJxUllisDgh5Qh/DuFHjrY/BUN4V\r\nm9KNxB8APO52S3gWML6XEwSBGwDuanUjxNB/8IyHX2AVFevnlfamgagkhYXd\r\nrML3YvTBKGB49KtR+98IO7Ls1x1seLR6Tf5bB0AD5KBu7kflZGMIfBM2S4em\r\n2nm4sxw2+zjyqXHQuJ2ZUhEfUvOzKUgN4KYdIMfQmkXWygsxnuW38Y29Hz1j\r\n9ZiOPvmBrG2fJXZI2D8G0tXLpHr8PjIE8Hbg7VeH7FNsxdXXNY93QlT64PdS\r\ntW+pBBN0QAUebPzstpdS6ygNgzGwVLgg390Gq+wJh9Bv/HGClBa09VndptEY\r\n9vUpW4BIUEbAdjmydgw9J9CnDtmSdE7Hl3vkGijMmKzZHOebIGaE89d+qxac\r\nXawW8p0zN17DbmOR/iAKpHsKg2TFC1Mzde1PxAdWTWT7HoE7pd1/hD+Pv6gs\r\nhxuqpmRAKriJAN/j7F76ByPTwjx2Qp8isA8fEyR4AorKURtEmpOwnXrho67d\r\ntOSnBWOg0EFs+z9Z/QknlTKXxfVEw/3/YEpg9FPUOnLjQ46bgYuEgjjhui7j\r\nKVhDxb7qv0Uae/teU4kBgs02lciaTBU7inQ=\r\n=AdHo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.98f1b54e2.0","@material/theme":"15.0.0-canary.98f1b54e2.0","@material/animation":"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-indicator_15.0.0-canary.98f1b54e2.0_1666306570716_0.5116920802286711","host":"s3://npm-registry-packages"}},"15.0.0-canary.e74b7ba7e.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.e74b7ba7e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"897517efadbe86a302fd3e88c9ea65ad6bd1c78f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.e74b7ba7e.0.tgz","fileCount":38,"integrity":"sha512-G+Wlj5+V2GWFZ/HX8ZByaxTsWRY9JAzd/AyVOmd25fMWUl1roE9HkWX9mPDa45Jb1z7JNRoUE698C6cMX5iREQ==","signatures":[{"sig":"MEUCIQD5T3EDuKz44bzXYFJf5Fo10zJ1tei9UUILdzv9k5E7KgIgPmTbmoeHel+Dh9EpAYvM6CucgYpVTlmV0sEj/voLMPI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUtFKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqs3RAAjHpKx00Lb+JOAsuPmZpEpl1MIEHZHSYqbCs1U5Kc6R7C+qHX\r\nHYocu7FtVNTQkurlK1bMVYK6X5NnEtgyjFvHWmYn9lo5rpf3Ab+ALYkWHRFO\r\nTT5BRLppRZ5yZZo4KVvB4F+XC59w/lh4fZgGdUBi8Uyry4VuHUWynjWGwVL7\r\n/F9PhfGErhibOsaG/cb8hqVizvXA3yOaVxpitbhSAM587JIPuyctv6OUgQKg\r\nTuCEbuLWxqJWiSSxqmYoxjMlD4qv1VDWq80x2pdPGgES5q6dVfDyqkblTxw5\r\nT9gD4SOi35QdH0Ag54KvY3WOlqgHoIHj35OLOeIQple4qNpB9FXkQfB+tWrp\r\naACbCFWea+yaZP0vSbQDL7JeOxcMOsWqqN0mbCqVSs9cbSbY3F0uPv6afrvu\r\n4K8XRdoYSky2BjKAmA/7+L61u04LFMtA8sXjcEYGO0lUPT+ngICriOcw0yhC\r\nfVwtwrq1N9EZghdH5DwrP+/X+g5u5aJ3s82bOdtqv5ZK2Ff46gi8NExH3i0V\r\nbXbazY1+7WO/st63Efn8Rr+e6qkTEXH1hO2th6/e8rYFq9m5SitjxSgMK0Tv\r\n+GpK1fjLqEQj/vQXzZ1v7AskCYDOu7en+MGhrDhqA5MfPR7Cx9FLxHrogNz/\r\nReS9QW5tx5TZGdD+5kKhNgstqikN+J89eWQ=\r\n=pym2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.e74b7ba7e.0","@material/theme":"15.0.0-canary.e74b7ba7e.0","@material/animation":"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-indicator_15.0.0-canary.e74b7ba7e.0_1666371914538_0.8115786017627973","host":"s3://npm-registry-packages"}},"15.0.0-canary.ab55c07d2.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.ab55c07d2.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"fb635db90074a1ed6b465b1a814611a31087828e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.ab55c07d2.0.tgz","fileCount":38,"integrity":"sha512-lcJk/dmJWF+5/dmgQRCXcDdBALAivxNfK0/oUDgXMuCvkYIkdhoHDGaZZNpBsDUcnifapMGQXoINyCSa111tKw==","signatures":[{"sig":"MEUCIQDMFOyG4+q/fihcs9SxyeW8wL7oC8dsrukOQxkjLtFmdgIgQQq79Wu6nOVoEhFuzcmvVK3dloI6+2ET/r+/N9OPhog=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjVDP+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpfmw/+M0gg1LQtw0NQmU6/svHsKrgq5n1yiqgJzzLMAnMqKlK/Qp/7\r\ngaU4gEJLgpRRwWYEHgHUPPZ7mjKddcuf9NcU/sborbjqDbVmld7Gp1Issj/y\r\npT2Rs2NSWX8EMi1cRFse6WZgDEdbXoSKtltNFZsImdOnWhGPoUqu2l13f+wY\r\niolOC1RMpAp0LpEc9KsmRkY6dl3u3CdR3mPZu1awjYR+8syWDbn6gbYieNGt\r\nwT+aihZvK+7vkotmcDteloY4dYX8bjoviO9YWR5zxdZG8ljlU49mBoot9xXz\r\nR6bgV3UuhyIs5/7qjU1k070CTrILns6e0uRrx3oN2wKAGGHRTgtrN13OdSfV\r\nP7zTxR2hlZbpar7vbCCKvFdf6irxEHhQy2r367inwm1zllbl1prPf2+50XJx\r\nRayZG5tSb/RrSD1JWp+ng4oo27SPBXnZ/j172ZbAsv1ehtrdtAGSKCWRxubS\r\npCr+AB83Lu7wd9Csodel6WTvScV7M7tpsiMWuuMunh/C3+3rXJu22uir1tXy\r\nhuTK2N2jTBiXUP4rvZdQFHEpjjy/UlnAZsxiigRUjecrnk5w9CFMhu8VPBEj\r\nOrP5mBHF08kRgmqmj1wVe4XFAdfX+GykHtPUNLNwIUUhs7Epa0hwHIVNsQam\r\nyJ+XNShO/E70o6UtSJnsGtZZxRb8e31sao4=\r\n=awwJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.ab55c07d2.0","@material/theme":"15.0.0-canary.ab55c07d2.0","@material/animation":"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-indicator_15.0.0-canary.ab55c07d2.0_1666462718648_0.827457629172307","host":"s3://npm-registry-packages"}},"15.0.0-canary.fc539db34.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.fc539db34.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"bcbda3ed1e2b0ac8fbb1cd90298e4715a6911e70","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.fc539db34.0.tgz","fileCount":38,"integrity":"sha512-vedvferCuKOfvd4cwk5dLaJ/Xzdmq8HiaF4KTcwsQYr1UdcIzoPtCsJc8B31uorfwd9QaI3kxCopLXSz4xjMZg==","signatures":[{"sig":"MEQCIFbDYE0inl/CHVBtOfJZt9c/UCqiJmMfLXHdVMoknka6AiBiUMgVwLaDkU0depOm+dlbuUniguSe313fC8FoPMF3WQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjVuBcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp80g/+MPyeZfHh8ZNzGWkuK2LHuJXRQ4SPrGtxNVpk3np28ztljMvd\r\n1do5jiAeRsiFhC3uYe/L3ZJYqhqlHsB5SDbsFpjk7H6GO9dGs7cFaFKXg0U5\r\nE93I27+oEL5Et/51tL3ADIkndhjGraay1fCHxg0ZJvgZ8BrW1BovV4ViYbyY\r\n2BGINynJs0/SkjxjPTeI1K4YukxKKqO29RkA6sx6l5wBD82rNzVZfxHlVqTe\r\n05wqbOrSwBvcLZqUToZ2ac8M3xELIEf55gFlC1UjYxfWGM4T+vfTn24mUKFl\r\n9ao2/f4uCRm6XZg8H9uNXVioug6BOTOBHaMYg1F3Dr8uGsyV9KbipI48PZUG\r\nq4L1g20WPcEgFM9g2Iz6JbeyW3wAVAtLwpz+UVB+d12C+/RfVhZK8CN/2J8+\r\nC4JhCTNSUZEJNH4CRITdOzcZGjGfUkXZDV1kFkzGgSYgFNLNHcEshkDhZsgH\r\ns9b7dCyVgQBQ8lGLubgYNrVOO80NS/jJvY1Y/VYnLP4PkcCxxBb7M7oifHkl\r\nt5pzHasItPEpEaqsqj53p176fGfatpUbLNcmsSRs+SdDYrUW+THaqFeJzD+u\r\njkqtccX2EUsDIjBSJc3M6UaR079/AzIQ39X18/aBbunxcZTk99Mwv+XkXfvA\r\nlTv2uB4DUboi84lAC5rrYKEMFfpVreV5/A8=\r\n=Ycn2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.fc539db34.0","@material/theme":"15.0.0-canary.fc539db34.0","@material/animation":"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-indicator_15.0.0-canary.fc539db34.0_1666637916162_0.6728306445749279","host":"s3://npm-registry-packages"}},"15.0.0-canary.e340b04c5.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.e340b04c5.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"7a0567497a67984b87b1a467e75403fb163ced2b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.e340b04c5.0.tgz","fileCount":38,"integrity":"sha512-5ZdI2kT2ZqLOH8fDauhnVl6aPwPMRIiGtf2jGqmJEcTS2HGuHb0Z2BYyS5zIBKGctAzA9VaH19vm1jqynFatYg==","signatures":[{"sig":"MEUCIAaQRSLZnhMIx9In5dbFAqW9a/+wyQw8Q4YMSBJ9vk+BAiEAsYVZIT6IgSA5R9GVSvzW5hmY3XaeYtH4Ey9ugnZEnq8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWHTcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoQsg/+IiFJZoBTJO8R0KXc/6TlrzOJvcP2cMh++a9tIh4Jt8RBW2SI\r\nhnwAQXs9Qeb5As2NAykWEeR481LHD1flfrn25emiYDNUGuIZTWi1T5IwP6NN\r\nFyKGXEXxdwP3lzC51zC0oRWdf3aYCUJfCZTauK7CPcJGEqvpUsNSN9VC0Sij\r\nVoSPc0LOx5dUDq+6/qTVNPSQxi4SpS4bP6qClCa9QNNHSMlDgKRr7QkFoPnM\r\nBPj7UwW8s+GiMi9shLL028FMUFao3QZY7iserfoefV0MRQcQxIHUy7XnYU67\r\nmzuzyHeBF2/phRLPd0TEzSvSKC6+uQlHpKNIvstfHJxW+0XXfBfI0zGc7Lz5\r\n932F1WWEUI7uutHsPHgbze6NS3G/oerD7mx1MXuNCHkvkJ8YJ4B5xwtULP9B\r\n+gchTBaLgCUu5Qtzk3NBxph60vjxE/SiPNJu8167+MUNrsXEnaSN56y/SfaO\r\nQBCqmCeCf9/ZtMu8jmSKbzLhWuCWfT4UunpMlDTW9NiBEar/GjIYkw54QKmg\r\nhsjYWXUuT68k7xzU2OpkP08RYef3IJScatP57OZjfpqoao1gjRB4Jeelvo4V\r\nmuCsgapsaQiLBzS+SqRO/et+NVc3LymjkZTKb92OY4iY0FNpPt9zoyRyLzD5\r\nVUL1xCDqsG1sqjb/gPCm3/ZW8XCcxUN+6h4=\r\n=G4Ne\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.e340b04c5.0","@material/theme":"15.0.0-canary.e340b04c5.0","@material/animation":"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-indicator_15.0.0-canary.e340b04c5.0_1666741468738_0.4583582119994045","host":"s3://npm-registry-packages"}},"15.0.0-canary.2c1a8f8fd.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.2c1a8f8fd.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"7d35b122a3847944e33ed77b1c008c2c17f8ed8f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.2c1a8f8fd.0.tgz","fileCount":38,"integrity":"sha512-io7nfjaazcz0myZqfzkfllnsz/2Ov1q5PvAJA/eoitS8u2VnZknzROleACAJ5IQuqmAWS+RX8RWpU+0Ap3Ag4w==","signatures":[{"sig":"MEUCIQDShKuqyweO7D3lkqyO09zdapqCxBX1R2E4T/2+z82Q5AIgIifC0ujp+l+U4xEDt9X/6+USkWELOxv7B0L70hr8t9A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWW6JACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpxfg//XH+C2KaBdPNyreAGAs2SD8WZgl5wNcIg8KcIRvz9xQj6HsWO\r\nHeAUP+bvQM8PU8SUV4FIg4by5LIfqwFQdLp9L3R9Q3VQV57XNC4nz5nXxahb\r\n+pADdAVrGIzrrHVU8TUtWTaGtrw3APdXK3XXc4OiGXSPsoGvWdSHt2QPuHD9\r\nTfPkmgYiSYkHSs+Y8D1qIsdauYeokoWOXSIE677Y7X53hxQD82INpC0nyBRq\r\nYnTRjRBH+C9+zxvxe+9iwQEHYpcxqpeFRW1VAWSjcj1mi/e4gNuOsfgTwKB2\r\nZvryRf6vFk77DMnfB2mMemRc2YEaKOEeI54GZAxfaYAkMAgPiCanc03nTlAJ\r\nMXwfI41U2wkQ49aVGQS0p6kjyKOvyFsXWBjJmS354hy6/P/x52xziXdJ71qq\r\n6MkM8WXkucATQrD9GEm6OTcMKdOs036LrdH8gzY2thAMrLzlG1JFOkTdUzfZ\r\nMd0+nkMqirJ2FDkIaHaAJ+PEea68ETrq+UXYPtfmrC0hf9kDmMXKcyztTIsD\r\nvNC3nu53oe9GznZnVQ//0FbYD0xIlPcUKLIc7IrjHmcw2c+PRIx3sps/YnUZ\r\nbiSMUHiTewKiX/3BTUmQ8LlNFfGt4eTsYBalEZVIEhxZJ0FpL+JIPUBiybTb\r\nad9moSyMowsRfXVr3ZR3A/0IUovByEqGCjA=\r\n=hMko\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.2c1a8f8fd.0","@material/theme":"15.0.0-canary.2c1a8f8fd.0","@material/animation":"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-indicator_15.0.0-canary.2c1a8f8fd.0_1666805385058_0.9986182362656888","host":"s3://npm-registry-packages"}},"15.0.0-canary.ecfee946f.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.ecfee946f.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e006706455516cf1c69acc4e4bf2bc3cc2b6c38b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.ecfee946f.0.tgz","fileCount":38,"integrity":"sha512-yhfU8Jhbrk4tmdYLAGWfKTmJjE8SqWnZSCFNrcEB9jz/z8CDiH5X1I8FLPNfDgQRpbPnMyDCWwc7xeG4xHcnzA==","signatures":[{"sig":"MEUCIHPPZChaZOBhsKUgaLY+soAuHXo87RvT/jQxxfZ+YHY0AiEA8UzikyIK8lIYHPxd/txqbypbRQ0RCZEoNSvzKTTvic8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWZUqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmruvQ/9GWV8N61upiK2qONoKTmQfhBJoMq4WVMyDa6ALDx/C8O5dcwp\r\n4kE51tK+Z4xONPYMu2GrtZ62KOJ+Ab1+U1xMuSIobJId9tUOOFzYVT4nX3hD\r\njNFlf1z8dBhVRL42c2ppDf6/H1bGWweeZtBTa7r3N1JXeFdgEBHKA7+Ehr9a\r\n8KYOTqPOPARt13eojN0qpU0zbpRWn2bGNyl+41QXSiGaSpurSxmm6DUfI5pe\r\n1+BKCMKKGr0SaCxSoziqTEFO1sXgD/KuixMvherjDLPW3ikK+IH0Pv8NsXIn\r\nwTD0HXJsss5YVKNj3DIsqk6tXapmoNQOx0h430o3E2u7w1tSoDR1I3/egXml\r\nYn6mxTiyVPTpB+j+HSea9C+Vgy/h6FF5R7E6mMMUwd/pAcE3wXsWyrOelU4g\r\njLw3zRTaLydYIN3R5hVVlpT/DphewTV+3EfdKHxq1qXeL/g+uaPdGjTGE9UZ\r\nf8RaURvBvVAFg4f3aaK/PIeROIjtuxydYsv6Jo2G7uOOlWr0RZxCcn3Gz0Gc\r\nrgApWjX2lU8w3vUWGeYjmebQO7hkN3UJK6y14jrdsRy9pYbAtsGYRnRDvBjB\r\nJ7BmBMk9WIQZwfRF34dKqpwyswZ9AIXvyJhDypZoarDGGaG83/8LXFS64HEf\r\nncDPjF922UmEkPxQvwwbiMhEhYHtYrus6us=\r\n=+GUY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.ecfee946f.0","@material/theme":"15.0.0-canary.ecfee946f.0","@material/animation":"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-indicator_15.0.0-canary.ecfee946f.0_1666815274637_0.9340409045607865","host":"s3://npm-registry-packages"}},"15.0.0-canary.73ca9dbb0.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.73ca9dbb0.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"215cd922c516a65a236a96afb1b12571eb378e00","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.73ca9dbb0.0.tgz","fileCount":38,"integrity":"sha512-VjxkaLksO3B64kJQn+Fs51BVLrGdy4oZefheDaTqGbD9o9oIrN/wELWBjLZKzFCtlT0jMwNFNH5R2m6M6c350A==","signatures":[{"sig":"MEQCIGGON32X24b1oY/xMXdDmSc204xufIwKgxUnEBiC0WEYAiAGqyRQLQ1vac0Fs0YyeYYMhfAcvWHrb8NGhB8qZkaRMw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYAaFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqGlQ//aMVjv6UgiLvhV30poR6C+R1pFbD0sOjZTfBcLxFCCPVt207Z\r\n5gJvd84hymyQ6NnGwZz/ofYoiwL7Su06jf8gdp9b6GOBT8tS0bjwaLCe8NJU\r\nK10xcJRJ0+BCifzDSIxVo/Bodr/zxvpY+/SQaB3KU74+fuK3ES1+dW9gUFne\r\nBb0lDBEDLsoMoOd1EwlDfM2yBEsdb/P13RTabuOrxHxAs90ahTO3H5yFhAFJ\r\nLzowjgLtOGnGvgQTr5NWodhUxxEzK+j6Hmuuwel/AHTvh/xVz5xif93xne24\r\nDvSLaK5HXFfUHTci5+EBvOI7+WQy+5dtkMK4bUqX8cSoRQ7rjg2eLJI4cDua\r\nNWh5VwbRemUCCnIW054Ead0ULuzFgRLeG9hHsS52ghL/s2xsmdvZFYltRTMj\r\nWAN5DeyLVAZMIHX+5CfT+yBsasHh4YfESK7HBxAqLVUVvY0xfTJNttHj59kP\r\nWCkXyxzg1ilkHSGkVEyt+LrPNuP7ZXpMpJSqaZIWSmCkioHEhTKNzyhXP5T5\r\n8QrgzXMfAebgfOMQAY8pbFhsHZbuhmuwuvMaN3k2PXc3Gqb/ND+Oh7u/eLIC\r\nvEX0NyApUbr1kkoho6/29Cmtj5GFVApFhZGCCWYVR9EOuWUQmpkxcToPz6Y7\r\nyIEPguwEWnlv+1bTDqE8xy//4OsLIP74fQY=\r\n=ObiV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.73ca9dbb0.0","@material/theme":"15.0.0-canary.73ca9dbb0.0","@material/animation":"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-indicator_15.0.0-canary.73ca9dbb0.0_1667237509616_0.4096537025822422","host":"s3://npm-registry-packages"}},"15.0.0-canary.357f2e5f1.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.357f2e5f1.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"f999fda182592fe308a42907a317395bf309d977","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.357f2e5f1.0.tgz","fileCount":38,"integrity":"sha512-L9p8OAHWHRQE3WxvZyjZAW2spQUbVs9Dzmn0+rfTU/lKNu9Dd8rpzjtnOEemT+MvjFyg2stsgYRNl5wEe8RA1g==","signatures":[{"sig":"MEUCIQCm4T/Z4GK78WwQmzZ3lgtNN8sAApDijYRtrs6afWcXxQIgGI/wySbYaBQTQ4KX0Alhf0K0KRxOSpewaLzQddE0JtU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYBiIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpBSBAAhZ/7m4ycsyhEDtm2lapQiPfwF4dzYUyzvMQzJJEZfOpS+fCW\r\n53T3arQKsVjT8m+HIfLYD7jwwvQzi+Vrm8nonvUHL+VdU3OAoMAU3gB9dPcQ\r\nX801pwJQXFzUrSRCwgTeCvMPZpTjsKlLL82E4QOtuCvgY2bDS61hWoV3OB6e\r\n8SGNXw241VhD8jcoQKlEjNSGXseKHxsVRAwCt/iV8GQaZ+4xjwowRyPtnEeo\r\nVNKHBulKzAEFjtnjfrHbp07e2sCbovTty8wdvb+0Xy64u8B2P6tC0b75xyko\r\nhmMmkUM1CX89571zh23z/r91BwqgAhrrHBg1fEJ/Gkkw6fxApcv9ST2n2iZT\r\nncp9yli5pRIqS5BrxZjZdBW62cOG2diBIbjCY9suavkpsZJUaKfAZBUDGXFk\r\nzCp+2Z/V7jWUsbbcne16qX/GfSJfFRjQx3zzGqf8WcrxHdCt7TlX73hNrYES\r\nhvwkSwMg6eswMd9Qu9SqC7x9AjSicicV10Of5V7A+30ghGaZst+RxDL0pJx6\r\nbmHtwMKFyLRJMbjPkKu7or1p47CzG+TL2d+dteXQaP4ojl2Fnn2v3LnqM63B\r\nGbLyTZYxch9+PSWuDXoxt5HJTFVg4EZoRxc4bHEt4Lr68L7x/SiSsSn9wObv\r\nUaP+8A5MrYXWWt2ev7wHe09ie+xZSnipDWs=\r\n=phNc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.357f2e5f1.0","@material/theme":"15.0.0-canary.357f2e5f1.0","@material/animation":"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-indicator_15.0.0-canary.357f2e5f1.0_1667242120306_0.45599606295696105","host":"s3://npm-registry-packages"}},"15.0.0-canary.eb103d4b5.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.eb103d4b5.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"346e1390180ce859bf09d255806e67a71aeb5ae5","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.eb103d4b5.0.tgz","fileCount":38,"integrity":"sha512-IkHDQ8MSG2NTK2MXfsEkVG4YaKyR1IIL/S8OLofpSAzJ8dNSUbxYfeFiEMyD92WXVIc4y3cy9bnwwOqWfBr3KQ==","signatures":[{"sig":"MEYCIQC9mR2eTk7HcTBUxFR7Q7l2jTyfhvRm1cBlpz88nWJ/rwIhALQ3+u72Fsm6c5gCtgCNYtuiyp3Ld8MBKxuCgl1AAdik","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYChDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp25xAAlk94iwGD9QVHiEYBPRL0CF/G04xYs7nfxE3El9T0JNEv1mRY\r\nti43MjaLblS2U74SvAElD88N5izuxNx5ejHkago5bxiKJTnBcH0i9X3JGcuf\r\nNFRMvU5oEuo2YJtRmHqNtHcWt1wVu1BfOwu1GoKzXzTGPVzU1HN8t9afLR5F\r\nCZRVDz6h/0EGYzEV4O/k11QMmFrRfZdlRqDv4nygf1496iC/S//PCKIW/tSE\r\nxTU35unnl0hAqeOh54s8AACyPo4VT81ddA3owwGlZKGxfPtw+T3xmQtj8O+u\r\np67lslt5raeBSVLTe7HphGWY+YVlCLLEoYZjOfvxk5FylOq3Yz6uZOI4uU1M\r\nZ3LOC7wKe4BUe5BHE4+vj9L9qVBxkS4H0BDFJjQe35CIyg0zjlR9bTKPVPTc\r\n/oYiTumq8kNMMnsCAhwibzfR+IA3+XGs3H3pjy2WvDf59HA+ejAMNMx4z+7T\r\nXjcqn/5ax2CKDTdyrbtEOkNB+Rvb+CUOxh34IJ5eOfg9pT9x0+dtOtoLn8UA\r\ndZEweTp8XKhaSyDbw1MSAPn8f8dmr8U2soDP8cY2EDZJKW/4g3pYgQUjiQHr\r\nAOh0UQRNE6ifGj2AGuiTMeOLSpwFG4YdXX42kH19hBwYnBq3sWne/bxcYjRf\r\nuTra5zSNRiFQArUGeNfPBsQmcrbjs5uci34=\r\n=hU2i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.eb103d4b5.0","@material/theme":"15.0.0-canary.eb103d4b5.0","@material/animation":"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-indicator_15.0.0-canary.eb103d4b5.0_1667246147272_0.5843041089251806","host":"s3://npm-registry-packages"}},"15.0.0-canary.af5f01223.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.af5f01223.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"86804c74469faf44cbc8c7525893faf3ddb99c80","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.af5f01223.0.tgz","fileCount":38,"integrity":"sha512-cH/IjQsq7V4xOzM5pS5ACLgDtdDZyZ3TBbZu19ngJ8NaeT4H/GXtpDROnDsA6VkKUueyDkTSoNbxZGgpzdWiAw==","signatures":[{"sig":"MEUCIFWAkUZPGr8g53rHzZ6T7ILil3Ip3Oiu3LCtEiFd0P10AiEAwOV9qiQFlL0i2uvJcBITCRByeJuAexO3AthxzAZqVnA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYWciACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrFQA//W/cctcIs04wVBaAB6VsqE9JBmaOe+5pufWooCvOXLbzgamGY\r\nESJNRZE9n1me0Um0ix4dh4R9lBvE38IGI51iuDzEPxPl7cnzosOnkJePIqUU\r\nov9GLnPC4Bww0aTEUGJOurI7CS0bhaaa2p5/8ua4rnCUiga7TY7Zfpj36NXT\r\nYUM5kJvqrAzJJQVpSVMatNACCw07eq3Ssj1wHa24D0F7gWmey9ucFjPDu4aS\r\n0zL7emdQ5M6Aiggbn/RJXklHvz8Rtw7ZGQcwzPhty4oyH88wLsZjLVM0fe8S\r\nT7i+vCo2/S4QWWCHdma8FnrCnxA+y7BBaYJ9Jm9cU+5qbenFgwUQ927rszKh\r\noOqzu+0TDqF5J/igGVXIk/iGRyuHGjgW5uuKhGqHH3VkSOBzLHvVlrlaAZTf\r\nWvJd21Cw7OyAmFcAbOTA1xTgHEuSMDUnNasW8ULTLPzwgwGXXebBYAAdMQKS\r\no/rblsiVGRnL2ZNfR/W+Z6T2Go5BSL/85ae2Twvn9TNexsRluv1bhK6CcTyO\r\ndffIgDAOSsKh5s93RKVKwDEfT49gaq5Hy096rZiFjf7sJL/EH3zfI9nf63EQ\r\nauv65Brq4tgeOUryB15E7Ap7Q2n8nMlPzMUddhdxiJo+DtTyVfrydB8Tt8vM\r\n2HqdxByNAggcQ6qzUpQib+179MjLKhiglO4=\r\n=o8mC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.af5f01223.0","@material/theme":"15.0.0-canary.af5f01223.0","@material/animation":"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-indicator_15.0.0-canary.af5f01223.0_1667327777912_0.4922059355310604","host":"s3://npm-registry-packages"}},"15.0.0-canary.58733ef41.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.58733ef41.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"b24c7cdda5d3d52568d1dd824b8af4f2fc9f970f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.58733ef41.0.tgz","fileCount":38,"integrity":"sha512-jDGEgXeiZNEjTcwYUU100/0zFojOPLL1sHJDDOxNe9d+ei0dh3u0cmkdoGzOnKSmUIgH0d2PmjDeF0RsHsd2Sg==","signatures":[{"sig":"MEUCIQDye70iNk0AXXK/2dbtpum+46Vo1egMcQEfYen8ar520AIgQn0B7xyzJ2L8M2qJU+cveLi+YCxLiYuo5I09S2IDiNA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYrKAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqJ1A/+MRqCgc/VeLtvhc18lA3fW//Ws8R2z0pz/RIrK5vuPdWQYNmd\r\nWFIXa6V1q/7sth4h4SkUi+kb6IhlXHSkEA/Py1CabI6/fLd6qcVjN4vY3p86\r\n+jUoED+o7s9rUkkG8Jy8VhN6/NeOTS568malGtMdCuLHL+wvpRNpKKj3PKF8\r\njiWK56E63ZNSWUc8No11YbsiYIwXo03XGT/+XeQAxM+OH4wDqTosIdRA8p32\r\nAQ6wa1LjBC6XIKF2veFcj5FV/kVkVk52WM28lhS/6RlbJXY5ficrowjP6h8k\r\njqAnIu9juRHAw6S7JfmFstNW1YsoQJFL93uJW2oBsEyz3mqR4EW7lEzmzw/I\r\nl+qKiC8iMeLvspTJkzC0NH4G8uc/xGuU9kK3M8V8poy+AF2PiaseRbEp9OVK\r\n3Yp/50g+a3L0JlxHRytwj6nGdDqckl0UXI3tjhvbsxBM31ZG7eTu0yO1upCp\r\nUnDBgtcQULBVOlq8NEF7u9P45tx3zY8F5Hpl/CUnRGYpb9KvP82Pt/kzaW5m\r\nqmj1UVYPYiCHRlw+SLQ98XZlgAZsYMIiOtn0wDhnR9cPM4E8PY92OtYDQZ0y\r\nQf7iAbyR1G9zJCyck2Gwn74iqiEc6MNTx5z53tK5C4jX9KG9BfRDUPM3+wph\r\ngxCnbb8mxlmlWL4VnTXjT3EuDIBgVqn0Kj8=\r\n=d2Qo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.58733ef41.0","@material/theme":"15.0.0-canary.58733ef41.0","@material/animation":"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-indicator_15.0.0-canary.58733ef41.0_1667412608120_0.6918457403179654","host":"s3://npm-registry-packages"}},"15.0.0-canary.909b48215.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.909b48215.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"593803c913a3823f125b637ea8c34253e0eb470f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.909b48215.0.tgz","fileCount":38,"integrity":"sha512-vFTRc0tPBQCjz4+xc+pJ7M4paOyCKe+EcJlpmbpJWQahl6HidJjZTydEAJw1PfQaGm+SkuvoN0uXa6jNV6U4Pg==","signatures":[{"sig":"MEYCIQChkXn4DI7XLpf78q/T2ovAonzAiv3TFfoM0hvApFYZxAIhAJ/ckK1kxdQsic1ZZwXVXj6nsiHymxKIitiFXQtf/bZX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYz5wACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmruVg/9EpjPQNVtj3te8YFzJn5YUDhDOXM2ljxtXembKYc6CGtbX3v8\r\n8md3qGU/yngzCCVAuUGY45aySX7ajRfz/mXycJhITGQiBzZ2ztKEkYbMUMT2\r\nUSRppCk2l/ivfhw7F0oEoxu8P3HaZq6zqSXdenGbCawWWtk/D860jMQ/ovad\r\nwp8TBlvwDeko9yNfGSxYpHYnBEetGY6gsIXz3ERhG7IRg3V/DpGjuUTidxIA\r\nq6DWFvHxF2Iv3hMlIlkBE+dDf7CYhs3ZZOWl/6p5SQ4rkkOxpmj9dTBSQOEq\r\nuxE9sP/ghc6C4H6vu7xZq6jx3Tb/fZQmRVL86fBj/p8PaJgPSMj4cphBRwT1\r\n6HhhJPG9UTafC44MJNP5lD+0gviHsCZUGoi9cpvsDe0rjQSAeEQAkwofN8pk\r\nmWkIvt7BTkbQjG4ZJ0Dm91yaGHP5i4YyJz1AbozweaFEMrWnQBIhJh07SfRg\r\nUIeEYGHdmpXJDwLO2OihfYmUYlTbPfqYjR6XDZa/52ZE2oWzvBt5LqpZi0Jl\r\nbbiGzRKOTMvP2bdNElLIejT16t7wFxsZzuyy9RFW7V6mcfPkscWTQ4saAV+n\r\n1jNhz+qKbB5EkrlqNQ+7aLXWpJhPvpfnLWDkxOfJMIhC6l/p5KmEQDEcAGid\r\naneHihpl510ImropE2ZXnPVwVe80MuVbwCs=\r\n=qfQU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.909b48215.0","@material/theme":"15.0.0-canary.909b48215.0","@material/animation":"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-indicator_15.0.0-canary.909b48215.0_1667448432197_0.9475316097626949","host":"s3://npm-registry-packages"}},"15.0.0-canary.7f17127d5.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.7f17127d5.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"8f36dc1d79ee02fc9a4ca61f290773adf98c1a13","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.7f17127d5.0.tgz","fileCount":38,"integrity":"sha512-x8llQGWiG5JWDMObhSqZEfpc+kuYx3nvqWeMyUefRq36eXonl25/qgsDA2q330ILD+/Eg2WjTGy2DWFCLxKWxQ==","signatures":[{"sig":"MEUCIQC/2onNf7ZS+StaS+vQCHo+gCKKVLXbbL/rwiF7BiPTsQIgci50S9bITkH1hHDhldm3YErhN7NJ13ijDeMUPkgCKo4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZAX0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrtlhAAnGxSE5A4zHhnd1MkOFFZR4VO2hvP5gjoCV5bCKF4GMJ7fbRK\r\n7HMyaFhDwpKW0MdOJRQrZ4D2qTzme57fQrUhjaQpJvA+ZBlzOPFNUlGLAEn5\r\nIKVGXAxL1vHI72SSvRXXPXNB9Bwhqw0LYl3uQTncQAa/ic99dfyM5vr6DZiN\r\n2I3khcJ9OIqteHq3p5UoAsymSk/4S+WLwRWH4Q5dtVkzLfYInwMg8pC4vlJ0\r\nIKZ1tnXnDc8KHAWvDG+8eJZm2WwmlNJ6akVcl3x3nkzJJx41bxz9rzttj8Qg\r\nCISSq+w7AUblFveKIlbkb4mpgixIX2aSowReY6RnEf8XAJMXljIxE0Qb6R1x\r\n4D5mLR9JKriZxof0iC3SowfQdbtrXsHhE1MotC3qqdPlcPhAQjQiQIqqsC9O\r\nYCxwP3vjFksR4BhTIB8og/PMx5ZFi97WJHCNQpZt73MZWrp0pyurqXGH1npb\r\nB4CtGkb0uvDwTLRc8T5L5A5oxkrbgL7ftJMd2/iO1lzEveW9xLrK76pSU6RU\r\nvSb55fq1wT1kGthUEIdNtgChLQlaPT2dr9ec4zttp4TRr2jXlxEEFlJ+U2yH\r\n+l55LEVniAE/TNqfMmLcIq+7zgBJsGuv44bSlTBcPnrp98l9oKjBifWgUMCM\r\nKFTvz3ZDYvWHq4fuHO3R+cD71snio+WoQRQ=\r\n=KbKt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.7f17127d5.0","@material/theme":"15.0.0-canary.7f17127d5.0","@material/animation":"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-indicator_15.0.0-canary.7f17127d5.0_1667499508032_0.406753456181256","host":"s3://npm-registry-packages"}},"15.0.0-canary.da95e2a05.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.da95e2a05.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0fd5b46c292a1d935806039bb7d5133096832949","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.da95e2a05.0.tgz","fileCount":38,"integrity":"sha512-7Ua9drF3sbK7Du1qoph0ttFnJvW4LuB3/MdbpHviVKxd7DW6R9m8k+5tEWN/XfsQTSEdGPmVQBokWW6qK8eZgg==","signatures":[{"sig":"MEUCIQCu7+Q7jeW0zLGXFBY45wnCbm3VC30nOl6SawLwqlyw2gIgOdyucoSI7ZIDP+5eF8TMup0gb6JJe2WL2Sqpg5fnZVk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZUS0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqpmg/7BIHSlrt7ov/hIONc4qWJdJcqGhscd0tVE2VHIpPaVD03Pe47\r\nfT61HPdFmWXjo9dkLxiYgeMyd5DfK74567xWQyI7UWXF3t/xL3XYmaV6ZTWq\r\n8go07eklu5LuaR5Fc5DV0hv1OHNTZ1HaIVcY/m5Yv2kNAbEQhNCCYpxLm0Pl\r\nMZejGHdoOneAF8CY94krE5JHrLTM6Zvu8CurIdNxy+jmsPqvmAN9GRvTziR+\r\nkJtqb9m/vLcX7Lp1ahBH0rYM7A/F6e3uIbGWwhVChyG18YGMzV/Yq3KtYe1O\r\nqD7DNNjZ4Qx15Da+XtVnhi8g9QpNIqCIP0q3W4fS9z/E8j+9xTW3zWdBq+24\r\n4MCsxdLMt01HRhPRusnFXUiAC9cf12daYVUMxry+2aVWc+e5G7nB4K5DLvap\r\nDEj/JQvIig/J2/q93c/TabHQd2pRFwkf7Bmk1/l9QQtbP3df4YyPa+/Jq47J\r\n798yyAmuhnB1a9V7ArV03YzKqN8jdfmSH2PoPIEjVsuzW0Dzzzr479P4J1i1\r\npfIfqi4jUZFRNIv5+2Ra/HSqN0DNY5k5uOx4+5GZCRnfFo49sZ7iZtyx7RXd\r\nZTXQn3mZd+L5A5zrzzRVXfMiCDxP4BUzrNFt/7MoXUAwofQfHpEfc3UAIxA1\r\nkIvGywjRwfR1mzARc2mFVKTXPC1X1P32bjY=\r\n=b6w3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.da95e2a05.0","@material/theme":"15.0.0-canary.da95e2a05.0","@material/animation":"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-indicator_15.0.0-canary.da95e2a05.0_1667581107885_0.4429114753704231","host":"s3://npm-registry-packages"}},"15.0.0-canary.4832e2750.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.4832e2750.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"b81c93cbb0a1b169658d5ab85f54dfc0f65c03af","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.4832e2750.0.tgz","fileCount":38,"integrity":"sha512-aWR+XPNn16nV5nohlyLLlvqImRNZBJhG5Gf43ko32USUFBN218LsheyGOAOaU0/sOpbeNxKOG54SftKb7MAvEw==","signatures":[{"sig":"MEUCIQC0EDa4GdMNePoJsYEfWfbm7hi8oox2LK+HbXPNu/hAJwIgSEtGAlZ10xXEH4VAIDjVjVP6XAArSNqkFUYFyPjT3u8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZXx7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqMKA/+JoPM9I8BfHGGVKQyflqDNCmOvWPpDXecmdrHwiyYr4M2s4b+\r\np7F75+v+4JsTY69PnoQY1qL5FoFuQSbdU/TMKQB3U/jcTuoQApzceTfWH8Mz\r\nsCGQ4f8ETE4dw70bg8Xtp+RBOLG7wSUH+QKXnP3dViVYcYJDq15JRixIGHHo\r\nmE0yX4zmVcGnLgeZLUbnwFobbbYqhNDPZOyq4KgCys7CUUQWTRUYtLUjb1t3\r\n2M+KoG+CSNAW4OdSxZF4+gvuqMT2DkJ7n0aVkZA3d+CzKubFNIM6bArZQJ8i\r\nkFjr6xloySLBoVfl+HyJ3W704ic+uVkAJ30p3utsElCGlXWAMFNJYp7ocXc9\r\nGchLH00/g2qA7FZ5i7PyaEy9e8cb6jRxIKRNW3j4zsMTqMosiMerlI44vbbo\r\njBkUAhfG2gz34zIEQPDMO1Xj8aJJ6X3zonBEEOsGQZokHlOCjHlflUV0VnAL\r\n7MouFYQLCrQFirQ/4hJ9oMQZInzO1mIcjbH30ABVu1HjOeY6gVwfQDVaECN4\r\nLAnQODoG1JILEnhS5PT2gyXQbrU1B/dw5/5HcMhx306VJrNy3yVdTbCzNY7s\r\nEGxa0y0X4VJEhyrOHtZPEf/DdM8EIdCY2xlih+k5rX7qvTlzO/DclCBSO0lb\r\nPUJqBLcPD9LZlFrENCrh5dAyLgLTlyquBf8=\r\n=aLbM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.4832e2750.0","@material/theme":"15.0.0-canary.4832e2750.0","@material/animation":"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-indicator_15.0.0-canary.4832e2750.0_1667595387063_0.01610386257172025","host":"s3://npm-registry-packages"}},"15.0.0-canary.215506426.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.215506426.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"8f2d0238ab269652cd43e0b0a086c83f593af8d8","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.215506426.0.tgz","fileCount":38,"integrity":"sha512-lnaO+uVbqX5Um75bhJQHa4/ygQqrMfUyOlpd9wp3yWXOas6Qog7O2nW2ysrVhyf/E4OMZYLxgKKb4v/BRGpl9w==","signatures":[{"sig":"MEYCIQDIaZM51iYpOGmb8vVdbCtu7/9MiynoYbWd+rycXTTpsQIhANezOWSqPZ3oN2hC7Btki7SzoMtBVBxVdjrJ7t4WwVtl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZbbUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmojbA/+L6IPg99NQlYSJKp4aD2zPH8w99dWk6ArzPpySHDv7wawFvXD\r\n3cTKEIQZcYzBdtd+VP+WqngcEE4f6c4CrtG7GhX0ojDnKSbtfZ4gf3xzDZWJ\r\nJsn82MrP5LM4P0//ig4ks6VatHKO3TgZDGSsq1LRG2UUP3omWd8JKZLYl5/o\r\nEFehNYlyf6ySxjh3v4aLa78J20VYu3dhqX3CVNbwO7rtELDWzx7rUfE10KTW\r\ng8wcUbfNK/6n9WVjUhxpQtVgFeXqzuXBno9Q8bjjb2+8VO4+AXVaOamgVlVi\r\n+RB6FOMx8B3nT+EwO2SPX5NRiRMvTwnFCOkwklEo31nlLYwvKk8pX9b3IVAK\r\nJ/nHfaHZVVCccPlnQblus+6g5R+c1IeAGVGx/CfByOULi31j5Q53OIzgh11a\r\nfRKTYU2QwJu0SfgMX6yglTaoilb+C388EoMfPLJzizXek/DZ+8HWktNt5ZBx\r\nxDI685J82MAyav/GRjoGhXXmrtS3q0DKzJ78MZ6YiXwCSi4NBU3Mz7L5YJaf\r\nXLhIIDFEZYC72VCPf/xtUezOp9fxusFqNYeOgTs5RPzXfjwWX64oaH/P8k1Z\r\nJWqzk+5N/v9F7oYJIM3TZx6KHeJuh7dk1BsNj9wnkkFEEMQZP1cbrHFjpaAX\r\n/nG408qo4y7jNqRI+OZ3oz14Gz2OYvvbv0U=\r\n=k/Qr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.215506426.0","@material/theme":"15.0.0-canary.215506426.0","@material/animation":"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-indicator_15.0.0-canary.215506426.0_1667610324204_0.13839044178159443","host":"s3://npm-registry-packages"}},"15.0.0-canary.4cf917476.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.4cf917476.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"a3a51a74d08d6bfa2415217c6bfe8cd0ce30650a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.4cf917476.0.tgz","fileCount":38,"integrity":"sha512-HRrggG0aobHHoi4wvOqET8tWkE0MKo64XTXnFoLGqEYeGN5iULuCwvHpsR9tWdadbWvRw4TJ7ndWK7j7i0oTuA==","signatures":[{"sig":"MEUCIFnuX4NpRp2gqEsWLTGrXlO6atDcWMzx9oM56obIXKtBAiEA2Yl4BvpvEkeTHcyO9Bda9C7bnhoAP0fvDIo14zw/oGw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZqVxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrWjhAAlhlu/45MeUCLzlo+x0yrqVQESFfBsIr9J2igAmpKrbxSvGn5\r\naStK4Nh9KdQEmSrR25VGXGNzPl8756AaV/VqSctb2XkeyFF7CqtTI2vEUVhl\r\nIy9QRZdeXkR9zhYZykDhiPuugD3cS31JPjpEtnCK2DnaTBG/YcvGLW4IHrED\r\nBYIQU/254lV7g3Fha77xXseTPW6hC7XUbs0rJIiJE7BwvsFkl+vjXJmT7O3S\r\n8JYv0HGnBsEYSRfvYRZ3OJ6Wk+Ypc9FGOxKDZSDeyORU85ato2DyVV3UdCru\r\npNNthUXF2FRlsj6nlSvrwYaQ+S1A7s6tj9E4y5JKdqkyAymYjlyPZfVVCZt+\r\nD2Mr2KGlo0befkosPMwvd+6/RJzOTwV32tHggq7suLiikajhX0o0oANOTovU\r\nYaDABH9UdIBkzmHRTo19qJ8WmRm1K6Dt/ZDe80vEMSlmt7fMHfXJ4SRRfYmK\r\nBIehZUmqOJ3QGQFN4mR2SLcE879cBj4E3RO0Mbe3KdADKLDT2S2XGSfruGhy\r\nWs6fHxb6+b6ic++wxqH05lge5M97D4QUM/9Yu80cF0uYlhiUbGIXOB+71ZXA\r\nmuDQtUPfBVEtBq++cxZF7GqtTmOHB50Y1KJlBHLWFL+EbgOM0eXgfbfU3B3u\r\njkvM5j3DSSGPK7dM6fxFU892u4h0FPR/r5E=\r\n=weU3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.4cf917476.0","@material/theme":"15.0.0-canary.4cf917476.0","@material/animation":"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-indicator_15.0.0-canary.4cf917476.0_1667671409530_0.39455396218084693","host":"s3://npm-registry-packages"}},"15.0.0-canary.eef14bd32.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.eef14bd32.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"6c1d46b860f42e714e5bc82699746896f4046ba7","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.eef14bd32.0.tgz","fileCount":38,"integrity":"sha512-VxAYgJvIxysaK8kpxQ57PcYhxlWshHjz+5q4A5SPTZYOVGiGPbVwVBDh//H++4MOcTW2VHHJ+1m9vPkhmYAuxg==","signatures":[{"sig":"MEUCIH2vud4nxG825HMeWO6+EsD8uCr/YEO4bpbjQqrnImdWAiEAjf3EywXVQ7p4yue9zzdSVTL07GE9Lyglt7qE5cphKkg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZ+2xACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmovHw/7BLTCyfn8/C8V2ojV5soHKAJgkE8ckyViLdLvMTXpGUUQ+YDg\r\nr0jFrNrLB3bJnDXp7xUmm+xVIA5OWo4/Nm3RE4YbU5e7sCka7LaVBo4HSIA7\r\nSgOz3iSq60lrEv4qtgWuIv9i2eKlZ2k7NwSGNYLMfkhdhwDRpNfBJu7amSOs\r\n9joxAopSuQ9naGon7FzP8BpjghxMCWHJ6WfmDvJ4CcsAlVDAcVEFevy33i8J\r\nZOWktDPvOGCeRb17MGBPByKt/G656OSHAGdJFtSF/+QsXWAwG5SyNpWOgtMR\r\ngFfHO1gs+yOKSVwypukpGUcHHtFc3Sgug8G6g/tSh/ihQEcNygLTNR9sHSXN\r\n5vq9m0citN0B5cnKmak5L4dlfZhN5zp6Lamm40kx2YnbKLulSaNTipJgjmXT\r\nWYSJ91h3Ta8v1jTaSs/h0FF1+TDHgkb+XUcaMjFyLBlNDUTknXjGo+R8VN6W\r\nOSCeEXYF9M6i7VWd01snVCT63qtCVQ5m9Gd/vjBYAiMy+ky4v+P/4x5bdOj4\r\neC1zAxm4SDmm7u0rWYpmu3JHO+ZKIWc/dCze1Ok7hMmZx+uk+JPxJOd9C7Gt\r\nwFL+NmXkXdz7EILyg5NTAKDGB/qwlwQVcdj1uxnGJa8ZV+iyi2hK+drMjyc9\r\nsBJQidx5rT+nRpIWYVcsDqvuQhSy70P7smU=\r\n=PRsB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.eef14bd32.0","@material/theme":"15.0.0-canary.eef14bd32.0","@material/animation":"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-indicator_15.0.0-canary.eef14bd32.0_1667755441366_0.8780163989051111","host":"s3://npm-registry-packages"}},"15.0.0-canary.6faa29fe9.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.6faa29fe9.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"4309eea374987d31ef8119ac8041206009619584","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.6faa29fe9.0.tgz","fileCount":38,"integrity":"sha512-pFbRtX9+hCZ8sJXqKzYNOphXGZTLqYsyv1rF54vpIYAX7PqgCUGoKax4R8cxqGHkvWbi+uXLNT38+kK7FG8zGA==","signatures":[{"sig":"MEQCIAdAIZ6TEhdDuVY0V1UroYS9iXXdJtLrydGpsVqA2kLTAiBb6VEcoj8fhVZNbPZ3h8DjNcgT3puDl9ZhGWKkNWzZkQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaHe0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoFew/+IoTfPrRiW8HouE7u0mavzZKfBFAOxSmys3+M62B9xt+qpbTW\r\nvvSoIgB2rVLqY4/DjcTwPcgTB27TZI4sTptAlxUg4fKUDF1QD+MsbD2o+8Qt\r\nQxNTWy87MGmkKDqV7uV1F8DLP/1ugBiUS0eorKJ1L6Ie+PBYlKCecd69rHa9\r\nI1BMcpcnTvtKEeS+3ab7Kh1ORdUMLMJaZVXSZCrxX7AidRWVBKxiccE/BP8q\r\n30pMHKz9hoAVbAVcwb/WuID1AWrPRuX7OlzTIu2M9yMx4Ju1C5qCPwRJcMKJ\r\nVyfzLSzLzBHA7UU3CtlLhVZ8QFN35j7O2mEWUII3daey0EA72/epjetsqLkW\r\nA4UKmLXsK3kI4cpbVg290W/lisgoF2LdrFkqpjNCUenM5/GqVzgSIfTfDxZJ\r\ntk9SIU9reIsnCWb/17xQ06gEKUEwzAdTH0ozYKRi26PTY9zS1JMjwtMI93nc\r\nf8cjldkQQHl3SWJzhgDbkmJFZCTQzmC85J2aCbNAzX09SfYSMMHMJUP1g9mE\r\n3URxbTkGG0+FWejIJkcSdZIN8oipkRoAc+7puH5OJWNRVBVdWFsJKUu0ZPJe\r\n0SaP3Zsv8mx6+SurUsXGhisqIoR+mnO9fARuzweZQHd74o+iaYtrfRf0n0x1\r\nGACeg7Du4cpPrmvNNKRD1Z7gY54Jo8pKl48=\r\n=fjCH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.6faa29fe9.0","@material/theme":"15.0.0-canary.6faa29fe9.0","@material/animation":"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-indicator_15.0.0-canary.6faa29fe9.0_1667790772539_0.5638511349630517","host":"s3://npm-registry-packages"}},"15.0.0-canary.9af09b967.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.9af09b967.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"f8d0e1d3f281979e540fc5d5421995e0e370923d","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.9af09b967.0.tgz","fileCount":38,"integrity":"sha512-jtkvTB8SIg5CgH6uET0LA4xD27kUR0s+Et+p+l1kZ1xLEv6DPObkOOmOZSjxohHIIVEO5kzJj/2508QPYkz+og==","signatures":[{"sig":"MEYCIQC8CTQrxVmLnt++Wj9pDLK6eW+GFKHx7FOM04VDFNXyKgIhAOUtkKyhNlmTLC5N6FwFiTRe/GFghqM3LYORkhP08T88","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaU32ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmothxAAgA2qeJ1AO9l1lVQVm77d0CEn0GwIP1N3kDda1ak2Wf9K0Rlz\r\njU8s66ubKOWlcRQkR55FiX2svisgrmqcR156FENY0T+gTF6T8/qXg2yB+u72\r\neT2wXlVxl9weDB6lx+steqDpUCyuR7UosKKM0K2zNKNXWsqmMHF8uAFn+HYx\r\nh/0UTrrrAnUU/+pPdnxEGnlufw4GtHboZddlMvrVAr4zlRSolQ2Ds5OqjSMw\r\nK6TuRh60EuRvk7setvt6CeYbbhn15ja05a2Bu3Hxb75HBgglNmonmdi71V1d\r\n2Ab0K8kEcYD8SUf9xHm2l10yfQ5hw1reXtvJu61GllFkZQUscARFdmxFXeKM\r\nOVh6QWYHBsCLmRxLCmwNRCuS18qPijcRYzLs2DhrDOFnLS1jMQrYuOgnVI+V\r\ncG9ks+Kj6i9jb9U86jnkHlq6tGIH8sFAUMpOkRlLbMHpUo1B4cj8pN19aDeI\r\nqpAjCLC8kiD5VFmpPa9aFPUoMei4lv16wx7KpZloe3K2i0NJEGgUQXG0AL9s\r\n7Uy82DNQICxXqFeE6CnKRU1wYoPDmrE4F2ym0/BoOt71lm4y/8gGdfwnEQlg\r\n4Msx4WRGqzMyurENKSkaFBRMKbnbM2a5OnYf6ZRIwh1nwwOns75Lupe2soRw\r\n3kLAgF9VWANvGIQi3u3zmhySp3+W1EiF+iU=\r\n=CExr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.9af09b967.0","@material/theme":"15.0.0-canary.9af09b967.0","@material/animation":"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-indicator_15.0.0-canary.9af09b967.0_1667845622224_0.45132987981823613","host":"s3://npm-registry-packages"}},"15.0.0-canary.0f54fbb93.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.0f54fbb93.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"7e3c8fcffea3518c6ce00406c036bed6f6588416","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.0f54fbb93.0.tgz","fileCount":38,"integrity":"sha512-FJXepr1ooi86PeZ8I7LRHrKDsXWdvb2HPdK1esn3HFixRpA3wHrlKGoX/R2rzWm76yBoGTH3uhHPkrjtOamubw==","signatures":[{"sig":"MEUCIDBg3eVUpt8kw1zr/V4Rb3nr4B89YgVERNF8ImHsPKiYAiEAiHrGhq0b8l+NWbeAx3SvgxDy3S1tmNOLP/0ahnlqr90=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjatByACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqsWw//fkIvJ/+hlvfT2Hr23Lta4F9i77jVEa5CM3oOU4p3qXpNM4X+\r\ncrLZxTQlZfpowpDWMLPAFNd0yL7WjPBm4gf3w2vKVNJKoW7xPW8eSgEfIt5f\r\nhdI2HaqMJaFDwLkw89NiCRbMyZ3wUwR9/9D2dyRO5307xF+9kI8ApbVheyBa\r\n4VrT19bbaLXqQnb+dPJiSge7WXceshiw+WIEAQ3gu3QdqSqlZrC3zTjFynpp\r\n0rrxBr6chPGl9/SNJikTyGkv0huNlAcg8zvA4n3qUX/uEcl8DqHs5rnZ3GRZ\r\nRS39rHkweHjEEWRzefi+/Vjz2cuG+F0g6uiz7lY5F6sjg5gygzn7SEATsYvM\r\nnebACV5HPr1TM8/+qCH0P1kjHC2ol6w7ZS11h7c60BT3LnUFR508S6YT+9Qz\r\nmhIx9oUhtKqvUWk9ZKvaQF80E1HX4puvym+AKb3gzfQ4T4txpWgtBKzAugpJ\r\nsukuFER7PLZjkE39oftxrt/NRAX/tduHLOyeAwWxXmSy8fqRkRaBNcL5RK1t\r\n69qBqcHH2CR9qm3XQnXZM2Iux7R3rf7w7FmOyHo0fzcK15EIJZt64ymFjML1\r\npQJ7zgdYu0HHAFShCwyuCSIzdvY4ZgnhnnZQL/OSzrB4hwOQ6Xa3GTPx5JAJ\r\nT5rzzZNTApDDFVQrGPFZfoQGmVmOX35jb3A=\r\n=gR7A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.0f54fbb93.0","@material/theme":"15.0.0-canary.0f54fbb93.0","@material/animation":"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-indicator_15.0.0-canary.0f54fbb93.0_1667944561958_0.1718599654771249","host":"s3://npm-registry-packages"}},"15.0.0-canary.a8d47f9fe.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.a8d47f9fe.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e7d8c211d76520be874460659491c628d6e15ffd","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.a8d47f9fe.0.tgz","fileCount":38,"integrity":"sha512-8BJvS8oexOK2ncRlVRCzTdxmXYykS5hwAoHUPlxPJfyktNRAOYqCfq3pLxp3b0PbZa6FVGwoexNKSV3oPESIfw==","signatures":[{"sig":"MEUCIBPPfAVxwbblNVWpeLwX7BgZJuv63dwRijCOH3O+h4edAiEA5nMw7+zhjJ9uXCFIQO/KnhkqM/SnFuo7wc7bwijXXFg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaym/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoi3w/+OdhONjcRiXdR7dwP9UmRXm7DTSB67erBAe8EBRqgROnOzKgO\r\niMSr2mQd7pd7rNn5y9+Y0kGAKOFIY0K2qe983nThNjTVujE3v3TueriBKHYv\r\nacsBb53NO7YoV/P+nVrPsvbG5TxWKiD0Fab3GbE9ZKGwhlUeEmQl9vA8KgoB\r\nAQ8u9GEBMysEDuXGcUAKSrVMkuBdHiFF9s8DpTUPNcFixcPsptsbbzJ3zYvI\r\nqAAF5dDZSlC3ULEBt/op288o/t/J8pn3OqTH1MRUewzq+TQzumUDJ9N3YPbC\r\nKMA3dPBhi52giVFqnQhpoyDSIoTTGdmbWYJhR+L4FbTP6lFKZOPcdc724zTC\r\n0rW7l7V9zKmHtHk8W4REPnxrOiev+14XYY0zlWba0xhERs1lAYkJbfY58nhO\r\nfjpzNDr85w0LA6W+AQCn6UVkRUp3pXHZg/BobvRqgUrLLOmYcWzbyB665MMV\r\nW1ue8kRr0ivtkHcrbLHKRiEJ2HmsDBdrcDOiy/ALd8JQR7ez5DS3F797RJbq\r\nCA47nZ4X4E0b3FgIZESDhXbgtPD8Jd+dc672a0jB6pgOn+UXbSCbOrLu6b4V\r\nmMZmRds05LxZCtKzoZbU3qs/jI0Cyt1ixdwrOEmjO0ks3gk5mh4RTM3pRzN0\r\nUp5/Zhg8ShBqjbm13wZLkU9aE4/HNkTNVHU=\r\n=0awc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.a8d47f9fe.0","@material/theme":"15.0.0-canary.a8d47f9fe.0","@material/animation":"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-indicator_15.0.0-canary.a8d47f9fe.0_1667967423078_0.368501270613546","host":"s3://npm-registry-packages"}},"15.0.0-canary.66a1e75e6.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.66a1e75e6.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"7b91302342ec5b1b3efa0d626aa9ac1fbcafc5c8","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.66a1e75e6.0.tgz","fileCount":38,"integrity":"sha512-d2z5Vh7LbsRDRLkYIy8JSU9a6naY2/I6RqhQVAeS4BUJKVFwLR0KuAaLSf11dveAgZK2YfiU6kEv7WOQZ0cS9g==","signatures":[{"sig":"MEUCIAYvXRI1fcgS1UdmHrjHWTsy5KjoA3cBnNglAUm2zCRnAiEArVAm1AUUnu86jU9a0MxnfQgqnE4OdcTp0ogl9iW1hBg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJja3RDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp8FxAAoLRb5l+Vb+IPYgxodtT5o49xE5Na995l5Z16ekmEyQ4mdtwn\r\ngrbPSqPDvMIC9b5hrj8exgBcuOHGyr19vhgxbs+eEGwmgcNW/ai+ik7jJv7M\r\nYHn1V7TDsfdpauntuyJHYB4oehnWul7HF6Ew39AjXnJLrc1awsK0Fp75z1Yd\r\nM7JRHArndma8uYLxLppnoxNFIx2IxURKdz/CaqY3kC6KNLYjAj6jxj2Irw3U\r\npvcZIWvu+f3reOLOiiVHIHZQL/a+i1g9a4t9dCZB9TrxD2Y8xHfvj9iKwsgm\r\nXKsFC4zDI9O8Io2hih3d7aznq8NtdD1d6iVhtG55RKadG+U5p//UGwIsR71i\r\ngM9c5RJ2cpWAenRTWDoK/yR/8EIpvwY6ktwzjyaSTz1sGvSYk2rVseERHstH\r\nJHPsgLbI3DPUloWYtiCAJthOPXId7ayEJIBmxiDyfRTBtkeNsV5t0EZInMiF\r\n81N6x95+CaVOsNulOJ/1VIBmqBS5T31dtfNePyOqMRXx1WSFt52iX4eeYeEW\r\nAIRdj+elz4txSt/Qqsg8xlzDKPEask5rprgKrF2aIi9w7d0Knso9lhl5cWV9\r\nj0u+KgsB9TFfrkNKccYvurpDPlagyy6B0LL1yxKlh7dM/Upmp3VsShUjtslq\r\n+UuepDDUzBewKz1bT7TCes3wLPrHCipZCdY=\r\n=SclS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.66a1e75e6.0","@material/theme":"15.0.0-canary.66a1e75e6.0","@material/animation":"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-indicator_15.0.0-canary.66a1e75e6.0_1667986499372_0.10948468983482917","host":"s3://npm-registry-packages"}},"15.0.0-canary.5e5c2afc0.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.5e5c2afc0.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"5d340e028c78bc25e00ed211e93dfc8050ec78df","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.5e5c2afc0.0.tgz","fileCount":38,"integrity":"sha512-tko0lEHBzfwjQ54EFUskrJ+IGR08dOu8jklRYH0bMzs3lN5AqzWpJFmq5jawWm64hng11/Yh+k8JsQaubU3A5Q==","signatures":[{"sig":"MEUCIEil/tJ+YbhhrUrUd15RkUIkpO39ivUUhJ9Lpsv5wrY3AiEAk1stjXUGay5ATXErfn233b3aiyL3/AG66pDXcvLPzMo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJja5SHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoklw//Y23069dyoHL8EoDU+YP0/L5JFcQxpic/3D+l7cULcaDBpCrr\r\nYEOqaO++3TurEtVgTKcg/7ewpMq4+CJzc6DWX7egCvLivDv4Dvd8ec4GXfL5\r\nYewrBnQHHVJNC7R094oqOKmkhK9aUxwt4glVRQSA9mxYTqagzu7p/FZG68kg\r\niRHSJ5CH/rXo1ZtJyXtS7kd+WdHLCF1nhWhuVbbWordBLhygc6izmm4FaWyh\r\nhGfWoyt3dSz3QDg+0aoAbI8VUq9fnjpU3jLEJ+X0E4xQCboG1WKKWIQp49QV\r\n5jZNX0WmNNMGymOrj/sw3nGzYhMuMMNmoPtIuD6z7YDPCLFfF0d/SgNYwAJI\r\njFOe5LHUuQC7YmEDASfXFdg5fyaqG4jp6dgk3mqi2kHCHqt8L8QUbE9Kkomo\r\nMuqMZISm0Wstm39ytAwkYlsfiAoiE5E8v9eikDM2XV/BcQGA8JU5UFnoUuky\r\nTrhVq85hl9iwEJK7cPYNRU9fjuqBUen+9ivwwpJ75fnhPg0OyXYQXfL0lLwe\r\n1Lleka4/4FsEb2DW33gRM833BN2Mw1uXUYUISFvbUvcdpO4VnVmtz/XQk1Lp\r\na7vw72k6gfqnXVipqcHh0+hZ8aRK30yLmIQcBJTSwkNYa8l+JOm1ZeScFJfi\r\nEydCTI++xnwnLnq3ZjuNcwRlaGbMbzXkUG4=\r\n=2yAX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.5e5c2afc0.0","@material/theme":"15.0.0-canary.5e5c2afc0.0","@material/animation":"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-indicator_15.0.0-canary.5e5c2afc0.0_1667994759108_0.8483115342642762","host":"s3://npm-registry-packages"}},"15.0.0-canary.3e3f43359.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.3e3f43359.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ef9472cca7d3e471baddeba543d861fe0d2c882a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.3e3f43359.0.tgz","fileCount":38,"integrity":"sha512-1bhjgyrFvnFsKPypVcygMvEGRMZWmLfFqnoAiEuMzS2eKDEzMZE3YdFVdqMVyOeRhoFqplNC2iP34d/9acrCtw==","signatures":[{"sig":"MEQCIGo/faPoVT+QRe/jQK5R3J5CYOkeprjTkCy84y4iZdvvAiBUsH1itGNidvpgOGPdTnrifhlq0BEyGFqUk5uZoa+EuQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbAdIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp7+A/+LxG6nzTPIjY7+GXUv5cvgyqwMJDZ2co15nns/uhEN7nzpmSL\r\nBEkI40XEvClEKnB+NE6JkXy9TIq5S1tEHG1+s+akqt53s2gI/1O51XPpAX/u\r\n8Q1z+4Osme2YUieNd7sTbJpDlhantoH4H46QFvM0EZ26hmWU1gOyNfxfeeud\r\nqV6wNTSt8wy0Q2cPZw2xugf/FMToCndp3lGJnaRV+VU0nmwsoRLqkLBnRq2Q\r\nisoSWbMDHYHvnt30YP1p8ijBQ9GjgjM1otPrh4JoDIGFLUZcgkvZcNxa+7Uc\r\ntSF5vsvK074miaAJk5+Ii0x0Ds0mkIfNk14NVVkHIZapMICxGuUGllqYm9VT\r\n8xoavtJTf3coStCM/ncmrV2hMEb65FD+VkNhZEXVaZrR89hfr50dxPGZZGOM\r\nH2tMhgH5qQcOLzhgSPRPPvc/NnE9Ed76sMTzj3BpIlZUS8cTZGvbXf1Iz1UI\r\nwx6mlst3qPpBTjALqHfMdJnYW/EBzfl+JHjIeUVOaRbk51ngOsKZHTs5DHE1\r\nGv95gUcJpC2oDp8+lUGmTpuecybpx06DO2GdsFXpx5ljSBscFFag2GalSQZT\r\nOAk7HRlcPQUgPgJW6XSFQtA1f3LHbnIyYuWKDYYKmqrN0QU1FQtSkcY4Dxpp\r\nMRz0SgirfNNoPw2Pgs4XUpeQTlBZi45/5vw=\r\n=dsoc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.3e3f43359.0","@material/theme":"15.0.0-canary.3e3f43359.0","@material/animation":"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-indicator_15.0.0-canary.3e3f43359.0_1668024136450_0.69799004266232","host":"s3://npm-registry-packages"}},"15.0.0-canary.3f667fac6.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.3f667fac6.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"40e10305d3fe5b24f4a701e1afcd49658acb2240","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.3f667fac6.0.tgz","fileCount":38,"integrity":"sha512-JSUp5DakRQLP5WXCKRYqe4PFZiYta6RTF6hQppqJamrZMc4XaD+Xtjc+bFiaI/VEhUJlTNu+eAfVmapUNhmW1A==","signatures":[{"sig":"MEYCIQDAL70kEQDf+QHpPLMVTuDbpsV2rsxOK6fCsthDfObRewIhAJax4Xg4gI+bbZ3ZlsG+mSY29a+AnKk15Yn0pteTsaJI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbCQkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrJNg/7BD4JRGgSIfVKkjyoqSS8kE5W2jg0TqM3PYWG/YFuk1xzWm9c\r\nYdyrpZFagPgngsltAGM0f5N03ozD2c2qHbTpn9RrPTful030tqYy6yWQ1zTc\r\nu1xJJx9jcvtjTbAGLuLilPh9K755GpNTHTn35Q6T1rs3Jq1tB8xc1ufj4CCu\r\n15a25FyiY/j17cgUbykyAO5cUPeIf9EKKYV7dgiABFKpNnLy4JKAYu+ePeJz\r\nE/DMvtdNSNZK1m0usy3fuTLIBsSC7T/iGRvZUEZ5/MtS5j2SWPP9d+VUVdOG\r\nktVZMvLv1AoeKSeoR+4hyGmkREhNyKN6oZbWy9lkA+wq+L0ugj4BnC4mRNrM\r\nGBhCK/dyfLoQk14BPmj0FDaMWBbD0ai1k+xVe+9exR2HDVKk0vLp4Rj1bHvj\r\n/ef/uu9C2i1YigxEqcGNRYr59SmvSZjBABTgwaYMhuXJDr/JjQnd1E4uvVfU\r\ntKrWTc9jd9hXZ9YoqFJp1Tqwo1jvNV/QfGvPlPbzx0PtsZs6zP9VEF8Tf6FN\r\nMF8xlnGnkgoBIW5dV+UTYEI2FEz0zDqGYzoSSoheaKmr83tlr4bvAft6Iqog\r\nJ/KAL1c5yJFvaK0mnxc/fzt2weTnP8amGojqiUaE+MypENBuFgAza9wBBkwa\r\nrN2CYG8/qEARbZXXUfzidTY6DiExHQyQuuU=\r\n=Mzrg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.3f667fac6.0","@material/theme":"15.0.0-canary.3f667fac6.0","@material/animation":"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-indicator_15.0.0-canary.3f667fac6.0_1668031524625_0.33618263885178257","host":"s3://npm-registry-packages"}},"15.0.0-canary.faa28c1c5.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.faa28c1c5.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"2d2b6107225f8cecfdf2d6544ebef841674ea1aa","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.faa28c1c5.0.tgz","fileCount":38,"integrity":"sha512-r+y73vLSHult49CtKZWSOiVJUEGF6/YKeNMjkqmWGejA+Yl5WwFZ1X3Ai7nehUZ0yCaHh0/pzShVDBJrjN4TRA==","signatures":[{"sig":"MEUCIQDAF9An57bR8yyUiycsQeGVCsxlNs9S13cTl4rh/NPzdwIgAgLQPKg7nbwXkdOGz3IBHafj5II8aSLuPQ9Qv7xQarY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbnm/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrmHg/+JsU1YEcb1xD7830GgfXa+uypETYkjfd+HI/1qsl5UgdPHEma\r\nB7ic864Fr96qWpsRlsbMRmikctZ/021bmgl7VDknAcfEiWMmH33Jm72mxfIP\r\nLppJ/oamruOCM1PYJwVB5DxPC3EXGO0i+oNMQQ70FueZKOE5utFP8U1KaYXT\r\n/GtPvrWvzMCcP30W84Wad3+OOQXxIWRMhHTOozB55o1JWYk9amlDSzvZlS48\r\ne7klpYieTNdgn1IRUWuQFm200hjUW9qbOVyh//Ru1IgGrbMb2L1C8Ot/VMqR\r\nt0IGE6NBC4op/2RQGMr0SJzDlE2fAzwyaBG5fWFYvn5J5wGI7Dcp6a8yrZ38\r\nHPjZB0UTucPkox6vTepDIdmoHaFHorrw2BAi2oj8P5Y1/+iMOReMC77XhLaV\r\neWx/MsJfS2iiHDbHvSr+nYN6JCwd94Uoo06v3882dzR/MoHnE0/I9HqFlbOd\r\n3QdTLDzD4+hQCzWPDrxzpwobcYnGFFXmQUOD+JfLZrAylzJh6jVjVHie6ft5\r\njOJH1wn/+ZmXfrcypsFzdxZgMeD+LSioAr5+znmy0QXt1KIuOUkU1LS3N+Pb\r\n4xVqMkvnXGrYNuD4LYtAiNeJrj28s8acIeyDIPObUCm+lteT6riA0QlFUJwY\r\noIidNZupaxOnl4OvrtdFcW1B3AbNZo4RVPU=\r\n=eGrc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.faa28c1c5.0","@material/theme":"15.0.0-canary.faa28c1c5.0","@material/animation":"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-indicator_15.0.0-canary.faa28c1c5.0_1668184511146_0.8718443469595567","host":"s3://npm-registry-packages"}},"15.0.0-canary.a868c7866.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.a868c7866.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"b9ea42cf83d0348282633a2a118c70b6c3808e19","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.a868c7866.0.tgz","fileCount":38,"integrity":"sha512-pTCOC4OJE8aJZbwea4ezofvn5UJ1xIF3CAwdcWCKWbbWbBtn4TPPqyllGLhIBDDvATUY3PAgxsXOL7eDfzql4w==","signatures":[{"sig":"MEUCIQC2b5KD93wIGooFPT58lrwnPpKVq68ogz6zC5Ywz/8g4wIgYGHyYhv5gabifpn/tFCOiXnY7XE0I6pjErCyKGMDFnM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbnnpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpC1A/9HEgXH0FnBVrMrjrgsCK+MmauA+v4Hnddpv+r54Z9W3h+4XVQ\r\nrHe5A65p/UL+S4vmI8C5W7HWuVzCM5PA018UM8SxVejSFiOVqKDYznp4odmF\r\nK/Onwq1yFc1I9WHZQ3Q8d3bcQLUKU33vo1mw2ra33udC4daohRWX7VVJHRK8\r\nxhY47sN8KtKVayHgpPOMtrnJVikZPzp7H3s89jWXnePSNCobzUjHTXSsd3pH\r\nRcPgzpSkUZg39L3h3uGS64wcrcewCeTs+N1h1r/WudL0xdEzsoOPCbWxX9G0\r\nnu+ASUpnbLrEf8MKqpcteB1gHQkR6jCpKv+PjS1TppGAs/Uh3iC0MlZPb33A\r\n7hkPo0PPvld+IPGoPYmQAYlkwinV6FDTfQINbSNcQYGMeZwb07qmqt0AVw8V\r\naMe5BAyCOTVGzkHPGk42dVG8r2IXc6uZ/N1RNRdzMHO+L156o7Cz2cE7pwwz\r\nehmjaJgXu6777CSlw4QgMmGKIqWpburp+StM7Zd4cirWfc3CH4mV+pR+QYGi\r\nEVKhqCAS3lKOt50LMg7ojORwCecgRTofLTt2ubQOr4Ldq1f8xThhGUh0fjlW\r\n05hYu1HOKhp13maM8AK9JYYZ/CdLIa0G3a/GbTls0bWDE3sXnGH0sKFI4f8y\r\nXeUeSPh/Y1eaptw56jtkJ/Z23IlqMi84aTE=\r\n=ybQg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.a868c7866.0","@material/theme":"15.0.0-canary.a868c7866.0","@material/animation":"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-indicator_15.0.0-canary.a868c7866.0_1668184553691_0.8220679970948641","host":"s3://npm-registry-packages"}},"15.0.0-canary.602fe8efa.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.602fe8efa.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"3434511b6e65818dd284fa7d167c0893980048fa","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.602fe8efa.0.tgz","fileCount":38,"integrity":"sha512-OVn8E3xI2Puca4cUNy47x6axAs5tAmwVOzHb8latTRdt0AAec407Ed85OKZi2Yha+dTSLui+I8yyUnEbKp5CtA==","signatures":[{"sig":"MEUCIQD30nrp1T11K1x2zGnYiumeknbi7IQ5Ru/QLhPnw4rrvwIgLoAT4WQ8eJINo4nbtr5Rxr42ZQBUAZddEZwpoyEBOIM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjboIyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrhjQ//TkRO95HniZP7SB8hZaNrWE2GmogtlS8dx1zH2Z+r0wvXnGEq\r\nWcKlj4R1wNAD0uiRtKefpUKjJBjeW1U+QnK9PQ0qfPVT9BI5mXSuxiwaQNaT\r\nvJ2cDvSed0BH94EcRC3GdTz6fytCkpdnv31xeSAqL5R/0057Uar8osB+SX+5\r\n/yiXnNnMjMCkUjXhSDxyKZD85Uoks2Vk7Fpnz5KOihg4bT+bgxBNcByhoVqa\r\nQTK4PC0ww3E2yqBpUsh73/uHGYDc/Q16gj9bPDY+fWODR445o4zOZJ2hoUDc\r\nfE03dIkWpHmwNtqFGcGKYeHY27gsbP8W+m0lHwEc/bGq2uq8WQg1Fu2+VZOR\r\nHBAAEQg8DZsF29Xtd7TmGWBrSLOSZ1mC9SZogbdyE6eQMvxMo0OqpdGZi4NT\r\nQ5NWokaJTppGmbLnE/J7LL++DVNF+MfgrNle25BBBqvWfcmTweNm/pKzUNp7\r\ny4OocNtPb1VILdXHWCrSN+pzxOSg6/8WF2F9w1ur6dl98V1zTLoNPXgqCfBX\r\nVszyYw/eweIabybhpvcHHlMUJBaMYANriMNi0DoVrKnNLXUzIxlSt+EPqb+J\r\nUlO6uMhB/E/ylCU2GPEwO7KRc3+fwQ1Oa/VCanzMwyD9BmUfN6AhSOx0ZetC\r\nBvOWrAxOhf4yq5kQIdQ6CRsPnETB4IWWOF0=\r\n=7eSH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.602fe8efa.0","@material/theme":"15.0.0-canary.602fe8efa.0","@material/animation":"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-indicator_15.0.0-canary.602fe8efa.0_1668186674490_0.17837934897426622","host":"s3://npm-registry-packages"}},"15.0.0-canary.558c2be62.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.558c2be62.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c72d8c9338123c7b220d066d8484c7253bd6467e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.558c2be62.0.tgz","fileCount":38,"integrity":"sha512-ptlp1TaKg0wWmdnwVYMncttJNtKX8SU4FNgLetw2nzP+1+w4VoEMi+iIAU0khwh9Rca/Nvou4+5puzonW08Prw==","signatures":[{"sig":"MEUCIDIUNv2ZHPGCsNpgYQPGtqSEreUZR0WWGuxLTH/f9+AxAiEA2MBUb48CIKYudeTPmUtTSLHWjz+G7FNRX1Xx84uxcgw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbtBaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpDAQ//R+TLcReARSUWHz+ssB+YuU7DwKWYRIugHKbprTZuKGa/arvk\r\nz2rmLDTieXt8pY1OvCWVu2cZmctI9vgBG25Km6HYuqZltwYDPQwzG89PJ5d1\r\n5JKSf4IzBW9wUnbVfe2/Qqu9J82Xh8/xY7uw82XK3q94M7ivLBUlLzhWutrv\r\njt53iV1olioC6brufjp0Ch2XWXOQAuk3wxaR/drEi3QXP9zc9QpV2o42E2xa\r\nZVxkXzz84A0CFeviH13fqxJ5SxGI2nnvh7Om9vNF0QfEMiPoDG0UmBJqmIU+\r\nzMCyu7EPKd118KqTdIXRN2rBcifRzI8aURwcOfXli4q0puLPJvudb/gjtkUb\r\neHxdJ7zqGfBk+Kee4gHHU/WbuKsKn7DS/j0MnJNw+XeqpvtKPjC66FNuDz+c\r\n07GOqHDcRZ3+I8GpDWxJixgz+eijyAveGqsjrTJeR7FeMTeDVTtzTr+5BQFX\r\n3uAP9f6JNlNa9/yKOfBTzmspKXgdNrvL17pajFx6RpqFeSCeHUYrVW7UXF4i\r\n6BGp2yoFJGhsSGStDU4plIOped6s/T5r6Qa+NF2OPm40b+35O757hxGnJjWT\r\n/BVCu1NuJP8d04bweFIdHT5CedyF1AADpkhQfeHjsr0FD9SfwX3ekrmnvw6h\r\n1OkXkB3vXQc6m3dEF/IGyvDb4KniXC2xsmw=\r\n=u0sK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.558c2be62.0","@material/theme":"15.0.0-canary.558c2be62.0","@material/animation":"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-indicator_15.0.0-canary.558c2be62.0_1668206682675_0.5302164720926703","host":"s3://npm-registry-packages"}},"15.0.0-canary.b5c13a7a8.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.b5c13a7a8.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"9bc331d85a9f1cf1b04a8bc5570b78d43071fd89","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.b5c13a7a8.0.tgz","fileCount":38,"integrity":"sha512-VNpr3gB8uOTTo4Mxs70BBbocs/CQM8zBT1MlJmL5+ghulGwXn1HVqQgIFUggnc6TQliWeTIah1xhHvMf/enfsg==","signatures":[{"sig":"MEUCICOEpJzJRPpOVOhf2x+vm9UnwheFaRvEsyvkMvX9rck3AiEA5MtXL/o3VeTyuVuJcrKhrFElutBxIJgs6B30cKhjui0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjcmWDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpf+hAAj62B9OJl90K+hMwScVpiEe/l2aop8UZyX95n82KPkGoje9dX\r\nYfHjGo0AvSCeJ7YpI8JPIwIzYoKTC5yX+Scaz7q6FnKphP4uJqLvJKiZ//yz\r\nWijXUiu9mIi6mHw8bRaG6eo/M566SIQAzbbbilRpzH6wOE84jwi0BHSSH2HW\r\nQPS5Cez7I4MLBRRiIu2GLOxNujIzBtAnadPGeTnd0lFnEb331W+xZW+Xqvqi\r\n3Fk82SVOXxyev6Cun/05Zy3V5QEULxGpA70FY6X/yp84ar7EI1cAIs/z9gUf\r\nbfoHwLdy8VAguLy+C2tVu5aLGnUGXhN1m3bb/QRde+l/ZOQxFqDFMQtGVIBx\r\nHVinFkAKR/PwINCDl3BsPGE+wXsvjKM+LVpsjG92KpURRM7NYSS3PiZH/8Vb\r\nEnzjqchL9HDjkqPz+mZCgY0e7c3P3pA/kIGmvhwduHNfxfhiRaQjzuoFVYjj\r\n163xAd16A9iWpvNFoVGelnPamF9WFrzrssfzb5QlrVQb/JnkypI6iVD+JbgQ\r\nbrBSKqX5kArAeH/V+hlZHaG+YOP6eD6fxwUELcaNs6yN8bsdGvSn1lsjk0wL\r\nLQTb576v8G0n3NbirjFbgaH+UvqP3pV199lufjC4yFUdwVJ7/z+dsgQW4USL\r\ncDEKViAsOxg2KjaSclCOSP28r1qmcyJYLXM=\r\n=6KQm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.b5c13a7a8.0","@material/theme":"15.0.0-canary.b5c13a7a8.0","@material/animation":"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-indicator_15.0.0-canary.b5c13a7a8.0_1668441475433_0.13024286201052626","host":"s3://npm-registry-packages"}},"15.0.0-canary.a6e1c0702.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.a6e1c0702.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"d7e14f63fcf187168d3627532988b436e1e4e2f8","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.a6e1c0702.0.tgz","fileCount":38,"integrity":"sha512-tWSWcRxuvryFXoBtnki+BnmrZDy3VtkLKU9VvvSDaviGjDaAdTADvgqh7OTsp1z3QW7iPugVStFz6u9pst9goQ==","signatures":[{"sig":"MEUCIAjbmHHbwyaJh9FT3K4sRAPT7k9CO1QrlCa/W4nvWKSGAiEAtxKNwlgLWLOTCuIisz2tPMbynCsw1Nv5kc/sNZGTEF0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjcnpCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmokOQ//Q3SgmSzI28wc6hS9LoKbiiDFG1fxOpooVKwo+U6x/NFgaE8y\r\n6bp/UQqf7MIAiK3x1TBCGMYwYo+Cp0W0YBUiHVPgYh2ZJCBESwooTmX9HSNl\r\nQddWgMbZorOnDEG//pQy4ruPEN3FL5pRELcIqgzKKCatZCgy4W/XXnfloCc5\r\nxYYoUTz+04vNMit6SZ9yRNh7qCIAzjvJhut1BbiYQPZF8zrm9s7SIMDoOMTr\r\n8DPAsXGXK+oqz7yAScfXTSWvrh31g9rTWZS/aBm49u2skHFGrupYfc52w3I9\r\na2hxCeKjlJ09xxTnh2gbizf4Dg6jdVZPI7Kpvq1kpnIwyipai1BzvlqW1tze\r\nXmo2F9f09HNEKetNkrw+Xy9oQuemSmXskGoIkxa4KqYTYsmE5VJPrEHGFtPO\r\nUHTVsLZYMkyZ5CvFaCB8qm85VlwC61UamE+JqbBKmKDwwXULJEA/XcchtEVR\r\nfsz8OAvnO6UFWuiypg9bcI3lWG5E3jMY+H0Mtr1MCL9vJPVVctuW9W4M6bn7\r\nG4PycQq75EJfddKEnQN83xVt1NO34Waay/jt26FjEWDWHfvwa8+r4xEXKihI\r\nx3a26d4pEcDziv3nAx/7jAAdc/rRBevmGe1uZAR8yesUZtMDtaHqFn78kPht\r\nqKrCHaQIBO27GGeAfpAWU3FM8u2JCE1aJvs=\r\n=k+Mi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.a6e1c0702.0","@material/theme":"15.0.0-canary.a6e1c0702.0","@material/animation":"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-indicator_15.0.0-canary.a6e1c0702.0_1668446785864_0.1677965742238452","host":"s3://npm-registry-packages"}},"15.0.0-canary.b6f8a06de.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.b6f8a06de.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"05a8125638cd6644bbbe0faf4a8eda9cf5898581","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.b6f8a06de.0.tgz","fileCount":38,"integrity":"sha512-CYG9RPQAEE7BX6vuJRmbQ8LhcQTUmYvfk9cLQDGunZbMKdWOrXOfqIRbTw5dEszbDXjLYDodHGmMYk8La4p9bg==","signatures":[{"sig":"MEQCIADHvG8PwPj+m3HZFmQkIrE0OQ43XTyw79zKReoeGPXMAiBr5gDEE6/JdccbP+Nu0UxJ5TbIx8ZYXuP5mhYNfo3uOQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc1uNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq/SxAAjrva4+GSf5l9RC0HhYUYoYEir2Bl5THrjNwnhGoFcJbXRwNz\r\nC1wSV/xi8CPmKfVJs0eYIkfKVMFCUn4FGLBQFno4zKxpTBNYN+fOfeGKLYNd\r\nJs71G0Ww+EOjeDZQDMAYk3Q3TSvTzhXHdihDVCkx1QOgIcNfFRmScVdSYhtG\r\nSyx1hI+uGw9wPPrh7V1sGmKuauWXW4xqObAgT+Gkzp5vR7IOHfyLZ6pE4rL+\r\n5xlK/M9VFGMs1278IMZywWCrvMgZvnVdnP64WWDOINVDJRkvidA90kCsMvcT\r\nPKcwSPnTeN70aruZnw2E8Dowom+OWfj2QKLDtUhcA9QsVnHed3p+XKFXhqt+\r\nbdnbnonAxqVRUbjwCkcHfOamN6nf2ICnYP90vfE6bJSBrtODPHBBPvya6C/b\r\na73UsM6BERRKjAKBc6Nh0prf3Pf08mkx+jWnyP9Kl7tDyfEY8xGs+fdlh80K\r\nMiintHcZeMXry/pj84aoMUNgQtXxUX3oBLd+0sHnQCopzMTurDZ4iHQ5NNSS\r\n7j3CjJNRyWzMzzdq+cNnWEWszFn3z3WergipRjp9rFgSgzuVKzwpLeuIyrgD\r\n1lxBuTJXdDkdOjoo5wK6gHaR7F+gT3vnh/vCObZrUGC4EBkJ6R1XNXETKKBA\r\np2HO5M5A9w3+xcmhTGEtbF5eeQQSdzGLcfE=\r\n=FNSh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.b6f8a06de.0","@material/theme":"15.0.0-canary.b6f8a06de.0","@material/animation":"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-indicator_15.0.0-canary.b6f8a06de.0_1668504461303_0.30692831024500977","host":"s3://npm-registry-packages"}},"15.0.0-canary.0163f3ba5.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.0163f3ba5.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"a925d47ca533bc08a060eb153524a0d06fe3c896","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.0163f3ba5.0.tgz","fileCount":38,"integrity":"sha512-Pi1chTIub2k8qyG2rQMLQS6noZx2CiEz2Y9lRJmtbuEeY7DU54cL2dIAJqUchS9HZqNaWQp1C8V6WP5v26+qIw==","signatures":[{"sig":"MEYCIQD7d9jca4ivMA6sXO1+k01kNeFFfn/9dhPFoKCsfocJpQIhAJyD5oXQu6CYA3VsyCfX7JSbmlSa2e75JVvXlnfTkokh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc9PvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoaJxAAgsprRxMDV1qdnZr890EJoVgZ/i4NNByXazd9lixFdFLaCIZQ\r\nrH4UFcB5ctSvGQTHi77Nd/4qYEarOAhMmwCxrsMyFR7CMs+vrbmJ7jC26R8X\r\nSGP4eMsTqsQ/zcAOs2r3afaZwgBAgjzxNiUyacquWfzkPfF8nJzpH29eyo0u\r\nB1ouMf8Gh5qTVrPAxHf/SNSjgiD/5n91UwLCZCgcFH1kS1L/n0F9nm5Q2a3b\r\ngY7WEjgiZetkZ465xRWM5HRVMtiQaJZyOC2oqYQ8IjsJ/eCbR7CgC4fnLlFd\r\n3/cZT16LAvxQWR66IfkzzN0gXb+sdRMm9FaBQfbgWdKZShV3kB8CafkVO2uw\r\n/fJhTBr0VeE6wMcgDuRiKOcbkBEw9T4/9BNczHBJ6zEUcgQyqo/Ot87sSSQG\r\n99Mv4vBBmmRhfGm4Yp9WuJU6y+hD3kliNfNd8Ouw3wNSTZAE3pOSJgVUkxcg\r\n322RCGZXyG3SX8168+3WNsOTjoZYPgrMBgTiwDhSGEwwFyR3yp3cJZT1Jef7\r\np/w4gcqTNtyv/R6mYL/Jhe8CPlJHAJgESM14aPTmk+ZJqmGa42pIkL2LJFME\r\nRgX+Up4gbu7hRizy4IIhavfl8544Nz1Mw4xroET71d5o3cJSkzXiu4d/9vg2\r\nt6QIsMbkOAQiImybznIPRXhuReA2RzXihrE=\r\n=mONc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.0163f3ba5.0","@material/theme":"15.0.0-canary.0163f3ba5.0","@material/animation":"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-indicator_15.0.0-canary.0163f3ba5.0_1668535279363_0.9645838378404861","host":"s3://npm-registry-packages"}},"15.0.0-canary.66c5cbb94.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.66c5cbb94.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ff175f0580127822f2f0aa7e3709e20d7868b7d8","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.66c5cbb94.0.tgz","fileCount":38,"integrity":"sha512-3OUpe6fpl5M1PaAbvSK2La+Sv0pxWsZ2De+4z47j88k501TGe8zOluXuCUpvIEtr/LuMBo4PiEiPULt2nwU17A==","signatures":[{"sig":"MEUCIQCYylAAJ11baEsR50jGwfXr+hJo8mH7e2SoK2nAPvJ4uQIgDpyalBDVZBIqEhy7fLGosHBySzv5rFvFtdcs37CyunE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc+iSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoolg//WOOSgR3m8Hoyqa3kttWI25gg04SmtHee9QspZ5DvlTxwzCnZ\r\nvfK+BqHg+blzyIP7m1P+LOAgRYbwMc2sovgEGVC5xtLKIIHfKbADOlyip6wu\r\nKd2MVq718X/SdT7nsC/2T888BQ1xycD8K3WPuxeBXs61DUILARHjDDOZhINe\r\nsKfCqo+egcjtvB8yVB4B9eJCZJ1lb5pNlwF3UrthNlLCsenC842zpwk5c82w\r\ntPJH8mTUARts0d3qKcErmwweLWJQ8KKeJ8W+HoKM0G24YhQlnxfQgrCjD0fM\r\n55Oe2deEAWw4AE1x1Pe0W0tGiEpAJ+0ozLYum2LeVi4Q+EPhmdk0P7+uJ2Au\r\nJRZn0G74upJYnQRoetcVpZyW7K63wgTCyP00er54/RYO5d9tXO4TYyUPVFxd\r\n1X0rcwgyRbJCGlNYfasHMuwNe1bKSi5hjDIEGN2l6SWwoFz+mnWNy6lMWoPs\r\nh4BaAVMymDLPWy9e2qTKnNJTWrj6IxLWDCLzGi2gGoOI7POG2+qZenIAUbcp\r\njIBF718ClFZ85R6qtyftlMfCnZP1kJLoUsbhZNPBzEHy//OtYMMY7CV86u05\r\nZKbRe308HmxRo21DGorN9jLrEcY+z05RlzDAH30vumtHy0GQjkJtqVpsC5mm\r\noIP81vVR1GiErOgBHrs8dTiXOIg8SWTTKFA=\r\n=gLQe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.66c5cbb94.0","@material/theme":"15.0.0-canary.66c5cbb94.0","@material/animation":"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-indicator_15.0.0-canary.66c5cbb94.0_1668540562249_0.2193025012983143","host":"s3://npm-registry-packages"}},"15.0.0-canary.b01136063.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.b01136063.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"058d0fb65ee2a75ab249e543a5434c56be52b978","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.b01136063.0.tgz","fileCount":38,"integrity":"sha512-nvepp3bXmCFyByUJZHJ9+sKsAskyntG4PpLRJsQ/XqTkrcos0/QvV4OBepqdVTLGZqWwHtzL4siIzpkG8hl+nQ==","signatures":[{"sig":"MEUCIQD/++4O0CEekas+vUxJx7Zul/Ahi4b856PvnzfZNhGdpwIgLavzhpYsCNy+QXPdCdN9ThqGTMYjKwo44jckdj0/ujg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdCuIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpBbQ//T88e8exW8hBE6qIz1gLYsD1nZL67cTf7EbchRqqfueOacrjZ\r\nNN58UJNKmvQT+Jmm15ckm/saRkiDOvLt/CyVXXTMV3/Fgv20bHZtZ8GDNdQ8\r\nepHjaws6zSJERgywFndg9stCOf1JvVbYzidLtJIhEtwyrq4bclZTN2W6hUYq\r\nHy8n+Lk8jhGDv1+CabMXYjZZsIxLuG5j+vchHYoQtPMEnRVojL/f85f5iGhG\r\nkJoHXiRceebf0EWNJR1/QbL7fET40NoNXqlG/NHcuMMppw5agi5NWwAu93Rv\r\nwfOAesZyNcb5roY0BijWA26ssJOqmwEVFZNEiQgJQk0YqTn9TtSE7S6RyEqN\r\nQ8v5zXK8kxR6o9iZY24MPo0S8kGf/kEbDbcj0+MBg8356DtChWVXQ8HNPdSG\r\nZzewdYKFtHN/putGFrGaUbRs1px45VZXqDoSw5kiEpOt46iDPesPvqEgROk/\r\n3LWtemW/+TxHU779ZlHiarNSmBZ6QkhcOwhEF49xwaumVZSPcRTmwkU/zQTr\r\nZx+QPZwCuWNC27hMdvwwIMMRs9ECj4L9SOwp8MDkbBUvT9VgbCQBY/QeexOU\r\nU/7Nk+a1vHj8N+dm1J38Jwbg4arkR+hOutnbgjATAFTK/NoVEZa9NAaqrTgk\r\nmI7n2Z8zGkL+LD6krW/qpCAHNuwr1poJdcs=\r\n=qm8e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.b01136063.0","@material/theme":"15.0.0-canary.b01136063.0","@material/animation":"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-indicator_15.0.0-canary.b01136063.0_1668557704686_0.5845586311896314","host":"s3://npm-registry-packages"}},"15.0.0-canary.01da0cabb.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.01da0cabb.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c9c5b67afec01245963c10ca4ad20608ccc33247","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.01da0cabb.0.tgz","fileCount":38,"integrity":"sha512-fU1SwObFGfFO37orukMeuZghYECA0TGANpIrfYJUB1+S1lT4B3LDET4cnKGYdifdmHKhkhNDFyGQ3+E5/WhiYA==","signatures":[{"sig":"MEUCIFsWRT/9OCbyPY/OwzKVX0fx22tL/MeEaW3tCYtaht05AiEAi7FfkK1BfCX1DfIODnprsUKxw8+/37lvDnkY+UT2NaA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdKmAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpXYxAAovRn/kDJfnOsC+6mQ8KB22+8oPMNyztWMyXN6oxY+IIcyEZo\r\no3tEG9A+VFhHNs/NXIB2CrDG1obwkowgY/fnWK1QT1yVgZESlEPdCyvx+YgE\r\n7pE55huDklXMZrtsjEwyz8K4htkI+oqtO0TysXsY8/pb7DFsVoq0RxN0maGG\r\nJUfY8eR65dhP9BibxGXRLMmCXlrOHKWZWPO7+74x+MV80uilGWrcW4jFpDXJ\r\n+3KC3TP55YJ6VLt8x9repvcwBi1SqQWgXVHQNeQGfOD41TADbAcOvqL2eVjl\r\n76W/3YwJw4XgdWyfqDsQRcMPR7dLiVBCUKLa08L5uUBD+/jRE/1cf0YDDod7\r\nvmeRA1zIBNVHUMY4X5z9MKMGbxcyYFY6Qx3nyKGhLb0U+mh0cvOGn9BNMXqK\r\n0VyfkyedGxgsxL+0262lm8bTB7O9lYbP+836IBqADgIxKE2Ze3Q5nRuBvT96\r\nYJnFqQEc2s0Nau14+15RXi/23cjw9wQY8/8m19FgmZGiv3ypt7frrQ+AoERW\r\nlZcSXU68CC4XctfOcT47OPKnYZeuUrzy/QPvOIuQy1kzfpHrts9jBnjPS0cb\r\n/nRQuog3GANdERhUmF3cftErgU2xK0kvDkGJd9NFkowF1yHAelzPAshTZHbW\r\n7HBwlKqAcQ94buLX51wq7xu2262gIVrHYqs=\r\n=1k27\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.01da0cabb.0","@material/theme":"15.0.0-canary.01da0cabb.0","@material/animation":"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-indicator_15.0.0-canary.01da0cabb.0_1668589952437_0.20779066234009336","host":"s3://npm-registry-packages"}},"15.0.0-canary.4ac393164.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.4ac393164.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"cd52feca355f05c5a132802f0347fc6f640e2834","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.4ac393164.0.tgz","fileCount":38,"integrity":"sha512-mfWK+LP/RUh7FoIcj8STFIWpiuEKOGELtE1/KUyV8rlUi6OoL8kYTzY93OplrSkCy7NAOF1n2OMoAHXuj0HkiQ==","signatures":[{"sig":"MEUCIAmj2Uj38ZJxxx9Q/DdqnmmmrjcQqbkXaxMDqVZ3rmeHAiEAvbZbpDcRdm71N/DNv4x7KayXz8DN60JLtMSDysGTVLo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdQxqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoNlQ//btcZPTPkhEaW7G3ZMsiPeEGrK/QyqF4RLNc4AiOuTlB2RtQE\r\nrmcRkzkEuglSWiEJFpl34eCiKQq8Tehdj6+7FrzLoYqUG2HZ440pgEj2iD1y\r\n4GKcDuyJ+aKMJBRFiZCtFoQ8eUGZ8Uh2D5vorZeg8+t2HHtNbRlyfKe8DHNw\r\nxCBtzPXRhi2XHJzTRXjp0Y36W+tKToozvDnDQwyETbRePQ9WQ8PR/DjYTH4A\r\naDPWV5DvRpXdFjVW3LOv4cc8++Xku8bJD2De8asvE4VA/Q9HexWU0J52KEiY\r\nFEX0XnEp7yqYFepbUTI2Nxo4jG8dTPl5NL6JQwzlNk753yO9p04jKuPnq0/Y\r\nZ6pBAtyjl/mP7969GLOpN/P5VOxd5sRkmWV3lVp9zlSQkizR50iOViqneFpk\r\ncnjEjqXNKVIFyZK7JYAh8ZHObCY8sQYmohKCwX6mVseCD2MUFlR18wnNFyJD\r\n7B+BnTbPb+dgr6rAc00vgZakMks5qjg0qTKxli+j6MgwuEJBN69j2Bqdgc13\r\nVnZvZU1aln/skIcr+QQsdXzv96ND4R1sN1OriC2n5tHPotmrQYqnghHdqf8m\r\nOZ25Qd/q2xxMnwAUYeuwO9i0nvM0taV3hhcXTPAkFnLagV3joyWI0brO8u6f\r\nna3rwgyh7mEsfw0rEdlvjhFJT1JD7ZxuE/4=\r\n=MEMm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.4ac393164.0","@material/theme":"15.0.0-canary.4ac393164.0","@material/animation":"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-indicator_15.0.0-canary.4ac393164.0_1668615273945_0.24169698281872654","host":"s3://npm-registry-packages"}},"15.0.0-canary.6048fb563.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.6048fb563.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"cf0804ed475680a8368330673c6c630196259309","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.6048fb563.0.tgz","fileCount":38,"integrity":"sha512-IxrLKQ89g75FyuvseDgXHR1sGbw5mw7aO5AOeKAs1jpA9MhPfgyj/64wTX+J6fp5kv2p7xi7klEM45ovNN39Cw==","signatures":[{"sig":"MEYCIQCPl8Ulm5r0bLIzpPYBYnk/TZvA6GimGYfGCQZpcoLpAQIhAIrOwn9WKsn8r+5lUuy/Sku9Hzn2xC07veNnIM8j9JIE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdQz4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp9uA//V5m/JqfB5HlgoKiHpEOQJP29EQLA5f2kCrPqvt2wCsYRRqSR\r\np5SaGg0G9BxGr+rz/718YnzSnsgYfzN3GRdD7x0zGjcoXbtYuPQNi5Z0mTxd\r\nAD/2V4VV9lpoyzc7V7VxRMP2zgjIVkFisHzL3o6jRun7WhJz0UcwpxgVf68M\r\nmz+fZT3xCYaKxw6YHlO06FPZS9AuC6VcrhOJ6eWXm0lTYznnJLODPGwG5UeV\r\nLZUnj2urHELZ5vL3HwvxAbe5Kzrr22RcNQgeexss7SSVNllhNPSKCm76FZ9l\r\n32i3/xhuF5i/uL/iydC5xCGWaZEcZXtJAVk446pA/dXkUiwY16ZPSXlwb3qb\r\nCEOAKd0gMl7H3pd8yb1cNHzVTLE0uQBsLr39L/OlI0gdswB9nuP6zsscRXqt\r\nfFjNx+jWLb3/HAiKiH1z84GaDkGyGAxvzjmqaKDciqSWExEme643ISynbH20\r\nP8jUC+NYPYY20qGcR2MPKAplqXFdfAqHuH/cLp/MRIDHTeTmz4XvSlUcL7W5\r\njIYxXRD0KLFzXD4+NSQVRu4ZYuFSbD3lXvuPeyEC51QPo4h4I9ye7IVyo8Bp\r\ncsx2dM2Yn44T/pKMTC35a0nglkFqbDeXAIgHxuI1WjLIYZeEWua0b0D8k7Tp\r\naCCuY2Ujij61qfbsakfgfHKtIY7fySqelkI=\r\n=jWGd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.6048fb563.0","@material/theme":"15.0.0-canary.6048fb563.0","@material/animation":"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-indicator_15.0.0-canary.6048fb563.0_1668615416013_0.5108630094753572","host":"s3://npm-registry-packages"}},"15.0.0-canary.3777b03cb.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.3777b03cb.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@15.0.0-canary.3777b03cb.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cdb8a33f15e2bf68d216e9ed7156c3d086feb317","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.3777b03cb.0.tgz","fileCount":38,"integrity":"sha512-mZyqzEjYkUwyuVxQV98Cm9WHk/3yLJZwhYl4kogwsoCS9EeiNnEeTUpoZMEYfqYl7pwBH7VDii4GXLhwnYyvxQ==","signatures":[{"sig":"MEYCIQD62K5RAiDXKGBDImKKfAyhqOIcEfK4uZsZhuWG8nz+XAIhANrenTBIXI9j80GMYv/0ckODS/dU3ZCLZsUwla+7Twed","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdS6qACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqM0Q//TAz4zEwGs6dpEbGq2aL7+Jgs7JLChd202zaxAcdAL2J/FSI3\r\nNSNPbEjFRfW8zwa+DQIv7uOPgenC/NucQLoG0zyoNwC4dtKBwcozS+o4ha6q\r\nWtO5G0Gg+4w4y9zixqzCn3l05pkuqh9plUoNtfollyZODc7O8Jrn8IAOm1Xe\r\n1gKpwnUjW8AAGQp4l4srUdSqG1iX6Bt98GD7ngo2PqYXXiTynxJpuN6uZLq3\r\ntS97fUn+tAi+FdWqPAi4PqrqiWvOf/BVnzQyHMgj0/L+Peg1ZgUykQrYcN47\r\nNcDZe+j0HVCHDK33rDbXPQsRw15M0VKPud8FGmQ7s8hbu0SoaCcCJn96dwjw\r\nlGxVM1XKoXK5DjrILw+fZ7RjFLdfaYHHVDQBeJA58O7qP4aKE44L1EuWJUUp\r\nNRFU7aIpxS/FWBnhJdjaNI8m4lifDw3z9AsQL6REJYLwmoofmym9XKIoF5+r\r\nixqPKn6hUdLWLpQGxhykAr08VQim1xzqjwjhFbx1egFLaT7J6WvaDwXUdCvC\r\nsKt04+Of17wHcL/qej5Ss5itl/jucfCHaxfhv3BVqEO4F/LOV5v2X2cm4Ufi\r\nHb/dURjhs7jrz8HYFJ4P/nE2c8Q6VW5eADAPK5i8xlulv2YVnQNoLEqhWjih\r\nYoDmkVvO2jR3hX9DivQ3CoqX2ibjG6AnVB0=\r\n=3ZJ7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n","gitHead":"e02f6251b19559b874fd1998a9f0bea7d651e41f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.3777b03cb.0","@material/theme":"15.0.0-canary.3777b03cb.0","@material/animation":"15.0.0-canary.3777b03cb.0","@material/feature-targeting":"15.0.0-canary.3777b03cb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-indicator_15.0.0-canary.3777b03cb.0_1668624042660_0.6668572081656456","host":"s3://npm-registry-packages"}},"15.0.0-canary.f7f56fff7.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.f7f56fff7.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"bbde4324a5091b7d4bc807e66d9bb276d3aeac84","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.f7f56fff7.0.tgz","fileCount":38,"integrity":"sha512-PAobSOp9/vbDXTf0Lg9nO0kKdjezj3kBmdVa7Dc0ohVWFFv9JRVRZoGbRzbFTFSs39cr2aQ9ej3GLKEN/fddRQ==","signatures":[{"sig":"MEQCIHFZASa0lAa+MhnEoafTkgVCiZXPzGGAvy6iwFws0YjRAiAqil1gCDLBlGVfdnaseS84oyHOdxTtrGSLpPclTLrcRA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUAqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr94g//Y1dSkqbwt8O310KOSq3lre9Ym1QG/e93j7BFL7duQqNn/hjm\r\n0xzAjFLt7YMSoG2rZOtM444++g6BR79tYTZm7xBTT7GA8ShS/8kY09Qzu9he\r\nQK0BPeryRL1EBnW9QeFD/jjsDz5Joiauz6fvub+qAmcAe1TccwJXh3EEne0u\r\nAwD/Zqjn9rnsQAs6qpVbLrFp6Q7bGFkVNlGHrEeUxwBmzVEHvcOCwxCyrGhj\r\nHMD4werdeWUsu1/HvCpc3Pm4mt+Z3CWTOHsCZz7u7OrvA+bt4BMSyK6U8xV8\r\nwhISmhP7QN6jFrgsPjvxXJwZHNee/XFSTDod15/bOIq3bF/4tB76CRWuBU50\r\n5x1aQvxKDeSPqHrh/wD0ATZo06I7UAb414RCyBQZAFvWBbvcPFKY63vAzdeF\r\nOq9fjvlZBKYB3k2gU0NuTxKPIq7qeD97QOrjtmHXXKAhDkILT3bGyWbmvb25\r\nqvhmLAT+dC7O2uHym8Agc77o00UN7Pt0INA1qQYpXoigedKQlHTEobZ3gqJP\r\nKznre7RWqdE+P1zELmWqoTqK58DM3qg11kAG+aNEY4Bq08jjj9r1PCxQZF65\r\nkF+m6MlJqWLg3QEPXQI61DLzIHBWo1N91FPMDeHHia/iR0AWAs6US0nle8R0\r\nwXwArKBvMlIliDRtcp41lihM1LcoaWUb7LQ=\r\n=4EHI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.f7f56fff7.0","@material/theme":"15.0.0-canary.f7f56fff7.0","@material/animation":"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-indicator_15.0.0-canary.f7f56fff7.0_1668628522127_0.34461465592705554","host":"s3://npm-registry-packages"}},"15.0.0-canary.7c73f6134.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.7c73f6134.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"818d1ce3738dc139c583c3147ac7ecb3ba8470e4","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.7c73f6134.0.tgz","fileCount":38,"integrity":"sha512-+hRsNcs//71gHkuLsUfF5G4XXZt5e4m/yHYipg9ByFdfMuotYchi5NikDhV/4FsM5f2KHH8ngrCcBuh780LPpw==","signatures":[{"sig":"MEUCIQCvBQ3+iNzrAeVKk20kgIWj7Th1rL891dw8Ea3Nx77UDAIgO32OgHJLVUUrBNJQr7GvSTM+nRufHhqYlqV4ciVzRmU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUD/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoWJRAAgzqUaD6tvP+ahTIK+Bk3QFmqXItqjcDD/cx4R4WUyv3soply\r\nxBx0aZjWZ4deX9W0aDG/L3NxWOx1fFyLqhdBdm7WjAIYeyjyAKzdQ0AgyFSV\r\nwsyp0WwBoFSeQZYSzmQEoBV9DzXpqhAheg0WoA6oxXAthdwRLLL7fMf/MN/1\r\nuwx6doo0z03U9VJ8+KlyTkAO8f75chotN2BkrihdJX4MOYfTS38NffVXdrdj\r\nPp+RWoxv/SG4JXJ4eQxr8xFDB02rEyelPwIIpGvera3gvDipAKTbFCsWK0iK\r\n5qc9PNTGQ8J2zLyoVjSg5HllYmKm++sLWg71bQ/cr6Zrwutx17SEeUGyHUMn\r\nRa4rLVkQ7ThKS7HoItL9Tn6OG0MP3D/95tzLsm3gaSfkZjkzFUANJQu+qMLw\r\n/syPjBEaMl2umv75llYAtTwEEZePKJK2KN3O7PfXsSeADq617ByI30F4YpBU\r\nOw6ecfSz+TWtI9qI29tHhCYJk2FWjk2UNRvSRJn0VqN+rusJQ2VPWj1JtOul\r\nOfhk1KmpN1yhtUn3nI5ePopIKQB7AlFlQL7loXbUTA9kKnnV9lP5V4zTI+f8\r\n2+oLdtBj2J1G8OKXtYEfKDFScXzJ7krI0hlPbBDmxwsoOqr1NFqaZIUQ4WVK\r\n+sued+ZdQHBujU/bZawZKml4v8wy5opWlww=\r\n=vXc1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.7c73f6134.0","@material/theme":"15.0.0-canary.7c73f6134.0","@material/animation":"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-indicator_15.0.0-canary.7c73f6134.0_1668628734882_0.26451385287051643","host":"s3://npm-registry-packages"}},"15.0.0-canary.f1e037150.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.f1e037150.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"6df22b619ac6add494de966bd7abfb3d811fe3fb","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.f1e037150.0.tgz","fileCount":38,"integrity":"sha512-671wJW4ID5ilsJCQah9D7l7GHQXpt0J++z+O5F4dQQBI7ACHOzlpBjjC7nNxBbEuc7XIv7HcDXigDpjQqTsuOw==","signatures":[{"sig":"MEUCIQCAOJEEtNUIwfdwa4Y+3UiMeKYXeKInHwGw/AGLssf2LAIgVnBcaRDC6GkjyOwoM++ONwkNeQzqg6C56MyVm7Hge7o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUJPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrCgxAAjSaqf6Gg/0/hixuG3x9Uxkgk8wrzMY8GlXnh2uWQebSb7+1A\r\njSfDEixyRfmoXBtzVQSe7aJ3zbvIeZhcz/jVJ7q0HDcB1Xpw4SXa+tvg/oeu\r\n42rE6wV2biWliA2S8BPnZ18ndfGatAHoDJf2aff6b5t1OnzFMdcFobJOpi8u\r\n3RflYYVHUljzMlObKkTe0YN/YjmAuHyvPG1nAGTpuQH4ulowdEmH5G/9j98x\r\n1xk5ttEJS61D6D96BvPGrGqWe9c2IAPEx3G5iEzbwh9qEHqSiYenoc6W5v/B\r\nlnka/sf/4iXsbCTVS3MygFX2s33+mU8PUbAIKvbFCFs/Ic2UU66qnojSPJWb\r\n8XQIgX5a10vTWSDvj0e/aRHt1V/pB3hY04pFUt8ETLUQLhx3CkH9qmoHg1Yb\r\nZjLv8cb7eXtOAA+6y6iBUR5EHY9djEFnLSSkAqKFE4gbPyMUawr5LZv1gSzG\r\nj9aR4zj5gkd+rLiDEj2fOPzOII95t265DD1N+H9gQ1b8qrJ4XgCi+fIfcToJ\r\n0WFGiCHSgLHSUeUstRbbTursbMI68gMuLqM+DO9M5DkUvXlQpGZ5yveA0cfI\r\nOC4vwOr9hwcvw94Nq34JcpskAzhVCNaN87k+soFdVx8X8KF+l3ozJQH0D5d8\r\nsqcqAahxFhTD1UhuTyKp0BKvooOHzwOJrAE=\r\n=3S9f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.f1e037150.0","@material/theme":"15.0.0-canary.f1e037150.0","@material/animation":"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-indicator_15.0.0-canary.f1e037150.0_1668629071551_0.7741083325730413","host":"s3://npm-registry-packages"}},"15.0.0-canary.40b18d043.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.40b18d043.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"98fac20afec9bdf5619c4300ff69290dca894f5f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.40b18d043.0.tgz","fileCount":38,"integrity":"sha512-DxM53mq0YzgUFdMDtJICX2fxt2Ii/fYOknyVS73+W1pd3MLH0IR4RZdRrnCt/fvJKtIUdJfYsibZSwq0Scu3Xw==","signatures":[{"sig":"MEUCIQDpeqBZOBVn+dW6LccjRwnpvyKfgRgtkWy6hobXwv3cGwIgYwRUSU/u08hPFMeZN9m67/GSPhJeBQ0ngAvwg2cA66c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdWsCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmol6hAAjkFqJP+zSvXW99/lWSV1aebE8dSWNIUfEYzFdX1Mvd+mbmPM\r\nT2wGbzyHeW8KtuQAiwQJxXCyJlqCO1vhCXxZuJbVY4YvOLysT/7kvoxdbkPg\r\n9jV6UY3bvM/CwgrpNCIWSZ3G1MtqylVQN8011pZMVv7VNqXzmL/MUJJoDbpI\r\n4AL7K74wQvLNBRaTaklUAtZGpeMCv9UWQdiPY1leTgC3FcOS3oGsgWa/OhZE\r\nanN3hXtlzFh9Ra1oEBvmf5hV3QAGomZCUjP6kMq6b0jpkD9B7IHzeLv6sAiH\r\n752mDIY7TtlOmrAiuck4HRkDm1ypjiyGlTyotY7DeBMCwUDNx34J1MzEt4kJ\r\nnJXZC9qxZRVw9doMJ0CmUS4DoWJyV84HpXra983qIbEKR5smxi7jgH8uVwBF\r\na0wGaDnuf8mTFeAYFzN984i+fYmPDUiGceYEZfmLRAJOs2uY6z3UzBG6kC00\r\nKQeAIoFIEHmsK060mwNYqaWNjHypvi0zE2q9oPYWAlAQy0EpEeMsf3MOSHiU\r\n2p47rm9eIc0+UEJCrnHQj7ERQnP4+Z+ed2hZNgpVXil9dHisv5ltwNk0fImX\r\npHHRLTdpiuE5GUeF+0y/+11I01bzNL4CJZzE+rZ3pfLZqQcgpMUCz6U0aQQz\r\nfwxbaRVCtWISPUmIEcByDpCGlII2dFZ15UE=\r\n=z9w2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.40b18d043.0","@material/theme":"15.0.0-canary.40b18d043.0","@material/animation":"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-indicator_15.0.0-canary.40b18d043.0_1668639489954_0.9137830662131854","host":"s3://npm-registry-packages"}},"15.0.0-canary.86bde5c06.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.86bde5c06.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c1dee878ad3c29c4cd191517484e9fcc837316d7","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.86bde5c06.0.tgz","fileCount":38,"integrity":"sha512-RtmeN+v7TKMGBnOPqdVoTKyFdolwvtweQRajtVGUZG1HaAwi9Gw5JoJmLdo7jFRDK9BZDUxqTbjZuBn9+IJdKw==","signatures":[{"sig":"MEUCIAXB1U2KwPP08VBUYVaXLZ/suj1zVE0xeQSpZOvtOF07AiEAh+snDyJqbzsp7pLrNiXRaZ6Srd9CHeqEsmSyhZwRDFo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdW1lACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmraFA//Uo8CDgjEufpKxj4LThiOAggKmJ+7tLpDQSJTqxubr7puwowy\r\n0vAqyfe7RGF3j8qjlhV8ZsJr/caKpDMziuCcX6gBCXqvq9//phM9B/nh4Uln\r\n4rw0lnt/tsR7K3Hjy0kwwOHTDdW3WrfJNceg3tbivLzgUPNm7XUU8Gy5wjIG\r\nr29EfiXupXu+ZkhttoMlob6RyNUaMG8hslapBxL6yVJV/L2f/QTniRGRNZ/O\r\n+8AqyUAbrxukYtuV+mrtAAPkdu0Rr3vJcTjN7E96htDhPNUaWL64Hqxh30H5\r\nsOWvK/AFaHa7knLFXCJCsFFzL+Wi10phTREB10qrOpoDLUZXtZ5Tgvq1EOtW\r\nZsg5VNtldZTUdVxBa/JWTX5MVOz1RbJjFGlfHd/7mb25vITyt4xxVWYXvfU5\r\nXKeBjGIeUMj2sHjtMqKb50TokrJ4f7jlOFiIEq+7uvEqjuwRFzW6sqBAu4tm\r\nHUwys0D3YVQEG+nF0K5IP7kISEMZcSt1M36V6QvoyO5icXbAH4A/PRqj481c\r\nq9CCliDBMXt7c3GncMRyFhXg/nl/A6YPeHiJgSWl5kK/g/lagKLtuPIJkByQ\r\n9wH1Fzik6kDIjyY6megmY88iZ2f6+9Um3EamfyXrcRHLOfAWa8R2G2uFNp6i\r\nd8Zi39GUpI3Nr1g/YGulBjR8BYxaQpepL44=\r\n=uSAB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.86bde5c06.0","@material/theme":"15.0.0-canary.86bde5c06.0","@material/animation":"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-indicator_15.0.0-canary.86bde5c06.0_1668640101193_0.32181201853562946","host":"s3://npm-registry-packages"}},"15.0.0-canary.bb7751002.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.bb7751002.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"4f009f603c8f130e97a4a074982bb9c4dd1d4546","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.bb7751002.0.tgz","fileCount":38,"integrity":"sha512-eoy1wZdZL6PTHxuOIBoNHq1MkbwTj7AxjNR7p/lDZiTxKxej9pwh0W1MAw2DyOw/MxiyW/ZPiRXlvigIBgAptw==","signatures":[{"sig":"MEYCIQCapbbI9pGAkXAYBa3LJyMlCFS05qo0QdlqPsM3N00TSwIhAM3N/FR8jd/xrzvnRSN7l1/WQs7/4kdxyXRaiDZNtMji","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdXljACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp6ow//YKPwB5I4SinMEKz7WXTwN46ck4+xnOEhQtyR2lzPfprLezGA\r\nG87k1cLbAziin0p65fJas6Z/V3yKUWp/ChBJIUzMxrjo91YkutSBnkj33UQd\r\nyZ+YmK9Z36JkW2KqcQZxejSzwewR2/RwTIG9EyhvhQ+hypomJ87vBck6m9W6\r\nGRy+Xn6urdslIpRh38iN+tGiQ6r1Y/4V3Uv5S1ceMsGdD4GK6zb06QBmxyie\r\n4pRDLe9X8g5nDUNyfAfIaGEstOGi3pQR3lgR5pFJ/BN9F/+9evrwEhr9+7f+\r\nyD0vG6uqkWPbkcgdH2QTIwwJhNuGgpgkGJkbuUhxPKU+7Lj/xGq9/Od24Bc7\r\n+qEYlLbAm2yvEFVpLkzoqIq4UtX4NI0UfkYAMUI9yyX6wvF4Du+WZL2Xe412\r\npvq5hWJDFJmBWjpaGIgQsJJvhVmugSOX76WLU7VIrtmWkibmoUQ9oo59DiL3\r\n9pdlGj4TwoW2xiw5urc+hxJizSYCEsqtxUy2pybjg6EgzTCmxO5nUWLbSn1I\r\n7hCf/M3NCOqaWThBuFrAzXSrCUD8jW2MjBjYXgD/pdBPJ+LCcyWOO3RlPSzf\r\nsCoan0tLQ07e/fmGmvlSLrxYv4qKO7dSrCtg1c+KKOMOw3kG+52XCLQnpLph\r\nyLjQJ0KH7mY2v0f5tFJA2yJWdBmedc5YEJk=\r\n=cYlE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.bb7751002.0","@material/theme":"15.0.0-canary.bb7751002.0","@material/animation":"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-indicator_15.0.0-canary.bb7751002.0_1668643170790_0.7275167852071438","host":"s3://npm-registry-packages"}},"15.0.0-canary.63aca9af6.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.63aca9af6.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"058290c3b6585fe4d40a7aa83106cd9d514f6a7a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.63aca9af6.0.tgz","fileCount":38,"integrity":"sha512-tOgohhEapCvYoayxQ83DM3GHI5tbrqg3klCBCptKVBQl0Hlkr/xAxCdDiXVjoXKsqCwC+wgl8xvDajVM4TyGQw==","signatures":[{"sig":"MEYCIQDaV7z5KYSHGRt4u3GhjVMD3IxXp4Ng9DonOO4kiwWKJQIhANn0RXAG5iKztRMglmuZixBSecLVwrm2dH9oIKrMxj0m","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdoTRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoY6Q//ZRc4/6teMbS1e1TW2jTCtlGy+pQbmoGQhlXSr3IsXnDK5lxb\r\nreZwZzaT60RC/UVnCcx/egFTBglzV7QgwZaxHv//Ei3l0iQSdOBfk+PYUMmk\r\nKhjLnjBzkp/dlwabH/znNce2bkNWLYMiA7dBMrOLhED4AkVN6s2X87nYVobF\r\ndW3QKwhYGHkAf5Q5MMX13j6FuGhPjeVuASA8zFVRQrQfIuXeGflMFMl5R0J0\r\n04bZxSVYJjBYStgCKt9wNZFq0QXV6VZs1G/4oROMcjTaC7b63v8nwdCbUxut\r\nNJwtkvDlhmgeICLDxKiunmmpAKjSg+UDOGKsaa7mDBqL2GGjQ/RoVvYSN1Z6\r\nfPDBi2dnOYeV/i+Ho3Wt1JNf6VgfExn5APBOkSnUHDI8gVlfirP21h8zigr6\r\nwazLpu6fuSfbxM5zjfb+4aG1JcZREgXEHTBzICBEiN11dYckxx3yDzOh+sT4\r\n6oPjU4s26FGe4SpWab4YrrKmvmLlEwFfxgmBbEt6iizlDG37nxuEbJE0+Dsc\r\nGpAxXKruJytEV4wQepgqpAAHA7d8M8Ef7IGB761+U1zXMiv8rAnCaiXVlhOK\r\nGrkXSFtcRz/DiUxuSz3i0xlempeGhWEY4tWQEpIGb9awwu7YiiECZ3hTIijQ\r\nbkJ5LUv593uQ81+7diLPLDLJoHe4JdjhAz0=\r\n=BDLb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.63aca9af6.0","@material/theme":"15.0.0-canary.63aca9af6.0","@material/animation":"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-indicator_15.0.0-canary.63aca9af6.0_1668711633006_0.11943423883778825","host":"s3://npm-registry-packages"}},"15.0.0-canary.56482dc2e.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.56482dc2e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"7470fc112530c42960d6c6d5e285678d0eeb02aa","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.56482dc2e.0.tgz","fileCount":38,"integrity":"sha512-PB+EC27Zq1g0FeEssFosz/4hHg0kfoqKntEXRuHKUaDyk/zq2UUKaPaLbnD6oOCXKvkob8EAjCGLs879d5EUKg==","signatures":[{"sig":"MEQCIDA68IpGgEfl9/f3rN2/j4j5NIvBUVcSVHfNwOQwEopeAiAW6/Lmv+GlokIuI2xDA70WOpQWInb4lIyYTtVEf9xn0A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdq2dACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq9cQ/+L7TRQbZM5/n+GNb5aho6VDroKqz1wF33p0H8xNqygt9u95WT\r\n1XuQI6/WFCiRgYKjPl+GNrDbIjEySoOCKoKH7EtoMTYSQUu+r1D3yDvZ8GWh\r\n4Qi5ny+SVlWwabKhaaOdNMLpSkumPBtCLQ3aIbv0r15kHdewdWa0I+sgm8Ve\r\nbI++7N8PVmp6YPNZmkp7Oi7tbis/n4KyQAjrDgiXpXEutLyBHCp0ybacsUX5\r\nG6JSaB61rcqe9CK8OJi8Q+oV9SZKqGZFR+djmu31wSq4nNf8ucY95VrbOcwx\r\n/kE6sikLG1HyfGfaRRauqzMEzoKNfxgUlGXEzCnAEU2KhjtmjdYMjm3pEjID\r\nXmgMzsQ7fP7MbuMKz9L4OaPrt3NFn1uYu9d49B8ufNWQ8Z5UXgPYVkfbxOlE\r\nG2zLZmxxMDgeaJZIdpMYU9uu0d945lbqFh6Ody6K2mniVclQKvho2zv/JU5R\r\n2lfuEhM1JY/yXgqqUmF6UxrNTG1Vma9UuLv46QizFZ6Sh+qZy5d3yGssw29V\r\nB9ULEYAgJbUpSd2sYHU/TjjVh9LR0CzPHzWeoXvjFDyX+MBrXawlSDjaogNp\r\ndsW+JZ3hajtQPnbzHhT8WNZbRbytV3Ge28iYdn8Vqj0ixYKB+G457D76bhYY\r\niVKXwTV9phx+oBa0fe3c625RafbydepWzg0=\r\n=RzkZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.56482dc2e.0","@material/theme":"15.0.0-canary.56482dc2e.0","@material/animation":"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-indicator_15.0.0-canary.56482dc2e.0_1668722077756_0.9018692905773109","host":"s3://npm-registry-packages"}},"15.0.0-canary.953e689f3.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.953e689f3.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"70e15e7e16d1ede9895ed868b5845e86b2cf1c86","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.953e689f3.0.tgz","fileCount":38,"integrity":"sha512-58sTtSVeviNpTkVRVWv/j5AsahfAIyJLf/p/W7p/GqP6OjYxY0IMhJhQp7mqRJ04LJ6j3e1UQa8yvH6mckoN+g==","signatures":[{"sig":"MEUCIAT3jeQ8bV9FySxioEcqrPXFEdO9SMPh32gl9NfjxWTyAiEA+QG5gCNDB7kz0/CVpySFdaf4/PG4TrFmgs0mISMXeV4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdq/WACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr/oxAAjcSwn+i5CrIURAtdqKYmpnc/p7Rx74CC8DWtTJ3jlk/JTdr+\r\nBU7uOirQs7qJfrXanG4D6+uYIHDxhUR6Y6TzkdJww+tt5Pz+/KWR+bpbI87f\r\noT0umwmcXZP/B01HEuvaNeu90rLLglZ46tkgavbFbAvgCo5UlDoG2S6cSmqk\r\n2wJIP9//mMLsVslPGVLdeyknUBHP/nwe52BoF1HvzrqsQ500B8TzBqIi0bm8\r\n9VVQiQ5THTJLkI9EW0wYw5f2zkzo5+A0jsEmhs3EMMRVtr+MnLHwU9PqKwpy\r\nJr9Id94qD4wdODqmr/+PUUWGTsswHmDHOOPmoDrannoc9+fQkLBTu7c4cGA+\r\nEVAxPmOqqz6FjfHFJU3YZrY8zxtth1KeXb3gcjwpcX8Golsmmau3nNiCIHgP\r\nhCTl0EN3QM9gd5GQVO4wHZk1oZqbEJT/6RaqReBkQ49THCL7XpE+KFLebT05\r\nfU0MntLPqbgsvZyVqviKyz9Dkai+e2iQvbCrSgrDJ/aFuO/dFtdudQDD8unc\r\n9JQ2EgO2+bAg16taHsfM5oClEcYkwl6iSB68ZbK+z7FUkHJd5uAbObwdylFO\r\niKT3bRuwGc5QmkPC99rZQJgDMtg6LmagKhq5rYwJLMfG97ffBe37hoFLN451\r\nYrx6HAiEd3I0DO/cuNcSvdjLtB1XzXdY6SM=\r\n=bs7d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.953e689f3.0","@material/theme":"15.0.0-canary.953e689f3.0","@material/animation":"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-indicator_15.0.0-canary.953e689f3.0_1668722646157_0.3197190361800937","host":"s3://npm-registry-packages"}},"15.0.0-canary.b5606a793.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.b5606a793.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"90be39c08833aed56ae729cf3d918f47d4a329c6","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.b5606a793.0.tgz","fileCount":38,"integrity":"sha512-Tp6hjmAIElcOY+3MH/fCQetVS0LdBlr3/bXP5LOLUUT/UIiRR5P4VNyq5DkR/b2a2yadTR3hD+d3a8Xm7NXzJw==","signatures":[{"sig":"MEUCIFrQgMmLHZsLhSAtwDd+7X6tagjXYfg0/rBptvh3QRd+AiEAkvPfZm6ADBWjk2P0VHgdfJjmzm90scmvCCn3oaKtg+g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd1xsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrFuw//dgjtaP71KnWh714X7FN/+6bHskXQ9PnH4BIJJt/sKVVNcLlU\r\nAi6KsJKsB7eV9pyMRj4z6l8O0jyqXhWekPhDit8n9btVFU0WO1FiSj+KwXOL\r\n2hgrS/jmTdTU4vQq03Mnv1KlfnvCDdo06sx50FAqO1hqm2oKUcQs5fX/36gY\r\nT9tHR4ZsE+K5p2qCsQz4l2wK9AkJ9Y8chnSx1b8Eu5DsBX9gqUrlRitLt1Mv\r\nMgp09ykiLA/Wrhi2A+osdqZDbxm0QaJL3zF77u8MWuvsk9iKD9lf1cOz0nww\r\nyTeXe58pRmOmMKYElmyyW4K1ERlv4y9fH4vO5eghkuL+NhDqIXVs7n06pX8D\r\nOzhbeCeJEr524JZ9+aTRawCboVosNtOA5GOoxN4rFG0edrnhYsRj6/5VSpCP\r\nbGAbuulkz38GiCDz6ujofZeZ+afQnACyejjtp8fEnCyn/P5hEoLZVOYdDFyt\r\nWxgKTxChviu7JUXIiiUPbYN5aN3onTIN1NljmoJidUla/8oyta8N8AAmh/Rr\r\naEVGER8jTH1m+fx3pw36RZ0NIZyiFMiRx01svbLFFwZ/k3VrcArDxRjfq2Tu\r\nzA0RIVvPscbkvOIAguf+XRlEVhJSOO7wUCM9vVL6MvJV4XpIfUsTF5veoBmL\r\noLl1hUQjeljrZ2i/2bE5oG643PqL7fc0T7g=\r\n=or00\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.b5606a793.0","@material/theme":"15.0.0-canary.b5606a793.0","@material/animation":"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-indicator_15.0.0-canary.b5606a793.0_1668766828386_0.752135684741043","host":"s3://npm-registry-packages"}},"15.0.0-canary.8c5675942.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.8c5675942.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"cf5ef3f7298f98e2e3183df547aca62dd6d16185","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.8c5675942.0.tgz","fileCount":38,"integrity":"sha512-ZmaeAqkclTzcc3QMEKyJtykYndZDzEYcXJiWJU81H4yenJB87O7VdwQnJpTZS2f2FV8aOfAE+1Xxft/v1O3fCA==","signatures":[{"sig":"MEUCIQCLXXPzb5MgIAzqP/zigcbuTB2hx1TNFAZWBg2VZqfKUQIgcec/fvB8K4CY60lL3qwo7LgjglFEznsKmlOJ27H6Lg0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd6GTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqmyQ/8CjAOPBxsDpwIyBqKaVoKIL24wKnn4pIyXDOp6685/dgW4yDs\r\nnyGTRAdPnqrsmhwehjDzAoaU8krWg7fFo6zmtUmgrZCnYZCI/83ktI3cfY2g\r\niPAYrpZuXh8we7fN0wdgbETGpz9sK2TVottzxbUr4I+rDQ0HV+lRV9Zu9NVU\r\nUb0cIQBSuuLUh1aacZ4LVsnGvpEwVLx5IVfaf9mbUE3EoS+nuTmMzPURjGka\r\nCfwshCj7gjr9wcHPJZrY2rOVPSuipc6R6ZssYZBUDF9pKNMpXuRyp5o7og7k\r\ndeR2/0aDUqND2O96BYWnqRe7en9i9svaPmIaUpgs3v0Rm2Vvbg3fGeNzQ/M8\r\nC95wubeyA5VKvKZHTW2gWyt2MhYONtz7f9ShX9CjQyNx9fwyFUZcSsEdkEtb\r\nHks0lj5BEIbRaAyNlcYSKR7dYQuEc9QMFRHiNs/PFmi2lOYvJy59Cm5c64Du\r\nJ986UbQfyfZGe92hoJNhaRDbt8NKFTfE6JInA2rxxILarEUDOFq2C/pxVU4d\r\nKp9d/+FtQA3GGZZQY51S73BGEh3ZlNzv9ziZ+S6bUL9jbw0HpXzKcwwmkU68\r\nH6H0xHhqSp8vvfTDabAbwpvi8fuWUrdnnUCzoQRulY8mWrHhxsqRAYauNiGk\r\nrC691UBeKaXgqtj5D2sxUhRLrVRqqbT9Y8M=\r\n=COBl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.8c5675942.0","@material/theme":"15.0.0-canary.8c5675942.0","@material/animation":"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-indicator_15.0.0-canary.8c5675942.0_1668784531034_0.9240538809003505","host":"s3://npm-registry-packages"}},"15.0.0-canary.697fbdebd.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.697fbdebd.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"531f578e81d0fd9a6cd6febda066177689c1f5ab","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.697fbdebd.0.tgz","fileCount":38,"integrity":"sha512-xJ2KFfdfGzpZnSaExiBKMAeVit4diD/jBmNQ632K8z/mjh3FBPj9X83O9oJCFRHmB/CHXo27kzZqQwiJ/7i/wQ==","signatures":[{"sig":"MEQCICTgOUEgpliZEQrCzaqhPVCNIUotVc89RqwQtnNSegSWAiA6Su6U4SHkvdRnZWbbVqaDkTUld2eGG5KeE3cRlNM3Hw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd7oRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqKiw//dhkcdpTGs9B+H0sL3uZnfQUnFtcEE63dKgCmdbgGqzxpNcyr\r\n3VPkOGR4KQ4kLIL09IRsxgFtkrJ7pvmoXR3ugs7bM1lP+L3jkP5nEYNYqt+7\r\nBpVwr8ANpnqA/LmDMnJStHpds0CvLeJYU4JPxIy3PwX6OfP5zgerHYvM4nf2\r\nNeoDZoL5TaG6oCRsCNaODZI7wLa0qnu/q/iOktwpjmrGkIv1+DRAdoeCZWBQ\r\nzokqbbrRolSekQT5IUeRwazNMGzBDAsamYo7u1zCnpb7GRg6QxPHRfO98fYR\r\nzPkFQs1TB/8KdXyNwFjIat9UaYBoyusVMWoOTUUno5B7M7nNiLeVg3Ok5HjJ\r\nhEHoB5Oe2Qh7JDL+kaLkUiZyti0fKg4pDy7lHuOKwwXvMWa22cJTjr2/SNe+\r\nITFND1NdyYsoU3KMhXXltxzVhvYnKFMoTxv0fmDe8QQX/bi9KBNUgI8JUuw8\r\nsGJLjKTqLdF95yk7rRx7pIYDJ7ytMDjw3sUjeWT2ArQBseVdMxAEur5E51Qc\r\n0H3/reuXyO3VLggKpOviP1VOHYsMEbQFURJIH8M6x0ANlhiMFUI+kx3wcWxy\r\nQm6xTNaS5bFRUQdfMcpk+csoQkWBgqpHHuN0zTFxYN1+dO/rYD5xXOS3o22C\r\n0qmWPfHp5kwIJP+nDbe3ejb6M/D/Vu8KHT0=\r\n=ScvH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.697fbdebd.0","@material/theme":"15.0.0-canary.697fbdebd.0","@material/animation":"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-indicator_15.0.0-canary.697fbdebd.0_1668790800888_0.5344303429845279","host":"s3://npm-registry-packages"}},"15.0.0-canary.d58410453.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.d58410453.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e7a780b05717cd5b6c15796f07b3bd8a2436d817","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.d58410453.0.tgz","fileCount":38,"integrity":"sha512-DmvKsuOjBocxQG6MVB/oGYYSU7/wfuOEPqiQB7Y3UA8KdxX6HLhfLfZo1rRY9T+4x7W2+fQdIi5sZsK8ELUy0Q==","signatures":[{"sig":"MEQCIBPJpo/EksOjmbJtpfppqqy6YOtol+QSKZdX872hVOlYAiA7No1qak+xzHWZIklAgHu0oxT7BCWk8M3P9PLoTgFMPA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd9vpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmps4Q//fAd5fKBThusPAgD/Hi8PbZMA+DfI8SUd1uyh6KDI2ak3HWZP\r\n4Lg8f7QSlaQh6/TeMSOjiE06am7Jz1M7pTz73MKA6BMQ67w4NplX+3nG7NZC\r\nm35vLWEkRbGX0fBSvlisioMjKW3Qo7zXT4T8fquFS/N3xMHI8TsL1taG5zHY\r\nHxxQn7QH8QcAX/qnjdB/JNWptrCn1XRHam2lseZEQx2IEO1RTHPigDZJu8ch\r\nR0aPVCZ760zAKyCGUOCL1ci7yTtaHZFja/l839Q53ejLzHUDN7rxIx1IFWzO\r\nJ49bXRV0ScadmQCM1H/nlPSSX+QlnI8Wzh15TLgLG1wRCtclSj8qiyiywVxK\r\n+VTym1ev7rCIXi3gkokoQBjaoVZHmuD3ovE5Nfi9asleQS/u7gN0l7ms9tDZ\r\nikMmcYAamrgfxn11aZ8Ik5tJsIEZd5NdzrZ+hh86VC13SQUoB14OJYu2tZ7E\r\nErxWPxSxwMwNu3e3tQsuCmMiGvVdTs4+8YFrzpBW2N0KR2SiJgzDnCkH5PJ3\r\nTk7d2MSD4UkwP849rkYaTn4BKtFs9FtNt6sO6N2BZ7Y6hXjMIzJ1ud2cly0u\r\nbcg3xA3MRLDRQPrla3ZfVlItFZYAbePxyO1hGj2aa3CSbEhm5VkH7mZgI/ox\r\nmq8w13Th4e/q6fYrcpL26KiRwk5cVQUwYis=\r\n=Ka4N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.d58410453.0","@material/theme":"15.0.0-canary.d58410453.0","@material/animation":"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-indicator_15.0.0-canary.d58410453.0_1668799465180_0.19035415540329592","host":"s3://npm-registry-packages"}},"15.0.0-canary.7971d6ad5.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.7971d6ad5.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"6dab15bb7f200cb7830a4c027243815bfcbf2d69","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.7971d6ad5.0.tgz","fileCount":38,"integrity":"sha512-0X2tJf0E+CwL5Bx3Fqxi5Uuj1BgncKqd4yFpWE7cv8IZHphNReSOrCcSgUwUfirmee6MqkQ4Drk51Pf4ANj2OA==","signatures":[{"sig":"MEQCICsr1Sc8xZMlH0FhtIFSQZTDHlRgWmsRSSz3BpJrKxiPAiBT3IXESbhi3BpaPx+Qa8gx6I6ZpTGrXPcUNvYO3/33Rw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjeJd3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpvhw//ZiHDxzN1qSa3ixs1lHpBZLn1TAnJyK/9mpfUiYhWok9hGvAy\r\n2ZxJcyVAILGMmSAfqcAqrQOUvEfp2p8PzHQp2r2naljxSJBQnQOuheS3+Nz4\r\nt38LUQwUNNs+UmYCGqkUVVjIul4RCG88xzKkdub5oSbB2LgtAkf0sOP1V3wL\r\n2pq726Qh8wiB3UFAMHLxR2KNSSYojhZqvKPjl8Uc0cmZT50mRlAj3Nl1f0XX\r\n2y02sKO58BmJiJDIV7v6U7eifpPG44BY0ESDv/aRQYvXEorjjLYiz3HVCN7l\r\nQeLgjzqHJDTcwTHac7/IyTfd0WY2zmQz8qALctRujnrHV5SEFsChILRzkPNV\r\n6zldhq6jCXgyC630+qlX3TwwyfYV7/aZWyQ0vHho7tQ9l7cMV4OApSoqeuB4\r\nwIG2TFLNFwHjPEBFZMwtILDbjbhWPpQ3Bqh1acDI8EOv93s4VnsoEjfT2DGg\r\ny3GUkcRkR6FGmaJUjLQhUy78ou7Ft/+I6NfXh9gOYgLC4k9TIBY34RujUSs7\r\ns7JlM5mnwldTcn4oJGKsARThK3hlqNlGcbaaQRSIgAA4g3s8uc5Df5AOBe4/\r\nJOB3CvMh+aCMB77RGdvucRuJhg5e2T2mQMxVI7UWs+T3ucPAmZFLDWycGxCa\r\nW3haGj4BKW5b2Erhuo1JxnSWBTq5JsQTDMk=\r\n=Eiso\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.7971d6ad5.0","@material/theme":"15.0.0-canary.7971d6ad5.0","@material/animation":"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-indicator_15.0.0-canary.7971d6ad5.0_1668847479266_0.18209907568247607","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0ae73b0e.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.a0ae73b0e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"32faf3293923c4f1b7c504f2d9f86d0c13de374e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.a0ae73b0e.0.tgz","fileCount":38,"integrity":"sha512-AcbZLePb+E2ZSxAHhAxeCaGAu05+lAv5qDZ7/fiTg2x0nliJrJjMEdHUibPwq6KW2ysKRNRIRrnu0SR4NkVGsQ==","signatures":[{"sig":"MEQCIHWAy+YyF8yTM3s/N1qnoTdWfqLLa5v6BjY6xomO6IwoAiB6RDXT9OBnC4vdnUTkTS1/nkBlB74GvX34lUOBRgvAqw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje1iUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr9gQ/5AW2f6ySDGNWmgo/fESs+JYetMZmEO8tWcAYTk22ZtSuY27DG\r\nh74FrlF9VlTCXhwOwl2u8AdgQbWrQqeyLxS348euDVQxmhba3P8sAlSs4nnO\r\nBCZGgJ77ElmYN2EznJv02eDAOpcflbBm/V30GRGnYY+H5xfr6QhTV/5GyaoS\r\njF5iauBQHrjVAvEuFqfBehLQpu6Nn8FfK3aXY0l7bKvcVpBTKLHkVZJsWWeL\r\n7SS3Y9VdWSQg7UNTSfpDvYTayGRQpHd0lnfFFqFepQtqI7juk69IMAfFH9m1\r\nUIkUu9maUKajZaF21FGFLsxemKThWtLZexIOjWPCQKSF6vks2TuNdt5ljOQA\r\nCj12YDmrj4A2kzp14ZaJ7PlRZk6/5hHZ+Hng09cR3NtiRBY9YCr8YjNjmxak\r\nScC7DBeUqU0n11arhszmSWbqkeCgpmWxB01MzTzFFgzUuGHa0Tk0Qua7WzpI\r\nxwcYNz1/wOP+r9J80p96vV0UxIRaSb0WKDoIY2B3N/k/7oFUnY3tG+syBSn1\r\npa61YGNHCZZ1+y960qL1OLesyQdf6an9YyWYHO432kzPhZgVgRTiA2VIN5Gn\r\n1trpIexwTLryWgMMoJ193aUmxrP7HHpvQeIdpi7IVfZR6V0gqUsogAB0K7iT\r\n6nrReu0FaoS5UfwLY8R0kMzoqoaX3d1AQlI=\r\n=tMsG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.a0ae73b0e.0","@material/theme":"15.0.0-canary.a0ae73b0e.0","@material/animation":"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-indicator_15.0.0-canary.a0ae73b0e.0_1669027988195_0.07396505913055273","host":"s3://npm-registry-packages"}},"15.0.0-canary.96f472604.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.96f472604.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"f6f51506a6fede48c3bfff5b4cd3ce2038dec5c1","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.96f472604.0.tgz","fileCount":38,"integrity":"sha512-SDz8JbP6vWgqpp5OsufSqPd3S2oZeSrvKR3XWSt0sguXGPLK8E16UxdmwNpiuel+r+n51VP/wpQh+i8KqCmHsQ==","signatures":[{"sig":"MEYCIQCkEEVlygeqnxTuKggr5GbEh6LpsCJJVjLLGSEm4YqbNwIhANr7WU0dKfKT9oMxzrHvWG5MHeWjKdHBT3/UorMKftxu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje3R2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrgEQ//ZHGjrgOp/jPKVFTQ++9Ox22wF0cJ4C4XWC8bTpdNNDrEy9H+\r\nn4heH1J9Kj7t1XBBYd1U+ZKyH0EBMoq0L3TWjThpNY2R1GFHjM/SyMi2yu8q\r\n0BaL8NKdYQ7i+edn0Uk7o51fBv8l21oAKgvyhTd0tqb2WWInS0dA6gjFJbHp\r\nPZvQnhE00kwxv5S9k4CO6p6ciqwjeFk3zrTZK1KjT9oYwuNc5oK938pw1TsX\r\n0mr820ldZ/2DbevP9m0k41bB/QLpGtJyNoGPWKwtCsofSR+Twip+5vSGdmGy\r\nzsnjtvCo8/uuHkQWB9xPSrasJPlYTKyr4p2bxs1C+tAQ6QtZadD6zg0wsbqG\r\nwpwbmMr0ZAmnjgzIYcTNtYICRh2/v76UBZeE8RXaJvuGXpmegLi7ErnfQKzZ\r\nXylQWqHDPhL0bLfmyUjaNR8HQsy8wKCEDKq3w644n25OeZAialNoR2yiHpjI\r\nse+PIyMSmZdpYlJFc6OGyvCvrAil6SVxvpXedhdgvmrONIqMLZnvcOlD2uOE\r\nPX6TSPFg0gkIp9T6qABeLIdsz+px20WfoehXxnRaBj1EEHfIlvYeEBkyUl0F\r\nC5S52rmpidp+mISen5Vmo7hvd/PIhhzgwKJ9dS8x7fDymHwCWmiGHT/8Adq/\r\npb1IoQ83IhIjts4ExP24aWrz99xuTNLCcsc=\r\n=bDI6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.96f472604.0","@material/theme":"15.0.0-canary.96f472604.0","@material/animation":"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-indicator_15.0.0-canary.96f472604.0_1669035125999_0.001657979611709548","host":"s3://npm-registry-packages"}},"15.0.0-canary.18b8f31e1.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.18b8f31e1.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@15.0.0-canary.18b8f31e1.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f763e2e472338f77e854841c29cfa623901f18a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.18b8f31e1.0.tgz","fileCount":38,"integrity":"sha512-OHO3NlaDr2p1pjjXFbXm5NuIhUI613TFH+7jANhYyg1+FNLAyrZxFe9ow42ese7W2gyAyPRR+aBV6A8nbeWELQ==","signatures":[{"sig":"MEQCIGWq8P5f2vR2yBegda2pdHrmFute4l83nMcu6jPvYUGhAiBn6G7ip6iTeW18Hqy7LZeJFzMat9WWmoo9bUcsljOcAw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje6DqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp1yA//Vyn9MGuYzKWo59ZL80e/skzfJyUsBftohQBM6pm3xsy7PaKz\r\nwUiyXGgbeZRawVXsoiw6HXhh9zrWK/5z0Q4X0rcWu81teQh1MJHCMSP1A7Ro\r\nvt0oQ28jLENizPZfSz7BdAf6Html1ho7pHW/FqCW8FPP0ijr7686bU8XNvkb\r\nCkKR6y+0oZsAtVYY5wyaIVbNNaWD3P/7BBJXhDSSjUXRsTEjD6n0U78IF+7K\r\nPu3ruUafYme8D+o4ibWnhJWrZT7i8BymtzQyQBNRWEf7cHyxCxFvguO4sNvB\r\ntIgLw4iVACON46pLNyfJi5+g6heawb2h+X8KJCISAqm6gNvh6ubI6bEAQF/z\r\nOJOjrk1UEOBTjsti8q2Si6pQxYdpVq/dLNB5HVHUyRy+QjmwN/rPRNMFFHdn\r\nEy7jg6gc1EnunIOUIjBqPjQAizip2m0x97Va/7MhPvWOtPQMYruiSUMTsXtQ\r\n9pclGjeJImHBKlXtH04qil9lI8RZsVgNtZHvfaYmMfF5XMSSYF16l54u0Y2t\r\nHhfKrSSFO1rwOmGkB737UOqEq8+d2o1WaNi6waYRUCR5rngeS1L379a3G4/2\r\nxLrlGv77SiFz9AGCyeJ3VpCQgmLn5Je68QmJjGAzxwn6Atsztz8J47Gvq8mS\r\n0sWMigWnaEInZiqMeXQXStn/nTNDumE0LTk=\r\n=JTsh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n","gitHead":"99a6c50dcaf8c9db8b49ca9378d7bcc70fa3d276","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.18b8f31e1.0","@material/theme":"15.0.0-canary.18b8f31e1.0","@material/animation":"15.0.0-canary.18b8f31e1.0","@material/feature-targeting":"15.0.0-canary.18b8f31e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-indicator_15.0.0-canary.18b8f31e1.0_1669046506646_0.8509857379456971","host":"s3://npm-registry-packages"}},"15.0.0-canary.912f33ce4.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.912f33ce4.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"5031baf74dee2bcd59fb4f2cfa09cdb25b1a854b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.912f33ce4.0.tgz","fileCount":38,"integrity":"sha512-VQ4GoZZC3zWHqB7v8qakXf5L4D6OJtV8aIKVCCu2B+rGNaFqrmSZhkkxsB+odYFA+vxqN6uRqfanFDj+YY6S2g==","signatures":[{"sig":"MEUCIBDQJgHFbjC44m40NvPl5oQ6ZqeYAlHLNrsCInAlQZWHAiEAjzg26lUdxuuiIqdSRVIqK7AnmCmQ20ycFXb0Tsly1AQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje7sSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrT8w/+KuBR9WPyetObW19AvZOX9k1bpnfDcIFebJvKpyCj/yrhMe5S\r\n3nl/+KEWZ9dl55b1E5TcrVFVBLWJ9GsYOC5s3N3iMjOZD8VZTW9mGU4IreJE\r\nrCeDpQCwnlboOEA/ZqQkKrEkQZ4+ul0FteDb5i14mTBvIcXouP/TEFRo8Fvl\r\nNjYOze+5AL9DuTEVX7kto5dPO68B5aD8c71YE4tVSQ11deM7C802OeRDCrnL\r\n8d1nsAQ562fwPf9XP20VT939bIs1VO9VjB5Ax21nQCaRspKgChXDypVGg4PO\r\nfxwxGYHq4m5qfG70LswM3C+JG3O3sT6cQp8Hx68i5wzeDExdZSmygPUZza1k\r\nFeaTtAuCxiB93n2A0Kjq4HedtJb7ojRhwR2sNrpQB/Ez7F8RfDcYqx9Ep9ht\r\neMeCxToN/cBDl7fhQjh3IumP00GfTZ5wJNzOO+kgp1T5LpsPJHOppcHXP90y\r\nCJPsMuiNFJLWb/P/tLUKa5Hkjw/GE/UZaz3O13jb8yRNLbEkrdntk4McxCYI\r\nG/Qld0ZU74PLgig2ng1KpMTtPAkyEfuYeFz6fogwH35oHlo6Ft521Tkq3X8F\r\nQowMjTmldr2RmW4FMX7SzvdS4I8V5Pe02jvVyuGHIme73iZfG6+zjRGmhVWl\r\n7n6LvdcxwUag0zmdXbYMh9IsGgYh9H4y/ZA=\r\n=S7L0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.912f33ce4.0","@material/theme":"15.0.0-canary.912f33ce4.0","@material/animation":"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-indicator_15.0.0-canary.912f33ce4.0_1669053202636_0.09809991869035994","host":"s3://npm-registry-packages"}},"15.0.0-canary.1e1b1c369.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.1e1b1c369.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"3ce0b0443e28789acc16c65bd9c46f9d56526014","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.1e1b1c369.0.tgz","fileCount":38,"integrity":"sha512-elaqrBzrTObYozAF48Zyi1L2ggsoO1g5vaps2Op/vxjmH+2ogMHC2KRJWj8r0lNzJw4eDU/hN5pTmD5ezg4J6g==","signatures":[{"sig":"MEUCIQCBEhnDceyJzJLlbIL5YGMh00SU6sMbIUplFLN5WS8MVQIgPjvMNzXF4SeyDASOilUc7V74JxCICW+EIR+JbtiMwv8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfm2rACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqwYhAAgPn79uu9VxsjbKPqTa7VuV96651UJBdke4g2vgdkIlM9WPm0\r\nzs+s4ss49QqV2x3a7yfQ/cNfyGiaks8GlyehFSJFnsxWFlAh0Acf8FEhmhf8\r\nrloon55zAXVxw2nrQ7p2yWFg02iPzPngHHbHzzwLUs4L5A7xaPMrHbJa0OL9\r\n6lW7BJDApzlTZZdJJidMfvu1FxUjs7FsFkUAZe0/14Y1IFQ7FlMMkbwBT0/u\r\nongWlv5aCAs1kUE1uqGLw2gYVY97jIMkqY02FM7MBcue34+I/qm9goqKL+h9\r\niGPfs/l9EQiKts1oQfHgnTstkgoRH8s6jXsY9Sdbpn/RUoTzy1YTzloITaK0\r\nPeikrzlmaBGSzN6LcgZMEB4wys6fgekn2NYPZxIqz/dPFKoxZEMxBfbLV+Wp\r\nc6nW+7czx5/x5BGKSYkoYMz1+OJpqVw3c6XyN37ISNQBChfXwAzFIDr7cY+m\r\nhT+1zRG0qlIPzhMpAWOTDyxTwuvFRW0O0kECcm89z2BKYC6rbkGRWKIJkxKK\r\nLzY4PE7ObmoJihGr2adExpep2a5l4/ERYnkb8aYHtwSWMsMI6hOUFwUZSydT\r\nHD2aJDbSjWyVbSrobcAbXVAIlNr+Iob2glWGFq8YogArpPYYADSGlodfjoRC\r\nNBhLPJLBvNKN6F3NkOWjeeP0KmClJPXGyzo=\r\n=ugKb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.1e1b1c369.0","@material/theme":"15.0.0-canary.1e1b1c369.0","@material/animation":"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-indicator_15.0.0-canary.1e1b1c369.0_1669229995563_0.23237447286640212","host":"s3://npm-registry-packages"}},"15.0.0-canary.a2ec49244.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.a2ec49244.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"d6a68bf102f4c8a8bfd525011dd2a94fe01fccac","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.a2ec49244.0.tgz","fileCount":38,"integrity":"sha512-V2AeFxz2dIB9g3OzKlnoEBRr8TtFvLdzC2jrQECF7V/N0jvCH8sUwt8rF14rQUHDYbp0PD6p1Fg1hyNx3Nuwpw==","signatures":[{"sig":"MEYCIQCLkanMG4SFovffRQ3Q6lv6MJqXR4/Basa2vRAooOP2yQIhAP7QV/sXCqL09sXfX9qA7nKDO5Ie5/EDQ+TkktxDutmq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfnTNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqjIg/+NJ/EZjmFsQKasN90/Dcl+sFQWPv2XRp/3rJMzRPfPEpmrTwh\r\nUShAw3K6Td0gwc0v/CVGacGOsQQb++TywEJVm3ieWu/74tB+JY/C4/4bz9xv\r\nE+s7wMkKrm2RRGc0R5zRoNfE7zGohAOFF2hdAB1jtScbXhrBKZmM90eKjVnk\r\ncPE22a0IiA9Cl2BRdDU5srrjekWSfVYs7eGtuk7TXQsZkOLGxL0nHF7dVmwJ\r\nHSD9yFIiflAA6licL9tRJM8ltVdpVMD5hAYXGtelSZ53fI6Zf3MLNWv8iiEs\r\nyyES8p/jSjwdozHlb8k8bh+IUCwODo2csDsUI6hftzkmQAHykHX/wf/j8tD1\r\nTQLu8o4nDyoD2VvU/KlLs4CBSng2ESqwZGbuUUwQ1F0DZGYK06DGvyCxkn9Y\r\nYgo2oXBWqjnkmmuxK0ev4BNNCba4p42U8znR3Nfy8IxIe4b8eKpDq3Ht/Cll\r\nXfo7UIePC4x6TkrUUmiVoXaGmfrs6h22tuZHLhjTpcDRpSGcqjG30/AyBjoa\r\nuD4Ngu0ZYGW4RT+p+frOJVlGUtMAs2/R7A+DuwyLEm4IQomIA1A4vV2UeI6X\r\nIXrxX5NWJedVbd1zcIXejpz0GWtdQm/+B9pozQohwYmicndGEfZfSghYgJXG\r\n2I2rahcClMEf8fK9Zre49xtXkA7Dmt5XD4A=\r\n=F96N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.a2ec49244.0","@material/theme":"15.0.0-canary.a2ec49244.0","@material/animation":"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-indicator_15.0.0-canary.a2ec49244.0_1669231821442_0.7348425428737746","host":"s3://npm-registry-packages"}},"15.0.0-canary.a7458ba0b.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.a7458ba0b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"fefe39e79e208fcb082bc6a1e1810aba79e8ca0c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.a7458ba0b.0.tgz","fileCount":38,"integrity":"sha512-Tuxr1tWjvAnIlxx2SHW2BEJJ/wR9tNgqSZPPw5GOcRq/Vfd/NZpIPjXLw5M0zOErjYN7y4vKVACD24GswYv8Gw==","signatures":[{"sig":"MEYCIQDx+N9YYYnRcCZV09Mns+TgqQjj1WGhz/mh+Vc9y48AxAIhAIajAhAuJ8fCw3mBCFvnzW6WecRPT4CucBdW6C1ST008","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfn93ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrbYA/7BBU3liHJkyYoPh6ZCAw1KB7DYZglIme+GJboHGtNtIJaUs9Y\r\numfF4570iDav+AgFvhkXgca299XOr/9u8iaJ2tfyGYyzm81PfqWHNbUBXMX3\r\n/zpg3ADu/gK0mMIt+46HLW53ftJMGAOo5hL+ffx5iGUPeaXve8HD8hdMng/K\r\nSSVomZKkT/PmyDnVWq8+e5GRSy/f909Xio2dkfvElwihQa8EkQkK1+uOz0vA\r\nWiDK0zl0Iaid3LdpQ57vQTBkW5ZYJjxSnedylOEF2m1W0K09BAYEvgtr8xzc\r\nlQsCLlTxuIQH/w3QY+OhRfwKpZ/O+vI+GI9YcDaAjzRMpvcWjXzlBHaIdTek\r\nLjFMW2hcUkBuXJHUv4CYSNW/Tz7UiwPodayfLT1TwrtEdwgxFvc/58/yR8PU\r\nZDGCzVntlxKnkfpVvqiMxfJ5ZLSo8KwgaasYUs6UnDT4cP5sE1gHgBgv4vhL\r\nnLuGvKiTPscQViAHvZGKmWmMeV5qn+6Ax9Ke2TJz+xeG+SsItB3odDGJHX81\r\nGPefRjJnO59lBP93SJKu1qIUqbz3Y+xcXj/nwuwi5fpuVunGVZklAElLYOsu\r\nB2MP+dplmSCkbmQgxXAioM4utOotAbQzpbat6A/NvkiC9d7qae7uuIFmcAvh\r\neLkx8sTr2oTXp0NW7pxeqOr/KovX4myJjnY=\r\n=XI/L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.a7458ba0b.0","@material/theme":"15.0.0-canary.a7458ba0b.0","@material/animation":"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-indicator_15.0.0-canary.a7458ba0b.0_1669234550900_0.78193051809365","host":"s3://npm-registry-packages"}},"15.0.0-canary.7c35e5036.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.7c35e5036.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"6273caf1cc626c584ee7117d911c74d381a6f3ab","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.7c35e5036.0.tgz","fileCount":38,"integrity":"sha512-XhMTx5+FuL2sotUFcExWiqNWU5b+Slo5qjH5Fw4XPnJIj4Pq90IGGrmk4ktK6k3f5cmACo3bSfqPXGtJm+hYhw==","signatures":[{"sig":"MEUCIQCS8vmb+KmMfbm3Aue2B9NbZrFeaObzDWOPN1zxioU+TwIgONLLesxW72XuxI8YJzkW/DM38vfPPiL2N/Cbtc/or6w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfy2YACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoQ5w/9EVPrkmXAL+qP0q+sV9E8KOnNhEJWWmbkVUyZALKRSARE6+ll\r\nDEclzS68ceHrY46d2hr+A/xczfxAIO2i/N2vj6eTM5ZTC+fHammq6tXuM89u\r\neUYoStsBnZ9fNzBngrdsqN81NBiflzh/M3KHFkMFVRy8AKJTKw8O2BzcwzWO\r\n7btKmjlkzEw/mQFeR6TL+o9ERnkLpOZwuLxV2uTQSMR7C5ztX1s2xhgLx8/L\r\n+q+oYG9a9QGrcsaK7bpfhiVGU+r4pAyiCHkV2hLSjvpbFgHm7Usn30lXQmrM\r\nt49IJ3zYfGP/l1z4yvhIgmFziucwgKt8m3NnkNaFCkA0UGCOTD7n895GRwB0\r\nkApjcMIqlIHTP0Bg8qUhZ9Sha0Q6O7fMHVhRMt0lGmyg9SNIIuCP5pitEVNO\r\nYWPN8dTaDyElA8v5WLiqDnLupWUfGgKiWqPxrg0gVwLdkBg1/pD7aZRsLdkN\r\nMozDSSA0Z7+ssXfEpMsE0fW6HZ9+XJCDM1d6uAmFzdYOZOR++56dvSK5QaXT\r\n6V5eRxYhcTUozK3BSL/TtHUTwdp10bYEs9r1YA1lPDEuYvOCH8Z7DPWIzK4p\r\nLCD+FWXMHz1jAlPxY+pcfOSpuPJg6jVgw3z4H87JL0Ar6mNfRtIh33BeHTLY\r\nTQVt9iA2q9/pg+6s3V+xIUFsKQxRqZWoPm0=\r\n=aZhV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.7c35e5036.0","@material/theme":"15.0.0-canary.7c35e5036.0","@material/animation":"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-indicator_15.0.0-canary.7c35e5036.0_1669279128032_0.6915535970770008","host":"s3://npm-registry-packages"}},"15.0.0-canary.4356e05c5.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.4356e05c5.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"7049e4831ca3553617ceb72bfd2e4e1aa1f84e61","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.4356e05c5.0.tgz","fileCount":38,"integrity":"sha512-JgY6GSlSxepFSf7irDOeKl8trQI+F73/fXDT34GuG6n0vttIvXDon75PcKE/RPtnHsPkEddips2/qhEtionS+w==","signatures":[{"sig":"MEUCIHt3j+f+eV3pdMKPvIgJPW0JNUnEZbbpomzjdIrdjyp8AiEA54T89oPJfbT5jJ0v1AA/tuVjL3wGyrO6vtHrbHmU1fg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfz+4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqfsBAAi0sy+0CxO4Tp//zJYan3g2kq88jvIwJPWP5LrhG9lJ/p/zCW\r\nNIXbN4pKfZnyjuBH9Q98Pi0SfvHEOY6cAKytmB2iePP1EPZnn7mRxHg9+imG\r\nQqJQVLA5NU8FUJ8Fr0EtMFFFRlanJIOL5svHHSibzJBXujxk8/JqALjHwZ4c\r\n/vqz3YDMLm9gELUGxCEXejD6RICafh8524frlPIZBZjNSmvmjMskbZAJGGyO\r\n+Ysx6ou1BXYMOESdbUvAK4e3tOSN6wQGUKmHiFlCyL0IKN05vn0lij2AXdfv\r\nqxRnsnm0ju2r3ukarJu83iYpEgYKshiIA1mpBtrnVG7GiSvDPpo7dFirMscA\r\nwZAHREUhyVQcXgoHJL7/KzhxrwvZytkkB7rpKoDd7sdBCDY1rzXxeKGZAt4O\r\niN8TqGfxR3mcyESpQODO7yglKA9/wo7OPH4ob2Xhx5na3L1N4WF8OYt/MeOq\r\nGBtM4pdFBxF+4MGWRVgXabezj7rUJYZDiP+4rUZ4iikXyvfhCFOm69MQCGrP\r\nggX3EEE5FzXyyIex/9Vtpysg1kAzzBzo04d+BSf1XhBYncofrgKB4aLbgrjM\r\nPedE3zxQZ8nuTWUKgFOcQ7jpXe2BFHSgrHEkt4As6jQQcro0kN+EDGFDHahh\r\nLgFb+XQHcRya/tttxBusuN6GcMO3AqU1aQ0=\r\n=Zq5/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.4356e05c5.0","@material/theme":"15.0.0-canary.4356e05c5.0","@material/animation":"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-indicator_15.0.0-canary.4356e05c5.0_1669283768645_0.6886403271802879","host":"s3://npm-registry-packages"}},"15.0.0-canary.cb605f8af.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.cb605f8af.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c8f8573d080d2cddf8246c6794fd84a691cb47a6","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.cb605f8af.0.tgz","fileCount":38,"integrity":"sha512-MFyvf97xq75iCAAdMViIYcM7hczH1M0+2qNqmGtmr+ScGkvp3RpANwCP7d+SNRx/sQJ2rTE48ZQ1I8/Abt90gQ==","signatures":[{"sig":"MEYCIQCt5/Lf8LwbIY0RU3edXjRM2RKK+y83BTFVJjuj7C5sPwIhAJnWRT07xNYCQOPukw99Hs9ozUnbrwlaAEdXynuagYQw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf0QXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqdqhAAlS0Eq0vYuMyTnCiqFiQ5Dpr6BxPCIskltbcvUNBZnrRhmHeU\r\ngM2m4la4sMKNoG2u03JHC3+knTkYbE2FZODTtDHUqm0Zxnr2JsacFTYdiW06\r\n6XtCf09+q7LfrvhWjSNmGq6Egv+nAB4I7fWz63yUSsiD0D7/txgJHHWHTJ49\r\n2QrkJLoAEk1BFUCE2+wCzQDpwwnrHiWOa1aZnSVvxxAIIpC80E6gM7LZPLYl\r\nDp2oE+qvxURup8pktas/YIoc3gAbTrAoz/Y4hlw9lk46o4RVPTnLFX4Q+hHK\r\nw5oEbZZ6UxIwdXRet54gbHm9FIGoj+FdKzz3dW5XX5HuVeDItKCHp3TfyLJ4\r\nntcuVU0QNuzBtMpedw+TwWlZGNm6jBpnjOX3UIxPi5Dr+vqpC3mjliSsm3YN\r\nd5p8SIsGq4jaM0QbtB7DmC5NDMuXdzFTFZk5o9qKl4eoILsHkxveGcig4vpR\r\nA7C9VO7Nf1HjIwAAfvt+6YKQl1yoMsXSbi6SQXKv9uXCCxV8TcVKqSpz2i3P\r\nGfDGxtn0Tm9jMXY8u6PxVYa5twxVXQuY9r0fBXsGNpL7wJZxRqfVqFGPJ/NI\r\n0YbpU15qieuDk+U7k69mlRHTzYVo/vIzumklPGoSidB0/dfU5toN70TZENd4\r\ny6z1j6KRRnfTugraz5px+LiS4d4wEhkEvts=\r\n=6gvZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.cb605f8af.0","@material/theme":"15.0.0-canary.cb605f8af.0","@material/animation":"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-indicator_15.0.0-canary.cb605f8af.0_1669284887629_0.2070372636886162","host":"s3://npm-registry-packages"}},"15.0.0-canary.05fb07f9f.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.05fb07f9f.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"d4721583053bc479c23dd3909ec38f5b74d5810a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.05fb07f9f.0.tgz","fileCount":38,"integrity":"sha512-ibjiQTSEZuGNKkAnxlDcu5uUtAcY9Whb9xvCsA5JxIILf2KUQWmR5d43tNSpsCa0Q6rUyTH5K4wLXFH+QPMWRQ==","signatures":[{"sig":"MEUCIE4nUwjNv1cQZabxkNoBOBa6srwMrxTX03aREuqylo73AiEAugjsrxxI08ltGtuRbcoM63remc2yQiHPiYKnXf+IShc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf6YmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp3EA//YmUYK42GNI27VrsoTraNluQxyRKzZHjCe6+PvgZAoNnDRPWE\r\nOJEMfPj44hIwEtKpgh+8Cy5RvKJTb59clkXmxkztHtranYz43e/WL+EzcEnt\r\nR51oone9xUGLL1nRiVQY4ZA5+j3SlFSXfAgX9Vc97LtNVQVJpOUe6CghLYDS\r\np789dhKdZX0JmsCmAy+cCZdd5WxgGATmNA/9EHjP8Dbk7drvfEJinLH1Itg8\r\nISBlY6CUH0xaF7g0oR/JTQhUJ4r8ti8QK5T4um9AhHCm4vb35OnjQe+QM4SH\r\nAe/eE5jNPoXPoXuMFtAXdacZ3nRPjB9DOldSz6ByrAitNmYGY4iJhnUlsFZV\r\nJyY5mx89xnhiQ7LsKm1rWxQ6JLZL4HZvwBn36aX/hO0Rnu4xR0AaPUvUpsgh\r\n9mqg4ftVitNYSbQirVeAER4cjLM8v3FfsdYYHVtOw7cLkmn+YMcZKd4vo4sq\r\nNm6tPxKqggZi3QW/uJMf0XpJQqYhWTL2DeopwEFVuA31xBbMnzlwj5wUXemb\r\nBnyf62T/duG/GeFz3fHDqDFfn52vZVFFqz6yEtE89JJxXnOoosNzz1smJggH\r\nfCcZeUc7Tm9IPxBH5NElSuWW3mcCdbKnyVxebYfePpYG3oyNuKRuLnTsfql4\r\ncPSmbkiXANQBCuOoBTAvIxEu4AlfmlhZzd8=\r\n=3KF5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.05fb07f9f.0","@material/theme":"15.0.0-canary.05fb07f9f.0","@material/animation":"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-indicator_15.0.0-canary.05fb07f9f.0_1669309990585_0.8906839356239511","host":"s3://npm-registry-packages"}},"15.0.0-canary.a911b386b.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.a911b386b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"21856924f2488448032f63675bd5dda18e0f5387","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.a911b386b.0.tgz","fileCount":38,"integrity":"sha512-g9T0sm0RlgYdAsbU9Bw4BgG5yYf8INQQyOhMcZtXrel/5ArBYTGi7Rvlcv56SlVJEfUqFqMh70ytEYrXAJTEBg==","signatures":[{"sig":"MEYCIQDjHUlMWS7zg1WwggDKi763eK/6+JBjSwgcguZXZET6mAIhAMmbcrbNLILUWT7vS0LwprhXcr5+vwuQ3L3VCYfzpwQk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhOX0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoLGA/+I5p4YCrJyt+939gIP3GFF6AKLOs258Ybqfd+JR8vaZEZHT3f\r\n/hrkwsSxIGHdfiZxRUKHdWlSHEISQvFHvXKAe5RZEnyz4JcnO+rLODdUDDDv\r\nIj7Kdp2RBVZtbgr0dTwF+1prodortFc8FuTVFoXzDI1PulMZxTgK4lvTQ4N7\r\np8WbnkmgCcWzteaVr9KtvDV8sNfPoxqrU/RHPBm5QuYxKXqEctKYbdTEyzUB\r\nZp71j62flBEfzpCr3eZW4etjXMbFtNBueQ9x8KzuaSwqZAPAJYpPUSd2/LuK\r\nYRaelzYZHGSigZ3pSL59qxUNdwtRn7R52jbVeLoDTIJPdb8nj9WAst+5ZzeK\r\nCSUqqmGefYCDcyQPerSe1u7yaP3uZO9cOBPiB0kHbbMih6px9Q9m5fHxeDMy\r\nVY1tUIDDRl/9aMUXUkqCY6Q2iVVAJq5AstM5kt/1vXuIF4enbpr+fZODNmpo\r\nsra2ffwi4Mp4BY1oZ5/goREWZ9VJ9dNKxsylATM4xdXxzGkP8XIaSF48mXV7\r\nqYKUx5Xd2uFfofbk+LtcMp3MbVEoKIi0ahNwSiEqM1Gmmf43bMAfe9z7ZWCH\r\nfGaHBilYTfukcISxROzUA39BlAwT0SUyD958ijw+M1owQbYSN/UruAkXUUko\r\npiyJ0oRXQyEBpQ7N9xyk6bT0U2lgJucgTFg=\r\n=f1tW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.a911b386b.0","@material/theme":"15.0.0-canary.a911b386b.0","@material/animation":"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-indicator_15.0.0-canary.a911b386b.0_1669654004710_0.5540451316319692","host":"s3://npm-registry-packages"}},"15.0.0-canary.2aa8050b4.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.2aa8050b4.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c467241ab60bfa593a208ccd0e797cc061d87a3a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.2aa8050b4.0.tgz","fileCount":38,"integrity":"sha512-r80WtkwaRt/vVojZNb0JeUgB32pyy02Hqxjczty6xARGR8gd1VlieMqhJfz5mZa4W/Wn104ET2s+nhkK7lgBdw==","signatures":[{"sig":"MEQCIGHumGSrc4fpgzN+N1YxHxtbLhJeGCUwQbtJd7u7MCwAAiAVqrIiJcscuVndjhPqQ21I2RdxddV/Z3yb9SqswWFdeQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhQfDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmojBBAAjB5btnVryupn3YpDD9K10VjV4X1Qt0gbofWb9jlabMg2SGbd\r\nFdvyT97UWweiAuph0k1+QcWzWTHJIF9rAUMM8Y07g/CnFe9kMNmvZAJhKVAW\r\nBmyU3xGVJTKD/6vLQDP2awLPtEgglSgdwsFarI9/H2+KBT32ONAj9w4GzWhQ\r\nV2oIlOs0NNrF+Gl1G6dAxMdC6EGtk17PRtVnhWu79DJxH3GXUwiVVrrK6E6a\r\nTsFzo2XO5ek6NlMK9Fuji2XvgmbGwlOUYVKf+vnFSxpCBajQA8xBP1kkyhVZ\r\n3YT3zITInSlQHVUsTxK9r0XYgnwpKD6rurxnetKA/CDeAonkMXK8AvgcS82V\r\nKg+3GjIRe2L/LvHtC2i9fIS3IeC2nmdsqK2sx8kvrLbPktLbZYyPdqX3TwzX\r\nyEpFea0T0lQDTKfQpcdY+5OV/qD2pxGxn0SSeU4N6jjD9eNxwXvCQy8n1LtC\r\nJ804D+wMcfGi2QyN/S0WkAtJab2vR8YYB12WeRToEpb6BHA/eePYy86LPW+2\r\nIXmds85vmuE9ypSlbrEAcnGGVnKDC7Rx1v9UhSMShb40DAHdnkJXWrddS4mu\r\nCrnxcXE9eHVCIRCGByuIkz6M637a2n3Cand0WG9XN6Nn+/yT/dlTWQ6lreh4\r\nGWNquYy9BhNNbFzWHMYO0jDWgVDEDNsck2E=\r\n=rQHy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.2aa8050b4.0","@material/theme":"15.0.0-canary.2aa8050b4.0","@material/animation":"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-indicator_15.0.0-canary.2aa8050b4.0_1669662659318_0.6040018619177097","host":"s3://npm-registry-packages"}},"15.0.0-canary.323904a9f.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.323904a9f.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e517a6aeaea810b01c7f5c250040f7ad7a8554af","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.323904a9f.0.tgz","fileCount":38,"integrity":"sha512-3JvGpFflfmFK/ETYqmD8HdI4v6KClHHphKDV0ir5gMufuzlrd42K/Czh+WkhZie4b9ZzlhLq93IfYRLEne7Ulw==","signatures":[{"sig":"MEUCIE9D6VmdZZlFBgL2x4k6lAchrZVts3s8l6cxU0m/rygmAiEA8wRwD1QoDP9eiuaTFccFb52YbBkNddjIS5eNBEa8D0Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhiY8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo7WQ/5AYZvbjz9heNmH7isLw4LCmm+cXyIQQjZehG2/dk3wkhyCimR\r\nNsKeuKmwN9tSqkX05KWRogTGcHOsJIRxyyIUXWLRM18v7bgh1Jo26zUQorwH\r\nKnFcsVZlb95oQYxjo2zJTTrkzx3KzFEs0faqpVra3R9dPYrHlQP84PcV+tfU\r\nvkUonl1kiihAYRd3M1ih3lchwcKKvWQys8R7jjQ5i+AWa3F1D3DFcgEBH1yh\r\n8qyiI2N5m+0EB7q32fIUJMyaHVSTDTsIWW/6LB1cJe7585bWkUJRC0QFTpAe\r\nK8Rhr5jiDbuW2axQY1TZCvSiZE4g+KK+6yWJpaiS8uswa/2PZVhdz0cbSsun\r\nKyOwwp39Znrrmae9gSxBs81GfRYdYy6zfalV8ftSgzWkROVksBrTE13SoSkl\r\nqsPObrehXJmsLNbRWQ/IsBViGHmLPVyxLqFYdOE9aH7PJLzBAdwo7pDGYJVi\r\nH/8TPHYWDenAey4cnv8KKGkAfrHAiThsacRnr3Omo7MuIcEGusSqM6m14d0Q\r\nD66kziY4DdaN/xsrAKokkizLuVHMtewcZI9ocK8PkV7ibskCy0PsonaiFTNn\r\nNk4/NqId7986SFrdGbwEB1ZZi8hAi5lKdY0Vp6/dbSsMlTvihhJbQgCPzktS\r\n4PJXFB09Qe7g7U4Zq1kMZGsGilM+soa/TBg=\r\n=UeQQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.323904a9f.0","@material/theme":"15.0.0-canary.323904a9f.0","@material/animation":"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-indicator_15.0.0-canary.323904a9f.0_1669735996415_0.5169403911309485","host":"s3://npm-registry-packages"}},"15.0.0-canary.168a629a4.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.168a629a4.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"b6ad17b7489ea15857afd4b50a883c47546d8a5c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.168a629a4.0.tgz","fileCount":38,"integrity":"sha512-Z5tj5up/WkJ/UkoKlBlvEeRf3MwkE21ITeSANp278pMSURD2ucLF7Dbt96qr2SyLj864QUWrKVtVAhCNeStDxg==","signatures":[{"sig":"MEQCICSeTrXJZr9t3vCfLwnKtDW7rJ/Y2mvTkR5JEruIe1NhAiBFo2m3Rtgo7QeRZh9E7Cnm2ParEp2DHkiUtklJqHk5rQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhjfLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmodRg//ZG7CUkJ6rfVkLPP5OVi3yMXIHxW5Nx61l/Kp9G/P1xt+c8rw\r\nE8qE0K7rU+nvKyq8PL8plRZanwPJCsw/7VUHoUKEPxRi1w/pJzFw2DJQI7II\r\nkNBX1TU7RIbx3hGWMaChXSlg9h9m7nfEZIEDxaaIqvMamXAH1L9Roaxqewsu\r\nAdNKEy9TMpv2YecwPIWlYHs9+zEZZma80yLr+p8lH8B1RE6cuxLHlr6MgZtm\r\njVN9imPU2jzJpz8ZhbRpKVIFCFa1QlWlIlSBZaKDsjtaEWdaLHMmxeDWoXf3\r\n1o4oWGG502bF2/WarX2f6rhS2ZLXqiY1lk+na/rGkestWION7pLLTGPvZ8b4\r\n5LiGJCM9DLxu/iyAvWYjNDk6wceahFTjiXCkzkgfLM1EYlMuqASXCyj3cy0R\r\n4LmOaWMKunqqskSxDozZPB3M7rCPX96i8w5aYXRG5PAV+tKh6cKgUJ90/fd2\r\n3hg/Fl/8kMhnJDIVNydyn+xIP5yETnlJvQ31ZnanGQ5cLLEU4qmTu9UC+B98\r\n+VLXX34Wnh+pecbGkUmQhya4iv9m+J6agt6sSyTg5k8BW2+AddFqPrDJqeSD\r\n5PrZiHYjF0tlSE3S5/lwg1NvYv9OwMrupNwIstYlWZuHsNFeC9+x1MLYi89+\r\nh2gpEi7N40zp1+V4Bzza0T2WUl1ia+LLnb8=\r\n=22QH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.168a629a4.0","@material/theme":"15.0.0-canary.168a629a4.0","@material/animation":"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-indicator_15.0.0-canary.168a629a4.0_1669740491753_0.9755612181193611","host":"s3://npm-registry-packages"}},"15.0.0-canary.65c411674.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.65c411674.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"6c5e3c1c7e054052367579d387ddcea5bf56859c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.65c411674.0.tgz","fileCount":38,"integrity":"sha512-trNOn1R4oIpihKEw891IsIep8GxE6sgg6NaHWgRbHyHhHE5XD7q50I/KodbIXuglPrCq+U1db/KmePXyTkgGMA==","signatures":[{"sig":"MEQCIAOkeiUVhH/GSvKbjfnDKPuQIA6luxXCfw5oUxV/QHMdAiA/7P7SZer52aYO31WrAhPipjrs/CMPXeh+s6V2tu7ZQQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhkNhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmruzA//cz3Jh9hBL9SzcBfgaojIlLNCUtH6CAsQW/WEPrA86vLAtY1r\r\nboKjhMHkNQyjhIxyFhgxpWBroAc2ga8Lt7zbLD4Br48keGEd6jHV1j4Wpl4i\r\n9cz+iVQIJCGv9khrJjo9pnob6gWUqCFyFEbinFPrkc7r90GlMYYHNasV4Y6k\r\nxEvgm0MFX/x8ph+M63Suzlv2gAAc26L0Qwb1gFidzWxyvwDz44ngViGRij1x\r\nvRXyWNK5crkCeGD0rOJUiAvGUKrUOXGJ8CoAAepDH/Rzg85o8aGeeCgenAJY\r\nWLFICrXKqNxRbXZoCGe5wT7vG6xE003wwDheFDyPULEtfPgiBlo8RxStBzxb\r\no604V0kle8HjbA43PLHM9jIko+Zkz9kIxnxOFThvTRbXos5qhlgBUGfeZ/MP\r\niHmwUWGK6dxB/aEQXEU21jrS6GqRI5lcdLZ9a59ByyvrQrzIHPa2WLPbTM0D\r\ndqe1dnLaKmAO7Bn45In4YiSNy9I754QBwKlIpvLKWoh2yiuSXU/jl3/yJEtI\r\nf1pKVrmCXw+pWAxNfHoK/ZeQayRKTrlf9FjO1+q7Wa6OqNpb6okcEnjs+FeG\r\n7MwfhzzEtKl8wEIglpqqDZO/8VZk+kzMrnAuF7SKTxupn9a9qs/np4jnrtE3\r\nuJDqNZjp5Zdfv7ZekT5S6RrDNHgF8+FjgC4=\r\n=U5Qy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.65c411674.0","@material/theme":"15.0.0-canary.65c411674.0","@material/animation":"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-indicator_15.0.0-canary.65c411674.0_1669743457442_0.5104541070245623","host":"s3://npm-registry-packages"}},"15.0.0-canary.a86d36fd2.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.a86d36fd2.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"30d8da84d276aa6485ac4fbbbc117f55cce87f2c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.a86d36fd2.0.tgz","fileCount":38,"integrity":"sha512-t2zAMCeJlN2Y4P+cX8htFDtSizS2do4X7zTSyhrJNBDl7BXfnsAEXEH/xvdqjLBG15y7XK+JrWU8jLv1R6XDlQ==","signatures":[{"sig":"MEUCIA237BvwljPEjhpg2ISPm2EjEX+pAEAq3dd0xiZRsjQbAiEArEgroof2hOiy2BdrQ0xR0t0gwV35X3j8EWyyKVX65a8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhrxOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpbcw/+KWLr91BdUmvfxP5nhtqm+NvInT7CeofMmR/g8P3Qw862hd8J\r\nZ8wWNymtJxOYwQAYlcoOnwvQRJovot/E2Cm8jRNvrEDH21+XFUVZOY0YzG1j\r\n4AzRIupVQM5OVwhxNK2SZGe9MsrAF7xVFBq1NJqh9tXwIe9IQsYkZ8Hn/epK\r\njmeHJEEmnmk8PRWR+EbURYuE0VszszDFF67hpRcfOdXTnkWUB/u2tMTeSrFB\r\n41ulzyuA43d0N+W7BrqRBbC6ZfdkfYEvxG0o7nM/ObZHTYlOAT4dirRqoWEE\r\nVgD3poPd/BnaGMBU4UfQeAlQPbgMCTIxTzeTOoELhmxmgwQvjcCNddqE8qoO\r\nNp2vnxpTt6Ss9lInIwxDup95zY4BZUvtLGm2J9k24em/N+30HRJPJJf9Kd1M\r\nAT82c2sjVOQRLSfecHJQ4lw69SS2hnql8NK4dVlWzy+I1bVXRjleV2nnw4mf\r\n+PbgotVE9rzz7eLNbK0TCkeJ+YlS8g2eOfTVRHWdFTsJtC5gckrkPxk+rHUP\r\n6diBW2611hmKk/kVyfS4i1pKYyra6BOucNCFlDYdP8oJn4MLpKBuV5oayPYy\r\naEpVpC4dJSmMP/HeVQma5+8qeQuwBzkA8dY5o2nnYKikgHwrqjeLPNRQzWhs\r\noXA8lqUa7cxuIRQj+M7zo4+zKck+bnMixIM=\r\n=2yVo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.a86d36fd2.0","@material/theme":"15.0.0-canary.a86d36fd2.0","@material/animation":"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-indicator_15.0.0-canary.a86d36fd2.0_1669774414786_0.2954801804008622","host":"s3://npm-registry-packages"}},"15.0.0-canary.3a1f46c66.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.3a1f46c66.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"fb69827f3c1b69a34d24a4d5dde0630473b33342","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.3a1f46c66.0.tgz","fileCount":38,"integrity":"sha512-D/5oe9k8nEm8UfRnxYfDvWmXtgY+yr2Va20XmyKFbzaw2fhWPFm+SGOK3w3FFKw3I/TWz4PILYpyRYcV3k3i8A==","signatures":[{"sig":"MEQCICB+BsAQHTg21d9HxArf6J1VL1ZzIs+ZE4qngFJwsRVrAiA6HkxVvD1thvjz5SK4gwcc4HAOy0sgD0UTsAqF+yvY2w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjh0c9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpGlA//aedqk3OhJv+ap+w90ONtrXf/Uab3OdFE2KiiU2Q55GhBst2S\r\nbgrZV337GYmOu0z7b4dj6SD4RM6KmGP8ZgE/ILrPKuoLO38jvSzHKVfQ22eM\r\nl0P9KNNebLEWpNfeR7GZAzU1LyvdsNzw+uu5T1JbBUWekQ7UG7bKUdDZCdLm\r\nAHalo0OJpPkQ8KKPi658Ux5gq3cM2SrBH1DJjLLnaSathcyxpmmpPOEb5I0P\r\nPJYg9wNkGLavSNIDew8nb4MG4l5DiRFcQa+dNuDw2f5Vbx7kfFX4EQjT4JBX\r\n3itCQ5IXod8PJT1qxP3oMsUPx4SuMzQ1/UnLDXVJR93KR+IHM70fs+mjVd7O\r\nKrDgN1CXZjvIStLlBf3n7bdwfk7Vzzwoebm1g+UoWt6ZI3wzwvaohjf5dNqp\r\nerighXo5ng2uIaD6XarEMUXiMnHJHMWA+6j0GJqk0fgRzWDMaK+2LlAQm2Fy\r\nfnYTxjQp6oDQPO0Uf4tbLaX6g4zLHKhX0/tX45StKyJlsDpLRwaSKm7c/DHx\r\nGF32xPu0qhtwmZR9muEtKovnYFfCzW99r9YvUj7pBXTMHFv9omQurWIGZXKI\r\n4abf1nqTfMQJ71ymWielfkhC23HwK9qk6ZT9GW99wAf5y9r6a6dbDuvDk6Sd\r\nAE6iOgYvV6Wies3bI3XJoqaifvJKsIPm4XM=\r\n=nBJ6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.3a1f46c66.0","@material/theme":"15.0.0-canary.3a1f46c66.0","@material/animation":"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-indicator_15.0.0-canary.3a1f46c66.0_1669809981246_0.3003233211840892","host":"s3://npm-registry-packages"}},"15.0.0-canary.32d8a9648.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.32d8a9648.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"715eaa0d642755e9038e73a7265707fa7292ff2c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.32d8a9648.0.tgz","fileCount":38,"integrity":"sha512-oosEBunmcTSud0/bWnNvHOwLsPNqLxtPQYzi2U7TRAcCdy6W3nqqvSylrnhJaFwj8ig6iaY0bqQkhyydVDscIw==","signatures":[{"sig":"MEUCIG9+lRRdR2EISYNwvwkKFskCziZINRYc82T5zb3d6JH6AiEAoX5rQpSw9Srua9IMTLbfnBh4TSp9NmgpAoVV8CwsY6E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiOQ8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo6EQ/+M82pinP8qqHigGwTCol/ixgeWnLUu1DwvlJH4FoU4DHJHhr6\r\n4NtMN8WueZZqaMi5jeMRQLVrhACWK2W2RNlk97bC/otrjTe1sPvDIU15Y3X5\r\ncHGNpAgxx/ii2uKGlC32m4VqJ5tx5v6TULhX9FWYT8jrniFcxFV+ch37gHQ5\r\nmPQNNKGobnWOQ/k2225C0Cw7yqHW725QIUkCziVLrnA6fh241+gdHpm7+pIn\r\nEvYvGEf58HI2ArflOFQgrsgXQkWm1nJmX0Xv2oIaVc6izXuSogct7Z3I5Bee\r\nYMI+UTdbGZgxyfyhktAMlmcQABtMoSmfgN2oiwpaNT1CyRfSiFHJdEJJRWZy\r\nTUVw/h8VZsz17PHgEjAaI3+Sh2C5jYA/GAvmTHBdN9jsQ72IJh/Cm9upv9US\r\n9ZlMDp+KtYyL0L5ls0uEOS6IW0BdWSsviwAQMN8dgqJJYT6CvgQaHfh05yr+\r\nnhD5sAiKDjWq++REDoAqgowWMZ6elVdBwpvL7/R45Fhu+rAOUrB+KGoCHYki\r\nD6fNqWuRb2D87WPnjgAu+iJQCLf2qvvucy/h+I+EiMbDzyMVj7oQl3IK/9Ww\r\nMAteB5uTUXcSdSoe9BTm7V0KuFztTybFCtYeoQTejCA6nKEBpnJeCNRKA+Mh\r\n2Cykdt7/upG2wNKIm34Ih6fTZyEf16zw7cs=\r\n=zogS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.32d8a9648.0","@material/theme":"15.0.0-canary.32d8a9648.0","@material/animation":"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-indicator_15.0.0-canary.32d8a9648.0_1669915708162_0.43334430549921077","host":"s3://npm-registry-packages"}},"15.0.0-canary.03618ab70.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.03618ab70.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"d536bebe5d3c72d59a18935b1bf883862223c51c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.03618ab70.0.tgz","fileCount":38,"integrity":"sha512-hEF+irdSZLgXZKtOW+WkXYtJoRWqGkmmR7KVdZjsRaZD9bOcHI0fp2Nd2asNYf5nr6O1zD43fsaCCDvvSCOMyg==","signatures":[{"sig":"MEQCIBsYXw6VeSsCVoUL3ZJq7zTm0VkCCwGa0pO+dB5fEu95AiAGq36I0qJYhXCXzFlA5yCRRwwq0QgaX7OwPeDMmNo4oA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiRRjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmphQw//cJV0ufwrgjIxxPgmwhYFy/ztLoq818VO3qVYmotPNEtAA1Pz\r\nn2HFppiJYbi4XV4xaIqkAaYht4TeEtsgWxCqPrFuRk3WT0TL6qgigBgAqP7K\r\nJBeSuXqNP9wqJn49PIHuOIWkoIFp87TgeHbDiaR8bQ/tu2KJBB3Y7OjnRTAs\r\nAOuc54FJdw/Rv73mpwOP31lQEjTvtwwsJPRAeDvZ1bUBzZOm8VXrjIlT68i/\r\nUvzRlCOmrTPA3NA3KighSJA+nqmJrjGijphL5sKcGdVPoYeKzjnRbztR04bg\r\n0sYMDLMMenTxmr2P/ame+CNATP0k5UKrUDkxp84UduZpY3BgzWiIgqH7R5J0\r\n1Ur5F+NWD0Hbg++FJlE3p9YUJ2ZWgDd2wNsYWecnBxfOcYYQGKN8/+92lEK7\r\narkwkTeJAB+gqmyjjjxtn4DpD2nl9rfJERK22cGObC72HbsGxfRb8vmXUMwK\r\n9A5COs1VMnsuYKqf1GJtTrQ3Wq8MxoKvBqNHggwA5R+MZn5IJRjITUpwaklS\r\nKnaIVwCK6IFaFB9Coz5YaVTzvXMukKt6tkZ43b6vBMTEjkLV1X81UrjbCpk3\r\nPhNwQN8tfb6rsWr/JWqaCqIDorUBbUkFcrMCDcYhmgESSkQ2FqEtOqyJOi24\r\n/eYqGTChkzHnRXpv6xzMEV/mDZnw0ytElCk=\r\n=zvs7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.03618ab70.0","@material/theme":"15.0.0-canary.03618ab70.0","@material/animation":"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-indicator_15.0.0-canary.03618ab70.0_1669928034991_0.4739575495498285","host":"s3://npm-registry-packages"}},"15.0.0-canary.68aaed940.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.68aaed940.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"5fbfcfa52e74ae8d8dd0d71091c7040053fc5556","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.68aaed940.0.tgz","fileCount":38,"integrity":"sha512-VkMFTZn80CW7GD+JGfMuzswbEirczM98QE2lCt/gbazZi8JYtfFgALPLmHPprD65D4HDzdRNiWp0rB9biWDxUA==","signatures":[{"sig":"MEUCIAHB4A6VQJuUXOGUxpV9X0U8tUgdUWsT0R9x5FrN6RT+AiEAip2UiJy1vVbmOZaaR9IZ3qox3VZciUnDE4n6RaSJem4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiRtRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoGdQ/+J39gxiCIEPKQ6CMafs4sDndYlKLLWxz7VCKTRI8w0rZ8nI3n\r\nhL5eLxqhJ8MIOQwctkC5X8t/QVfOFWljNbwlqUDll1DjR2nmkDppyNdvLtJ9\r\nUJ/RSiyoEJK9cPmzVHMMS/vuo08eDXSInrMcIvSy2u+x6g/Al0tkb12DZYGZ\r\nxcl4XMYmGPZXnff5U8WN/AIAQiEsuIEBDWnn/1kgcbzmNigEc7myLtDzURhm\r\n1XtyMI4H038rwazyNmU4XLgxKFC0aAPkOiTYK5mKP9rUgrTxevIdB2qc1muN\r\nI31rnFJTdEKwfk3MhB+0kaf4CvolOQxc3aHmLBAI08exsLF4k6Jcu+kFogdk\r\nsTUwHoHp5+gxaxJaY1WWSXyzrj/8Q9NHEYjrlHA/3WIQjNbw2g3ePZZqBwFd\r\nuNSgb2yCQqq7Qaf9Wu8iIDB6FSZpSJ19EZI27Enpx4dd0zu3ZDkQ76R6x2vs\r\nPFUvOCsWkUTHGBnqdtERqjQGWo2hYqUa3UTZib2V0gsF5bGVqMk5LjBKEZiI\r\n3d56/rnvNeeHJ/DuG1YWMj8RJsEBFO1p5+Ns+7d1Qzxd3eBYMHBILrtZiwJw\r\naCwqIGpm3gdeOfQaJOXeqI7orUcEyNdnda7qDQOzKfsmObknuQrBkIJqXaFU\r\n6XweIhqQAEr+rW/ZuqRUB/V9fpsfZDo106Y=\r\n=dh6I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.68aaed940.0","@material/theme":"15.0.0-canary.68aaed940.0","@material/animation":"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-indicator_15.0.0-canary.68aaed940.0_1669929809620_0.9588339444384222","host":"s3://npm-registry-packages"}},"15.0.0-canary.f0a0bbc75.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.f0a0bbc75.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"da3dda4c1727a7a65a80d2b16ec4457c25f3d45f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.f0a0bbc75.0.tgz","fileCount":38,"integrity":"sha512-Giz7DgfNyounDBshYEoD2zelBiJLEys7qSPQ0jEr03MWO1DaCjyjz2t++H1M5YPlLo4vhNth9qBULJBpNYuDtg==","signatures":[{"sig":"MEUCIFK4fHmVFXlLlNqUjjknXR32BLm806fe9myYzpW3o8kOAiEAv2A3xvEnzCVe+Jk5xWBm1d6yTBSyH3WIXAmkPWKKKY0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjib7XACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqdTw/+IJ2RD3ZdTltOTvVcntL4KQiWplIfaslSjkSoVcvpD1ReKNVW\r\nZRgaDSG8+1txHnDXP492YsE72SVvFzpR98gNMwW7JZuUtdEpJt4CW55drmsL\r\nDgb60OB+Jb8vroMpjrwEuoFgB01IdPOBniaXDSw7FN94Zn6tQMU0Xe4QVnBy\r\n1xhFcB07YMW7quXwdg1Q2bDoQefucx5fvukBpSx+HoI1/1OH5KnQG9FgYoOL\r\nbFwOVqrF2ZGPlM+GLmn5J/zBw5UIEHIZ9pyCRYKqboZ2lv1kxGfgPAVQ4SLy\r\n3ccqt1tQMuAHLcSPCFi6BxkNU36/x5HqglswqOF4xXMTw25zNqUlzarIGYmV\r\nLwjPWntjvWlSyWPtwmfExqdyhyUa4Ms/SACb1M9lQKJZENW6u/2hep47raNo\r\nE7nVVNbG4IrCwxNv9aQZgso3AwTvlyo8zPPStb3M7Hvdaw8MqeSAPRC0J0u7\r\nDli0lpv7Ns74hMRQFHT8g4+VQ4IesTMruayfbe5b+ZVH4e2fTWopIbpFqjob\r\n8k/d3nznR26XhmQACnWQWKQkQlfV4GGilgedcFsBEQcG+WAEXizPhJFulRqP\r\nv1Z9pjP5KK9pH5SrVShGOZ99DU8H2aLcgI/Ry5x3W360RLCbmxs8Dkv8Y2Wc\r\nCetsCCrhE2DP0L25qEA7hTKES9XKdND2a8c=\r\n=ZrVQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.f0a0bbc75.0","@material/theme":"15.0.0-canary.f0a0bbc75.0","@material/animation":"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-indicator_15.0.0-canary.f0a0bbc75.0_1669971671214_0.6037122989065016","host":"s3://npm-registry-packages"}},"15.0.0-canary.dd99c8764.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.dd99c8764.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"afb5d38015b56c6f95c694929fc6bf672d08e5e4","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.dd99c8764.0.tgz","fileCount":38,"integrity":"sha512-OgqIEEmTiZ3/SOnuDq5rYKembzH1HuoZSG4KV8Rm/1z8BHo2NPUS+H5Bk3fTCYR0CqXURzIenrHvof37EPiZ3g==","signatures":[{"sig":"MEUCIChTXZCTq+KFKVGffZib0mCyWO5XrYEpkyWxcW3cv8h6AiEAlhZMYKyzgcJRybfchS1yya35ntaLlGNjZ+JbyNBmDGM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjigT4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZiRAAjti2yMwYmoCptnryFQAz6uXfjYs0xI6imEIjz3I2Ag/qTSIC\r\nih/p3VzFK280zxUSHGSOVbgjICipWxvBT5cKqgftbDQ86Xi+6qPAB2GC+2sw\r\njy8hZChryRcjryi06ZMwHr1yIL1jwNcoDzINDeZPBIDLO2WuG39C14ma26r2\r\n0ryTZyO0IOac0tFwKrz+1jLfY98u4OpsVNwgeTwgutvV6mTCU2aguO9kjtdf\r\n01WkIIc5CuLddnrIv3AVV71KaCWIPQXuaZErfS4b+ov76W1YTGF/lCF3QfXI\r\n4kSmJp4hfRy4tIayinXoaxoqKrdZckN2OH3xkGiFaFBklMmXk+qQQ5A9/0Or\r\nhQ6D8o3UED8NssHdOrmHPaGUfvz7DtAM/R+gzGn7xJ69UPf829Rsf3fzKZ2e\r\nElzUr9m4aIF7g9a8UkBVWnf+PA4S45bjuh0NTFbdzanGhwnXEMCPCJ2i35lV\r\n/p/5eCcGQPW9myycgPhBJhiPvoyc9Vfz+B5JJ6btb9LsdcyOh8Sbbm7/Byr1\r\nscR4VH2TUVSzgtQqOtcttwjLjxmUHzGILDYPVid5QasOw01x6hb8bL5yAox2\r\nX5AVYRrGOoYlYjO7gBdNFHoHv6SSRUYyDgSoN7Xk5ExhvG1m8RlolFonqRKY\r\neS+mb+TXeR8JLlnsC2RZ85z0pJ2N9sHMnoI=\r\n=5XrJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.dd99c8764.0","@material/theme":"15.0.0-canary.dd99c8764.0","@material/animation":"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-indicator_15.0.0-canary.dd99c8764.0_1669989624241_0.8441989733032689","host":"s3://npm-registry-packages"}},"15.0.0-canary.fabdcca3a.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.fabdcca3a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ed6ca7aed63411a24dc4a7530b823c3714a9109b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.fabdcca3a.0.tgz","fileCount":38,"integrity":"sha512-hoF+0D/MErfMgoCGTAS2WuAldklGSwbw0OSMpyZmDQMNNRaRPaaopf+Rf96tcmevapdfudWahGyZDhbEVmmrvg==","signatures":[{"sig":"MEYCIQDzqVgrzEFstCEaIkfzGVoR/iOgW3jzoLlKIoOpT2epXAIhAJJb7JwPJt7puSl1tOqs9ZFMuzFdZW0/5nQSN+LT0Wp9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjihRoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqHoBAAk3lHjoP6i8ZFl4vQnqe2bWaX0qTVYtG6JBbsfMnLsBMKhrgq\r\n8+e3rxYQpYtl7SXYgyOA/zyB33Yl7Teqr0pHxSPHlyOaa31rabc+vWOCO1wd\r\nwrnlv2Dz2bvl0/FovFuwHqIwyFHiimoIGCi2VVlDgREyOyPxbz8Qe03P5Bfx\r\nef6FVGSeCITXE5BclN5Urk8H9TR+Fj/Uw1lmz3lVKNxiBn/W8aXNTvaS5Din\r\nINhv7AO1Emm3+sepIV0Mm/eURWfZLzWntar+T/5ljv96xeIZvrX/2f9FPdkN\r\nxbeDue4II/f0KAX0eV4E8+UgKnT1IwoSjidt0jPuHxW5rgZ6tCZU1eX8jnNT\r\nYzvK2m/+DH57vwKdrHjodKqMBrPSVjtxAkWAl91x45uErRV6QnQ68JT1a7jE\r\nStLOcQhyIhYgmPNiunwor/YnG6O/pBY+SUDAqs19X422kgXhKEviVayJcZ2J\r\nV0D5sJ5ng6+nvHP4LG58ycRnd/pkdhsSnCP/AVo8mturhAEXnNZqycj+yewT\r\nUys/CyHmUt83P0mbCywzyBub3pnEyKfe/BdPv2JjELF2+hY9Gquwl9C2EMji\r\nMgUddpeTcg1TFDprqEX9XhUJyxqjAMjTuphkAuwcPZdNKGb79tk7hABpcrUV\r\n2W/p+QYIPBrG7/HKFY0sKQwHVNwXubcE7hE=\r\n=sk3L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.fabdcca3a.0","@material/theme":"15.0.0-canary.fabdcca3a.0","@material/animation":"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-indicator_15.0.0-canary.fabdcca3a.0_1669993576599_0.12072716067733347","host":"s3://npm-registry-packages"}},"15.0.0-canary.2d26722d2.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.2d26722d2.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"837df16e66fd235c7ca2b05fae71da18d2948073","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.2d26722d2.0.tgz","fileCount":38,"integrity":"sha512-qzJKkgWDzVvDm7tsLVe+8JftanTJq5FmF64159PanAI67Uefdj8KPEO+ntHnk52rvgV1du90vGLnJ9bXS297xg==","signatures":[{"sig":"MEUCIQDWLM7ZeJg0zMmp0qhLaTDJZ7aUbG2vjl0Pa5tRmZ3SVAIgUMHe4L6hxyAiZ1ZKHj5+p/JbngpLndRqA6u+/uMRjcc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiicRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrMUw//Xqs54BYB5pvqEttCfYl003WBA9Ux/iLVtN896IiDysBS2CbW\r\nBQ3zQsHaiosliVL8UNuwybLuvawU2KMfl+zABvInbqeAxeoyifUG4gYckb2z\r\nyYNWSWPk+ocJ7f6HHatot+5atOrQsloP+5UK/g0HLj+E9FIqHv32h2RDyb6i\r\naQjSEffjH9e9QGat2Os6vum4J0XPMdGMykh1Fqvub+Ab0IK5HsIK2T1bCpOQ\r\nfkR1c6pfYDy6Zml5BQnNhhB08LBPnzHN0dSkdq1hXuerKaOGcErlqbHB8Ljw\r\nYoSevjQAn1uvZXNyUiEvlfs0hAWnF+oNTH3/v/zqHz2dzMbSjRHQCLeRSpO6\r\nUoFjQFwBqjCHT88++r2PfCk+m2GtBk0Hyp6hb3puyEu2f3mnwKF4t0PjW2/Q\r\nDgf5+akwxXrOpZE/ea7kSNtvaKC7xfkBLzwIMUbjN/T7CeKb3ofMYRAtaKkb\r\n+VmRBd8s5vPqmiz+umixU5tiDSlHqWQLScZXsbQbTQHYfKqzwKpMt/WXTKPT\r\n4K9FsMTf6rEpwFOd8JBu8RcTzIErP3PjyeugffEJp65hosdgOF0Ve9jYF3xu\r\nZoGBNXr479n/V0p6ZkZybFRJ+04qzCAXb7WeE8M6TrNpeMSkLIvRNxp4a85C\r\na4H/rTKukmF8IjNF4RGWPwk685OZ7kdQ4jA=\r\n=RsTo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.2d26722d2.0","@material/theme":"15.0.0-canary.2d26722d2.0","@material/animation":"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-indicator_15.0.0-canary.2d26722d2.0_1669998353714_0.958133144282735","host":"s3://npm-registry-packages"}},"15.0.0-canary.eaa0c3a86.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.eaa0c3a86.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0744d5ed9517906b9d8a093de4f831cc8fc8e800","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.eaa0c3a86.0.tgz","fileCount":38,"integrity":"sha512-U98rbwhHib9T6WCNDQ6S/wefdh/+qqnerGTpat6rs3zLP0QVwY3cjhg+ih6/cqVzNIZEmmm1pHOJiIgJ1dMl+g==","signatures":[{"sig":"MEUCIBOu6LWBRRHHKfyvTf0UJbo9tyZm2QvaJ0ZnOjy0X0OBAiEA1yglArSUsQ4CiJCn80ufpgoC5ne9312lO9qjHVPqygU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjijjqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpccQ/6ArrQ9g8CA71amGVs0H28dbDDtuyR5ozCq9A7mhhuZutLH/Lp\r\ntYd2uFGZGdpNw+5ZgbUOyxVCjbSN7+IekWAFswZNVodgOQ5EOA44kwSri2pS\r\nIDkobcOF5Fx8RHZPFTat2HAiv9wYecXMozmQDCsaij6GJJJPZfWFvizteSXP\r\nGjOvo4JBM7WW9Ze1oyXQZa9jVOaLi9zwo2D0sVhn3cysQLzudmOEZF47Csk8\r\nfaJ5DhxAdLtbTZVhcpA1OtQOEswiwiVP4I5QyCHWhQnDGEyNo+pNzhtZFQNp\r\nWkaI/txA20p/hTGeCL9+oXBsokpWoWMUOOcfAqKPHtcqTskspJ69zy4dKAkg\r\n90DV3oprwn9qxMUBomJ4hm9zHM0BwOcScVsOG+5AS57s34rk8SbE1U4j1AN/\r\nQsXVpxrriBdowsZbnzw8YClkUtnpsFoxcQxdruiw2gI+KmMofN9IeVO00ER+\r\noKM0WOw+GnquKwjY6Ir/wMZtsl6diKgmWy5pPANGK+4sOekDg0hrVroiGIGM\r\nncGQz+OHgCA/EeDa5Pby4eH7ICJGGOaUdr2hGlvpLorqkAfgyPfVr4X4kubs\r\n+L2S25uO7PlCcxQgDjIzL0Jk3oRBisUbFBo1mtLYW0ns01C1n+3HLvswpaLv\r\nJ+UdOEdU9VRJRqmBwdb0GqC/ujqU4GZIa/k=\r\n=4V/j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.eaa0c3a86.0","@material/theme":"15.0.0-canary.eaa0c3a86.0","@material/animation":"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-indicator_15.0.0-canary.eaa0c3a86.0_1670002922188_0.709308338793784","host":"s3://npm-registry-packages"}},"15.0.0-canary.79a613bbd.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.79a613bbd.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0029b5355964acec4d11f4eba9fac7684d84bf23","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.79a613bbd.0.tgz","fileCount":38,"integrity":"sha512-erkdq4dMNC+E7xMuUyo0BuB5xk6b+gmVI9mJxKD73yIb7j+Ham8pOFRdPxtSkE/aZQdtUddaYn6RSR2PDcXZgQ==","signatures":[{"sig":"MEQCIGAEsM3JUynoR7s9FNoUDcIelJPqNRwSun4Lp+Y76uhcAiAbaujhLG1EySKewF+r26dNJrCDMQTDWZXOxzpLNLSUJA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjj1DAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpUJA/+Mn9hpGkN/pv08/YWQoUcnVxm8haxcpZEd4RoXkToRUdtBewI\r\nvN+zOFoMBskMNnz5n/qxipf1/66nMQer55MrT3yitbABqQ7RPOvh3zWhFaZx\r\n/KfuZpYrLo/OwK25KR0oKV7UeaHZ+9l8MI6u0IFsNRWRWhI1ui54eb4z3EU3\r\nlR5STMLFFbS0xS/3ZzP+oy2fboiVoH0ktVMED7FJT78jlk0Wm7HhFuJRg5mJ\r\n2j6dbv7EK0HGvDLDhUv5Gps3iH0/1HgVjZjrq+vH6M+J+76833gOCNotYY5W\r\ngppoyHsOcZKd3ElHdO6K57YRLQfR32bd3+mtfbIQCew1EgvO6qWb9VohJ4Z8\r\nGf3kviSuOtVw9QPGQD4diJEALNxMJHjoxFjIommdZno4S5dRSKw+N9p4PabN\r\nYrdxmvp22Z0j9xlbAyhiDimWqCbYLDYT2Ty+Bg9ec//IMehFQLBHBOlPQc/W\r\nEH1ReGpMTvkspelYuS8QZM+Sb2Ka+R0O9mi+CCUNheBJMuG6o4/yIir4+pf5\r\nwNQ0HkRDyQVXshi6anL/XRlfT4QxaDVKZ4ol3YW4m5WpJ4R0otYTcZxlJObF\r\nS45CppF/FzSQNEr8YmVPy4oKBzoTi0jtQNPMJEEjyl8yvs92ZN0BiRLIF6Yy\r\nmX4130uHRJ+5j7YM2T6UVxVpSsZNM6pApko=\r\n=jd0Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.79a613bbd.0","@material/theme":"15.0.0-canary.79a613bbd.0","@material/animation":"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-indicator_15.0.0-canary.79a613bbd.0_1670336704692_0.21751215600919172","host":"s3://npm-registry-packages"}},"15.0.0-canary.c871fe61e.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.c871fe61e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"88c0fd2e7e83f77721969cfea740995c567da22d","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.c871fe61e.0.tgz","fileCount":38,"integrity":"sha512-F+zab6nhURB7o7/5OdPYOFW4eeoAjsqRlG5VTU1D7/eNuhRHHeD9nVMxxpp81vEPpFEW7tsdBdtLw387yntSwg==","signatures":[{"sig":"MEYCIQCr3WNolOAeoFqBXhFjJQVJspBfdYbWvwN70/xqa8Cn6QIhAL2KS2Nv72GmPUyV7LlYnIRtbaS2lPh1mFEJ2/ksEeUa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkEX8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr8Jg//RyDZSIN9BArsqXFxRBpMsWhwlhKP+8LXBjrVmYrAP3Ul5Y8Q\r\nTt1m5PBUGU/whzYbr2N2qVCj6rKza5A99mtY06ljpAyEy6dJhy9z3cHELLj3\r\nQcw5D4thit2m8/ONQLCgLxsCdCCmsqJsUJx8tPdKfZ1Ok51fccbX1rxvPVru\r\nswOLKGj2lU+kPElpRi6Y8GZCdGiKwcFaDDrJ/FasTSeJzcADql5yqapNhm0d\r\nB0SBIwlk83MH2fPWiD0Zbsq+Vd6XQO9AwTGf+IPQ9NxEQC1FSWqUT3FZ/A9/\r\n83UK1AeTbXlObh8Njl3tztvV+dcApNQ+OY89xyb9TQku2gM3oNkkR4lf66US\r\n6z0xbETI7f5N2cxYAk3+hNpYuUHhG+9R9msZT8qcNp5AVv730FKjT4Tfc+KZ\r\nzZygB9Kk+nco1kDp9c8r6Nz/f1jIW6kK8DQKWe1kNZoCf6L0VoNnHfbQs/Wd\r\n+d+Se6q3fNX08TxDYFHsWiOVI49oXNZQ0P5vTsFlxyuJCGSQuzMv/bgJpo8C\r\nUe7ApU5uj20sUw1+5AhOqWXjHQ6sVZLSgA1q6pLpxwtK5C7FGtu0hL7yv7Jn\r\nIsqhB1l3q+0Zo3at99D51MRvF0tIBBQJrJDtADOiOUmy8AgKUG6OwhuRrErH\r\nMBfOW1H1GhPuCy9S122DQGS/Uaoxb+8kBRw=\r\n=AnFX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.c871fe61e.0","@material/theme":"15.0.0-canary.c871fe61e.0","@material/animation":"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-indicator_15.0.0-canary.c871fe61e.0_1670399483971_0.3981773359082017","host":"s3://npm-registry-packages"}},"15.0.0-canary.9eaee7936.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.9eaee7936.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"65d99c687047e4fcdf734bec35f15cdf00d3745a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.9eaee7936.0.tgz","fileCount":38,"integrity":"sha512-fIL4K25e3JK4alLPmORETy8/SfQujesaW+0qxBUz3tPktCgTvnO52IXx3jinpBHvEgZ8iNyiqaz3oSL8UUGN6A==","signatures":[{"sig":"MEYCIQDVNcDKilE9nwNbVOOU5NqxEYc0QjvQnpKAdWMmn8i2EQIhAOgqL2DCCh335O0kz5ZpRbbMh3GYa6b73iX5ZppCgW77","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkPFIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrV6w/9GRsC1QKFGnm+I/P9CRfqWWmIdjS2+uQqGLh3qfHbFRDeNe0I\r\na8iD6KN9OBdBUMbNLfTuoYzYx+vLeies7ALKmrEgKKHIZPQ5PKL+Svzzb9j2\r\nOaLgS9wnyT20+CF9Rq8aM9vRT6QD1+NkIDyGZMByF0n02BqD0iYDvLcJ2Uv9\r\n2t7v4zxGwNNRIP2N6u9lNhCxKWI8K/8GOy//qCry7Y6CF77pNPFnj+f3sA5j\r\neKA9rakSqSHciVFwDTTZTwqdNEn7fOkYF89h186DwlNJaOfo6jiUDXdxQiIC\r\nVYLpDzuVrUSJUBqf4jaetICo9l+PrwFu8PWIZ1Qd5xoaHgnn24tbMvSqS0m4\r\nloS7UP6CjgL/X87fn2rYmlD2OBytjMgfM748oFZQGZSzaAC4h1YVvmWXTLPj\r\ne/i4JHHaVxeybJcLRBpUtTkN/msHlBFNIO9XzMb55J3XufEtZRKrZesvMQz/\r\nTW6xyxf4xOtgwkK/4u8VjXNlW7R7x1UQLbfnm0sCHJYnmo0+1G4r0S/dpTUt\r\n4C7eqikjsMyA87rX81MZwBrwzI01K/cL3HStntLhGYZjUi8djHPDEoDKrCgq\r\n76ApT/6/6TgvA+pSgs8rX3DMUPk8P8a39Yt5WbquuDkf3OkUrGrFr0xpjzCA\r\nTxOWhJFbgrEymXdOZTcU7pTiB7Kiarpynhs=\r\n=b52U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.9eaee7936.0","@material/theme":"15.0.0-canary.9eaee7936.0","@material/animation":"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-indicator_15.0.0-canary.9eaee7936.0_1670443336372_0.002039834224157433","host":"s3://npm-registry-packages"}},"15.0.0-canary.1d37bf601.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.1d37bf601.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"3468b75e64fa94f2893b44cbd5328cd3e30f5f1a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.1d37bf601.0.tgz","fileCount":38,"integrity":"sha512-wzLozqQ4SC7ky2rit3EM3IfKAUVSROPhnWJUzqNnXTZtAs0MJr3Ni8vMP6h/wWJQVbKhG2ttbtpGdRxTIqdv5Q==","signatures":[{"sig":"MEUCIHaU5UsEnTRm9efzLTzxxMLv1gjtkfV9Vg2N0nnb/X7LAiEAmpcC209EKgHNeIWHKqR2oFjkkyUhWBSrKrpE0g2UGP4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkPpMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqenA/+JHH17D1FaM+wz2LIYRtxGwfKeDilznFGPJmH4qpJtMM+sXS7\r\n2wYybu+d8pBFMsaXPAa30DtW1owG5FTLjMylicX2S61e7hRPtR3l+CLlwQ0e\r\nuK2LctE77ndeyJ1ePriltxy9f+smbhu0pZhA8D8i6MZk5yrkHGfoepNJsGnu\r\nN/hUVhw6xWJrzglT8MlVKCwn8BvWOZam/oC96tNC8hCc+vld/R2uebreWyZq\r\nPD6XVyjJucLbbqKsgeUUPG11e6gr1efiG/lwqplweQKm1C+egDVWxcXbFQnf\r\nL4bo2SukX4V4Vk3kMrWsbiTHn5M1F0q857DtHTKXHO/z5OkhxdZH66Z7cp4E\r\nGg3VOhq4oSVVTQqrNOKkaQ5L2G7RS6Y6SCHupo/giVnDcbRhq6/wW/f68vG/\r\noCuo5TyszDDpANqyLVHZEUUN1xknh1DBNKU0fNM4hMCmLtF6AJwv0jqUT2el\r\ndC0lNFlm96E0tLKf4+D52J4vQ0JZzQ6xEmSeo+Krbt92Ai1CfuLhz8zPDeqn\r\nUNGTr1LOIBJMo28GVuAb0VnNDhzgeAnhL8OzDUMG5Mj/bF+m11SBZMlB79bq\r\nmsNXdo2xBJJU2ZyoIi6AwggF/7O5+zJe/DvoGUDZ2kFcE4xcWet/l39MAcc3\r\nzKyGWmO5SFtxigpFwEixtgsWUZxRI7tuN08=\r\n=rW1h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.1d37bf601.0","@material/theme":"15.0.0-canary.1d37bf601.0","@material/animation":"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-indicator_15.0.0-canary.1d37bf601.0_1670445644032_0.6039485715105928","host":"s3://npm-registry-packages"}},"15.0.0-canary.a5fe069d5.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.a5fe069d5.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"30f25a6e454685b7af70b95192d0f296ed93fbcf","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.a5fe069d5.0.tgz","fileCount":38,"integrity":"sha512-5vgCWMsEOLAo1jPlsiSK082IhZ6mnhEsp/ZPf7NgEsHRMlJiSixRfYx6WE4X5Qme7NBdrtW8ORx8cn6F63ni1A==","signatures":[{"sig":"MEYCIQDB8oP9Ua1xboczxComwDZzNfJWotX2DPbtIrvDPlVK9QIhAPuFqQMtNSQxLWvBcu5gCw3GoDDYQ5HX/ugbX9a9HEY4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjk4HYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqo4w//YE7T9kqLc8gZaRuxn1Duj1+7qRN6Sk+U3jPQqYnyCbLkf8h4\r\nyyOtp0TyHaFdwtRMmf2MJfgGZZBpovGnEew0ytybOBVF/qbOFVWuVxJbHv/E\r\nyL/BZ5lvmPqKEgZ+p1ENKqd5OIH+fK9DG2/VSLO72jXwUbQ4u3/lC/s5BDdu\r\nkhqP1qiCh0IOTK00pC9N7q/qgpBUHrXGDCJP4JAssWilNlgJfYI7Mz9HD2x8\r\nXm86ybNEDZdyJF1NPY+15EMJX+D+T3ZDMTOVINcZJkfBeRjaa4x/3/07JN3O\r\nQTtjkLzb8Yoex+BaN8kFvePwulE91JhMyvXgSTYJsBUdQI8KWpJFumoVDij0\r\nW9DRXpRNOsfOLCB2uv6ZpQt5MVxu8WNkn4cFSQ5USyulk9QdLN0CNJw89Ive\r\n/xQ3JHSJywrXA3tuS7+DX0VUmiPeTSdqCzxr8ZN4VZmUxn06fJsDy1M59H0O\r\ng8AkS/4O1OrNIpwzqgaUjhJxHHMSgaGvHtPsM5tRZtS17LXE5szhhS8CmWwv\r\nol7lmeDs5Pbq3mJvmIyaK9sb8VHyeiyWt5R7tKeZNZncqyxt1Mwvh2pk5wf+\r\nZ0YR97gdwryDyQ3Ioq+W7wbwJyeD18asEXe7ps+TGX/aFc+Xx0jXfxLuDKcp\r\nTuES7f79m2He47xKIZOYIH6kJX5PL0jPvyY=\r\n=QTQf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.a5fe069d5.0","@material/theme":"15.0.0-canary.a5fe069d5.0","@material/animation":"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-indicator_15.0.0-canary.a5fe069d5.0_1670611416278_0.00552079546216766","host":"s3://npm-registry-packages"}},"15.0.0-canary.ce8b5326f.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.ce8b5326f.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e29956e05a3ed2a712fe5984fc200f24396f6c11","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.ce8b5326f.0.tgz","fileCount":38,"integrity":"sha512-eF+GxKCEg9VENTFAXv/4saJEPuzYc/pNAupQuM07u2CrZrA4aA5RCWUeq/jHuDpSIpof7KO7o9XmqjbQWUWQfg==","signatures":[{"sig":"MEQCIFGuGHaihJ0vm76kMqTF+bZQ4DvLtzYU8SEEeF3UlOAlAiBw9dWDU0sHwxSYS/oITCW4Z2EL1XIRSJRZfAY97ReVmw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjk8UFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp5bw//ScQJjYVroDIczJfiNs2QrWMUmeBuxmW+BPqHcIQa8YiUElfp\r\n/3ke60w8Uyp1+UF4y7lPTZsC/rO7GA+UUvigiHKn55VTSDu9BvXj/x/7CVdX\r\na09CNFfEDp0DKQj6cppB0NtFYDqmWl7msmozoTqijOefUa0CZuyM443XmZ5C\r\naQEZmlHfjn2KDn0J3YwsSVEDAUYqJgKbuXMGs0DCd9Ev3gqaUAfuiBp93wKx\r\nNcLvNInr6taj7O/ZULTdnR9AVDxzDX7ZwkXVG9hdVSpriHD01Gw+ycH5mcIv\r\ny+23cBt8FXBAQDbu+6NBbquCEPsqAJ4skSo21ghg0cYc9W2L1SMTRvPqyWIc\r\nCT7HLFs1QOgpHlKqdg9kACv7Nb62NTxBSc5Mfmxg6MHt0G9v60heJnwYvrs1\r\nbM2JIKLOEeklC0W+FfYiqxbkJoNUHaabOVFwCEuNEotpOKyAr0CKDbRwzYhx\r\nnqG7+VCvqJuvemhGdqeiZhg6mHRSqciW1mG/90bR/AWItZrI0s970SX4s4gl\r\nVELSK3lNzbSz9s6+sq5xDN401uvukUxgSXXIOyec6Jheg+oASvbRw676M/yy\r\nB/PWsNq3ACZ2gLXMeBQz3pUfFrPF/UOWKI1NMr3AFQPnFaCTUEoMeliXaj12\r\nHpAE89TkCUshkFs6zQzyu2gFfLgXs8UtmJ0=\r\n=SDpf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.ce8b5326f.0","@material/theme":"15.0.0-canary.ce8b5326f.0","@material/animation":"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-indicator_15.0.0-canary.ce8b5326f.0_1670628613259_0.07871075914083181","host":"s3://npm-registry-packages"}},"15.0.0-canary.43f5323bc.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.43f5323bc.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"544429a768fff579f3942c371d406f319a45e72f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.43f5323bc.0.tgz","fileCount":38,"integrity":"sha512-yT9ogVZXA2uN4F6sRv80dgu23SFTnnfoUKUushhwNCprseaC+ABArWTc7wFsaGl0Ccty8CWyJbmwL2aqvXcv6g==","signatures":[{"sig":"MEYCIQC1dBU+oRtAngZMTgDPZKmEL0sRUtkIHJMZRbJi5I3weAIhAK0eFcN0yGnuQxqUUVxMyDQhcOL2lAapkG318gpbPxkv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjl1q0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmomdA//TG6X51FWtZRfbh7zOhVf8FyB7C7JN+Cio310wxynPmCeZVZB\r\nFCgtM5c/wrlBwkcbmmrtvIkFfA8v6ZWK05SIh9/BTm0XSk5+mGsfEqlNT+tG\r\noRK6q9fQTyYQqegp6nV+68W6zqlb8CpXvQsgfXgfwx8atm+8yeUrMTZCWamP\r\nK9FfFZOMA8os/IjkR8oLCH7qiIqhiA6rDByn/x+2dJ1Rzd4kbL97esaRJbrm\r\nyEv3dz1PXc0Lw1btk2CEZDoAaTKPLAdUv1sDSIT+imgbWv8bL8T87XButcVl\r\niz5gftRL+mtTKJb1dgoIEgfZLdzcaW3ggzkS9Md+Yw8k+aeOtGkUWAl2DoQV\r\nP4f50Sv6ZYwmoU7OiIysufFLNHLfI5pzdM45CoGlr3REi7duclUID9YZYFke\r\nRx4/hZNR4Fr0hgnK0j0zfcefkM0+z/KZGVDZY6aAvH5GfLWOjlt71Yd8brQR\r\nmR4ojkK/nEtZMZ/D7aXjODbruCAdL8kg9DpJhnvKovKX7lZxV9IDjPlUUj1t\r\nYKunMzEB6KVlxnpfLeOi/GmotmpTlR2ueKpBGi3lOsiIXeTMLkDnRkqdCsuV\r\nIA9qRW3njaYM2+9/pBnHPiySjC5RKj93UMxb6CtHwM2sLpCh7E7AznhQ4WBG\r\nCtVDN1vp6rvIN9i6pn51wvb5APzh+NZHBdQ=\r\n=045c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.43f5323bc.0","@material/theme":"15.0.0-canary.43f5323bc.0","@material/animation":"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-indicator_15.0.0-canary.43f5323bc.0_1670863540416_0.845209138736809","host":"s3://npm-registry-packages"}},"15.0.0-canary.5490e32e7.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.5490e32e7.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"a368bc4566c6f7196d4dea7926b05ccbc14ae6df","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.5490e32e7.0.tgz","fileCount":38,"integrity":"sha512-qm6xWMxod7oyO4VNM4uneFhZOGiWtvriSHaQRU3ZFJca4uXk74CHSlBQgqD/8npTSlD9NnAgkxLTfQD9H9vk/g==","signatures":[{"sig":"MEUCIEQ/oMYWa36YS1U5XUJm4emP+I4X2i5lkIFcaWk6ykggAiEAnQ8rXjsTnt9ehJEQYQNxCDSmcBh765bQR/yaaFcs45A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjl15sACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqV6xAAjB8IFtVI0UY3+EE077W/THHP0zLQqaJoX9ONeVFKTRCPlxOa\r\nGXA9KaWWH5c1JHAokE3NKNFr0E0kQOEWL9ZyMxVLnUrZisfjpoLj1isxYH85\r\nZGzI6eJzlTSLPMGf0vSyr5cBZue6lyGn+Gz+YwXyjvMNhelOEQNj58qavltI\r\ncwfDld+6HrYgY6yyuybJWQ65Ap5z3pqXUK190Z8Zkb4MyMQN+Priq55Mknx7\r\nchCnqfn7tO0fYsmYjZNIIWdJ4VgIhFlUTXGMG9lgWeRFXW73s4jzJa9zvJJR\r\njAklsjQ+JJnDW+2CbR5NYJasbVcsoD7hR+F6/EzQm41SQM38EAPW+Mhg4cnP\r\n3w/4g/6lwLBfTVJAm8SHCn+mmZGxB6AMubfmBlgcl4q4VttCsXOxBk+d3wek\r\numVm01rfYVBB32Vz6Jl0bqhmvuWKmPpTHyVv1Sq78KwVOnC4B3O4qDxYlRrT\r\n27WWZZqcLaPWuuG00bgJ9YzY8klTuFpmiiiJxKN+G/AAx60MIL+h2aPO7Nwq\r\nUvfKt31g+wZMaGUie441oGvTe8sCuLoQDdiIFQUu0HnqWp3msMTqWQUo8NQ8\r\nEa5vEDFL8ln9xtoaOncqsNLUYoLI9LjowuN/BoCKSjtEJmjMUiRweHU6dgtT\r\ndJ3gzSizGqgaz/KpPo6cuXS9BRt0MaUIMec=\r\n=TFPk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.5490e32e7.0","@material/theme":"15.0.0-canary.5490e32e7.0","@material/animation":"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-indicator_15.0.0-canary.5490e32e7.0_1670864492591_0.9400632505247459","host":"s3://npm-registry-packages"}},"15.0.0-canary.817002c29.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.817002c29.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"181208314d74e10b45ce6081520dbb5b09e2a4ee","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.817002c29.0.tgz","fileCount":38,"integrity":"sha512-oM8Mkprzp0gJfUgA0hEsDW92AvpFY519L8Mo/sPn6bLDVFNxvc1rKwuYLCTdmmSD1gO1xVe72hleCPUxRP8LRA==","signatures":[{"sig":"MEUCIBDa6d6p2N4Wzs15f8Xh9huqIbVk0gkMUSytRdg8uJC1AiEA9aUIH+jHNGkuWXu/QYtHc4hIm412784boof1xJpCy0g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmPRTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp/JA/9Ea9sx7OWmaf2iL5BhoOTlTgaZbA3HlClKgB5147FdlUjiZDg\r\nLOq++9reWijtL6WjH/mNbNunNRdnRNdO8ENDLG0lJMC7JlPKBpxXg/MIg9wk\r\nv+OZdh7w1AbYcjVKLtMu92ZWjw4/ZFkqD51xMoupVTHYfTBbmmC0ts/UQIkC\r\n2NLgVDXecsQbyeoN8PxUJzBwuqEcvqM+PCBMBkTUkj/n++UM0KPlGVmRJaeC\r\njUZDhKytkCfiO7m/DphmmeGUAKzcQfmOs0KQ2WpyuVXlz8q5NBNQCcANSNG8\r\nK2aIZ9XbzH//w5pPLxNEFKnYwPu3geb2FZz/Wzrt5mpWhG3+V42RVEPHQfca\r\nHN9jsLq45mzQ15zFR3LfAG9WrapYjxK7OVAr/94mhGE79A1ZxdaVLkkxBqzW\r\n7qSHIRxT8qVWLwRAyoUSlhwQdDIEC6XKq90TPcSFKbLAVKO1uIk6DzXn78lX\r\nZ+PGou09Zvqogbh+Qfdrqy4PO95KLKIYP3dTcfnzDjSTEM6cIKy1BIe7ANDb\r\n8N0KjOzqy5baz/1EjNcufDzhoZ0NDzaT9WDti6262VbmK+yT643lqEgAc74g\r\nmDfxyrI6nJ2EjjxaIEPX0Uj2OSwrBqvILnfm536Z3yzGxmvTCgOJ/U+Blql8\r\nJ4j8iVNLvt18Fjak5xoCXFce2nOeqNOnlgI=\r\n=+woT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.817002c29.0","@material/theme":"15.0.0-canary.817002c29.0","@material/animation":"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-indicator_15.0.0-canary.817002c29.0_1670968403721_0.07527569972519466","host":"s3://npm-registry-packages"}},"15.0.0-canary.313a1326a.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.313a1326a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"74341f242fb0b3e6db4264c04e2304de6579ffda","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.313a1326a.0.tgz","fileCount":38,"integrity":"sha512-qHCDcvLHENDG4rcmzmkk1l+U1TgUWC4YM0RdBq25mEzzEIouy7p8Hd9rM4Y8iPk3yxvfP/Ty0DzBVNXMjF45yg==","signatures":[{"sig":"MEUCIDv3xJz1WywFppJaZt+vmeH66Y3Ef3CP5JVu/RAG5c+lAiEAzXmgG7tDEI8X9VNFaRZWMhp2kgrWF3kG9RR0A3wRZsc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174084,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmaU8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrHQw/9F6N/9aHMoSm4EjkszmaZQsClGOljgBDQAhkVkHwRPXsMyfnY\r\njjUTCrAhaOwv05Qd/k5QiuGRmztDesfIo65VrGntXC/dY/FQpQ+NQ3f4cjbm\r\nlqMb93r2kNNI4e8qzua6nSqznL7fuwmNz8a4GAdQWRPlR2MkxzJnQSfW87F9\r\n0DZlU7zAwinEc8/+f6B5N9EEGjwhoDaBbmRHqPfgT9kUHqAcYuTCJFjNd9Lc\r\nD/NPskzcGMGOMDkd3fdqH7V0E94HrShDJJhMejyesMPlo5j6NoPlOhTJ5eOa\r\nrgDCYpY306H3iqMzo9h6+QnHLxeTR0tdBnF7K67U5B64hnIkve6K4iDLx1NB\r\nwX6xn7E7nLdGkVQOOlYgZes8vjM7PXW0buXTadO4KAusaAoywD0w2fY9aEUl\r\n0qnElyCJaumc87AoEGWEMt9Aaj9KPgc2rOBftJGMEVgtIMIhkngADLRO6wbO\r\nW4m6uuMa4Y6TsVjg5DOFuLUR35RTDQrc5ukFF//0tw8Ik3J5o0mx8S8woc6K\r\ng80FOjDum+TmUUVKRgoQ2Pt74/oNzplVAsdDB/keD9dD1pBfM2YELXxpWv8H\r\n2fzPeZwVyuQEUlF/XxzjsLDFFOXic9Lj4QhzsFJC7EjQW1/tzAcQ8WY+T/cQ\r\nxvfit87xBPQ/xx4HseDtn2dEjdP1zAkLXk4=\r\n=o9Tb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.313a1326a.0","@material/theme":"15.0.0-canary.313a1326a.0","@material/animation":"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-indicator_15.0.0-canary.313a1326a.0_1671013692236_0.023740902965949218","host":"s3://npm-registry-packages"}},"15.0.0-canary.a69c14e10.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.a69c14e10.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"7fd9631007b8ac3a72cfa135b6f79767703cc836","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.a69c14e10.0.tgz","fileCount":38,"integrity":"sha512-EBuAgRuLHFQFQsgC0+Uu0zZZ/MMG0FjWSx8eM3YJMXhTwPxqrndLO6ZD/FQDVPAy+0ggUFQtArWJCyQrcr+COA==","signatures":[{"sig":"MEUCIQDE+YnkTk4OVEVefknBzHc4gWuTKyz3xR6tx3ESV06nLQIgL3JYX0jsaUSx497+neNvKOQOWoX3xISnRACmExSgAO0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174084,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmbD5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpvEg//QLMZIsy8UaA1MhwjVzw95GvP5cP4I7SRg0w3xTTlzHlmtWYt\r\n4k+TRSZNWb7fQEg4nCqay6JUGlm2SLpV7MbuYJNcdmaN371pEbBTwmQ+wfsg\r\nOBmAndPwLklLm0ad/Lo0YnwSqZvG26ukOTF8T1HJX0fyu614EdHSpyBu2njU\r\nZ27FB6MBnPwtQoYYFIPpvyQbRu5v1F5m3alMD/4PQXMBM4Xh16SlalWduoWn\r\n7PKH+P4XCk3QHxcC7WiYOqepvBiNagzFTvyNFukMtjhEWP2/JBahkTyjmlsL\r\n4kCZLxX38XRhAjsSIkA8Dm+GEP6r9/oK++u+4sTQDV0hclJyDZPsBnoFIUAq\r\nZpJQRfQ6ldl7xt38oQb6CW70QElE1ck/snnlLxUQIq1kia7+3fjgW5bXvu69\r\nywIpRtLtul8xj2xVEzplJ9NxuZNvGlfk5JTLXuG9fhQ1o5pKePgKY5EfIX/C\r\nCSRNsmFN46Rx4QNX4/DlMux+m1CZDn69ZrkwyPMpZe4tkwXFLumdIG56JKhY\r\nnNc8/PGD9F+/uWhcj9+vMZpqDOzPjtYzIvbUfRI7aqkPVS//rFqxIR5zgQQZ\r\nGu1aXZDWU4qwjvBdqP756iT5IM6shh2zjDBIDj4O730CY+WbyNL/zZqabSM6\r\nhPpbIDSd/xoek46F+mvfS5mQ19Q0TKV3K94=\r\n=IZTu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.a69c14e10.0","@material/theme":"15.0.0-canary.a69c14e10.0","@material/animation":"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-indicator_15.0.0-canary.a69c14e10.0_1671016697322_0.5489436587719785","host":"s3://npm-registry-packages"}},"15.0.0-canary.f43e0ceb5.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.f43e0ceb5.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0290184863b5df5d310dee15079b58dab33f993b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.f43e0ceb5.0.tgz","fileCount":38,"integrity":"sha512-lF5VipR5qImx4pYO9WKu1xibiYGmGGS1+2Z1paS3XQXUh2ZhugtCIqcQUuL6RC9T24wwC6S4fGC5gC4PBXxR5A==","signatures":[{"sig":"MEYCIQC5WyJqbJWeGWbjzE3f/NeuDfSPxq8/WRXbZ/tVdEzMBAIhAIzA5O4snHd7hR6bleRJQFv5QdV1zUJSm2SawWt/teoR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174084,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmf1gACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqSCA//Ui4CcrOqtSK3UkHD0JU4gicBzOAJIiCDFQXK26bXz4yikwzJ\r\nypVjG41R3if4V5SDNoC9u18SO4tQg+cJ9nk64IUx9fctHPm1AZ2qdcwrkmv4\r\nx1rcyTPv3hQN3mYB08VVqdW38EHjJNhQfLR8rGQ6Whs30X3Re+91xMiVo8nI\r\n5UxG38tyLkpnKcCnaB1B8lcjT8xBTzczI7+REpr3pIzCkx52Qr7OIh/AyB+M\r\nbi4rHfqIQxaMlGZDSdbVkhYYH8EW4yhHjNfXnUKysBgceXxiZUB4HeQKgqNk\r\nCmenM61Z2g17+gi8maZGHQWCWcCJOWyCCMT5RjAwDsLnCRA2WYI6iq/f0c43\r\nyGc9/h8Wa37pDoQBowWLJztn/h3QrUurzg5GKU5tH2UwEeP1WtRciSt2mT5S\r\nyLmh2KHQBa2pfxVe/rV+yi+8D4L8iiYwMPNPW3Jep0b5gW8VdxOCAfRSYN3y\r\niZ/1WgAYVUGgyYG5/bj/Fq8WYUAAvzHhIq1NWvk1fNUgLpLRtqfokzg8FzE3\r\nt+ANYMYaOtYZ/MmjNWMt3wmMjueC6Z6NUDetnOPMoW+AXMIWEsxD4PUZha2R\r\ne3h4Fnt7xfn2lIK67F6oouNljmSpZ3CiUptcC0d0euZ1vVCtrX97lYDEXY0K\r\nIUw/c0sqFMt9DXExumIg/L30DvtpNovqObM=\r\n=Zsgg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.f43e0ceb5.0","@material/theme":"15.0.0-canary.f43e0ceb5.0","@material/animation":"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-indicator_15.0.0-canary.f43e0ceb5.0_1671036256681_0.5305681355187211","host":"s3://npm-registry-packages"}},"15.0.0-canary.34767110.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.34767110.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"f749ee59b4339cce4bd6413d3c9f771d55ed8b2e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.34767110.0.tgz","fileCount":38,"integrity":"sha512-bA05hcr4L8PzMeUpL6hLOxueUJ4HLNlAW8nPffmU3K2PLzWLnXJJYisOZbNfxwJHlFBt8OSYUM5KkaVePYGXig==","signatures":[{"sig":"MEUCIQCcSMI68J6wiuNQ2k8seuLT6XI7YFzs/r5PJJ6AGC4ttwIgBEMa1d+PlzTyn8VWqZfyb3nC08B0qoPFzd9w/9D4QYE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174083,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmgZVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpEtw//aa/rtNgmXaERCjtD4RRPQaVZ2Ypll5iFE2bM9+W1FRn/kGfB\r\neM8iimh/xtHC0LcaKkqqRuOyxKLwRY0oo7mTWSnVOXT6I3GQnkPwzrDqj8L1\r\nqrsIeYi7nPz8DDPhPxmLSJ3ShBB9Mt09Uns8NH49jtx7wGD2eq3l8MbWejyH\r\nTWu3yfTq8tm3bnW22K0mhHsaowPLIqy3+BZDqjWdv6pmyK+dLSoGgD2vsacM\r\njZZwq0n7vAdSUT5xq3tOxBtQmWg/heUUdSO+zkQnM51wABfTXh0gHI33Wep7\r\nLpSxdZEyPtmIaiOzorQssqNk7paCTCk4cRGq+BFBuO3cCGRORtafIoJwUTR6\r\nvTOxrJETdlb50HJoz8wR6EsjWR2KedLx6dzuhEj7xfr3D0Gs0boF5O2+cjXs\r\nSfEyXeVWsuRQXrK5AMliEJPlHUIigFypcNgY7no62nbrpBO7/MviuNO3nFx8\r\nvxLS57yNULWmrQIt+ctj8dmFGTj4g06af7Ic2D7d2ncOxiuR3DtUn9khUpo9\r\n97PmbNTKXm6NvI15cld23ijBaRYV/7Y48iqhPe0hC2PEKC1ht2Dhq+9sUKvD\r\niTFTDNwghG6IyGP3Rxfipm9fB4LR3vLLxCNIrmhrdXJ70XVUizhxytu9Sr63\r\n3+YreE67EI1Vc5cOVDwGAFhhcB5Dm+YzmmQ=\r\n=ptWF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.034767110.0","@material/theme":"15.0.0-canary.034767110.0","@material/animation":"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-indicator_15.0.0-canary.34767110.0_1671038549704_0.5351885153805966","host":"s3://npm-registry-packages"}},"15.0.0-canary.1f99f3c50.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.1f99f3c50.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"eac2e0594fc127a882bdd12eecb2babeb0e26376","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.1f99f3c50.0.tgz","fileCount":38,"integrity":"sha512-HbugCcVc8JnBSTabBNtwq8unRyky2LVZXqS17erwvrL0znzwNl+mDyuLppWs2Rj+b3/H0JO9vID63OVkzCKQVg==","signatures":[{"sig":"MEUCICgvyL1zeAU4DjVOrO0WlkriGOZyWbswUL/JQZBQCRt4AiEA3ac3fxw5eGcMP4RpfnUB1VHkh+XbSfdBUmmYRnqCoAA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174084,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmy47ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr5dA/+L9gi7N436xLocg1JaF9tS7hEccSG4Y+id2PUMRqAd9GibAvP\r\nfGc8GD/+4M6cJTCueggn3a9lUAQDg7LzffwhfvWajkqDYvtKbqq7RtnKhaG2\r\nujot6wMmA81FwnX4xVGjtBRX6pJVwv+RqZ/LLHTK8i5yWzckBzpPtGIyXyZt\r\ndBdMBIHxQSnmEIkHEaaxGjgNUC7cOcJnb7qQWhIH9Kk6HNP/U093pRKqrw54\r\nUV7RE+M12K5avHv91CMuv2hz+gYS9nipS0MduBLwgWSRP8ZyVYWt0Wo6ipMY\r\nRrQ6fjjYlnjR4xBJ4/BJMTOcrTOHEkCgu1EmCURNvSYxvf7cOIbaJPbOv1DW\r\neLIsYr0feeyLsVlD2ju70TbVc9FSUu8AoXpgiaP8XyXYpQG1n0AnKxPi/qIZ\r\n/6UNFGykXxm/O1+BXe59fnmEsFo9M5Q8PMf4sb3vuTOpmFmE9/mpQW/NrSWY\r\n/eOgU/GDGMKH8URVO/kASarFVOvdQd81J7Kvk+IEBt4fAGxNhiRhvAs3I15z\r\nyAPMDN/973pKUB3k1pmW3mm8MWWdiBEI7OPJG+HLbALUUZ3LHCBkfmdfPfyL\r\nps8X9+SIdT7D8CsRILV6TrVVvHQ32klgCsN+O7DTROXd1PeZFFhqtwePZQeX\r\n2Ur29S21e1QSihsrbQtrrEyaBFjagNLHoWg=\r\n=CQ3N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.1f99f3c50.0","@material/theme":"15.0.0-canary.1f99f3c50.0","@material/animation":"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-indicator_15.0.0-canary.1f99f3c50.0_1671114299674_0.7177552660394093","host":"s3://npm-registry-packages"}},"15.0.0-canary.cfd69490f.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.cfd69490f.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"b642c61092116d58367f334c6f4e1982611896a5","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.cfd69490f.0.tgz","fileCount":38,"integrity":"sha512-gJTvc5OvetPZJDhCYmGaCKKGfwk9EgfRh+icjOSa+RLg28+8xTeOHsj2kvffJGHXFrZLaCw4ZKNp67vPpAYrLw==","signatures":[{"sig":"MEQCIEQENmnLV1sM94K12KaNi/6cbsa5dpWl8vv+EHJYhGTAAiAU43sCS38CKYH6d5VoQbyJvjjV9Q2ck1wD3OjQjqHKvQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174084,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjnNAgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrhmxAAh3/k6rS43FJMcibK2y3jtzqX36z2+iLq4cFxrLUlXFwIFTho\r\nQhnK3VbqdGx3RQu29JKh2hjmVuL/zwYVzzrYIvqaQPKPH3sACTgh6HjDEAFL\r\n0L/7A9I05/vRWaKSw5TXdWb/sYqMTsOeyc3O6VPOjHcfpp1l0XDg7EQ+qjN7\r\ncciQREWI9ATcCg6ZOPhNji3Ernl8RnrYyeDLHW8lUhn7ncVI7LbAOwtu6RN8\r\nAgFHECoUdP5RqkFkq/Jto/hXppd2Zn7g+hXL+k8GA/6ejg+kp7nWaGwT6psL\r\n/feySLmg19e8v07ZUfuld8jkKUD6XnmhkbCy+Hunxj5E2//mSBDKCvGr+wx0\r\nV5f6+f8Y+SrFJ/lS0QQXjKAziLrkFGQN49b5tp6fyKo+nF0Q+xwJmykzppy1\r\nDsEy9D6nlnbvHp4XVpnc6kolWcEP3+h4ZysVM88uWtgr1oHlMYXv0tpxQDNv\r\nKRu4jSREB+nKsANz7AJJp+iz7tpFlUHUtFsFBzqwlmI+bhoo5r7wj7ZYrxmT\r\nqhfLm5fzG2HceYViDJgtwrAbrn1FYTJnZnnfdK/4e/LQRnSd1x5p3ed78itD\r\nie/OX1bYwdDZ2ysnUD666EqTjohOwZoJxQLk1+xedIWDHqF0Kvu1G6aYa93o\r\nKw5wBpsA/BV3PSgNCjRhCqUr9h/40QSkJJI=\r\n=2es9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.cfd69490f.0","@material/theme":"15.0.0-canary.cfd69490f.0","@material/animation":"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-indicator_15.0.0-canary.cfd69490f.0_1671221279690_0.017622208338736955","host":"s3://npm-registry-packages"}},"15.0.0-canary.94ad8d986.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.94ad8d986.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"bb3fd644ac47a0f0cee42395438ddb6edfbe309e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.94ad8d986.0.tgz","fileCount":38,"integrity":"sha512-hrm+hzJFnoIvl/ZSkkP3p/NLTME7DkhZiHx7pGCPs5Snued6Mt1b/3j/MM5AGSpXuppIk4xis93dWt+BVh+7zg==","signatures":[{"sig":"MEUCIQCqcRrHfMOedgwbHXyZvqFRUCH6bCji9XoMQZsnpxgHXAIgP0/+yX6YIskzlu1rX5g6+pPliOgsOH67lmBE+/jHEfo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174084,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjoLrpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqTbQ/6A2dgYdkFYor16FmX9LdFp7KgK4UPzsgLWYvXx3c9r3tE2wrC\r\nwpEN8K1IvWG25S5rD12TC7lJuahq40vyWBuFVWiLBt/1bppt0HI/nH7/ZJl1\r\nZcgMBG/4AoH2nCBh7ua3cbARLu87zYezQpiOkFWh3WLC+mHmSn8KWji9QEAE\r\nLKi57wzSgljdKt9PJ9tKfFhs7wQAi19tXa4j71gA/iCF9h1K2lx70cJpbx9m\r\nGqpk7WxQDCaQNtH7en1C+Abv9l5dwKaTfaWRr4Z0DX3BXc53aBinmLkso9LC\r\ndLBo4L8/FmisAt4/4Veo4MSdBaPKBuP8HLmIiV9NVxLLltZ4RtMUGiR6J0jK\r\nE68uskBmFWGz+bxcYm6/XZNS9bO65KrvPQ0AH0+3E5P8kaUwUpTGZAhP7p2+\r\ngw4yfWMyd4OJLB9UE94L/TxKV73sRXn+haY0BNza1qjlZvDnWZ6TeYoUka8R\r\ny1qKr2FF1BM7yY+rtoL4S0vuRCqM2WFZyV1Upk5RPLPvMCYdYpGoDV72Bgje\r\nZ52/S+cvZ0djWVPUTz1R/6g7Xeu8h9lONqfwqhMdXaZWGHQ6Q0FqBI2zeCCu\r\ns1pWECf7JaJ6ESrI9OBCAvgG8b3OyaCPB+DUD+F5mDBXLfzCXqU4dfNoWYFB\r\nEuKcdBk9i5BLI784ArVSPXWun3JwvQN0+9w=\r\n=RkaX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.94ad8d986.0","@material/theme":"15.0.0-canary.94ad8d986.0","@material/animation":"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-indicator_15.0.0-canary.94ad8d986.0_1671477993484_0.46482697236309023","host":"s3://npm-registry-packages"}},"15.0.0-canary.604264203.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.604264203.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"9ce3a9752f5b0496e9d81f2085bcba50b9598028","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.604264203.0.tgz","fileCount":38,"integrity":"sha512-7zXLadvOJk7N942upyI5rodUZPKRzFZtkmi8pPqTVqzkRt+Y9yUwR5oPNbt2xeAfX+ZerlepkKY+d4jmQK4OhQ==","signatures":[{"sig":"MEUCIE+XCPnqNKqF0OS8Obxzh3lPCA0lpLSQJHIPw6V4egLZAiEAjEOwzOR1t5QGzp1g+w1S6kOzHsNQK5usNDPSIyf8mtc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174084,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjo31AACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq66Q//bN8E1BBrmhxoGgW2X6YAN7dXYhEzyUTQNTyQec4jtV8dDSeO\r\nOxDEAFfYRD2rHBIylIB4voR7apfwnFS6zEandndcDCp6CeXFrYT902n8+HDH\r\nssxbIAf1x8gHF8neniEqiDu5c5mpCG5+VcYqBPvyebelmoWtR1RuD6Myvdpt\r\nvkdirQ7XBHK/y7i4TG+OnjfbeWK+KJR2NI3TiKF5DvcEw2Me5WIOjfHdjdWK\r\naFsRwXbhZpssD/ThIXEa94sEiZPg8SgkM8mlcgvPcSGWB4KJ9W83S9xwnGME\r\nVog+yRLY0Xw0+N9SEh9h5z0n2fwa6j/GuIhpLBXsImYG5aR97AFP9BHojwvo\r\nOaVPZwFvqRFQl75MCPFoGbnfugtq4kiHaXT1gKjtt+I5JdMtA2if0D4W8kMG\r\nI8RwG5qE63UkugU5CsRjoq4EikoOcufLnGIg7Bx7fE/5mwgTfHAafXVNOMHJ\r\nV2+J+ZF4oMtUE5UlN7fLVRvD2JF5hZluBdsewis/3cbmF5bWOr4EuoEkL0I8\r\nj78OCjsTI/NW0E1qfZZXps4GLZRZmxOph3Gn/QZfFs22U6NR9vx7uGr41XQ3\r\nH3kP5ltqPuF/1OF+grSFwSHpOwID1djaqP3i+T8eV39dll+015g0TFpThxVJ\r\nHZpHpOlYrYZuTd5yvAgHLB1U0+aEpGt1bTA=\r\n=XvmT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.604264203.0","@material/theme":"15.0.0-canary.604264203.0","@material/animation":"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-indicator_15.0.0-canary.604264203.0_1671658816131_0.02505359269370322","host":"s3://npm-registry-packages"}},"15.0.0-canary.85bcff6af.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.85bcff6af.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"6e03cf5dd3faf990fa159eb0e4b54c0f332540b1","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.85bcff6af.0.tgz","fileCount":38,"integrity":"sha512-B0S8flFcCW+l3rzeqRamagNCbvum5pF9zoSwe5hSfOAaS+iboMhXd2FIllcP0gc/aYKqq0vD4aDH+RJ6YXJpjQ==","signatures":[{"sig":"MEUCIHHcJLjKrNWTSfQ72+Yiuf1PVbNbPowDxA8btoj3WxH+AiEAx1XAp+mkJMI6W2g1mHyb9kmVqWYjaP1sgJFxHDrDI8c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174431,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjpDBiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr1IA/+IgKcX4BdpXH88qFS4C7ROIYaTgXfZnKPXcXtx41soCk/IMYs\r\nMQ6v3MYzMZuMb05Le58bxJzC8l3Cf4twoqJn2kUCitT5VcpDD/a7itdaiM2T\r\nCk+Lhpblo4Vq3T+XHxYULhcNHx2sSMqc3zhk0OzcVUrNN95hbkymLvZ95nIQ\r\nU9b9ivuEhXvIZ7sEJHvPTwVyCHkqm0WjPx/fomMtoX8gdi63DVsnkHjpKS0u\r\nmbzURu8BOmZhQY9i+YVVzZzRAq4laVEK59p0pFu5+F9EBJN2xQGl015YP2Mb\r\nn4saxrDyilelB89x3Y9Mr2oY4xBHnTR+znqACWlazLhHz/aQlV3/UI8sOzBF\r\nRDdyy7//hPS9VSphPzrSVMy5rPhvDeiVM/bhQCopdocS3z6U+1Ba2pWBOhvF\r\n813XMa6P/mXMIV/hQ/+Z5wCPg7d0flyM5b5C1yFBFl7/29NSBBKpmeDIWnzw\r\nofuQ+s9EFhZKxLfdRnyg/o/xiHj7AA0yodeUsscz3lubjteyaNGZZV7Gz68j\r\n4nPnpThrPqfWomJM0ze/u3URTNh2n7FvsK3NWRNyuOXJQIra96+UQP+YHOjb\r\nDgGjmeAIrLqw7tPiPfjlKB0fiziHnZWMTxCsRbhJdeuTTG7eT8TYhtrTc1HV\r\nYQYF412CC0EeLueRhnO3RVII3B4sOznpnkc=\r\n=h/X8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.85bcff6af.0","@material/theme":"15.0.0-canary.85bcff6af.0","@material/animation":"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-indicator_15.0.0-canary.85bcff6af.0_1671704674643_0.13169806222678004","host":"s3://npm-registry-packages"}},"15.0.0-canary.ece3e8d21.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.ece3e8d21.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"d5067ddbafac1974c526201ec57c74bc66250b3b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.ece3e8d21.0.tgz","fileCount":38,"integrity":"sha512-WcxTtzjeH3pWq/KX4GwqeIYSiMX8fd6xpYskIdmZMQUosXoZqgZdxN4onaTOjP5xM1oN1MtwQDJMt7MM1JZB1Q==","signatures":[{"sig":"MEQCIGFCzenfm73gHkMg2PKrpVxydsf/YLJ9dBSeH7nESVx2AiAji5kWoh8qDRJ0rB5ACG2u2MVwWf7SoqYszcVT0Ct/tg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174431,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjpI/MACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoChw//RP8qx7yVO7iKwpk2yAlvXGklQQw/n53fu/pkTyhwcNR41yIe\r\nEKqM2vjWtHLqJtzqEccb1iqMu6mjyc3bFV8IGIs/eRh+udvtdOVDS72jgw40\r\nUzwZnR+xNWnhyHtcyn6jb+3A4BuskqmTb9HcbSD47tA/Ezn9F8lRZ0W8gQvP\r\n6Yl6+4Dj1Srks+O5falraEblsFGFayAgIi3RufJ7diTWWtdeHgPkX9yFzkYJ\r\n0ReYTQyaZkh1fDzhmbNr14Nxa9URFW4G5zt0snEhYkiQdIaG/zBRlEkKfZCJ\r\nZbF7f+XsMdwW8063/oxU7zsD9sj884rwSQLV10NwmWo7YwsQU8DUFvjzf4zv\r\nCKTePd2JeqK8QZaBG2AUchLSFm7cTYCJhoLCmsXA4oQllyK3DWGi3quNBL3T\r\nWBakbX/ywvXO+mLsFM/63Wadkadt4d+IQil6ob495LDYyuI1LRVgEki4AfeU\r\nJBRH/CKkF3qggahY9PXfVvvZG9y3zBbM9+U8JJHI6vAd/orXrYPhlPrKkOfi\r\nE9IXJTQEkL0VhIzFQOsI9AKR0FOye2xyY1CI3RbdZzOcQHOU7mj6PClL4ieD\r\neVjIQMfFB43M5UKtZAnTl1XaM3n9M0DIqBBcLpMOu0M9op2HThjkLk+S3FbZ\r\nX+VVjh/4dw5O9ieLxheJaiTaZr3q79d13XE=\r\n=CRbu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.ece3e8d21.0","@material/theme":"15.0.0-canary.ece3e8d21.0","@material/animation":"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-indicator_15.0.0-canary.ece3e8d21.0_1671729100604_0.8331175354299409","host":"s3://npm-registry-packages"}},"15.0.0-canary.278ad53d1.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.278ad53d1.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"3816a61dddd4329b021b1eeecdcbbfaff4798c5b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.278ad53d1.0.tgz","fileCount":38,"integrity":"sha512-yQyKaAIw8m4G+Y8P/8hdA0vvbt7oxHt2yiJudtdT0bNf0ZpFuZ3CwgZsnRYpAA1WP1bMSlgf+Q1nFCiIXEnUnw==","signatures":[{"sig":"MEQCIHQTWRpXzRCcuThx9yZ+7C8O/5xu2pawHH2d42bqB/lhAiBgAg67bTYpx3Q4VDX19iVY8LuOXksOxnKvgS5G79c/fA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174479,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjqyWcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoO6Q/9H4cqMayLfBnVDZbv7zCasfUq+CtF5Z7zsXncQDW6zLCqrgmJ\r\nwz3zlrasSRu4hPqzEIdf8Jecgc4iCKO00N2yPJJA0/X7qLWgbOFX1zTWgDo+\r\nnFtrkeSY4HSsx/ijD4wjMcNtpFbl64TgSzTqYVyJsNY8A0xOjUt4JiFJYcpp\r\n8byoKm7U57hpfYwl5SZhGNyZhoJ0gVKR7VR2jrh3HCF8Jr5+2fnJq71oArK+\r\nzaGpE/H5NhZ/IHkCQQgbV7W2CdfKalGHDr5zFxc3uMPgrltHzlhPnX1TxhjU\r\nAXInZx+h5acuZaWNziGo8VgcsuLdya9Tw6onzcbiDSfT5YjBOKLtKq7woN2V\r\n/HVp32qGpEXzs8ylyVPTQ0wZaaZOq7dbwZqjkl1mJOda3YcofIRpEFrLAqOf\r\nomkln+U7AaoMbxrdzALfwXH9pqcTk6MY+X+OLSruKFviB6VBqHqEPLf7cBcJ\r\njsupz3cu8LKEgNg140wYPOvCtV+gV0214TK7TQdHNNqu/U8Z5lilQngC0hnF\r\n8yXCqNBHCBSbKClLS0GUuyaHsUmBFnIOGuVmG03fjBDdeCskr2lTmtnA4vtp\r\nzUddm7wUaDlhwx0DRBCfCBFkGT1FTvMzYyPdJfAOCNjpsbYq93SGMGa2ID0C\r\nEO+J6zO5hNC7FQ391amt0QJ9wm9S1kjuzEw=\r\n=a5Ou\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.278ad53d1.0","@material/theme":"15.0.0-canary.278ad53d1.0","@material/animation":"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-indicator_15.0.0-canary.278ad53d1.0_1672160668466_0.13989752501529096","host":"s3://npm-registry-packages"}},"15.0.0-canary.a7d8389e1.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.a7d8389e1.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"3950fb9683993679ff504d359d05142fff1c6e12","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.a7d8389e1.0.tgz","fileCount":38,"integrity":"sha512-KCE85pnVEGy5wYXE+sSvXVs36CFEvnQo6onTnzhbRpQ8h+tN1Nido7u7As3AkmdfiV+JZ/szuorOmYhv9Xy8rA==","signatures":[{"sig":"MEUCIGLyMxvqTQPoi6tEbqsT5qicUjoZ2PIwikkSZ/KAhiWmAiEAyGUIxhaZfP2xZRgUXUtUCrOQXx+2pKTqmho4h7pWnrs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174479,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjq0FyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqKIA/9HLJsW131pONz4ra81YYZDdLN9BdKZjS5Yg6flaBtkdBvEQ3G\r\nv00yvfmIoZR1YsYHwNJU1B/dhIyzdVT7BExDn1o67CK9YFxB0Rfx9h6G3otl\r\npDZ9lrl1014pofkZSiBgo3XiRcsqJyk6JeVWhYU6Kgg6MgQmkGqOSfSXNdgG\r\nVWC2traCFKaZc11AodLcYX8SLFXtTLU6pBzkrguD3dPWlaN5Hd3uIGS/GAMU\r\nGLUSd8Pk7m5Kcc1n7hTjOT+oxj1JmHAzwKR4zhkrI+ENuC3FxqtkpCAW6Qki\r\nYYJOQmemQWZnPgeD5eWgjDXx9HZIJyxrzXUSa19/jkV+T9n6OYJLgt23+q0h\r\nbd5HG8lgsprRqGiPiHzG1YfLE5j8jSLsACGRQBZHu+MHFgorlefaihUsb7+t\r\nWNDdO8k4fh/cDbvLE1Igzs0EgFYfGo28xmvIZN4muvK+dBSBlV/nBrX1zitu\r\nWus7MbJ/eKiXNt9JwtjeQMtTLSdiaVCFTCV1/JQbin8gXnnhh8yvGJ1dVk3N\r\n1CGN3U7RA1GrPYfJ/miTlKUoXVY4BwujzIy144PBmlc8JnACLXU+jOJdUTT/\r\nxUuMHyIwHklKS9kBoH/qbe78Hy4K5kUMSpMiD/nlskMSMdk2wXJRj1NZV1w+\r\nxjub+ZA4wCE4JqLjxxdparO/JnklrELt6gw=\r\n=vqCP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.a7d8389e1.0","@material/theme":"15.0.0-canary.a7d8389e1.0","@material/animation":"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-indicator_15.0.0-canary.a7d8389e1.0_1672167794571_0.41940150382845265","host":"s3://npm-registry-packages"}},"15.0.0-canary.8175d5eff.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.8175d5eff.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"9143f2da009634db8f70e4225eb9cb7934d2792e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.8175d5eff.0.tgz","fileCount":38,"integrity":"sha512-ufCZrgZQzxbAULZKwE8mC2xQK+o+TcnlOnqSPb/7DiwSSdb8FAehKnWjAcM8+flT1x4rNTjrlEbXg/H1HO9Q2Q==","signatures":[{"sig":"MEQCIAO6Cx8EPNQsGRBQMw+bn0+FZrR83ui1zjhjy4UqAWx1AiBP9D5//STKc4cQiQpN38VVMaMCAlDxptZmmmhCiFZ2oA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":175443,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjq6EFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqyYhAAjgxoZF5//6jfTu86gKRQSflEvy2xvaPhZI45sXz8b1ak+ijr\r\n2SnH5Hrr+1u/nNymI0C18GqNGquYBu6N9skvFkopOqZwwFD3LiG1/rj+K6o3\r\nZYEA8k2cNY1BniaKUF9AFbPLRPJ43+/IT0iAsk9PsY9uanYSvT+yRSvKh0qt\r\ndva0lZrYo3ljGiCavKG6b15I/iuUKLW/ijIe+9Tk17A5UBlfNo5cwT+vwl4V\r\n0ROCayRxynVX9x2IJYordaQQhi3YrchiB5jAbx5TbTZN8Z0m5KOyALGr4eSU\r\nWA9FHglcBLIGrWhNWHsPF/4mkjr3nGk0oolVMkm2znjPwmmVqBCF4mt0uErG\r\n4dxVGOUo6qhdflchfEpqniSTcTidDp1hnHFfnaZi+dlds9KI8sP80EPQmp6n\r\nwA5jSKu8cDagDXWgOSmmEsDzvTxQaTR0Kzap9A2GkwwnPymMoeF6zTYZx7s1\r\ny8o8/Q0smKKdjZLBWwD+hsTMOUqoBxQY1tipvx/lYqb99dsayVaAWrqm+LWM\r\nw9Ry8IRACJG0ycqs9VRqdwr9cnP1CvOxeJDBFsCinYTPsvGYewZGZR/eke4s\r\nTHUTtkkIzlQT+tCiFz8/0pbvlsRHoWDVr4jKAcGwYIgNT2QhfkfMoPTIK6as\r\nDOZ040VlFF9gFjtnAIxgHmrv23hp49OQpoY=\r\n=Y+yn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.8175d5eff.0","@material/theme":"15.0.0-canary.8175d5eff.0","@material/animation":"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-indicator_15.0.0-canary.8175d5eff.0_1672192261171_0.12418058852287994","host":"s3://npm-registry-packages"}},"15.0.0-canary.16abb41ed.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.16abb41ed.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@15.0.0-canary.16abb41ed.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"148c603efc6d7ee12cb76b2ba52aede883e4b9c9","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.16abb41ed.0.tgz","fileCount":38,"integrity":"sha512-rm8pefR1I0vQs7VsM8ylrlfeAiIltU3bBB/2zPLnTe31ftNj5YsAJJyFAuqALul1sMgCvc8/jlKr62WHjmgjWQ==","signatures":[{"sig":"MEYCIQD0QcYM4T/690s5TQrLrycz2yNGw8J94zN1ou/kXwuwYQIhAPnq0yJ56KT+0M07No8WoQfFlHKMWddxNCmF7l5f0NW2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":175546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrJsSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpDkA/+J5fZm8bc0E4BNo/3gzqXeKn/n/qhe6pC7zDes8abjduJl7Rk\r\nZEO9Rm9HdOoa7OFyNJTsAgF5PCAfYapGpVaRKzRpY0HfqB5kiUeWZUzTgmuD\r\ng5MzHj4KR+bk20mAkhRKkhrf61IKpef3Ejl/6fU6DQfPt3ze/ydO/0SjxxDn\r\n8AS+rsxSonMvejeztjdHbIpQIKJi8YlsLb6B7hUiqbHUL//Qcbqa6n3QFT8l\r\nUaM9jmFBmNAGAAVMsJlwkQBWM1lRlqOWUdaeGEC/d108haDJ0lVhMgTHsG4g\r\n6SIm9AuZIBrdJm9K3QfGYQrL4CVex9zYSgWwQZdK9vhdLLPxRzOrXKRkMhj7\r\nW2qdva8NKsrPv2oXi50+sYpx6CeljR/omERyBxq4mOnkgGa1ly7hL//0G4gS\r\no7fc8NWh2qFcGvcxc07QJxWeYXlHKO8V5/eLEUbOB0AdcHg08MOFwc7cBrkC\r\nIIMbMU3ggPrtvvgFO364fj74NKOpUL6fkhLoHQwf9jxVeubHo59cN44o5+2/\r\neavzVoAYBeSBFsyFpoTEELa52hbKN7DSo7aFmITn1yNeSnVp3WtCft9gqZ/w\r\nWsVlSY10yANhfctdz2Cak/sy87sCd0iEeMUI5qLoUKYyGqXJB5391L3tCYHh\r\nTmbjZLERRgl517oldAKO6bm0H09wYYPu+VE=\r\n=9ZB5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n","gitHead":"d76b7c826f30ccda72f622ff722cc7585648dc34","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.16abb41ed.0","@material/theme":"15.0.0-canary.16abb41ed.0","@material/animation":"15.0.0-canary.16abb41ed.0","@material/feature-targeting":"15.0.0-canary.16abb41ed.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-indicator_15.0.0-canary.16abb41ed.0_1672256274717_0.9630001409076534","host":"s3://npm-registry-packages"}},"15.0.0-canary.e21dcb86d.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.e21dcb86d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"3439f358e1ae8c7a18d794bdf47d97a93c983bc1","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.e21dcb86d.0.tgz","fileCount":38,"integrity":"sha512-3axwKF5g+TWtOWwgkRGR2ry9hYZn4xeSDI7Tsn5/dlyKPqH5AwMQbsABYlDZ5Nky6Cf4U3o7NXrNaNlj/oaIAg==","signatures":[{"sig":"MEQCIHUXcdaIkd7WcZseWSSjWliHOkjpOa79pjJesaRJUdMoAiB7y0kUeXH21C5JPROZy1Rxg+BkxR5/lA682vmUm9zS6w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":175546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrZ3CACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpnXRAAjcHtP59CQOUAr/h/6p9aVBAjHJNX0eaFibKdGsdwQyF22/Eg\r\nMKLgWNtMtyuY5W1uPfmQ7+a3HY91JsTY86F4sfWzag6sYVinjNhTyfrJS3KP\r\nDzR2jnf6bInK8E8qZzA43Y/Bf+zIwbkohZ9U0k+nWl9otsBWEI7eU5wa5ICJ\r\nmueXSx5qS5ABd/q8rHOxDtXZ6m2CSpZCx8B4XFo0Nk/2w83GiRYollsDONqz\r\nrs8+WkW37Gls+//Dj3BsWKFV8CZjihcTmKi5Zpz97hxUiHSSeXq0m52fvt2b\r\nhmBjIUvysFbwATQw4RNCdPHPUgaPzlqk4XLudtiBYC31nqENNxG5t8WuYUjn\r\n40c3KPDM1jCa7IgYb+aAVsHtT0iltrX+6aOH+3qAjCWI94uLNdo3umVAu8lx\r\nkR/tgqd8EkuLKLEu7XBeuHbTakhsqtKsftBhqK5UXz6Dw0CSuvDOyLckVCJ0\r\n8RKoGA8Zqr0bIU/B5htcR/RNgQpDQKMYGZNr5IpAygP9+km9NqXSeqoqn4/L\r\n5Z8aNRlXgvjOygVM8P02+tkoPWZOya3+Luh8hrPkVoxET5zAGmMR5TyTy3Jx\r\n41Fsr7OIf6PdhjaczVdpq6cQ+lVCifK5GiMrjwiumZJXPmQTZk9J/JUtp3lx\r\noDCCqscrbmxEKPlZ9LoRT7oY7wnXMZqUDdI=\r\n=9LzR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.e21dcb86d.0","@material/theme":"15.0.0-canary.e21dcb86d.0","@material/animation":"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-indicator_15.0.0-canary.e21dcb86d.0_1672322498211_0.6552939349691176","host":"s3://npm-registry-packages"}},"15.0.0-canary.20ab6f5a8.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.20ab6f5a8.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"b5f3464584734d040b47c7f1ba4342dbd99e627d","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.20ab6f5a8.0.tgz","fileCount":38,"integrity":"sha512-Yz2lkkO7RNldNpHVuUOKXten9Es4xJAsHIE2Z6bkeSSh6o65FnfBnXIY4Bf/pEZM3yhIFfiLoQq4/qmgRO/m4A==","signatures":[{"sig":"MEUCIQDvPfcvTJU8YsMJvr58A3KC6NRthPE5VQDkhf8SolGWGQIganwf+8Cgf4j7QuRTuzlyynCjNcu2zO3tTuTi709P5lo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":175546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjre0sACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrq0w//eEzcuYtiZxO/Y+WP0ZF7daIryvtVt1fDaM5yip4Pw7p65ap8\r\nhZOQlWqen7MsR3q2xfVIcsqzniMqDMGgnPtmXDjHKsAV4SbBDRMI5H707hm7\r\nxmPicTgR+ieBkOGI+DnQSUInfdInGoEKtiRem6TnQbgbV3WPP8ue6L+P5kNg\r\npdyrRC/2loU9vcrZf8/wPdDmD0RpXCBkdA/wM94SgUg6H/3vf//UwuhJg0g4\r\nnczC1ALS/nAmUUoLev/mw86VtVHTffYyBtOYJqmxoekVt6NI280pWe8SsyNX\r\n9nfB8bJ35r3U4p6/Pk8yt+LTzQM/snO+8iOyaSSTgpO2u3uiG2E0GTibhTlS\r\nTaS9jXouvK+QgLB2UJUepUBlkfsdXXBmrHuNKT2zkOm/qPGbybswcVA7cetN\r\nXIsw03dlWGso1Qf8uXBv390wKaF7/lE5z7mizbP0isBhLjdg6UX3XeCM9TTP\r\nGL56bDOBQkOL7aoM4RnCUs1hrYuABY7JeCpBnQkjpYCQiKbOJTnE+/o1hJF8\r\nNpRRFR4R8amj5OrrMiSGVHUpGea0ueNetJVtp7XvesrHGpjJVDv1yeJuuSSF\r\ndPOtbMhseUO9yrmuJESPWG8trWJnF7RDDo8k2aC3rPAgt4WE+06v9PVqb31z\r\nAtVu87rB4uMnRmeUFZpTCwKC0egSQ323p7c=\r\n=VnK4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.20ab6f5a8.0","@material/theme":"15.0.0-canary.20ab6f5a8.0","@material/animation":"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-indicator_15.0.0-canary.20ab6f5a8.0_1672342828174_0.41370712737302995","host":"s3://npm-registry-packages"}},"15.0.0-canary.b9806f623.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.b9806f623.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"fdb756bf05cef289f8c3617fd8ccce96100b2509","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.b9806f623.0.tgz","fileCount":38,"integrity":"sha512-4Z9lx25dQzL90L/0WqWl71McIA6XK9qJ6UQmRrot1cwqaLj0JyZ4YcIa+BfFxMd31HcV7UJvxGHsIRE6a6fBlA==","signatures":[{"sig":"MEUCIQCeQ5eVqXufh+x9MNn7iwj87j14gSkEZSGmQ+HmpN68gAIgfSe+ek8j7CjKPVdw8IJrR5+Ry2eBx3TAL9EJYE3yg6A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":176261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrh0uACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpUcw//amOI1Ci+3iGhKwuD1yJWd0WlmwrAQEYRxSXW6V1U9YQH3e67\r\nFnUyaaS40/bjEBkXb1N/O6ZWn1AeDz+QG/0bQVZzRpIWlp2adweNE51a2Jvc\r\nTgVTC7QSjlxwD2eKrhZsRqpWYenXUz3siiRmp52zqYNExMN8IbvRk874mTbh\r\n2QVHRSYQdNsdJFFLX7u3CfH2wZG7Frv5dMGUq8ki0TXHaTUUih90Z0rPTtXM\r\nYkeiAMukdhu8qcKmBRvxPP6o0Psz4Ri5OXrwlqPFG8G+neycGMfpLtgJxhjL\r\ndOPPjNLVq9EBMzEL7ENQO6xQdw2B3WFtqdmg4ODDEhdCOx4poVeNtmWzh5D5\r\nonmMzqqEx+5YRiMZouN+JLevgv6K+XT1ylAfD/tgs0cWljK7PKLkYRICsiqf\r\nKEAGWNDc3fBnqI+KmR1Lwi1K65tJh9/qXwb/szxG5rQpBWn9Tj5zUIvKvDE5\r\nFkrUGpu9y+OgyZ/otfoebPZ1pECRxkEdsMbu54ydExl4pVHThdIqZMfiHWHE\r\n2zg4nmewheXsX7tIJTM9cqIDhwa8D2tsHC32PiSzxF1Y+iHdqFLJr4Q0PUe4\r\nfhg4FhgAVlW1n9InFDWUh5+7yP57+gewZDhz9AeApdk/3SWs/VXZWJ1UD5DQ\r\nPaa8FNaUhZ/LoUkVa8mTbwguHnNp54HIna4=\r\n=CmPs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.b9806f623.0","@material/theme":"15.0.0-canary.b9806f623.0","@material/animation":"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-indicator_15.0.0-canary.b9806f623.0_1672355118705_0.9691949891367444","host":"s3://npm-registry-packages"}},"15.0.0-canary.50c9f550e.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.50c9f550e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"672e546cd2b3413164677156b5a4cd5717d5702e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.50c9f550e.0.tgz","fileCount":38,"integrity":"sha512-64WkH1P40B1onwxXIo/KyYYLQWvUDhqsl5QISoKKcvS70exlBq4yu2/xlA7D4JH3mu/b8jKbXbeRlr20EUQEsg==","signatures":[{"sig":"MEQCIHkvhvSlStEOYL2+SbjIrBsUOe4FDRv94DMBTPZwFJfZAiBtpLqFx3qjkPB4GxGL+aXDPoqFSJmNE7DQ9JpGacc6IQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":176261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtE3/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp5zA//TfQXUdbb1cTksGZuPvMYGdOIjgQXSSxucDCR6Bjf23DXXpKM\r\nH1rWdf7ksfOmrB8x7SNU3Xo6m24vyfMb5ilbpdRT92UCxLIbK1iTU1VeIe1l\r\nX5wsTYqx/SNqnPi9xKkMpBs8LEr8vn80iwKYDhuM9BXIYJDBPyZtfLJXfTs7\r\nlYVqxImogbjf98j/YlCj2k14OPRGez1vFif8DZPlwcaol2XFXbR2Fehavs+Z\r\n6VzgKQgPFlTA8Pl+sC1Ag6Jy2Oha8bwET9QfJkOpJOo4v440DfLJtImUcLJb\r\n4kXqXI1wNLO9xtWaK4Uvstn/K17xqF94YcYk/3P33hDNGbimGNNCJU29+zhU\r\nfwnQHRlhMaiV55nx2eNQHClLFAzygcUVN9/lrRCvpWzTbkJiDWBn/hWKgueE\r\nkRh5DBAgPuKN2s/lg2WgLM/pYJSmqQszkvNJ9s3DZMIg/g1BcauuKJd/X0Hq\r\nytjaCnrvM9mHN0LnAy3/ke4I7QyDBFw4ZeQCbasqJ3VtXNue39pARsAWGn1b\r\nrVNSbE/DjUATi2vVoNIhj1wFooU105nkDWY/g5w8p7MOFP4iyZYBaBw/t0B5\r\n5ERD0FtF3FXhwC/yQyG8W6aIY+BhC48/HyC+0PINwVQ/bPzxYcgc8946XLTn\r\nBQ9PzGbXwEVmmw8PBclO2ohd6bcqqzijRHg=\r\n=A3Wl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.50c9f550e.0","@material/theme":"15.0.0-canary.50c9f550e.0","@material/animation":"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-indicator_15.0.0-canary.50c9f550e.0_1672760831362_0.5126109597199446","host":"s3://npm-registry-packages"}},"15.0.0-canary.af490a848.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.af490a848.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"120605e475a87f46cf86ba720ef9007595135ac7","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.af490a848.0.tgz","fileCount":38,"integrity":"sha512-/WP23of/LV1xbUsYcDdARYmSBfHxlXCFn9oDmLTlufRpMZfuEYJvh9GYomuJryPZklW1PWs0HtXrcb6TOD7hyQ==","signatures":[{"sig":"MEYCIQDA1bPwBdt/yAy+D6B9d2VD1ysk4jK/BLmSJ2y+wXtB7QIhANmeRHLhI/Sbi5uY7ycDBCywDtVd3RVdl3JjTHa7Rf3a","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":176261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtFAoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqWEw/9HCNdTZjHPmx93m0wxhgL7iPeGd2djIY0AharhcdJQZDJnXwl\r\nDJKc4r21/FdbaDnqBR6B3TUwCn3zRQm85oy+umrj7w5wWU1FFrZKUcG3jTzs\r\nH5HlbzGRzr0h3GM3EGyzDPLP/LRCF4Oq/RRWbWz0nPhZMlpBm3ZQmQcYF4kG\r\n4rJ76krylzvUiGxdmJOSLAvig4rRvsK/speFPfnGFQ0Oqn8Xmm+PFoQ3X1+V\r\nk6TAEfwu6DFK7VO0Q7xWUFHrKtYct6PB665MZ1romBGAL3s0SmTycZe2Fm5p\r\n2S8+RjegRAbzZ7qfqyZ/iTtDwD+PdxSIUAsxIrQL8th2j0eCxablZK8KSiuZ\r\nkJrAUEfI8gsG+FrTke9yQiqnEKvjUezQriVVJGc7bqGTEvpZcjc7pg81Hji+\r\nwlhoQIDivizSRVWm7fRFJeZLECUo/rmCWLTp27JPWoghS+qIZEawnX3GcPMh\r\nAMXQczd9FkIU6cTzju3R3GtNGoHDcceWDFAEe9eNLKgGBNwIoNOAOU9IX4q7\r\n+PhRqTV1CnzDl8q1jsqj3Dq+qyyOTyfL9HTieSpipomRTYo4c3mJpaKdNPvw\r\nJthabRtGujTIbWboCukVFzYsIjaCEwbWa2RFfkXLFjZ3+PrOy+99ydm0UJOe\r\n8/pD9rxD0oYwPaujslchpcWvVA6D0rn+xPI=\r\n=sl0J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.af490a848.0","@material/theme":"15.0.0-canary.af490a848.0","@material/animation":"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-indicator_15.0.0-canary.af490a848.0_1672761384243_0.49486217816382494","host":"s3://npm-registry-packages"}},"15.0.0-canary.7cf487c98.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.7cf487c98.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"bb581d5430285affd8b69133c4a9440e8ca2f1d2","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.7cf487c98.0.tgz","fileCount":38,"integrity":"sha512-tqbAab9wHCPmgA21vP0QZqJS7euIFg+b14mQaD+ICraseUMOyzTd2pQLqwJbbh42jcz7W7YLcx8aN8EX/G5UMA==","signatures":[{"sig":"MEUCIQC4iDeHYcrtAY34OOb+jJ+VzbsBO2zCDhf8HZpDYYwXcwIgBIQz4JNPYOfRmT9AXQSPjqnwcTlOV8yHxAmX5Dhcw9g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":176261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtGgDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrJzw/+OaD1DaLl2TvUjix8j330CTS2z7LRF7V+i9Ayi2mOG4jmNKJW\r\n0TiUR/aviJNZKTDDqeIWEydWGMb+NNKkXvulHtX2SK3ayRoDbJrIIGhupy0x\r\nTBQUU030DOQLIDDflUsEEo1jYtj4l5fYzx1J7NEAtN/x2RkxvMMpdSq7RnjC\r\nLxG1uzHqmzYxHFFog1N71Yq+nFogGDkCgVoL8X3JtJxMPDwyIeY6nrkQzee1\r\nLe6mpdnRijYzMh0L9O5RXAjUJkhtQ96oKmVe/qCfCrtn85enw6kr8bwq0x2m\r\nPeW0n/2jvu9NwhE04b89q3CX45bHEX49FrkGLfNsRI+RSoK48NU17RFfx4fm\r\nCYBUUCfmRIUIUW6jHf6WuLY1kqha2+Jic7grIAY+wRj2+31VmlpiHLNAWo79\r\nFRVqh03vv/vpIHdKNbwZdI+DP3fk7h/6xOvyp09wAHiP/ASBoPx4XDNYq8Go\r\nXHCBPcoF7nDuhhhQuxWZqOQCGhPb1teqUzrcOJAF8dQ4lYHOC7uXSS+rYV9v\r\nGbUrEJ8KHTLJn5Ta5rsW/VddbYw+XGfIPErtxh1pkiRck59TgdbCZPhLz/TR\r\nDTGMoXRbgZ+gkv4TuGOICRtEdKU2DTgIekCb1ta99D6Ak2U73ShBUXR+xtLj\r\nuPA8DbONExAoSElykxq27GUJjwH7EqEHtjc=\r\n=d636\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.7cf487c98.0","@material/theme":"15.0.0-canary.7cf487c98.0","@material/animation":"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-indicator_15.0.0-canary.7cf487c98.0_1672767491479_0.1049360701706461","host":"s3://npm-registry-packages"}},"15.0.0-canary.a52be2d5e.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.a52be2d5e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"7e6adc2cc6e9098ba2101a774f7e1760fe158b38","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.a52be2d5e.0.tgz","fileCount":38,"integrity":"sha512-NirHkMBAps7Is/QQtfBOuuhhu8B2bN9XaqRgk539PV1Rex5VJUtpgnXXgzHXrHEjRwQaUaV0XHyDz1w0SWPhpg==","signatures":[{"sig":"MEUCIDNPsy4RaLxZgGtjIVLrEvy4ThqoJ+YIaRTRZ5A9wC3cAiEAvt+X1vh5KoSOIb0JPdrGYe+gENQ9yUVQ7yBUZjOLsXc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514218,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtH4oACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqFmA//RG75XHZzZG8qTvNzdspohDK72vcr2ujoydAvz+GHLyZ88mYH\r\nsbO+n9T4Ho4PLubOidSb71cPbWoAiG54m5WfYUxoiwo6uCRIEK7suIXos3DD\r\ndmudo/z7WS3j+eDVlQbFQdqODF0VLlcfykAB/X6xyHRPmPPRHFySd44BAllU\r\ncQs7Lf6AkZx5EJSf2gszv3KQ1zNn0W+5omzwSzHSe9mlwjDM22joZeeY1OiO\r\ndkKPLgZA6F6UAeUpKwnSJ2GT/llpEthMOVZkUalcmbdcWu+QZPWhSkDDfqO+\r\nEuGyUVe63tXk2PwYjwq+4qDMpXu/XPflKesyih4GDr1RLQWGiOGakrJ07CsY\r\nTsXcnf+uUVfOvxU8ufKRO0WU9ygifuJ6cH07wmDcrSOOnKOHTYmXY+60ETXt\r\nSem/HJj1emE/GSRJRt4xESP+2B0IeYpnapBwwPq0+ZLExX2kTxH7M7mJefvo\r\njDLh7WbAkpAqbczXFc6NY+rqzhXB7zbGcY4gal9EljUTE5oHBZscxmKEs6Gk\r\nM/zbKzxT2OY220U5oNwgEDk/rveCevCx9aPx4qaA6US87PEUGSxz/lVqpbyd\r\nyNMJxyI2jgD60kHMVOQoTUtnrcZD8ouf/hE35yv3xQT6vOv+1C4sOvvWYuFx\r\nGpg3h3hT2Zhb0I5cbiTIMMiRH6smvMX7UxY=\r\n=AdX7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.a52be2d5e.0","@material/theme":"15.0.0-canary.a52be2d5e.0","@material/animation":"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-indicator_15.0.0-canary.a52be2d5e.0_1672773160701_0.13711869701928348","host":"s3://npm-registry-packages"}},"15.0.0-canary.e38ba17c5.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.e38ba17c5.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"fc1d888b5c80c19430e1fb30029be1b10f79385c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.e38ba17c5.0.tgz","fileCount":38,"integrity":"sha512-rx2B4se69kvn+Wzjtb2oMZpRxOOjRXwZypBgyn3Y/megv/ptqRk6hDDeAzUsR+4EAeIoTG/HbyQkNg7O12ozSQ==","signatures":[{"sig":"MEYCIQDpB8TlAy164Ym6aF6i+kdVJ6mt7KKx76RZgt+zHN8KoAIhAP4GJl/gOcb86JY0qMYWGGiN1AqoQ2dXFj8fH5qHG6Vv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513544,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtKzbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmprZw/9Fc5BYLf08g8S42Ecjj4L+mXqc/beeKpO+VIlEgDVtgpGtz4j\r\nn9nwIJS2VAmHhRxWp1k4n9K1Vut9+FXWx0D+HhR5S1eFVKmY2yQDNB0gEp/K\r\nwoOE15MPTsRcyVjs+L9da73seCF6TAUNgfrKWN7fPcxwAok+V015f77rbcd8\r\n/S9Ny8O2so5VyiIkfGr5ZLMPJKb57P1yIUE+NNO1/SycvWrKZlwTbp0fLHZL\r\n6XvXNymidot/S9rouU65d1hxTUOfo6Ue4JTlapn+YifHX6l+gjycHS3FVBW1\r\n6h39q6SAU9X3vhCNndcU2jlnpyjJ88ti+C/1oIGINnDNl5aOCec8F25vfkOM\r\nxG3ELaF29Hi5XT9lEJ7XNgwodh+xeLuM9vSK3+s5mJsJH+iFVKeFIkl45zMz\r\nPyWpRP201VNXFBJhrm6iOfWbtH5ozZnANGENkBuVTnnVEp4wRio39RY8z2Ij\r\n1ZGkh3HTctA+GsCP0e+tKKoxgMUwbSqJPdVfhcTyvwfDR6YagrFUlzR0GgXd\r\n3XZLGaNuxR/MuSbXnVYq/lGr7ZbFN1iUko2CIh6NpG4KTPqcSCU5CLL86lB+\r\nL0s7QclOvWM7CxyF5bHUmBKarHwvsWrhsoVogtr77MyGwa/jzSf2WWgW3Qjq\r\nXDAW6ff8EhFMU+vt/o3kWVcv5MFPM+UtwMM=\r\n=dGVJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.e38ba17c5.0","@material/theme":"15.0.0-canary.e38ba17c5.0","@material/animation":"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-indicator_15.0.0-canary.e38ba17c5.0_1672785115441_0.08818155840590625","host":"s3://npm-registry-packages"}},"15.0.0-canary.49041a6c3.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.49041a6c3.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"fe9a0c87130c6b498e12366a98e6a2b215c89d3c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.49041a6c3.0.tgz","fileCount":38,"integrity":"sha512-ynsNszz/prPs/xzJBrYbtSZfqkDKTqQGpNT4b9H245qsFHaHaAQCxXZU8NHMnQOfN2pOVihxkW6PC4V9mv5uaw==","signatures":[{"sig":"MEUCIQDbHrFJak0P2yIB7J2qIMMoU9zjTgmVjw8a7vjtp+so+gIgH70SIP1+igWGavxM12ugacEruIvDB/yWKVY676D1ZgA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513544,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtZh0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqW0Q/8CHm6rVrOmP7G8Wu0LcBANR2mCUfGtDLdZ9XlG88/5TUiuydy\r\nQVmE5adfHSQXTRqh/yDUZKHL6W0B4Q5I+otmkpZarzekgjMQOJvJyL6DQv20\r\nqFx8t/Jidded6BCPkDGTta8S3ibN5ssLPkVHwWlv9TbMQmV8uq2kow21lGZo\r\nL05zvhp+dIMC2zUU6FS5xTLBJiKdp4t77ZulE9Yt5nv3+iTO1oQuZCk6uWAY\r\nnpygwxfw940/XegHJl2nF8PH9nPh8ziiIymTv3UGzOYVeg1/z4TF6s06Dy2b\r\ntuZXGDsK7ZPGSoUpCHpcOmNOJV2hTmZ0AFAbJeno9Fb81DOE6m80UFvpa6Ko\r\nmOstpkQvdkCNJjzJhwIRMOP+/2A6EDQhFCDGmy7yq+kgGT+rinMh2y2teWXA\r\n1+pTKWyE5g1PKn76G0Mcml1Mc21HoLhLEKJpL4KA3hGneTE6gg6awGxF0FKY\r\nCZkF4k58TuK4Pcf0/lJDfZNwxVk2hP+u7ijPvYayNa1ny+2QVtUh7Qqoqn99\r\nifcT5Cm1KIueDePWP/wAb9nLKisO/guhnlGFwtwy0L/j4AvmDp+HhxTxGxLv\r\nGSSzxl3ov2rGlDmeoWmHIfaml3tZTJV/EYMHdGS4Lb9u83NH7O5FiVDQdzeO\r\nU9xqeC03+uxfC/mZ9UVGl5ULFDsXmsUnPrA=\r\n=PtxF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.49041a6c3.0","@material/theme":"15.0.0-canary.49041a6c3.0","@material/animation":"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-indicator_15.0.0-canary.49041a6c3.0_1672845428292_0.6096134238223512","host":"s3://npm-registry-packages"}},"15.0.0-canary.c492898c2.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.c492898c2.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@15.0.0-canary.c492898c2.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"7e30f598536f12813f861bfbff79eab792cb650e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.c492898c2.0.tgz","fileCount":38,"integrity":"sha512-tlgsCZ+y6iz8tvHuJG9Kk19Hp+knFIPijCAoue0Zi9R0/0Up0LCbu7tokcWAeYUrg1ucl+9jwwGBNM+w9WmFmw==","signatures":[{"sig":"MEUCIQC6eSp233P+lcXtW8ws/FIaSggczmYzCIjKLxSuZUMHpwIgJ1I/NLjSy+C+KQrZbddhgRZwkmz938r6zYtbg//XELM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513544,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtbkgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqe2A//TfKGjYDR0VXFMKGulO/WD1aQftE1DJ85K13ZUG3oLKgUVgpn\r\n4pXAMUzOdf4dIRq72lK1c9QOQB0zf8eRlmWGpoKX2RjdsLn7IJg169Iy81fv\r\ni5zH+N/nrOxNc+VxpyUomF5ww1X9xPX4JKo+G9nUacWe6lWtQ7lucWZ4BFrl\r\nKgqUUIM/dmloXpQnxrvOOtAv4R+6c/9tFSNsR0bWRwF/0W+7BHW+ytZiuLqF\r\n1RopOQlpdYjucMqOWyztLRsqsQadq5yrVAm+e9o5IxAj8d95MRVLVcnTNoff\r\ngyM3HEgVAWfzy/BsVNUg+DbcLu4mjVEmvPe0xl4Vifo0EJmvhSVLvzvXXQpB\r\nmokNSvkGNSyRdAd1wH39uoDYPlXnr+gELoUeSH56vHpZvTfvEZKg41c5p+XI\r\nVNNhje+t6qsbGAbaI/WWn6P6Ny1tZRkCT9N0U1V+KBrqZjkNs6mmvKQB8DKN\r\nIgHHRX3M2D0uv53lqSEMM4hjcdjU/nttyLp84/+lclTLaZwxYLnq9gg9Xjnk\r\nRu/SJdBog+VYrvTNRXaVybcjFvgKRXf7FQQxcb7pATRnf/ybLM8Weum6124v\r\nrklSAPKNe23cL7u9aLHAQQZwJnLO0DAYWWHVtEc3TSL4r5BLyV4WBA/accE5\r\nMW1aG7A31kevz/rm/UXdaAL90DA4rHtZjH8=\r\n=fjvL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n","gitHead":"8f57d41cc546a15258de2fac7e4ddca48b2987ee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.c492898c2.0","@material/theme":"15.0.0-canary.c492898c2.0","@material/animation":"15.0.0-canary.c492898c2.0","@material/feature-targeting":"15.0.0-canary.c492898c2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-indicator_15.0.0-canary.c492898c2.0_1672853792453_0.4822473707637236","host":"s3://npm-registry-packages"}},"15.0.0-canary.d7a2277de.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.d7a2277de.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"2e479b97f58b7757475d98eb9b6439096e6ee075","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.d7a2277de.0.tgz","fileCount":38,"integrity":"sha512-U50G3K0RAzNxF1kQt+HFbnPKjXLtfDdLzf2Txedh7QypRuMLtqcgtY+X7qH/WGoyl5SiNKeCulFi/zlmn+A1Mg==","signatures":[{"sig":"MEUCIQDnUF7aPGGQQ0bCQGEl/f58UlbnZp+Z6PEh81ChrSTmYQIgbM3nuf+nzYWqgI6BDZbOXXjkERBzgOX/IgWTzKmd48Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513544,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtfENACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoDCw/+PBW/g2taKYa7kRHCbEQS15lPY3zrNV0kXSiIGJtLs4qzbQdT\r\nVavuIinmWrLE6gkTCioSdQwziiYMTs9yMU7LlF2CsjNCdy9PcqNZmJxZ8E0k\r\nJ0yHGi5ysI32v4IkXzep+NG+7TV6esE4Rz/GaN2cShOa3MAvxgEwf/Q07wDU\r\nJm7jhJS6IU1ltWgzc/DnTX3okXjVTYOkQwD3a0IwMdwvPcQq4L0sZnQ2LOIY\r\negP7BdEUQ7/mpHc3YK6/S+Ab2Itl/g2Ui/8fl8sop7yKk3i5hpTh3qScQaNv\r\naQ5M+VC00bLvu/wABEgwSqztgCR98EwCwxgq0X0PdelUAvmyULfrIswGkJAS\r\nloX4KUM4z8bav2r709iffmYEayFCerNZl0QQCZxpIF603ByIyEgBKTka+oDk\r\nQNhnM00hJBTU55K4kwf59mENE+OXEKqcmDwpkYOg3oh7gY6yEoFin602RFBN\r\nxiIka07dv+PmSSXFQxNz7Ydx2L3bwNjXGgwub1K9SXJV5kaJySmu8+O6WJbZ\r\nNjNmVOZvyV9a4FHmezQpbyMR9ZlcErR33DnAMDDoFUEbrwCTZzDf/SkPnrUZ\r\nW8j370e6eixmovY5PwdqD4O6gm3kENGfFdaIf6basTFD2q0bOkGI8w+5LGlU\r\ntuQOhWJpQdYiGhoGMVr9gJZ5q4dA75o6Hkw=\r\n=C0ls\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.d7a2277de.0","@material/theme":"15.0.0-canary.d7a2277de.0","@material/animation":"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-indicator_15.0.0-canary.d7a2277de.0_1672868109408_0.29987014763473185","host":"s3://npm-registry-packages"}},"15.0.0-canary.fd95ca7ef.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.fd95ca7ef.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"3c5e59e331d8c740b995ce2404ad3f10b26a7ae4","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.fd95ca7ef.0.tgz","fileCount":38,"integrity":"sha512-59HZhI2VNhxL1j8yNhu+wt8X2d2lLfMSpng2plf5LXSXnuowzSA+SxL3xvU5SeRg9ovrREH0udEgD7ob0ktmQQ==","signatures":[{"sig":"MEYCIQDUhZ5UwNzhotAFW050RZa4y6rx7Pqs1WBaqF9Ehga3ywIhAPK7C8H2Himt5aT6eWftndg8Os5oVgrNrw9agRcAg6wB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtiGbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpahg/+IpNAd6Vesvi5nWFH/Ss4ZtkJeuJZGGUMHfd2X48TG+yi4Dbm\r\n+/im2Y7zwe+9NJ78BchgqUCkQ5o0+XKAMqQ50XbdEAWZJ40U5q+XaWYi7hSt\r\n5R9NNc6vKjLEzL+7M3ZbIaq2RLSOix0oKAWZlJ6f/i8d14GlqWaJUCVdseJo\r\nDx9OFFlcDJYlUD39tTyyvDFBUV8jHYY9hkaPqJtQYJrKCJfcWjm8YPGbDRSO\r\ne47ITYw+R67EmksMnjX2xPyXdySNHX6T9S7a15n6Z9a2oN2ZmIZAVDYnMX6P\r\nsKhLY/VxrRNE60C+i9B6BPxbVR6An9rzWIBhFYwDpjK9Dn6pHy8huX7q0RaK\r\nz8AVv3MRq35uCNLs4Qc7lB9gNO0Hpy7LAKyTczYrIeRcikit0DbMye2gqFno\r\nRZTnlEqJWa2xUIeMI5p7Tn1jF63spv+TW49xUo8NcbuLGPiAWFI9YS1YeiQw\r\ndPORp+u+zliUMDHmpkeSR3/UoBJxg9jWZgwrbKv0aQrfx2OxR80RGGxAL9LV\r\n1Cs8+m2JFQGa0bdzJ2h4j5CPCl7dczvX00ahV8nGdfZ/s0P8OE1xESRu2le0\r\nDszYYS+wdjwF7fOkiJBV3mm4RrFUy0bA4OfbweX9J4Z29OMVdeynQnQzP1nQ\r\nu+kdykqS165UfB9cMzuhsWwasKcb+A10W4Q=\r\n=yXJu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.fd95ca7ef.0","@material/theme":"15.0.0-canary.fd95ca7ef.0","@material/animation":"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-indicator_15.0.0-canary.fd95ca7ef.0_1672880539571_0.061226177121249226","host":"s3://npm-registry-packages"}},"15.0.0-canary.1eb44faf9.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.1eb44faf9.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c662463788a30d753657bae1a2e3ba86636c1a98","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.1eb44faf9.0.tgz","fileCount":38,"integrity":"sha512-gB7ppwM9nBx3bprlRbV9YIlkXP5snrWLS117rgpNOLuwo+4BwXMrcEfU1CnzCl5Crisoj43IxMEvlxGRfYLSGw==","signatures":[{"sig":"MEQCIASXeLzF+4vSOAWsfSehvV6JGHkwqHOH3DaIcQKyHZAhAiB7oSm7VGJOvr61GuFb8o66NbSH3YjNKCZvroO0DD2odQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtpOjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr1ahAAkr2IEhd45covTMWFT8s1EJ1mwYHExN+wDSqMb6RAE+Q2dtjC\r\nRALFNjzlOBHimQ2RZtJigwU1UqikZIv0V3N/nAJNI8Ct1eYL6r5Qpy0Bc/fR\r\nvD3gGOqncfjUw83lncEGwz9eN44zq55YIkLcJqu5qtAeIWZj/Kf5P3mGef1n\r\nVHMItxw7ymT3zCO1hlhlxVpCC2y4/njdI7m2/EPufJQBT0sW2rtpcy7UNIn9\r\nugJeqrgUTOWkQKSQMnuYluS2cQD0fDfRRTKTEbtKRYwcpD/XP5+7qNV+GNaw\r\nmImc6cy2n1RcFBzqFjqXj/pxzULmNfjYdv8SozJBB/Ig5JRASTP90pE6yZig\r\n2/qBRB3HPtSQFqH9LTmn78vfkZsxcGEMtmdUuvWTgfOroD+ZdNaE5VP/6SGu\r\nUn3dBt6x8NB2gFeXE0sQRrgrfKESCWb06iUwc2ddXOgwJIRIH4IcVz3dCDCY\r\nDC8r9eq0CwfV17ujFb8Mhdyr+oedA3flRisaFr4vmcIK+Xl+1DAiohqG6Xjt\r\nfGHTdo7BUDEnUfz3A5h34gQ1XW5oE+qIbVv910x11wCHDgYJGiMpnjaf3xM8\r\nDqLWLtFRi92Kt9KbXaziQlhXt5pojREtB4ZulzTJSPfx45ioZiQ0AUXAr7MS\r\nVUZ7yZFKUOazNYl3bO2wLAq9HANourcyddA=\r\n=uwMw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.1eb44faf9.0","@material/theme":"15.0.0-canary.1eb44faf9.0","@material/animation":"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-indicator_15.0.0-canary.1eb44faf9.0_1672909731305_0.754784775514133","host":"s3://npm-registry-packages"}},"15.0.0-canary.adcdb7db9.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.adcdb7db9.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"752743947eba080854b974804d07996899987d6a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.adcdb7db9.0.tgz","fileCount":38,"integrity":"sha512-rH9ykLVkT3Djn9xcf+ShNdvS4psb1YlLyciwMKIDOSpUCnTBOyoLY/yEeiQLPV8e2NOHNpWc9qjcE91JQQa2eg==","signatures":[{"sig":"MEUCIAzkkmivfa+JogZpzd0ItwbZDbnQoSGVyvuFeCHhlK7HAiEA7UUTUrUX5s7VmbDZDtJ5Dan9ke0IQr3xWsSRxcdeY24=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtvjuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoBkxAAo2xK9Tv3B+2UK2BMTEAiZK4Lf9xIue0HEqwOdm0cgQYIl9uH\r\nR2XsgqaDXro4oVWMyEbmDGYgJRoA+58gd48WhrLy6UP+64vFopcY8CcolwL5\r\ncboF0DXyWEsJ/+TY1Tm5hOtx+q1nz7HdxgqKfvLOvCH8Ix3Kur1iNBgLzWx1\r\ng2RQjXxlcogTEiLQJKOr4Ho2coxYPYEFA6F2JuopYM5ZKfjXA60jQkIX90LT\r\n2XAa8LyE9CTH5Grdttr8cgc5CeiQWF26QtqZX+Dkiw/42MkmnGYqifikzbzT\r\ng2YwAmQaKod8WujK6MT0I0V2kqecxZ20FqARiIuroWTNHma7f8kBUs8J0CD5\r\nNGhSe4jAa0QrzJIMsRorVYaUh+nLasZZ7e3Yk5jBcNnFJqpz6BUjL3EXP/FE\r\nTy0JSH1IfGknzSmQPRcYfnlog84aCzUTX6Uf6B0ZehKFYXydJnbMXbBwYNH0\r\nZk0OrFYxVPk4PBQaWeGEEGrAgZhpuDt2xcgDLJhZM76L+4PF4+2YA2CKqnrd\r\naE0lEFfTqWwWq+1k0cgB5o71+paYaG2A7Zs0P/PjV6f37Lm2bVQzemREmWiT\r\nS/RGOURErvlSVE4oBDLYuIInGcLM354b1HmPHQ0dpRiuHXnN/RUtDO4Wgpbu\r\n7c27YlvbbiVh+87m2er/x8/B5Cyu3c16k+w=\r\n=mBXC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.adcdb7db9.0","@material/theme":"15.0.0-canary.adcdb7db9.0","@material/animation":"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-indicator_15.0.0-canary.adcdb7db9.0_1672935662386_0.9988403098577849","host":"s3://npm-registry-packages"}},"15.0.0-canary.067af7eff.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.067af7eff.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"2fe13726f85a73836a2f33cea2ed69e401d57453","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.067af7eff.0.tgz","fileCount":38,"integrity":"sha512-DeFRYMWntDW7EafLxVqr6oaSSDZ0nM7ekjcNekRKtAJWYxIWQnGtcrT1vP7DnLcpMVszhhOtFJSq2y2SwnJCgQ==","signatures":[{"sig":"MEYCIQCuKXzMssmiIsNtESG8T/bKAif2F2MS2XB3OVWibwW6DAIhALiO40k3l1vRztSuAcHCGezoONzmX4Bdr1JF3TbIUR4H","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjuKuaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq31A//cl4xIFU6NQJz/RGroXEWckxN0RmEo+EOcStN8BW2Re9JdUnz\r\npZpmugZO/r5Bq2f2lL23NU2r22q7Z8D9ShtGx+U1I/8x9ZfOgc9hxJofRAKf\r\nv7v0H2aG2FfsjSikRJLt6ij9xxckDJy8ujG7HOsu6Mb8CR9cMJaxPvbQnVoL\r\nIQ9L5xQRxf6B0j0cww9fizqsrVEiRlQDg/pf/NBqjz8KliELyAxxM7GXcg+r\r\nfIOaZvaXRGIOiUYqL5MmPyW247fhtlLsyjLoD66GoVQXIq12MqlISGgY3l2F\r\niSTcPycaL2gXjJ/ebWZ2VWDbixzKt4icbjE4iW5oEeGr2oX7wl5MDALjcH39\r\nouAXw8EMYktd41TUv1VPDIF5wJMHFMwEeK0m3Vngtrpt8uVMOh/AJq24n/Y1\r\nbuPEm0CymsohdtFgPRP7/tp4czPvE9NHB1eUxJOMsNuBJ/thpxr5/gYiLL/A\r\n4cwmdE93BvCHgUWXEsF86PvU7RsLl4pLh9395RmcpmGg6Dx4UU+Muq6tKQ/B\r\nBGRnLXEP2b+WMpJ2PlJ5IAmv3PUT9Rcsrhk6ZS+FFljNSn6R8kZwerl8x8vV\r\nFeGwEshR5IqZpeSMlJwqMirx7fiMG8Lj0MCPqk2oh2y1o1J/a4lEPJjlqbJg\r\nwJfyVIMVTieK+hOYvRL/jjC+yCCaJvKqlGA=\r\n=QiyN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.067af7eff.0","@material/theme":"15.0.0-canary.067af7eff.0","@material/animation":"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-indicator_15.0.0-canary.067af7eff.0_1673046938353_0.02320718515055864","host":"s3://npm-registry-packages"}},"15.0.0-canary.21d1196a7.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.21d1196a7.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"4eb6a0dd5a777ecee6e85106a784388e4ede1120","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.21d1196a7.0.tgz","fileCount":38,"integrity":"sha512-tP6MKMMlbtJjQwLmOUBFDFYZwru5dAMom4t9IvJQ5/ZBb876AvVibo13ZOzNRYnrIa0eC5W0sfhJiI+BDas8TQ==","signatures":[{"sig":"MEYCIQCmpwoWQTATYYpOBEc4EB8Pi2CMCtBch/SKU9XidOowRQIhAP7ZlbagI9tz3UAJhTUHWKgq+CYLiR4/4ubJRureBxpe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJju++UACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmobUA//aqX+tq4x0J+Li0Ii4gBzkRoup4LuEVF3UGs0Tfi6zEeXk52R\r\ndhhjyjn+fPZqSF5V6UzdmU7+hpZeDrgIgg5gCt40guopPqf3RLObXXCqeIIy\r\nvG0XiihUtjfOv9MP7+7l6ccZjC5CVXT3j7ol3faCikrOwBZG/oNb3C2odF3S\r\nHpUtATH8EwizMjn98pGs5DMu2+/tldqJpbmEHiVj6Kss1b3wC1nnBFo9YI7T\r\nBTww8gt2ni+vTfCVNOfIv6YfdBtARQUmL6/hkJDxSGKTeuoHVPoJMVcCUGiH\r\nIl6TJX+lJd7sBTITqP5T6a/R+5K/lFhlB9jcRRlC98J+wbX/frFCzCqJJd0U\r\nKhXVYxSmtFI2Dcc7JJTPIKQE88Edvois69G1dS8uKsspTHhXhurgFzVk7Okk\r\nfNtVbILBrGBXKcYGuiC2mhgTs42qhBkl55WAUfnsroHxpEJI64Zolm9Fec1r\r\nI+90tA4Pivc0W8tkVcB0UUZZojOOkPdfciaHBUGQhFMt9x5LxyJv5UM5F5NH\r\nGWbTs7kXqPBNHt/IFhReL2lxkrpJuLAaZlimoF2duDTci2beAnb3II6fFjnE\r\nhc2jPGp/he0HHddWBUcOK8kzBIT/61mRWqJF6KN4+MTYUyAMy3uj6xiKBvMp\r\n2EI3bqNdf/Un6n9qblMlle7wnkEOgUztses=\r\n=z3VZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.21d1196a7.0","@material/theme":"15.0.0-canary.21d1196a7.0","@material/animation":"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-indicator_15.0.0-canary.21d1196a7.0_1673260948349_0.5333731042338405","host":"s3://npm-registry-packages"}},"15.0.0-canary.8d2d8d3c4.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.8d2d8d3c4.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"699ff65e6ae51cfd4b46d816edcb9a2352a8a295","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.8d2d8d3c4.0.tgz","fileCount":38,"integrity":"sha512-26yHARIaXnw+dVY8FJIQXgH7IC9uXqSJzANaNX/mb/Iy0bowcQruTp3QfTjVKEg2uG7iURM4lnZVK85D9053Pg==","signatures":[{"sig":"MEQCIGcdIejRpBvRVMi7YaUBshyXBt3eu4OrlghYyTJXEn88AiA2kwZC9BNLLiH2oMDau2AnULJi7GxHY2/hZiQWVZzjpA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvJPeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmotog//Z8EmqfNhR+Mda78I960MrYyY5gk29C3O6ZqiKKAWicR0Ci1H\r\nc1NyD7EQLbnaTOPDEl3IVTGVOyRXKJSV4UYW+2V7q1qyRwHACk4EYzCCN7Oj\r\nopJJygzVx6xdXXBVhFq59P2oylrSCyVv+mv4iausDFEYGpAYJWiimiSz2s31\r\nQeHZQRx+3c+E4EvALCTa67Jez96keF7H3sVzi36lcBBBiXDbED7FJtTv/I7I\r\nhB/RPYnc7Is79oSyRrVIuNHSawIY8MI3mn1+gkaovCOjUTnibB+L/0d64Q3N\r\nvN+++bL8Ip6q2vbRpnkISUkIECnc98Sj8qmzx4Spn7y5l8O0Yj5WKyjJHaIJ\r\nem0VSTNI9+o/i+f8EjFjG9WLevSnhpA8wYuEm3Kgt3ofXfqosx3/zFyR8wzu\r\nMjCxMWieQhcjrlzgN6MfDv9rfVNft+mXnkzp86IGjA+oIcwB6STDBNNs70br\r\nOVOCO5fOKZHMWuHuqjC4bCcwVCJsaY/G8aD1ApcPpxnqMo4ERJbPUcPcB/JY\r\nUncBdXC2Lck29sJ1ODWkilCB+kPhDmsb6CgZaplUn3eqCXX+asYTfLUhcAYh\r\nCHavs+HFBgVC5oUanXkl7QYPM6+7eJYNxmfVnfMLMANqEhoVZxPZb3po+kiQ\r\nSI/LVc27GbXk8IMQUtCuuLUmmu3T1V+Gic4=\r\n=RUYf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.8d2d8d3c4.0","@material/theme":"15.0.0-canary.8d2d8d3c4.0","@material/animation":"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-indicator_15.0.0-canary.8d2d8d3c4.0_1673303006092_0.3549977479055515","host":"s3://npm-registry-packages"}},"15.0.0-canary.f476fdece.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.f476fdece.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@15.0.0-canary.f476fdece.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"a082eae4e30c7f6444824c01403686b5c6f590b2","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.f476fdece.0.tgz","fileCount":38,"integrity":"sha512-KdEZnFZcAG3gfiyTP5p+0n4GSU8FoF0Cz2KJ38LL9byvodwtlCTzdP8lupLl+Nv+6l9aAsnn1y7YXpML8hSkpA==","signatures":[{"sig":"MEQCIHDlgNBeKQfSa7CwxHSy4NGmi/vLjnA78tZiR2yjhtwqAiAGu1XqtDj6n4zV/BRPZZNl7jJKra8st57xkqRZVb34KQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvY7LACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr0RhAAiAKjAZ8lErK30ueDZuMdfoets8rrrShk+CjCbS4xA7ts4pRs\r\nn30mn7feuVHDZ7RykzgkUTLiuhww3QnrN0zKwZU0McapZx2idQXfGYiY95cy\r\nCzRgxwhCc6e/ay6Ltb8ktXE8zGzSUTdXRxq3knV54RrZUBPvAoq4LJuVmeL2\r\nTktkCipoWK0STgVNSYGsRn9EFp1CvGGJG2HqJNmx38x7CaJhNF+22mqKt+0r\r\nbPUcFKdldsBg3foAQo+N2L75KWyNoiDujoQFzgMZ1Eeb2Bm6W2FzfBuPX65j\r\ndYdb06k/Tts1MXunaYlSykt7mUlR+YlulbdvSY6j0/+xzy89Pcot8b084k3J\r\n/hqSAFMoqlay0lc+6KJwtzBPJRGTn31rPPid8KYciJ2+6PsSr0bwfpXpsPNc\r\n2O663eFvuwNU4g60fb6rQi88JOopjp7df6dU2OaXzP4g99p0BrDl8HAY3JMz\r\nINn83wpa0moELixVIvkW3aJv4XzmTi8VALOQELXE+wlSvKT8SRP0bHuVU03S\r\nEMJ+G8QoJAsufO5dhrFUVenXh2rDSW40izwakutJYIZ5m5LlDtzbIX2S0nEi\r\nCpq4e3gnSfEMuJWB8E4vnoPmUR0lTpJPjy29XWEP8SMxDRxSfQV6lH4qGtXg\r\nIcfpNAJc8fbN4AZ/BNnHR62tG7m0GOKQWJ4=\r\n=P2R9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n","gitHead":"672d5b55da7c88d57180edf75e7ce65ca2fefe0f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.f476fdece.0","@material/theme":"15.0.0-canary.f476fdece.0","@material/animation":"15.0.0-canary.f476fdece.0","@material/feature-targeting":"15.0.0-canary.f476fdece.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-indicator_15.0.0-canary.f476fdece.0_1673367243394_0.6792751581938898","host":"s3://npm-registry-packages"}},"15.0.0-canary.fc6ee6c32.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.fc6ee6c32.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ea1f188567886971fe16be77217adab578b69f75","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.fc6ee6c32.0.tgz","fileCount":38,"integrity":"sha512-YT3mjQi6GN6s3ZiE0lOFMWne+P99KpJF1ARTLaaSYKmAueNrD/PZ85LJvbZOCOjhPUBTpXqKcx8zw4Y8pjSHsQ==","signatures":[{"sig":"MEQCIDrhNxnFLOgZ1CY0B9H+TerG+lBazDyj4lWJtWdfq4p2AiBB79jZP//IlUU/2owFHoIWMAP6sUKJ+fjNpPaBMbVtLA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvZHuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmomVw//WmCFw01yS6get/RynvApx13kC4PgWfbvDAmFAk38T5jVNeHI\r\nVpWm5pKPisJxq43a1j4sWq68GMcOCusOOnQ7o+tRBtQmcZk3gnh4qWBp/20G\r\nL9HJhDYjpHc+hlV6D2N41qy9szXMI8ulVMJsbQJnNmYvFvUpn63QDwUyinLo\r\nI3gBnFYmJ7nfwlMOmAA6trA5HAd91CO548IGQrR9v+Qq5yQhvi2cVQ6xWMyi\r\nL7ApoXAQsTcRxrnC7HUgjBwq8vnev/OOJ1YTUdmx+qx7BWFS7tpSLYu1aEKI\r\naQQZ4J246dtuulznNk1iA99lMjW1UaCruaj51cSTzOhgVZV8xVlxvOpSzfPv\r\niRIaascsURtfI4jIMSV8wpoTgm2Mh7t/u+Bp2JnBQFgB+XqIdnTYa4BeQsNX\r\nQY8cywOGcJX7mcCWfegJhCsuKoXka5Tcej61I8StNbEHpt1anXVLhs6R/PwW\r\nCccomQWXCqz+plzmJHbK6jD7OTmfGNEtjBoY0Wcdxvpd/fk7zaMmN4hlGB8y\r\n80eRnXEWMnPWgJjc3DBZsdnSzKYLrlPnsRJcFgOKOVxzJOwl4+q8Nz81iYjd\r\n+YSltYKd0+X2isq8no6M446LfIi1pdY2V9ovS8gY0N2y4wOaiNwJQR+GXqHN\r\nRiH6iMX0eQnVgODFceeEBN6189+6WhiMFCM=\r\n=zG44\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.fc6ee6c32.0","@material/theme":"15.0.0-canary.fc6ee6c32.0","@material/animation":"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-indicator_15.0.0-canary.fc6ee6c32.0_1673368045985_0.17386479358853046","host":"s3://npm-registry-packages"}},"15.0.0-canary.73537ab0f.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.73537ab0f.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"82f42cdd7f2a3c9264bb431ce838b3fb636baf48","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.73537ab0f.0.tgz","fileCount":38,"integrity":"sha512-zWi4Z+qZJslcY113HitTF5ziptOZ17HcW/bacpDq9Sea/X98U5Fggeoq4Z/wrwUBdTwKkJm4rxnW4+y+OhP1PQ==","signatures":[{"sig":"MEUCIH0za9eeCnWl1lnOFAoJFGQkU/xay+Kow9a/y8SYH2crAiEAp0EZfkRYoc7B85DDOiQGmEEYaZAhM45PJ5vCfLxZVUI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvao1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp95Q//aGeCD+eqaiOpe95Tc3U1s51XRbpyfwfPkrujgx9l/jA5cwRy\r\nHJBE6H4tnAP488pw0f2XDcxmNxp9HVywUK1cdYl1DUn5c0F4vBK0zs/zfMMj\r\nZkEVCW9kXB5bvx+dFGr+OSLVrkgSi735BrEHA3hjmMmml4iOO2vktj7QI4H9\r\nSllUo8ZsYR6suoMTBSLk5mGagD3wgWpVV/SO145AC2sgVqe2wMfjWvd19kS6\r\n0KNElyRuXS0dB0kS5WLZnzhkm3YHzryl0GeozNWcbhWW8vD5Gc3o2dZvUqx5\r\nEaJlI//k2whHdF2WlxOAvky2XMQcmrGdPT16N8t5Cq6JoYSUGQ4ifSPqCpF3\r\ngpOi2Y4KBGaYRpO0PsrOVl3yYvHZLiwmVwcPq4MSTuzOW00liGz0UHah4Z1d\r\nQiFZNcCjpE79FGkvTVN9xY3fYZuLnvqfsR+JPcINqdvFJIzy0Kk83fqkx1YV\r\nTGW9iY6FIpQbGVs9vG0EqiiT+v4OC984a9V2+BWvwanM9ADhWC167QGUCZ2R\r\n5tvXIkLixWlptnuP8jLbiTiiurv7cHADWcM8SFWfXLiK+Jg0CccTlI/yYvRC\r\ne/QfUrn2kYPXtoSByeV7PXM5Js6lfScNvY1NqVFADhu5SoLSgcW6t6y8rJRa\r\ny6b5sopq2BkAHPwl0qAThuwF8oBPE8JVAoI=\r\n=j6v0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.73537ab0f.0","@material/theme":"15.0.0-canary.73537ab0f.0","@material/animation":"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-indicator_15.0.0-canary.73537ab0f.0_1673374261166_0.06780084090627914","host":"s3://npm-registry-packages"}},"15.0.0-canary.684e33d25.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.684e33d25.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"305c4461a45394619c9f89efca616816d21035b1","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.684e33d25.0.tgz","fileCount":38,"integrity":"sha512-kKICqSPqOlaf0lzaFFCmuOqPXJC+cK48Qmsc+m5o6fJhkmuZRCYpIwB2JeP+uZSOq/bTH+SrPtCtnVlgWg6ksA==","signatures":[{"sig":"MEYCIQDlS8ePhap6sLZq5HA6OuxfwiPWvPOgorSFPpLmZjSd2QIhAJ2IOUD77Iu+SnZLwVDrFQ2ycuOEaRUl/BANWsRjH6R3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvbnoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpUhg//YQ/Icw/TT5QxyWBZP2x5SJSSvnSLmwKLDGzfK+USAbTGFezl\r\nYvqL/+RXJNsFf4koHzwxkJTU8rwhD4ydxDBGRXwLq51C9hzuy9KF5Ka8L8Hv\r\nEs4SG1LGye7FL8v/zcoH31r2B4Oal8+e7seAhgwFa0tVMXJrMQmlkaqbgEB1\r\n9ZrreR/o9s9nZKIHwdo8OW1PlXGbrRzXnv8UNmKfeIpxkL9N1IMYZdipCrzw\r\nMSxv+1U2U5adz8En0kfd5mbbPXVZx/qJK5rIdBjnYbWCr9NOimkUaNmTFXPx\r\nMp4L1z/8j4YqgMV/ySkUWaRMYBHSPOopmnutcljYM9Lk6pe0svWZNblGHxi+\r\nUenFGdQgekk4DpIf+IoAPIj4K4BHWbvpPXrWY701iP4ob//LBYBfYisgO1zN\r\nWg+F8bwrJ1JpLczCHmpCWa9uRCkYeRi3dE22XMmHwhk04aIpnThzP3oHiwhe\r\na+5oKe6IZNKLh4X1qmvoyfpOzQMs3z7Q+ReUd/tzEibx5MsP9mzY1Jm/p7uE\r\nzt33FIR7l9CaTxfYHNlbzfBgg34jnPLHKfJ/Je9rXd3map5tKkBI1w8aZEUu\r\nKi9YvNUP5X8rQotJO8hMIDZd2onGURfA41QthqgGY43trelHu4guFqRahGcG\r\njq52+CaP8YobOsmTjMG35qlNsg01bjNs8Sc=\r\n=Bfub\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.684e33d25.0","@material/theme":"15.0.0-canary.684e33d25.0","@material/animation":"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-indicator_15.0.0-canary.684e33d25.0_1673378280251_0.83325416332903","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e89aab6b.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.0e89aab6b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"aa619a1b586e9730be4d2a10ecb5253f9b52ee71","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.0e89aab6b.0.tgz","fileCount":38,"integrity":"sha512-xLg1gM8dfmnvf77zCRAo9nMwLa1ftGHcY5y+yIisYEvj6R4iQIDHU6PzTw8biPT84qufpbPNcyUBO5PPzhhGqg==","signatures":[{"sig":"MEUCIQD/4lv90yifDn+NGYHvTA6z4renTUY++VFhiKjjOw8u2wIgFDOU7/LfDc/aKVfX0bdEBKmvoFDn9jST5HIx8nAroME=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvuDvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpwiA//YO2lvBmCJFqN/eAkSUJJXG5cL/9VF2z5eMZmaF27anotodlr\r\nDAYOi2XuibnBL0LVSoj0lGONebZDFgONwbO8UXi06QsHzM1FDmlg/CEx0YDU\r\n5Rh4rn8YUbBN6ERyGeygC0BnbY09cUYKr2IWlft1I61bhmnAEVElqDLHw+q5\r\nSvkT5WZM5s1PIRL7ry3nuAHqd9lR98Hdm1w0sS9zhsIk0mfhYn2VUC/Miz3u\r\nYotkXpgsHXJVA60L7yAve+uItwMN9qhVoLfozvf4QCyUO2MYfvDAyc3e5jWW\r\nXa5AShvCZ2ru+zPJBkqlzonJotZMnffkBLUclxdgU+BvwucmB1Az3I21NvP9\r\n99b7/QvVxuA4iLGEzz0QgkTk6ljWg+n3yNnwxCzwTQAUSSsqYeAn5FZT7VS7\r\nwW1bEfWbJr/7ylxW8lYoC6QJwmQdi4qxUFKAIMTF0snW609AxKqlaqty2hJP\r\nEkotzRkbjbkF7VossivvILSXB1h9fxIiXZi0825q9wP4PDgJZB13Nt0+2OMJ\r\nnDzxOH630lSN6tpgip/kVvErE1XRVvMwLhOfgmTc3JM8voQ9MqHjahsrLhoR\r\nopgcnLgjj5pjB3XoJRd9AUL9yFOmkOQKwIFGTsTCM7xJhpZyvOkeFCbSJ1yW\r\nDygufAaGDFVPYeD2hiRsFPQRJOL7D1pZMyA=\r\n=cdUk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.0e89aab6b.0","@material/theme":"15.0.0-canary.0e89aab6b.0","@material/animation":"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-indicator_15.0.0-canary.0e89aab6b.0_1673453807251_0.0655391331017392","host":"s3://npm-registry-packages"}},"15.0.0-canary.b0103d10a.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.b0103d10a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c0b5763b815310dddd56b68e6488f29a4a9d2f5c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.b0103d10a.0.tgz","fileCount":38,"integrity":"sha512-86OjIgf11jsex3jN5JaJlF31NAAm1akd39OYigtdfePUWC9VspQ+2ziYhmlPNI01IdXXBf7sfBlhY/AwSA3L4Q==","signatures":[{"sig":"MEUCIE4soejhFW+zXnhvK42lyoOAJegzseGMt2tLE09zRd3IAiEAjzjlyffKEOwusLx84dyU1owW+nhMioa/mCoNWWhyfvU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvwn6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrTrw/8DdSu8hdUcMkSJFyfENb2rvPD15GwDBHW4bz3M0QdL3ccx0XQ\r\nfEM3s/iX+8KBiEpSyPknFyYvGMxdu6uW/wCY0ZcUviE+F3xfg+33jHuPnFbU\r\nMcQRx7n58oJDFvwFjfgaafqM26jhMQbK7bvVCF3EU3mIpppxyF4f2+q9bybH\r\nFbPgYHrcJ7xU1CI+1e0UQd5XJ8aMugerK++WTIejI/YioNiZpOXtuoJlD3Z+\r\nJryLIkrHTIHlW7c4mn2OWzaR/pGH+TxTtHsVUueDZLdAQvr5a8se6SY6U/O3\r\nqyxW8W2wweyq15/X4PC73dAIjfL/6qWZIM0ljPQr/ehrWMWX64Jcn1gJGUJ9\r\nE6FPhnZ56mVy9fntfnKYpR6Na5eYRfKqx81friciXP+A5CNPEyM3oZCHGMA7\r\nvFxCiNBg6fg1Ji20HhusWLZ+OQZ8gi1KgRqTTzbuQSPQ72Cc50Bdp74SsGAK\r\nk+nFJc6bRCOY14AZrH8hNZn7pfQs99HVH0D6a4HigoDaM4eA5mfGvsoDOU4S\r\nKQ3OgA1jbdHiYzQ+Hp5b0vr4OcVYrh7hrfNh7BdMJ6RimwBGeCkCBzFpwW3j\r\nQ0qPe08czGQEWfPwZhmFSxibqPRkrleaa9dhHSthevcz16J5DQbZAXfXrEvz\r\nPOgJtYddAvR36m+JAwBdxI7v18MxrP7/S2g=\r\n=AVQT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.b0103d10a.0","@material/theme":"15.0.0-canary.b0103d10a.0","@material/animation":"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-indicator_15.0.0-canary.b0103d10a.0_1673464314744_0.6084615925212518","host":"s3://npm-registry-packages"}},"15.0.0-canary.50e7a5312.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.50e7a5312.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c2608a841ef39fa6eed721735c8ffd6ad9369d54","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.50e7a5312.0.tgz","fileCount":38,"integrity":"sha512-3tX/rZYdNgVzdPvNbfaECsqDeka/q6ZWQCvm4d1PNgloqwegVTNq6SToOX1it4mUI5IF/+YIQv4Kl8oep9D9UQ==","signatures":[{"sig":"MEUCIQCWi+baTQhQX+SpKs6APoREefG1k8j0mktaM+4wtFd0IQIgDIVY4pX8RGdrJ1TaEt8fWZsCnXFumvG385WjoDl2NpM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvyHTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpWBg/+Pz6zML6+PZdGZd9TLVZucasVoMvGF0+5QTnp7NENkc6xVso9\r\njTOwWCB5ud5VMk3gN5bPSUzCoACaxEd/smegw6lD9X5bYm0A0fMGM4Nft38i\r\nAtiKlxhOeiKZaT8a5OlzH0PbRkzsLhzDjYSniB6Fnc3xkoCYPEpnPfVeug/Q\r\nay/zIHS6keFkFwgo0a/majCSbyzk+V80smsVE2KS1Ri4EXQMK+19yr4dAj4T\r\njG99D81XHfmudlSpORUxbZGX6GVkepf4xMRdkTy0GxRj8tuxIAP5vOGQVqci\r\nIyuW0e0BuOSU8JbwEiJhgmTRAaQnRcJe49Xdk6y7uGk1jv5lRqpRJoUANhkw\r\nr9TxHnRQWzD4kxoZhb/QULHj56DZC3njwFXzsuTXomdSoWuz3bWIFJYE7fZR\r\nj/ZTRlZuSsKYC7WbKSgdHWoRa2ntZnKii1yJ3MylRi3dunWYkFftLiOscA5o\r\n/awN/8MtE9N9ZPDlGzjSxmIlRhZ+JcuFx3NEwJo4dfblI0BJxZWbpedI3Yh+\r\n6/DvPFmnknO//oVcO+xICqiGvc7IUvyasFi59Y7q3CqL1IO0NDT+LQ+rUr4P\r\noHihbignEuXZry7Fq6M7ZjTpwRU0QWeXl9h/E+sZ6y4fhPA19Ipo0taMiGQ7\r\n2hAXzwiOZDxv3q8VkyEWo5zm8zAcqwIcrio=\r\n=bi9+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.50e7a5312.0","@material/theme":"15.0.0-canary.50e7a5312.0","@material/animation":"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-indicator_15.0.0-canary.50e7a5312.0_1673470418910_0.32872201860320027","host":"s3://npm-registry-packages"}},"15.0.0-canary.202823f54.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.202823f54.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"872cb46626178d4ef13dbaea05067d2cd07b060b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.202823f54.0.tgz","fileCount":38,"integrity":"sha512-AQfWb+Gmo1zrlpK6g8xNPwTB5pcUNnzUpvLsf2TrzRI6pnVUTxUnLjNhLgYIKKNd9lhlZEt9Uuo96hHGuD1teg==","signatures":[{"sig":"MEYCIQDjCJwg4ao5n60DF2TJcU8CFHG0WuacETEhQpKD10gHgwIhALXvWKOD9YlndDVykDFAje0bKZ7ZoxYLguFeQiR/2o/t","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvyuPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqlKg/+Ortw7gA7xGkV582M1AJvUwhkBp28PCoiRWD4RsjSxHfeK5Im\r\nOP/kU3AkZtEhXdGFai7n+4zeQKKsayycjmr1am2dEoATHbRO309e+P878Wyq\r\n8nI59iwDpfCNBtYp2L76Tj/ECDpFfLpJGgAmzndY9G7l74qc6rrc5POezTAv\r\nqJRu026AwojqfzAzD/V89CEjqMpQfPYYiDZhOy55Ho7Sy836AYkcQFfvuK28\r\nvdt1WP4LcxvQdQV5pNX2ksS+uRArwndSont/YLjo2SyskD014yPh22BrRRXr\r\nOSGVYVYva7kQojdThrxv6mNFX3Gavy3fxr5wZ5HPJL393kTd9poymf6t7SzT\r\nj9EVe8DIXxQ4TFbX84OzfeXo+EGnDjWQ7p/kb7/Tyqmqh1iDkimWjrf2tBHd\r\nv+oqmFCAo69CxcmURRpZvfaUUxc3qYuB73jJZMabTBL0A7H7II9U6Zm9Wnz5\r\n43oGWNdHeRANNMxoVX/HZFthdtJKSOk0Ib+v1qU0iqwP1NZ7L5rfEetxa6gH\r\nSKgtRF2BE3BylVdcF2adtNkGS08QU/qLrkEcC6XsD+fesMwLnKSPL9qAVxXl\r\no4nYlDEXLOt+fdi1vC9yEqu/OrMgr9WCOI+ku8NHTiJ1W8LYcNbTso062JaL\r\nP5ateBYGOeZzGGTz/1UtKQH8SlZuPi/Wcpw=\r\n=tmC9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.202823f54.0","@material/theme":"15.0.0-canary.202823f54.0","@material/animation":"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-indicator_15.0.0-canary.202823f54.0_1673472911158_0.9551917709422573","host":"s3://npm-registry-packages"}},"15.0.0-canary.199fe2a2a.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.199fe2a2a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"4b214d00e7b5504bded3c1a7dc927121bc15079e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.199fe2a2a.0.tgz","fileCount":38,"integrity":"sha512-mH7M0ifKz34+nwFu8LDgVRrZe59bxAHDKg6qVJdXVWg1rpnRGlcI1j+dqfgxp96vqBF/dJhfuAvdqmAuIvLwhQ==","signatures":[{"sig":"MEQCIBlCaOOf1K7PF5wUfNdjtJwdGfpC3WItW7uFTRkEH4l3AiAx5x2fH9wBfHIRSXmMsyNsqiMZrVTsT9vAAC1IWjupqw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvzA4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmphrA//VPL6zEzHOihFT8nw7/dkvtNfwSHPyouhSMTeMEDl//MeZwua\r\nIABcOxX0JpZmr8fBFhvB/p/R0ypJVaDjWjdPsCmKXPDTRl6zCssrzwPXsH9t\r\nFsoIYTteBy4MQbHjMm4/iHafAUVYjWRh6efW3slBAvBpcG8T1ZciSRW9HcN1\r\nMDYOII5oLFOIgp6TXm8oVzg44xYWUTSeYKb4FwuGfQBMhV7RJuMC5q6FMoQR\r\nNoy+0qqN0gFSFKDJ8naGs/Ghh99pMTSP0gMFQiU76xJrlzr9KFuKNoSFAHqm\r\nWZ54PYBhtEwtnfXpgPgnTfZx/qnfcbovGxtwHPg9B9WPUfqQsxfHjzFLZr4m\r\nSfHtnr/8RrXfv6EoUsgqDu58dx90JC/64bH8pgh1ddcdLoy/C8VAY+GenpgJ\r\nLRk3z7HLp/Bu6y/0ffTxRp9NLpEFLY9BX0dN/03lfD3B7Y8LM/On6m84tAKk\r\nScgTHlltH83EuANZYu4HzeRykVslfFMTzaABTVzILBcseLb5f+Cl8rqhQgLC\r\nvhOTmbuucNmSbXAYC9sXR2dZ1Z0znXUzhV3Jka8jt6cnNurffDpbx7YfzjIn\r\n9GJCuA7jpp8m2Gq1I34/FcwEsq0sdz2XeBaWGvan8Bd6GXM/5u7VeWh2sSDR\r\nBWqVHsMeKRzGZpCQ5J0kWeYtr9CRYZItQyI=\r\n=xjrq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.199fe2a2a.0","@material/theme":"15.0.0-canary.199fe2a2a.0","@material/animation":"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-indicator_15.0.0-canary.199fe2a2a.0_1673474104143_0.4915645918657878","host":"s3://npm-registry-packages"}},"15.0.0-canary.8c0786d6f.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.8c0786d6f.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"1da447acad71771e873cee3cfcafce3ce150054b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.8c0786d6f.0.tgz","fileCount":38,"integrity":"sha512-x4wPhlH4FGQA/R0OUe8DA55VNF+uvb/g/LJ0WNqfpnEjZBGQjLtwimnk5eK9rMJXOfGaR4XtLlER8k5EWNGabw==","signatures":[{"sig":"MEYCIQDrZ+giW7RAU7hLg7ONUBHOmPYdKBqxLFPdZrVKc+YKBQIhAKkIwZWJjcTrgrbZtk0MQYuP5SKcQzlzkrQR8U2/QwNq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwBq9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrkkw//dYBX2sNwzCfPdx16jnmOb6SPYH6YGN1YzGzAuasXd8YjjjCG\r\nUxPqo7pkeQHbacJAngicm+LeQVBYt/miTtUW5LycQvUDRrFjwkwA+VuUKepc\r\nsOb8swa5ppU6ueqItu+DbHdUO6k9SZqJooOHy02tz4WwCW/QrS7FKmpNoDjT\r\n+XCLmE5tjIJve/ieWD8Hs8qRQELbcAE41AQ+zCAPSHv7HTR0DlGk76aYfSgm\r\n/LBVPE0mBs+l1cY4gLRaiCiJR3YlGKFNkwARBPrOtixKFdomJqQtIAHtfvn2\r\nf2WZcdUmkMXb/XgZaeyd08d1RJI5Tl4+1jAW8DKEE76f9pKX7/JeI5XgW/P3\r\nXUhpbkYC3jJTldick2RB90gSdOoowzrrFJstPIDY7Bfb0/+8gaN07Xr6fClY\r\no2mTsxv/A5KvSuEWKQvDk1XVyxZroM0Q+1Elj1faRx9Dsp1TWvcc3jCq9Xrh\r\n8HL08CoJA/ylzY2zS0nMi5QZM4WbgTZtPyRfdEBqFKD7u4nZEnIEsh1hWd9/\r\nruKMfOcfAnK68C6I1vcHjAJP54eZacxhkrrQmWPgDc7s0rBH2iXF/weXVEI7\r\nTO0xY601M0C8WTXZuctUVV0P2TBjGJvLJyjFDeMlFkscNjlLV6oXlCB4dAB4\r\nN66fJtSxn2KROs8hGPKa3LR6Riy8vlxE880=\r\n=L7qp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.8c0786d6f.0","@material/theme":"15.0.0-canary.8c0786d6f.0","@material/animation":"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-indicator_15.0.0-canary.8c0786d6f.0_1673534141084_0.743857568546723","host":"s3://npm-registry-packages"}},"15.0.0-canary.8a74f7c6d.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.8a74f7c6d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"70611b46474068d716ed8e372ebbb87ce07e616c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.8a74f7c6d.0.tgz","fileCount":38,"integrity":"sha512-1DJE9IXFqUODXc0Y/cK3a8GzB+kej1UdlEq2iY13Yvn15pcm/ie7BwBOFNPAzvq8LOfMPzfrFjYMpS+w4iorJg==","signatures":[{"sig":"MEUCIBI4Fmw21TGzxGolcEsIsICNmuYWFco80nm3P07lnaE8AiEAppY0lUEYNpQ7JqQDEdq6ISdMwaQYctWDODsNSiSFAdo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjxvXQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqV1g/+O74/9PlACXVyxaZ1AXJI1sAM4ME8yPk+V7BMFDvZllBZkz15\r\nblBEwCL5t2Yp9H0grpdYzo7/ZbuWcBr90n546Fs1ntU2hnyA9cRnvWE7rw8C\r\n+GGOYkbu0h1alcYqHa1k0SSk8uI+7fvGOuhx7XchS6fQ2akl9j0IIIIgS7j9\r\nt852VtuxOjzZE1W5+9lRJu0bO/AOw1Jbg6PHDHQjDBrXeLfrqIN9WMLAn8uc\r\nS7IWBX2P3lPQjG/vzrJnAGxzwEW6Cp3vQi0FVhMpWk2K7tLti6Xns6YtBW6R\r\nHFhq4mRC0bMqatO+jIN9mO409JSsUPaUNj6hUx4Kx85ZS+3nHQNn85lHgekX\r\n9vEzxAgv/GhLlY3ITpibRMEiBsQB7QCb1snH0kZVC/8T7rs4qJZwFV0l+6KL\r\n822HkY4kFwl0MU4VI4Tc6enVJymWHuxqZ/OnlJWarLqiZzOcMnxpHUJ1Y4YB\r\n4epPpNIHonsP1cLHfF2Hq1ChCn261uqh6iOoQfd1h12hVFTDWMl4GgCG1Ze6\r\n2+/0zS72E6VuiVA2osUumgHKtGedO0cEK7OgzGjp5VpkODtB8EDyisNHivk4\r\noAN2kRdjklXIfCQ4tLCybfT0vtCbXiZG6xC4Fp/g65YPdv05kgpgopNlyk6W\r\ntolBOA4bsdrhPGZewTV7alD62M+b2pj9tAs=\r\n=RBp7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.8a74f7c6d.0","@material/theme":"15.0.0-canary.8a74f7c6d.0","@material/animation":"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-indicator_15.0.0-canary.8a74f7c6d.0_1673983440348_0.22226135632461497","host":"s3://npm-registry-packages"}},"15.0.0-canary.b4687fdc1.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.b4687fdc1.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"8b743b668d7822797ebdc3f806dde016a95c2a13","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.b4687fdc1.0.tgz","fileCount":38,"integrity":"sha512-ySJRKu9VAwgGXmp2SElh2JSGYmWOFbFRxkmKsmJGDyNqzaSTYFfBmoSBhDvhl0GwaIhaJgN+DLd22yRz/47SzQ==","signatures":[{"sig":"MEYCIQDGI0mrELoe2hgVYrO8qLIK8CGud/WLLNwxuJedBBdZYwIhANKIIUrznXxYvtV/5FpQTmOep64eC3rCLqKKaQNzpOym","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjyZ6cACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmru9w/+IJ6f4xNBkU30kT3MDdj2v7W9B1dALfw8aV74gtDqu/GVC7OE\r\nxAz728ba27hwvntYeAHldH4iKRifWqHVDd52oUKhTfrBRp3jSd/knRzF2hNw\r\nQsL6uMA2DqTMMYjRwbMAvRxilGg9an1vDCkQAHZlQQCvGBrOURGxhTbrBAt0\r\nefgTF5OeH8BdXVg4yWDjtsk8NV7cTtkhGnRRv+itD45WOwF2+Hgi6bp0Ap9a\r\nm/9M9Ta+ywbhg8xtVw1bjqM+vyuCwfhAFOw66kaE8taRp2biJ3ZcRHN3kXZh\r\nXPbHQFFx7IdyyUXGFsYpaTGpXk4KMQP5YZCzx1aYowIYhpEMlfJNhpYJrpFP\r\nbEvoi+Fchcl2f2F1ivbmLdWsRZlC34WZmevJNR9WnbEQZcKpbasdza2Z87U8\r\nuQFNVLDF19s9Zh/uR2UcB7eMpaPHsFmuOXywEZ45x0+H8RdjXKOXFDzmZOGz\r\nDPMEvkCEAtpRWlw4BQC1572h+WEXAE7pDfPHC17zuPRSL62/x+OKT2/AWBSD\r\nCrpGNktclf2ZhXfSIEuI8nePvDnWVKWrekYjU9HZSAbxXRBf+u1c6Hce4/hP\r\nt1mdas2kkJ+WBjLDSKWc+bkrAr7wllY1ollTya2c5M4MlpvOAke9zj7X8kH9\r\njSg8ooRYzLBmYecHuuE3UUCObIs6E78f+Co=\r\n=vRQ1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.b4687fdc1.0","@material/theme":"15.0.0-canary.b4687fdc1.0","@material/animation":"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-indicator_15.0.0-canary.b4687fdc1.0_1674157724418_0.0708933346052063","host":"s3://npm-registry-packages"}},"15.0.0-canary.b836b9892.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.b836b9892.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"42458b586694f66b90374414eabbcbb28e9069e5","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.b836b9892.0.tgz","fileCount":38,"integrity":"sha512-hHRFosXZpAFLtP5bUq5+XQZmjdYwPL4KWGDENdgqCUWZDalPOO1xT29lxeMJwTiQ29ZdLCijm9OaT1IU92c6vg==","signatures":[{"sig":"MEUCIQCkcp0z/DK6wVGG2kEIukrXOG6IEk5saURZHYzH6mEb6wIgStPWho7tLJfzvwDIduzEVIe0xWd6Hg+FpmGdcskDBas=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0F3vACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpymA/+IlIsTqN7AFyzqzTyW4lt+CysVys1YTGFzscUFAOGTv305oYK\r\ngdz/6qjcH2AWeNR3UTyP8KgIlfqCIb2o094hjl6+EACFOOu9afI0x9ET4bdr\r\nk6ILR7rAUumsVDaHJTLjeQM8SmviiyG2avY2SwZtOqN9X4HpYJtxb5gCmh83\r\naw1KCm5+8kAdFxkmGmroq8SD3Ay6s8oy7d3z9NVO7GW8kKWRGQkoR5TvO6SK\r\n+/jlyYIIcdW8uppBTefnOxJBkYPwYCQuCkS1U0iskaQ+OyAvf7W6iuCBffXo\r\nUHjgRe4l9Igf5OrwbnHNZGQf6O9bYoLYJE3FoXt5izQ9Q3ADEm5y7Gxht7ee\r\ndY/OH69GgcBQH7FoZSUq0hsJYLEyKw24SwXTrtO7YaqLLb6cokw+NoiH71BT\r\nCfzlacpemnxLK80MR+a+7rbS5vKGdnCzaN3KF3l7LKT0bnbDktudmYZ+Sk1Z\r\nXT0CA6BM65b95GS/wECI/ve4mw+KTjwSBfsLT1QVJb2srSr2C/KFlFieaOhF\r\nskvgPtCmnBZ+AUrZxRMW0jwJvbbnZdsRi0BhHNzQwPKszjZuKtrKFLbzxgBR\r\nVcO7Sad5mtPcq6WskY46JuBalmSACFA3BGRDaenKwpuxrgPR7g6bhlflBLdy\r\n34x9ilnJi+8lgDGQ18KAWfPWIXP8MhXl4KA=\r\n=0sI6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.b836b9892.0","@material/theme":"15.0.0-canary.b836b9892.0","@material/animation":"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-indicator_15.0.0-canary.b836b9892.0_1674599919390_0.6951979603526066","host":"s3://npm-registry-packages"}},"15.0.0-canary.e8912fd37.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.e8912fd37.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"21a3ea0a3ef495bfd6f86f2fb3f903ff7fdd5f8a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.e8912fd37.0.tgz","fileCount":38,"integrity":"sha512-WUA4FfeQwTb9zqmojRIBSPe1Kfdt2t0rKWOH8XSO2vyTQjojXBn3jW4EE5dBUrFfQbuXCaQjEbqjV4M2g+wVxQ==","signatures":[{"sig":"MEYCIQDo1bhXfY6YPpWAnoOpoXJaOURBaxles8vLIHtlUo90JAIhAPxd7xX51NExihgQ/lcagPPvBXEAsWQYxN+XAvKW5/3x","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0sZ3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrV/hAAhtzuyl0OU8xxAkS+smhl740Nr4TzEld9IZQ1NCC5lg5yRo1z\r\nIDsTzuK1/hwqGt0Uhx9mSavKgSiRsjcoQK/6yHSgLVXlheI0BtjNk2bfTIWw\r\n1fR6IxckLHCDSZTR8nvCocPiDHPAfZsd6hXU8uIYvDh28sDoPooQNiXWuWVk\r\nwGAnaSaZtEucX8asFSBK/wj6U72u7q4EoUEmP9STwpSzWoRtCFZDT/H6/jLv\r\nlw4qA7JLiLA1wTw8cWsJo4B9esdW7xMogolF1bKN65tghZWkxBMvB31O1+p1\r\n9OzJIM0SkaokDZJEAwKvwB+oTP/GyY1wpO1FF2fRg+zNZQHCno2MVqnE1Uod\r\nYznXiedx0i6HHrFdHs811e3q4OnSfLaUx5O78Ihcu0G+ltJF0grKQW3mmRYf\r\nP77mIbiy5X3vayErCrMY2LMb9x+5m0QwZbo7jfVBu8HYrWPmw3btDDkNJCNf\r\nhYo8OhYgXiHyT4BW/1MI1XBI/WOnhqpFEJ2MSPAgojj5CDLI1syNYBfJ90mQ\r\n3B0RheOZzpSFT2bmtYEeUGPfMCIHSb+Ow3EhLgVggC32rTs1UCS9yFIehFOg\r\nT8KdDt/a6owh3ufGTaUCbajI1vNEdLMQ8e2cdaIO4gDYLnYKod6LvAtubNFc\r\nDfYL7yQmm99x01xpB6cUsq0AlCZ0R/U0uWU=\r\n=BYMY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.e8912fd37.0","@material/theme":"15.0.0-canary.e8912fd37.0","@material/animation":"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-indicator_15.0.0-canary.e8912fd37.0_1674757751782_0.6580717619142864","host":"s3://npm-registry-packages"}},"15.0.0-canary.16fbd30ff.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.16fbd30ff.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"b9c393ccc7b949cbfea143bd39e3086e3a43ebbc","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.16fbd30ff.0.tgz","fileCount":38,"integrity":"sha512-y53Uhqq2JaQhRzSrWu6cAy5hrW68U6/JoLowxhytq7ISKkFMqaTHX0evP/DBOwl2uYsbv1aOunaNfVtzrwZ4JQ==","signatures":[{"sig":"MEYCIQD4Fu6Dg8z/JTAMvV/UZRkVWopTmMnp2wMPA+wD9AZeBwIhAIB7tet34eFkC5bJ0qJ4yCpM3466Xsq7pVgtrXjEEmB3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0sesACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq50w/+MIeZLKm+igLyAJZUiBpPUwLDUMF9DYFkWIXoju5ZFCx88gjP\r\nYJItrCWDSvVGMzBHU8rNrLHhG1uQ+NRaoJkrou+6n24OpOCn3k1Ac3N77glC\r\n9M+UxMABPX6OIJp9ZutKM+Cbbz93OVY7J4MbGr7wcRcVazEyXIr2PKs9uUQo\r\nvEGJE6y4NwRNym6c0bdDe5gSMqLofaaPkdOgyQE6Mt4YRfZfnlFr+wq9ha8s\r\nHomP1akdQGMZvusRfU81+1ZHB3sKloIEIj3HK10JbCLWZmhj0hgHSEwjlW+V\r\nZxYOqKjcqXYLId06NtEHMuEiWeCE7zDb3iQDBtPwGBT+/4yOZHK7YnjRZWdN\r\nyuJCIyJaI5cZ9b7SWVvZPQtazJkFxiTjHPYO7F5DuKYcWNt/oqJTmBnLsXd5\r\n1LAtQIRLIk68ib/W498NTAMBXWFjbL23hzu8Fcjddqw6K7yRx1qZ9cwbYuOG\r\nkYusSVfiG62X4VRBbfPB1ouLMs9pBnf9u4+T+/m4m4XbW49JaSQkop+86bbN\r\nRIpjoCxVB8HKC/XDFScs/QCuBeWj0X9kTm/gnAkjSSn0s+aHAVxjJzA0IOi8\r\nAQ6AhrpbDVNVMVfrJ7PXGR3NI38EYMEUguU/cWd0axcC7drhy0ya3WfS28sn\r\n0gtqxBNo1N2x6Oz6A03fhQSmWXJbHlKTvXg=\r\n=90O+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.16fbd30ff.0","@material/theme":"15.0.0-canary.16fbd30ff.0","@material/animation":"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-indicator_15.0.0-canary.16fbd30ff.0_1674758060443_0.6191309482240257","host":"s3://npm-registry-packages"}},"15.0.0-canary.033ae083a.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.033ae083a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0823f2a5d93beb8311151cd636f34ce43c93561b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.033ae083a.0.tgz","fileCount":38,"integrity":"sha512-q+z/n/RTeu5ZACytgn0FpoWU06o1Rvo/MYFXtI/XtyTfaeLXpawb5QMnUFHzYjcQQqkqu8zItCBeg3eQXxhMpw==","signatures":[{"sig":"MEYCIQD0fLgZZOp66nuaP9LFINHxZdcHkhJVVNy57KpTH+l81QIhAINzrAz+c3nyCOidGxI2L/XF6EIs+1vt+/I8EqGwYv0B","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0tPZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqmww/+OspAnL6OTQCHo4qX1v1lYrcrtu/TZOvgGWhnncD2eksQEfEk\r\n40ttfMzfm5Eh6uj3EvYRcgOZ07dkPSH5W3a/maAZMC5XESHksV2JWjm+vbd0\r\ncOORxwqnosK7eMkH0EH2rxZ9qhHXhrxc4FRY0TeuMzmKB7x9mA/aLbUAW1Bp\r\na7H3Na0Ir+Fd980oQNUv7mDxTQiViRG5clrfD4lGha0NKVQOj1XmtUdRJMoT\r\nkJPZoVc3e5QlJgxp6F/ZT5ZC31ckEHen+mG3z/3qdpeJ7skFxZa9ztsN2nP+\r\nnAVqFkLV6aPIlRO35DzwWoyexy1BNJLra29/FyjLZqfISAcbhtRHwqDBFmOD\r\nZrgx0xRecmF5YDgf+xWr8BYhRSTFKxkxg6PLUJJV+JfQOYIis3Qja2l5mH0K\r\nwpz+5Hma5gsrYT2zO0szNoSQC2I5vkry8GSxNuSpwTpsQ3wvBSnINXcLff/n\r\nUypi/J5bUE8O9uMfV1FKCMuF//4F5QKUzAnCDb9sqBFh6qX/FwGLzLhtnY6H\r\n+jnWvub1sB2Y8DL9V2IAoriXvtgQAnojAe3l3Ge64TwKPFN17Y6jjZ6SG5Vs\r\nY9N0KVo/1M8Nuax5io7aGa9hambk9xrI59neut5FpGrGP5Na2IfKhW7vdRiW\r\n9KVqhAAsvK967frtvzj5b99jmx//k5klLu0=\r\n=/KcQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.033ae083a.0","@material/theme":"15.0.0-canary.033ae083a.0","@material/animation":"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-indicator_15.0.0-canary.033ae083a.0_1674761177344_0.5699210069337413","host":"s3://npm-registry-packages"}},"15.0.0-canary.3a705fa1d.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.3a705fa1d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"63b3603053aab61fa5e733bbda5950665f294ff0","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.3a705fa1d.0.tgz","fileCount":38,"integrity":"sha512-Mgy1+Rx4NCBQ90CDAQe0qwtpm4wZPDdwznBkg1JzpasxxbRt7Ccwhev1Ww1vx3rMtFRTXhou61pl7G//sEeNnw==","signatures":[{"sig":"MEUCIQDlLeGiPWR4ulr7NtqsXB4gEpKVfVtW5MTr8XRyJEHaFgIgbgiKFAJN8T/dir2T+nFylBbLjxyEP3b4hX4WDkC/e9I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj1FN4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqe4Q/+KGjWG52qqcPL3A6etTmNkEUxLQQ/XhElBRM1+BEj/i3IXUld\r\n0OS7lvT0R5KwILmb2Exquy2XNZeFieuDmimFiBSvbv+uEGmltYp1W20rll7R\r\nIi3LqMK9Z097UlXRqHIi7Ljfwc6oUi0YNKCbx2Qa6P/jpx7aWsvw0fQNSpJ8\r\nZP34MMNLrHgtZl+NZ4y8kZcqjqRuzufMChNai72u0GkxFRU7fCKXPcJlcyY0\r\ntB0LBz3SPy6Gfjr6h9ADLx+7Oy5f0bykOgce21rrS8WdMDmfdmU3Yr8I7p6y\r\n5pkvsAAk9mchUkaSEs2m0zFkIkC4vhz8eN5MMgfraKjzqw1HplAF8UzqsEg7\r\ngYjzaqhgR3J9FboRE1yUEju/oFTvj2aq97R5HomiopXpOuNpR5o5bcepZ8BY\r\niPfmA6rt6D6b+w2u75QDogFiNc6yeXrfsIv9DiPjSGVFspax2tkM22ZkRjl9\r\nK70xzeIFYN/iOHKh3+K2YvRqTeATLxuRz4OQYBQg+6sUrIIwx5UdPrhpHDNq\r\ngel1d2Dm9+DahZtTtDq208/uxbQUsWvM1Udb1+AzIQ7YuDASwaI+xFo4TxZM\r\nxliXp8SH1fgIFQn2OlKuqdDHXq/W1h0JDqE/ggoIO0w7RqamFg8G2evr1hOG\r\n58ku1/6g5JE1EGZjKpvEp0yOLToNs6ZusBc=\r\n=jTSi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.3a705fa1d.0","@material/theme":"15.0.0-canary.3a705fa1d.0","@material/animation":"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-indicator_15.0.0-canary.3a705fa1d.0_1674859383852_0.8870926201646216","host":"s3://npm-registry-packages"}},"15.0.0-canary.d6bea2ff2.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.d6bea2ff2.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"586517ee8798893c8a0101cb352fe51357250c1b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.d6bea2ff2.0.tgz","fileCount":38,"integrity":"sha512-+CCkZaZBKF33Mj1LfLcsjeL+QdXaOxBTazgVN5WRnGmkCDd8howJKlvLJ7MhHHhiSXd4qAU+F6UBdjpjoTH+FA==","signatures":[{"sig":"MEUCIQCwQ+va7+eVFiV8GE/tgHTGUFnF9zm5KHiObBE+0r+IZAIgDEGsSUvLFFNWzLR4yfFT9YafMuG2qSVaWlYU4FL7DVI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2TPWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqEGg//dA2Ta2BSSFUGVInZPHdyzRDX248O6EcEZa5Q4xBg6sVNw3EF\r\nfUs6UL18ej9UUs3hRt/zdZK+RtqY6P5IbWKnoWLDzuXcxKGzFxNY70fsqaBt\r\nexDRXirHy5JUEgtCK1K+Gq4gZnX7x05yoWTy6MBM0HBQiABha0qnlAEog/re\r\nfa6zCJyexNl1hyOj772Cf8YJVqosxMZOhAndOHiSru2pcfZ/FDSNRVofHX98\r\n0BFRavpbAkjWenUOMz62ys16VcDmNvZdMmhnpUxM0v/mC8yi1IfJeCLt61IF\r\npxhioqdVHN1V+H1keUJ1GoX4C46n6U5uGvgQgl3uv2KXOLfe9tjkQkFpWria\r\nX222GNa2XyMmm5esYQ2b/fa3MOZ/Qr9cYEuTUN3p/KCHRm7Soq/UWqJ/D/if\r\nal+VmBOSM7Ze4uBy0ZdSwN/jJwc+u40zbZjJ3uup5ckNEuBJjJdL/YYIXImb\r\nziywhXfNUR6HE/BZwOPXa4E57skrzlLsM03Acz1mYrRJB+ijOZ0LJiGaAgB9\r\n6Ma7DN3fErfn9/4wXse04SkrT53bit54pJU6c7ZIDwhzvdeJELk/ot7IL4k0\r\nNwfEPcy/YWQsi2hEWpKuDBlmVt/Rcr856iM7bPN181oa9QU9ZoWN4W52YKv5\r\nzhTqfNPLxL6UJPshvxYFH8+svFHlNoLnydc=\r\n=TGAp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.d6bea2ff2.0","@material/theme":"15.0.0-canary.d6bea2ff2.0","@material/animation":"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-indicator_15.0.0-canary.d6bea2ff2.0_1675178965953_0.9450202036396234","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c94182c8.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.0c94182c8.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"6b643a6bdcf0c501abf754282cd72089d038ce20","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.0c94182c8.0.tgz","fileCount":38,"integrity":"sha512-XiIzSQfdyFeDN6V8t7cySxPbkWF+SYx+UMzFpDjvGhKHfTdbqK372+OJGZn3qusY4OZou/Kw02VcmCODfru98w==","signatures":[{"sig":"MEUCIQCxrj7wKEQ3QdoJP+1K32rfVs9mJABb4JwOjt/r+eFbmwIgRuIo7gS8QsyQZ+KPYioyDYgYbJvhmEnn3e1sAXqyY2A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2qTEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpdnBAAltsAz6nxNSNs3471waXr7dBXxH3kdhlWSEJTF3RT2wmdiedF\r\n5qYYik3AvPjjyDUKwsx6S06p8tA6wFzPX6Iet0ipGgVun3vAcJNVpHOOT4ti\r\nF7J1Y+8tc/ZswZ5T0JoxqXmj2iTTT6UxKb3AWvBxUgpgpd2sy2zH/pRvWAux\r\noGVHHlqYd+JN2nHLYcaxEtMZ57HLmrc8cSXB1wREFpG7TI01OGxR/7FDFnLu\r\nWht2ePBYgwVDt/R7hF4ZRHA+qzLePKXxRClQTDsktOQV3vi3XzZospYESqIP\r\nMAFNn+1ZycJBs4Tcwj08oXvo9EejU8nIkoqrUqfiXPLhbIfCM+grvUjcnsEw\r\nxMxe3tbW1YV6wUQbUPY4EiZ9ohu/jJpOqcFdC4MG7wk5sBx7HC+MxqAa9Dj6\r\nyKmTSoaKqJ1LGI6rpEcUhJOF3o3anDKsWz3rGaooZbiJr5W8Fiqoan0N3OoX\r\nQZAhhVp/1ixsLNV4shzrGJmzB5YzBLCzYO9s0Ng100FeBijutPAfZWzJT9aE\r\n2qrRUF9f/oZiFKN6NvYw/cce2psiSKtlL+pE1zZQfSl3ETnYinysndvMr2gf\r\n0813HPiFdzvcUBxrB86Cxn0WzI8tRioWcUM+C4H7JUYmuQsg3YuqhSkiYkfW\r\nUuwDUi2R5Vn8xhOWjqLoVCsQkR6En6M9Fa0=\r\n=bgdw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.0c94182c8.0","@material/theme":"15.0.0-canary.0c94182c8.0","@material/animation":"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-indicator_15.0.0-canary.0c94182c8.0_1675273412555_0.3166865962389991","host":"s3://npm-registry-packages"}},"15.0.0-canary.15b221540.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.15b221540.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"aaf66114ebe800d3db9842c89e580395c49343db","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.15b221540.0.tgz","fileCount":38,"integrity":"sha512-hBwC/+d5zm+O5SWZvBjCQcAYnYez2zqHKwl4h7JMaaOpSAGhzpeSBtk9suvB344LOWtMmPF1dfsAXQLYJqx53Q==","signatures":[{"sig":"MEQCIFXOelSWfpw86PbbaLmM3ZBmp7CUqMaVsYzjfyW/6shlAiAgUMdTjB1MMq6OLyb0gQFVDLR7V1HLm5132rfsAflidg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2qa2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr4xA//fhbvAbem380GX6pRrWkxnanRx9ebDEx3SciROizD+zXcj+yG\r\nHeTsEeW5bbhnSOj8F3WBD/N1CImYkdV3LBAO8Nu3uydv0Z8zFFGP5dqdLQPj\r\nzUjzHGNfhKy7+5b3X0/c4y+espB+XRLKf2QFXTFzn6j3jNPZKXqglv/yX+03\r\nbJuk+QJ9IH/ojnhXoP0i4MsjNZT3Hn5whlLOHQ3Zd0lX8LAs6LyLoDxEOT/f\r\nTzlRCs/+jvcfGZLHkvnNX9Zc24hiqGrLiOUiE5dzn/ZQ9x++3IeRhqRz42/I\r\njLtbevgSSqdfVkWNdZLOnTp5lUZrbbBejMf8kB6IdtRemn3cNTRMH/GwjV18\r\nlC60+W4EO4+3+oVzFJqhLvufdyfLAi014NCYq98RYr0mJNfTareycSTa+XF3\r\nDYPFMcaJV9PN9DvIPdEoDMi3pkOThCfHfKqCSOQiY3YfwNrWM8ZnrfEjLjC7\r\nxCAjT7gtshtgGxVIk3Ali4bnJIrFbMbw0Y2Cq7Czg9MRdGDSYud/qkpEARgz\r\ngB/H9/cmRTawNyjId+wwGwh6oBmcfTy2LpGvdX3FNghHbXEB7E5FZicVFyZE\r\n5cilD4q+hKTxxKpjq/5HlAoPqRiLc/7XuMMqMCWTSVeAHDjozyex4Em37hIt\r\nh0ama5G9E9Ztx0B5KMTNSYuln6sS5iMYnxI=\r\n=dTtJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.15b221540.0","@material/theme":"15.0.0-canary.15b221540.0","@material/animation":"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-indicator_15.0.0-canary.15b221540.0_1675273910623_0.09556949167700335","host":"s3://npm-registry-packages"}},"15.0.0-canary.eeebb8bba.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.eeebb8bba.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@15.0.0-canary.eeebb8bba.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"59b7b7c2a32074ef54c88819af810a653df1b23a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.eeebb8bba.0.tgz","fileCount":38,"integrity":"sha512-J9uvJwLI92wIk7QcglTItuZsCoRZaXRcqIyANl9do2vyGrreeuFT9RmnRxmw6fgjy/Z3jKI+9v/o6MT/WyKDUg==","signatures":[{"sig":"MEQCIHslODSk+SjMAfhgHSlVsrhT7M/WkaCKd9Qtr2wdQBPcAiAJQsEBOWJ1s8w11EOVQ7gYQ5j40gTgQtvuWi5jZR1zJg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2q2yACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqBFw//Tv/vRkOWjfMCFqUWeDUzP4gujFaMwmFUnzSfCOjsl2B1hDnK\r\n9KyseFoyCnh/1e7s/KZ0Ue6cOg52Y3qrZ8LBsQoUf34fjAaU75MD6p/4Vsb3\r\ncNUSj3CaHZ6ZsUZxfQHdinyvMWPEcmsvfKOXv2CQ0ZZAThcyJovx7KA1ewZC\r\nJCIvK1m5pFKNZV+nJlIHRLmgZr/QRACBHoLDLTM+mNMj6beaqre4wNLrjnLM\r\niGKL2tvrkdDBE8IadWzXY3NeernjDhsP6miAgOpLTQAV0rT0XMDyvIkdiR6T\r\ncClRQ6RSNsiJ/nvuhjjFgirIdkVEu/UZsoM3WfJObBSZtgPY7oDGdmxVybOR\r\na/iET27pFZlXI4lyBrKsM9EiHQqVAZ1rVJTyr859wFmRdhJqS//xDzTjMyhG\r\niMNpPK0uwgp6Trl9BhbvJuyHKWfZFAKR/sTxnJUCu0MfF4OWH2mSJHmrU+0L\r\nooKwje0v1JnTV+m8T+DtOBkHCkYFRF0KlyLNB9xKzUbWbwLk3uuGidmFmVZ3\r\nbDcTPudXHAmMvRtKBR5/3oHM9DR02jWYXQvXCdipYCbcHRHpTwHGcyx1mGgG\r\nq/bVOx7+9L2SfPNNkd5uEHy3A1WMWxi3YA8Z9caUpdntrUuF6pA5FlUQtOAv\r\nUVSM+DRNZkdZxOSNM0ZWInSVB4ZWaqmbgvA=\r\n=T2uI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n","gitHead":"5c8d0d2ef793b8bd564888fdde6b97e8a2502cdd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.eeebb8bba.0","@material/theme":"15.0.0-canary.eeebb8bba.0","@material/animation":"15.0.0-canary.eeebb8bba.0","@material/feature-targeting":"15.0.0-canary.eeebb8bba.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-indicator_15.0.0-canary.eeebb8bba.0_1675275697950_0.8091272982814159","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a4b3f834.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.6a4b3f834.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"351cfec0cbbfd84e4e7f1922087116e542fa3ac2","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.6a4b3f834.0.tgz","fileCount":38,"integrity":"sha512-DXhyikAXUOgqyl7ISd70uXTTm3VtWY9ftX60mZXGbdCguZ9uSOIDWp57AD9uY6Ieu4SjC0EXRQuBgJkuyO7zeA==","signatures":[{"sig":"MEYCIQC0r5GibIiHyC7nrQdZ1cuz3wJ0RAByjvDJHPyBngm1TQIhALZanVE8GBJDyjNWIwYERe9dWwk+/akhRankCtPay8W3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2rYkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqedQ//XQ0+M72570oFgqlEN7cLn5wc02Gf4AFkt8sfQFw3P39S9Jry\r\n/Ya2cPSLLPK4f6VLLwMnLu83KcEuJ3d8Wa0L01r0aP41oksdC02Mzb5aJPqB\r\nuhm2i8fPwE6FnZ/4e+LsiAvgxYBcqvIptgKeDGW3IgE9XHXN4o4jEjZFcWso\r\n5svPxLd3wH0j0CuKyrUqFSCRzSW4Da7Sp/ZeOQxHKFOK5pWQQCWBpWd0LeD1\r\neJDabGJmQJCYBhYWblg8AWXxndMprJ4knU0Z7hIt4zWcweHZbOB7vG+eC08P\r\n2ohiVoCLCSPJOoM1Xxt8qmZc1IfS53pbDpQj7QO2wv2F8K4UDrjJbGOiVeLm\r\nydphUourKWGBn+bGfrTWLXTKjaPb/9Ca62agg6Cp4oGIi/YQYcouHPAVDXSd\r\n94SCEgKT7MvXqJsvo3o2nN4uo/SyjDoGVkae4o3NM/nltjKe8y17ns7KJqPe\r\nibI5mJjNpLPBXI08FH/nnuBG/qA3XTwi8JcY5RsILMLvsSK4O3gC/uJVrZ4O\r\nXD48/mUFyClC/AK84sjtkvTPUMTCWI2cHR/qjA964CjIDSvQoqfftArvAqCB\r\neua8exheTA01csrin1c4hcsjuJ1qfZwuZTiy4Y1VjIR1g3HXrdoVECiZMxfW\r\nileIgRB2LI9FI10iTCCOyOeYEE2nXHfQTDg=\r\n=c9AG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.6a4b3f834.0","@material/theme":"15.0.0-canary.6a4b3f834.0","@material/animation":"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-indicator_15.0.0-canary.6a4b3f834.0_1675277860452_0.511115140866232","host":"s3://npm-registry-packages"}},"15.0.0-canary.b177b40e2.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.b177b40e2.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"6f5ca1453192813441e072f7d4ab9b6db543acf1","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.b177b40e2.0.tgz","fileCount":38,"integrity":"sha512-jxfpGJbNOJoATgp1Jpr6NLaqrdFn73k+11KLIgiMIDjAt8+IMZaNy5QuGCnWL3HKaBqmfRXzXW1buExVevMSgQ==","signatures":[{"sig":"MEYCIQDVdsUDFCNQWmk6SfunJapLi4DY799fL/ogVSfgqr+04AIhAMpi6t8K2Vkiu+/eg4tLvKXdN2Un5g8yEkZx0Nu+QOt/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2y8EACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqcbg/8DkHi2AiZ5RLwUGgFZVMzXK6gNMhAqQvlcPeaC8CDAOGDZCUw\r\nBiftQOj3H0m7sacmwP+xWVDEnCFN6PbjhgYSj4liTKh4TEf2BO6WaE0aMpma\r\nLJAKtENfNlDsveYPUf7H9c/nXxn+tF4MFH1/fMmqprZiNvQR/H9Ulte0tmiO\r\nTsea8HCSec4LqpSD+Rj3QKI1GECjhqdP/dHxJVJT0T7raeVa1ZnIW18H7jMz\r\nMM4DZJjmEUN6Ay1mHlg+cjYxHFNIDOWe5Q6YZgk8zTcJJ+64yuSXXr9ePxbM\r\n5RNGphyCm2JMtCKj23B/Rm5g4QxUh4q3I3yV2sG+G59TJ0BAYqPGnxuG7uv2\r\nHGr+2Z8dhxcbIoGnUKLJOKKXkCP6nZyHFQ86C8F/Ih6utUcemS2YR8VOi3zG\r\nTnP5wseEBofPtCvmfR+RvNlGo0qU5/sEOT7IjwCy9AwQZqD5wy1NOJ5e47mO\r\n3OFAudZSJYySrolJHp6zliJPRziiHMEAmIs65lm7szdxlVbkkTR+V4IjoW0n\r\ntHryvg5fuv6eP12bNWZ8pG8qMfcb97TuYkjWMNmAm2doO2mVjKwLw5yB5caO\r\n4wuWumLUUWRYT/OTTNbvYj9kK3CEXvY+5Th0igXp3Qw4ZNdiZrglywLwqaPI\r\nEa+J1qB/6KRGtHukgQ5ST68sFtYgC3Lu+8A=\r\n=zy7W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.b177b40e2.0","@material/theme":"15.0.0-canary.b177b40e2.0","@material/animation":"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-indicator_15.0.0-canary.b177b40e2.0_1675308804218_0.5018883068310225","host":"s3://npm-registry-packages"}},"15.0.0-canary.d9f821042.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.d9f821042.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"5beac54dd1ca05be76391517a891c1812d17d80e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.d9f821042.0.tgz","fileCount":38,"integrity":"sha512-0KDXM26lIUktMQePi1pEB6adZjEyklxbrYZLSg3Z0dsVeEk/+BBFGJZDUHrTiwS4gfH5J3MnXcI8d+a3VjUnVw==","signatures":[{"sig":"MEYCIQDpXZqHY4D5HOYAOHx39VrehQrI7SGqqH5nWD/0AAc0OgIhANy1QwiB52dyNube+EAfSlIzAXsa8JOEu8dOfmXTYs6U","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2/S8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqXzBAAmjI1mnc/BWtueL3oqloC7tcH+M428c34HlXluWzgVqpf1Gyt\r\n2QPbGRmBX0UC8qJ6ApwFLNpOGQXBrO1Ob/X1acI/9ORPRNrpcdgtrmChzjoF\r\nJRS6II8oR2kS0JCM40P/si7cVaL6mtEdLLAb91JiDbvKEZY/T5t67BaCSp7D\r\nSXkzjN8zMC4NcQBp0oBvqusdGPTXKFi+aZyJ/S7VhhN/QADI+msvZFCYvp8B\r\nOeB9bSgROg0euqktbVFhgmZslkxNZD6E/KvCE5I8x+nOsNta+T83SplFv8wT\r\nx7gGxw7cmaN5scb1SkQRjf/+Dqwtk+8ub9Pr0ShOg4ZQGSCziwm57EcVLKXF\r\nVHhaS6MydmUHrEXQNVeFwiSWbXznAgLsV1uBu3BRrXpI46eQZ4fMkK3Nyi0h\r\nXjeDRjfT9EoqFZe4QDUXKg1QIGdLuISHUSrZ2kl0YPU1iK4Pduh2Dv5mzFYD\r\nDEInPPy18Q7ktyffqW5flVM6tlVNMppqdzu079LKcQigvx8lgERkVMYMr9vG\r\nXep+sd20nkelh6jExgstIqFtexacAXxKqZ0B3ARqmmQt5/1RA+fawTbt0C+7\r\n/esP+hp0KZNuKFH6utJNveh6x60GXbk2IfFytwb1XqZtJfIju5Yvlt1+ezfr\r\n+ksfPxle5kbMPyKqJDDu07+h3QJnVxIoAmA=\r\n=QMnz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.d9f821042.0","@material/theme":"15.0.0-canary.d9f821042.0","@material/animation":"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-indicator_15.0.0-canary.d9f821042.0_1675359420048_0.5724475375985354","host":"s3://npm-registry-packages"}},"15.0.0-canary.47c7deb19.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.47c7deb19.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"789bc29f8a75e3a127ca5c7fe349ef50ad33b36c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.47c7deb19.0.tgz","fileCount":38,"integrity":"sha512-DXV7Ez3LtlA+gPIeOobdB/zETJMMaCW1XMuNNcsuIIpxSJDyFQDEwBFyGN6o7OD/ouNi4RrdbUcrmP9ZciEy3Q==","signatures":[{"sig":"MEUCIQD51mtoP+phT4v3jRVz/xnFqA9YEQwTSdq/bvIWZtb7oAIgCm2JvbSY5kT60s9ar3SmfGh78rT3Mudi55Bd9WCzTQU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3M8DACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrL8A//QUXWhEFyO1Ylp7nLP2GkmUJ4JcSd+CtDm2Ux9fQk5kOQPEmt\r\nlNgZnG9p+ZXUy9IGNq9ABAbyZffJCowa2R0nQR5Pzgo6eJnjLjRC8uw6lwML\r\nw7RG2v+ZfaPkrcAR/TxCUJfvL6Lm1jDt4olYD2RcR8keYpn9mhlVFukfLXVI\r\nUpKzmzynfknXdoPwXLveRyQXQrbIRd0WWimOGvstcAir/jekEj2tmfsafEQe\r\nHGDQZjbLotu2WiWk7xnsaNQnV3alhr5e1NORJAOQh86Wtg8eG9kmUodaaynY\r\nL1Pz2Eb9hQuPauvfZPVamrxnwhZ7eHEhP+QfVowIEt9cZYJwYmS+f86h0zbt\r\nvxfLLqTRcjDOFsfiqw8d4/fFXj0yKi+3wueVB7imzwELC+6qNtkTfY4fw3zu\r\ntXxXsk3wWBwZVKenlJd52h7j3cVMfWOoUh9n2YQ6JTBWAhpIZd02SBuy4j7E\r\nrMcBiWVGN4hhdzy3bVmU4XS/u6swlmpkI4X7DWCS9tuOappwXUCRiL6nPK0X\r\nfjifP4Lqq2cMIJbnqhf/pM5VL+92rgRC8D6HCX6SK0D1WKOa5ACy/wPybwBJ\r\n90MyQUYRr8rZ0/QPf9xl9yNK2PC2K4U9d94VwmpLE0quq21ERGzrjit2wdn3\r\nxWHkciMFWpTjBZ6TXJUkgm/2zl5/88dcCuU=\r\n=3LeC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.47c7deb19.0","@material/theme":"15.0.0-canary.47c7deb19.0","@material/animation":"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-indicator_15.0.0-canary.47c7deb19.0_1675415299716_0.14736689480510212","host":"s3://npm-registry-packages"}},"15.0.0-canary.a16dbd1a6.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.a16dbd1a6.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"5c910585d9e5349533cfeceff62750de67e873d8","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.a16dbd1a6.0.tgz","fileCount":38,"integrity":"sha512-qOqpwP8LPxy/FXPdTbAZvhYzKvUfpXpjQkX4bIwrqbmJAqMI7OcsMbCb1vhMUgtP8/USJgwLhgmIPaeLbAi41A==","signatures":[{"sig":"MEYCIQDJYH/QsKLtKhBGhTCDcJLC+kr5/7EdglneR6OHsgOkSwIhANsUKvYXDpFlXKXQpRe2jzULNsaY86c4udVzoxvCyC8C","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3felACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+/A/+PCLO2Gi7N2eL51iWFNDGmswOgImBeD6sGkjuX1ymT0IrT8FD\r\nX9qa8gsoGHotndM3zMnkfaNL2Xim8QQT+1qMhTf4nqMi/pMuiYod/A10CZir\r\nXjr9x053ws67ennVmYHC+8EWUiQzIDg22tFtNfI/3dP5pSb8JyfFlZmRNN+R\r\nY4FrBVayH03Vxh+Ki17SVEHSRCtN7tofWAXI0lB+msPgYfH3mt6QtJKOBrxC\r\n015wUaZ6gV/iUCgqS1/qX3s46MTTZNs1duMKoyD0Owbs5PtKneeyH2ncYIVT\r\nWyTa6dDDRvdwIrpznVVf2nAntZjs68w8jgUrQ3638KnWqGmHBU3hKfne+8BM\r\nLN3lnHMWhcPjkNC54qeMeOsrJNFLsTK0uu9aHnJJf5ZKtAeulNHPVsobbN/a\r\nrMCKkT45LrSzmyheZpL+hCjuR8T7OwmmkE2mT4oLK4SDECZ4V0pgYPfMkRCa\r\nmZCqtugsJhHYxr5SvcFCnhgEsAiSXwESzY32vLcGagT7ATt2NlvFyuNjyu55\r\nLTtgtAomJzmYYgW+I1vHKmxsvN9AR9C1GqBYAVHKCSYplKxujvX6jGgAMphv\r\njX7KdY3w+NQJW3kqycaq8TuokNQ+ZPOdMe4GdRZ2V7AIkz64H108VIsxSnm/\r\nb7RiipoiBlfdSZDUYgF80uPIwRILVEgA03s=\r\n=Ft/8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.a16dbd1a6.0","@material/theme":"15.0.0-canary.a16dbd1a6.0","@material/animation":"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-indicator_15.0.0-canary.a16dbd1a6.0_1675491236913_0.4075789186473884","host":"s3://npm-registry-packages"}},"15.0.0-canary.93416f87a.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.93416f87a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"263a55cc85c32f45d6b5687b4be42d7756ece23a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.93416f87a.0.tgz","fileCount":38,"integrity":"sha512-0GRYGp4JGQGjUMu5RTbucIQIQzAhtMxh6JCr0xkDxKt+TgMMRr+uvQ5Q1781omfUmxkYyn5T9/vCLcAU1epwPA==","signatures":[{"sig":"MEUCIQC8hVuxXI1hsrYjQjN7nklBTKVaOB1+AgiHUW3Gh+nogQIgCq0eG+Ccv+hHH/yqkCw2tdh8xWo7TaczJu00bpUc8Cs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4lDLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpjgRAAjb7QHyk20LHZ0HYm4slNmVaNhlOBZQGh2LL+6p+9Oabf+kOi\r\n74CPURJigHgPJEA/0ZPQ3UG6iaCUo0URMgFLloUDoBPhwEmrr2Gao95zHNuD\r\n/vRAd9IhOarm3qaU98kfI+8m4xzHAoZclhR7sYqzaZZO9fcIt/i59G+sA4Ic\r\nQK8qcrNxE/rkt1AJWJWkuKN/sFJCrEhV+usS7jTqDpNSgF0umpXsWclbHOIU\r\n/ayrtaF9w+Ovxobi8M4Ua0NuRSEwj8blI+OmyXyEPdpSuvnmigF2jI/tXVP6\r\nHvr4+ULgpcUjMyCz+E+udO+e1GctIn4jum2yw1B6pjOPpoVcpx8Ws42LAkku\r\nlZ4q6Ua6EXye1kYH29OUwKoOa8Z2KfXQ08AUE0Rpdt7a6yPS1XdUOrLYDiXl\r\nSOx0vGEaFzWGWVSCbnYm8VcSSApZZn1PGq9EtVm2L9nbijSmuzZMewzn4qYC\r\nt7a91CsNwDQTucBTEx6emm1kLRhLv9TxXYzfqMDra6iyQANXiJ8bhxhoqv7m\r\n8wiZWjRUM3HOHLvyjZFtaAV3NqqN/AVqWojiFde3XtfRVJQYKIqcJBJuUrTp\r\n6qupWoB1ssQnYVyjQMk/EkZ5WxSC7oBsucyRgaDMr2t1wKTP9AkWTuGZfAGL\r\nFo565uwWwLXj+Wc3rfqbtVTFTVO8XZAuyqU=\r\n=arov\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.93416f87a.0","@material/theme":"15.0.0-canary.93416f87a.0","@material/animation":"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-indicator_15.0.0-canary.93416f87a.0_1675776203418_0.505053756130768","host":"s3://npm-registry-packages"}},"15.0.0-canary.49b8e7442.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.49b8e7442.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"5954f42a8debfb87edbbc8e6fabf0cc2512ca328","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.49b8e7442.0.tgz","fileCount":38,"integrity":"sha512-KSdJCN+6EkR0uRzQsCRfkGTrXosqT3rYW2J+nSNYktLh6v8PXS6j5AB2AK68ImHDkqa2JzfRlRR7oLYOUDdqNg==","signatures":[{"sig":"MEQCIChgdzziBEKJHfAHyYkCYJMg8/gZHWkR3DnQex4doQguAiBVuKhsfTLzaq6FDAS7jK7/bYjoId7q5QmaaEllObBtpg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4toBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+PRAAkll2vLsyTYEu8/U+KS2MvOVey0yrwrICFNF3g83Vi3JEzjVi\r\nKxdcyEaXYT/H8tiXcKZ4PRNldKkvcpJsMbCI7z3eGETlBhsnSFjHEASYytGa\r\nkamYuSahSj7PUIszz9+rulvqy/SMNcj61DNfD0pPr/NHGvxSO9B53jZTQ/nl\r\ndH4z8hlburXnnTtB0RFoG00KmaOFp9uwQ7ciehLG0uwqNOehFU+OVTxc6Gq2\r\nu+tOFFJ1+yiCtIhA0W8YSdesJpqHaZDS/AG7f8yOFhgXvmuEyho5aaicDVo8\r\nEb19c2NzzXD5PqepWnTm/jlpcofVRp3uHpycVPCBoxiHbNIJlWdEO38UF8ZJ\r\nArMbziJJOg0LpprXZ7GvKt62o69D6iNiDjO2RZnqcuBUTbzVAX1vPtqDPpN/\r\noUzSZXPTYQfFvVeQS7YMHvcdlEAg2rBYEcct0/l/VFVNjecuY/wNoQT1ZISC\r\nLsLh9RZ1+q+LvKht9EtKdM9zzjmKkmZH/iBPAG5tgZeeOBLvPOuXN+ZxJc2V\r\nZFzOU4y61/N1tUAlcTEEtXNpE11fa74eUNEIi+8okbF1Eh2rrF1UtvBVxcHw\r\nlAF/8UVM4D1v5jkZCpXNSL7nAZxYVm8dplDXYZl13VSvgLpaLcIoR5vUHtki\r\noVqowgFMRKHSrI2gAjnY5BWyninNwAz9/2A=\r\n=UeBK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.49b8e7442.0","@material/theme":"15.0.0-canary.49b8e7442.0","@material/animation":"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-indicator_15.0.0-canary.49b8e7442.0_1675811329279_0.19361684139907975","host":"s3://npm-registry-packages"}},"15.0.0-canary.de38de758.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.de38de758.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"bff6dce563635846c9c869173d2554dd7db0c668","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.de38de758.0.tgz","fileCount":38,"integrity":"sha512-7HfM0z7ZIvpKcvy+ByPHH54ZkPnYlQ9Y1Fajuy58BZjZn4LK/oJORt1Vx2qLx02unFgG9hnnAtOGJXut3WEbag==","signatures":[{"sig":"MEUCIQDWAEratouD/YexRp71QaHrzxvpnTvkSi6akXN/rT/D3QIgWeHEzsgY4mJCuAktDQu77kBsBflT12N+S1Q6QJtRTVA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5RQ2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmowixAAmnaTAcekg3RyoxARUSg+nlYC78Q50WmPkLSL2pFWydv1+zv2\r\nqs70LhORyw1LRLBgJ79Co/GJ/Dy1qj6uxYX/lAWi69OiT9xHfkDav8oe1z81\r\nEymMZmxV16g5QlxgPmUOmxf+skKpr9EdfGMZNpdoH++WrR1Jv19PM5q/Tfm2\r\nQVvRQwleOnEGJxt826U0JCk5P4n4e+VhvFhsRGAIDdi/KCRfgcbw+P+pnhuq\r\nOkxDOoKwbPvUgQq8nIeYHIVMoG6sweEoCZiBYci1ePtdaHJKiiMQhJjn1hD+\r\nx+3KVeXxRs20Palw+g4DsO2Ao9x4vCpOCd54XBzl2zr6XZnZDMtpuoRGdbaR\r\nZXsRvHE5DoKoH+qoHIKjPc3sVq+UfQL5Y5E0sUOicAq/DVu+gciUadG3N7q8\r\naOB7ArrmVat3dkxWJ2rF2UV94m73j+5NnHvHwdET1N4JYNN9JISQVYreRJnn\r\ncAlbm1jvFIzVDUF4xP7U2FHEDPdvX7Z1BcEiuh4ELugZ3yqxmiQJKPup7ugN\r\n2p5E/ibfez19i49gVRPLlSjZEzHtdFO/7HKNgXFxCWG6C6PO/IcyH2P5TDHu\r\nICBN7ATHv7Ih43Loib/wn9dLYBY9ePPXIjfWIjSokgrb3JBdKafFsVpOrkXD\r\n2FzYraKmai6JO0rmP3s1d9a0VvuOW/t8zIs=\r\n=fmay\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.de38de758.0","@material/theme":"15.0.0-canary.de38de758.0","@material/animation":"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-indicator_15.0.0-canary.de38de758.0_1675957301873_0.3430928504088817","host":"s3://npm-registry-packages"}},"15.0.0-canary.4d62de70c.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.4d62de70c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c8af862c10d7d50744c5ed3a7c09f28fb80c5555","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.4d62de70c.0.tgz","fileCount":38,"integrity":"sha512-JY8Rqey8NaZX1FRsjWDAB/id5KKXyz5Tls1EaTCpEVhKSLoIKysmx9AWLtgGMIAhykMOcAXiAAIqWSlYz/z/MA==","signatures":[{"sig":"MEUCIQDcfDv3+ufSZrbC+W54bDsczUnLBORwZSOndbprhJoEdwIgUTxLkavRStj0V949ZIrsQABtElQxGnBnBrwtfUkxcas=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5W1tACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpGRhAAi6zuTrnIE5hFabRV9j6bwDcYlRw/1fxSvj23Ip0C3F7ZDhaR\r\ne7HkTaphpAa70PYlYQOnfR2usashHC7o9vYVnzLqkIRFiURhGbj0CE9jTyt0\r\nNiJdMPzf+5BW+IXK+sdyGjDE9W4DDYxsLrqM3jrEVT/B7sMYLgqjPN3KLgDG\r\nXtzOBjSkiVlK8MjkQUFgDTTWjjY+NAa8LXmqGLyxsR8ukLkSaULzyUM35/iX\r\naP7CRfe+eVntagmtpxKSuaaqAXVtdOpiGunh3JmAbq0VyC6BxFpfWeNm8RwY\r\nt8sd/noTH6qD84AeE5zg18RdRvoL9u1bzUihdJL48cpAcr4xUN4YzP5YErvq\r\n+68dY8ZHagz9ag/dqmfUTPYthpirAONT2QfnkkVgqDFwqRgyS8Buuoo6kSKT\r\n5udPvgLv9cgHxdPKy8sfqbufefIltscyT8oTLAIoTB4TTybrh9yA63KtH9Qp\r\nSFDtxgfhOAgcW6x82KkwAZjqInqM9yaW1oYHBwk3U5IrQC/10JH+wlbr6mmQ\r\n/CEgyIhOEQxkrcFEwv9DFtkai04ZnnE4RT2W1zyb9y03pYVyFbjufih+xwpV\r\nq0Sow/OIr8+82yI/p5WNgzKn99Uw+UMs35AUIij4fa3TsnS0DGKOU4xLLZ4J\r\n97EW6RTvzW1cxKXzJV7tm7HqbIkRxP+3rYM=\r\n=s6Eb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.4d62de70c.0","@material/theme":"15.0.0-canary.4d62de70c.0","@material/animation":"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-indicator_15.0.0-canary.4d62de70c.0_1675980141546_0.1275159242513364","host":"s3://npm-registry-packages"}},"15.0.0-canary.6fcd8d418.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.6fcd8d418.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ff0d7de24b0d84c01d60d04f301e0656ff6f135f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.6fcd8d418.0.tgz","fileCount":38,"integrity":"sha512-ZxqZTZBYalH4UgcoVHzRg/2HZiYt4u0g4AZwCT4DWlOLZOmTrrjZTpH+uEbqSw+2YTuShuPm4UQyyfwCctRQqw==","signatures":[{"sig":"MEUCIElj6Zarq9zsm9uoYyw4gJq+h5juIU8QUYaQXwe/ovzYAiEAmhUnMmPwPOfJqGI43UbNFrMV4aoZsyIPQxQz1Wm0IJI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj6iO8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqGtA//UgJZvtkgHVXq3V+7/Kss26CSLhsoc7jf2pW/BnNZiQChTeST\r\n9kfF2F8J29np1MvKHAiSb/xoevBDPkHXTPeHbz/f3ACXlq2sFCEnqxRH5y9N\r\nY4TKUf57BxgrR1bsvqe/6VeKuHxiBZhE4TZrCLBZtB3AzeZJlal/TJKK2Oq2\r\nbz/3LP84PeRb34zQZ9VpkVAsNypCp1+iPepHegCWCAYoyrGXlJYXeNdLE/GM\r\nC0d0B1s0aE096cfZaLCQ14k2JxzodezVAjFHmDWm87ndL2AoqvdTTJ23nH5T\r\n4u1hWIKac05vWzUDprntG8YmysnrRyHDzIsZNw7UVGnASf6mymkxQMNE+7NB\r\nH/EwYAb38u5o+SBQw6dvjeOWaI9oVDPJx1uCbn/FAdASkCyW8MmQeA2pGL1B\r\nnBN/tnary13Je3Tde19Sjd6AsxIZq+uZ3D9gJ8GOBC3OUpf+hDBe48CW61j7\r\nbgfyhW3soksJtFMVTiWZ3qP0yu6vOJLdFOarbVnCmxdiMY3pYzoDxwnEmJsi\r\n6XVb6CE7Ylsl5ZT7hUl5O9KczuRLIV01kxPUqRo5R3lFxFzDXdtXz+UeCxYU\r\np75mg6xIT3WzUVBQbN2B9wbMFWNp1G2kt8Izobydp+obZtPFXfROgb1aEmMk\r\nhFlmDgWxRvHHQPnYS82pEbDmFb5S3iC8pnw=\r\n=EC5t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.6fcd8d418.0","@material/theme":"15.0.0-canary.6fcd8d418.0","@material/animation":"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-indicator_15.0.0-canary.6fcd8d418.0_1676288956645_0.7056898454996174","host":"s3://npm-registry-packages"}},"15.0.0-canary.066d9439b.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.066d9439b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"8d33ffc7506d7ac2d519ba09b4ad0bba99baf157","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.066d9439b.0.tgz","fileCount":38,"integrity":"sha512-RT+ERKNlzYiKwPgueEKq8n41tk4cphfMoFfUHWQdN+cBSujNusGKs/uZtLvfuVexiHHwE39q8Rm3I7nAg3a/lw==","signatures":[{"sig":"MEQCICy6uKommkeKaN2Sb7nDRIjy1xp0cwTV57mHgEDTv0+XAiBXUvuzRQxRp0Jz78v+ObQ4dmqAbjKhEqTCYJD8s7t09g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj7TkOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoJlQ//e1TKpELqx+kV5G+qxRsglp2eSM7Lxzpaii1FA19i6ClqgRty\r\n32JzPeSMYjrNSKc0KG5doN8Dovnzjq9fS8EcCtyFCd++Y1it3LSWbqM+2tiW\r\nHkiqyHwnbLdMLVs2eArXzP84+zyCkcuV7VoF3R08T64QUr9kp1mRoMyIOkWm\r\nChoj47mK/8MEmFZvEfTzl+qPy0CSnpz+qDN2rGHkzBuDcdqLnbDR9RDo4o3J\r\nzniuEx0NzoCU9RW50iM8YYGxF2Bg5IdnJZtSjgRKLNAKN3hEgcO+a5MToBpW\r\nSmbDiRo/Hr2ypxdS843N/jZ0rAudAFr0khR5/hZ1oai6tb2x5J/7F7mViP+u\r\nq6JOPqFX0mDBNJJFpPqGYcktAHSsks8pzEqPrilsqsONlzXnUPjtE58Rk6G9\r\nfD+CLf5pDVa12PRbeQE/QpFb6aSWha3xPU+/59/NuXDUeuGh8yhagOSLnVaA\r\nlGzx01+OF4HR1wAjPTKtu0E+n2tYsoezoSzj2X+EnU0S+d7/iStCLVn8eDFc\r\nvAk6bWKCBRkZzpGgHDvcwokmA9C2pjAbqc55priwrRKl4/OfIDT2XKJj0kMM\r\nnEQ1SEQ7WG7q6gPrFVULR9WWktG6+3HFWwjF/jgz2XARbGaJjzeQhi/gg+f5\r\nv5F1ThBBQ8g5BDteWD64Yn2ovKRocWFXFEE=\r\n=tnVa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.066d9439b.0","@material/theme":"15.0.0-canary.066d9439b.0","@material/animation":"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-indicator_15.0.0-canary.066d9439b.0_1676491021943_0.20323915355523248","host":"s3://npm-registry-packages"}},"15.0.0-canary.7ab32468c.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.7ab32468c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"680878847bbf3812055aea071a9ce1d92d5fe4d8","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.7ab32468c.0.tgz","fileCount":38,"integrity":"sha512-EeIVG9pBFjsdi54pwdhlwYJk/fKD0QiM8r+XUTP4LbswZLjkcmLVKvkTb10yQivBDS3ly2D26Pm5d1++2Kz04A==","signatures":[{"sig":"MEUCIQCt5czqTopZ8bLHXMgo26Vpp6og4GwekpS7m2Db8MhEYwIgS8UfPiqRS4rHQ9kwWQxV4PqovvRdl9rBJYWWruI1TWc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj9Q5tACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq7zg/+JSrultC+PSo1DUn+jgXlR7oJt6eCWqvsjjLAftzNz2twRzd6\r\niyCUW1G5urWLX1QN3n87Wbi6RL+PzuEW/b8pNA7smQ8nvPzcxfYok3ywdD8n\r\n+/dIH6C1fhAXHDhMue0aCcWbH3xzHV3wIpmESKmDq1oO0kwQ9YiUcFNzT37k\r\nJqKtG2Urql8OLsukrFlkfNAde95jt89ewNk9tLCusYYwTTLmTnpHSaCkV3vj\r\nOqUlY2QujaTMdmCyLZ6hC2QXqxBPiITYUmyKsvZM3r2aMluN1ZzDpNSlsXmH\r\n2Btid48PUhNYd6/3zjc5ifs5vCMw7gk6yd9kuVgVb1HzoGi3cKNwtMfNmP8n\r\npvvHLCgiuJjZS94WM8Q/fzfN5PiuHvoMbQD3B4OtK95fT7FKkz+rHynTaOhK\r\nbyRDHOUDeXmzhaoySjhYoNF6UWvdVXU9GUFaqtkBVaVWTx2Nojig9x/BnTv1\r\n+jYz5zdCKTibRgwY02k346qQNXhx+UP95U9m0WLcAHYzW+fRmVS5t929KZfX\r\nwh2UZMyoEQgpzEXBPWQxf4i18XXytdfVXh5OII33GhT0l9o1neZhGBWYPvSh\r\ngq3QCwtgpYjydMsxeOZXmyg/Qv4lEVyneT3SqTgSW4tERWumTN9dUN3bcAaZ\r\nc4L4uZfbj0n3L0dm0fKRemx5kpq39xT7TEA=\r\n=yJN7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.7ab32468c.0","@material/theme":"15.0.0-canary.7ab32468c.0","@material/animation":"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-indicator_15.0.0-canary.7ab32468c.0_1677004397435_0.9999019398147746","host":"s3://npm-registry-packages"}},"15.0.0-canary.fa27ba61d.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.fa27ba61d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"8c9c8f5e2bd87a8a78b8bb71d2aef7b2be37ff8d","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.fa27ba61d.0.tgz","fileCount":38,"integrity":"sha512-MTZFrVTUCDVLrNoD1yyve5WEEushZOxsdMvQJ/7LYzZBi4SOJWSxWI9pJ1fw/7CcpKqc88Oi8KfeLkblJislZg==","signatures":[{"sig":"MEUCIDGblZvGiM3KG5PsUDDd1/Gw/Mf6GaE+eKAGAD2VbIdaAiEA9YGnqrPH2K9UDa3yK0ODZngPc1vi+7jOTgQ8ja1o7nQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/NfbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoVvw//X2KG7h7/Q+sAQp3S2MBEiSd/4D+vp10WD/cBA14rk6tWq+oU\r\n9SezF9Yra5bH2gf0cxvVArhUns5pAtlb/oWUmceofZbBx/9tC476E+tk+//J\r\nyVlmhfTE3Yz2N3bUoxTvk46qq0yq8+JlVVWwwHdrRCUHY057lRDaYebs1h2c\r\nYTiWwnDI6YVhsoagqPumDGxV5pyAw8fkRUhtu8ezB2x4J1pzsEui2hPAY5/B\r\neuT/AO1IPT9vSF94qQCmayj7S+i7V3QqnEANq/qSkao6txyTdrLxug9Ud7aT\r\nGN146WYErYEugUNDt82XS9wTfTy27fmZWuKWisnaUG+JIMVUx5o5wC/t24Qk\r\nJMWuBcgD1tnIJhj7DkEKUWMhr6AQQbnBeCn5q0fAGXl69emcj8eQ14HDtsKy\r\nzDGfuVfuKL3F3EeAtnebLz54GdXWrAq/0tqg1B9pk37OLtuRUdEGAQHVvOKE\r\nBArnm3nwuccwebcI9SXsaMFZoLoW+WuE3YO2246kflb1wHiq9S0fJ/2pbW6j\r\nY5sEmpl50eq20LjyhRaHLAlYNt6L+mXWQx6rzfoOtDWP+5J0acyIHr/hAMJJ\r\nNzKNfU3Z+yR/raZL4t1JXDJxiswwQGjE0yZ5SL/oljahtloHnscn4DuUSgb7\r\nIypVJRvlbYaF2Uu5epYQffohkVWglvr78/c=\r\n=TpGb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.fa27ba61d.0","@material/theme":"15.0.0-canary.fa27ba61d.0","@material/animation":"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-indicator_15.0.0-canary.fa27ba61d.0_1677514715686_0.4757847236984385","host":"s3://npm-registry-packages"}},"15.0.0-canary.311ab4d4a.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.311ab4d4a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"8117eb130f6b5fa96161d97df30950db84900a00","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.311ab4d4a.0.tgz","fileCount":38,"integrity":"sha512-b9ntAUfWrJXZILOrb/55adLGtSpNXkaxgkOJtaeEAA01Xpis0ufoG7po8Y2HzEemPXm6hU/XXbxkDH0iffx4PQ==","signatures":[{"sig":"MEYCIQCiWdyE0xPhxVmiB2Z+Sxt4Fva2amtLiIRkqyNjK6qTZAIhANUweGqqL4QhAS+ZTcRS2dK4T5AbybRD7dHWXdyTjzD/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/N0FACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrO/g//Zc7Brz1SMNbYr1QDCbGTgR+4FKJv0+p9IQ6wK4w+z0BJCEqb\r\n2iDX51GtRYYuoq5qXZtvRngWEy2HY5xuqRnTp2VoXkA4WuH6omYBAY8zSGfP\r\ncnbBz9ryNvPDaZGLjMwWGlxNwnsFbr7MDbMASXwggIfveSnuAvOE3005KIAs\r\nBr5sGvE6AUtFQQOiqHRuGtJgnBvk7+LP6nEpmrRoyHUgbrg19LR/nCX3zAqa\r\nMBoWCqxyp3D08NCT96PQGLheUbG8FyRHvYRwmsfOpNiZPJ3o4VCziGO/e+uH\r\n2dkcOYf0EvDt/RwUjedtX18kfbsCuTrKEvMjR0pDpDJSZXYbZcEs1z8ZZTHN\r\nZAdD8hmwcYU+5uhT5ZdDZylwC6hO8Zz0dwYCKJwnU2SnW3O/OnWtHQp1JyD+\r\nJyzSYvdPBKGGN0/feZM4We43TvxrU5kc1xNTBwzmuBDGLqRb9pRGJEz6N+hy\r\nYDz2k7YBgeUYD1Hi7xQsb6oplXxCGxZMsXYi4ge0EIRvWfl7b+FOQ1+d1+jZ\r\ny3r+0gC9HR2E/oFUDXzmeP82Uvy7p1DP1N9t2nFYwTmuAFfZvLHUzMeIZ80n\r\nofDWvvLJN3YJO8Uv9Jt3nTut9DHiOWb7Zd6wACokTpJHUcMCWsb5Lh2B2qXq\r\nZi3QWXpnhEMTV9UXhuU4BCFqRrcgLEx4Tyw=\r\n=r83Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.311ab4d4a.0","@material/theme":"15.0.0-canary.311ab4d4a.0","@material/animation":"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-indicator_15.0.0-canary.311ab4d4a.0_1677516036935_0.18123334307620342","host":"s3://npm-registry-packages"}},"15.0.0-canary.901c83e77.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.901c83e77.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@15.0.0-canary.901c83e77.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"b32f08d458154856a930730844296dbf03c23d8b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.901c83e77.0.tgz","fileCount":38,"integrity":"sha512-lwccisLc9C9BP8dij6T9/6NQDvsVJFPf7VMfD/tVKgSQcz8YOEiyKJoYE0G3NKoty66FQOvtt7OclwW6O3XydA==","signatures":[{"sig":"MEYCIQDFhCcU2ZqZJvOMatPQnwGQKzkbpeIjDpjYwzdX+ob/TAIhAIxi6GEa2CmDMZoArjsNNsE5UQzK1Dl6TANWWKtQ2+Fc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/PDkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpoog/9F4N0vny/CKUSmQeD9Npv5gpl3ULzQtYQ7oNP5JRP1BvYiNlX\r\nS+RtJfJ0hhjzmUymIozHHtdNjRyEdtjRak0SoLugrBxmsHF2xLez++yIdKA+\r\nkaeKQZe2LUZRHEQuoJ2KjZ/hq5xAyaFMeObgIoDEtMnLQlNnVlP05eDKCrKm\r\nXoKOgycnUqPr+A5qoB9kAfGEswVAqjRPn/NBWsPGksJBZ5bdnsvt7Rq0CqSC\r\ntmFrX4jisqQVcpFmxYufbMhYXRVmF5rQvoZytyg7Hujn3QiugCbXOPJNFkbm\r\nrgKifcRFtC2Jpj+h3FtKxun6GsjqeHdrBEywrAXUvC/ATfBPpH88kei2iNZZ\r\nE15bgrZmgzk1G5IaYAR0ts5hfr/gk4M7TLnMEdBubeR/0AHca5/LRpA4GWXP\r\nj5cu+G+u0EbUfRmkvoyQNIXNyUhDr/+0dYXO0f2eLvulkxbA1ok3I0dkZbEh\r\nB6qjj0dIyHfeHx9nIo2msd8Sg6MgvyLRf3tUW9UVaMN2D2u3gt8fX2FFCBR1\r\nlWcztb+rIMq/GtMAH3zh/Idmir8drF2HQjky1Otn5ze2j9KF9Zp0u1lkXaci\r\nmaw7YTq9VWy19tgjMgludQt2fYRkaE96Ew3qkGDl30JImQnug7/bvb6VijJj\r\nUSJK5aaQylk55WZpUA0vYLlSFgg0ex/wVY8=\r\n=db+L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n","gitHead":"86c988d321eecbf29bbb6cc63f7dfa18cda02d4f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.901c83e77.0","@material/theme":"15.0.0-canary.901c83e77.0","@material/animation":"15.0.0-canary.901c83e77.0","@material/feature-targeting":"15.0.0-canary.901c83e77.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-indicator_15.0.0-canary.901c83e77.0_1677521123961_0.5610729739144498","host":"s3://npm-registry-packages"}},"15.0.0-canary.5cb8e2174.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.5cb8e2174.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"9c84fa2332d94b3fb3fb0067eec1827f41539256","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.5cb8e2174.0.tgz","fileCount":38,"integrity":"sha512-kilSPwr809jzirjgPvQa2/bqgYvFWaBNB5AnZddyFt0DQEwPYh1DnUQ8xTtnpWofAJd5cCqkimPYuISFdXqtrQ==","signatures":[{"sig":"MEQCICHEblVJ4uxkm9vWI1l406JWj0XgZ7Btzc701c8VnTZ6AiA3HkwUa1x+cOO46tUcPiIfi0Lm3RARh7q95fDK54VBAQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/36xACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrsnxAAo1mKMFVOM+G3EpIGOpHGmSBQI77oBWY0+C6mfOtJ9YQ4oc53\r\nZAxsWUGEo5CugjaGmA8NNYnhmccGLgwjAYA1QlrLrl2UyH0A+DyrhwAW7//+\r\nXL4GUuhlQ01KJuVYc+C012cS8qi2XqM1/ZcPzDntR5xQzaEpcEFlh6MUHSqB\r\nvY1SDnmyomcFOsOkDoQCMRRoILupw/Y+WkKY0xTriAiB9N+1aTNZOKZ8TY9S\r\neufSYG9JsgYhgbTtT6JjkdFsyIjxqrNsJQ3MjL1cBMxOIcULTX9Q5RkAM9Sn\r\nmsN7vyGgq59GpkxUaJRYb5Fkuut1qx12lTOnPt7BCMRzKZMDqFG5POmt+XNV\r\nEdOY+KyIdIaZvoc0hm874nxBEj3Tdt+JLlE7IRS2yt1OmMofu6f9I8xPaHyB\r\nWcShQryfLo6sLKRfTNWK8Qt5bqH0ILKdww0MM3PA21uf6DvAKgbhjlvslS7r\r\n3C3nEv7a0SmStXhIU6j459PiwWLBtc2jQGwpZcCWcmUa3M2ACC20b3/vLfFa\r\nS1v1fMVTvmDDaea0cmUOisx6MYOGT/0W/8DGrcRnmmLkMzftG3v82ihwaalf\r\nKs4IDvurUjqYi6XJ+DfnsFXXu2GjGVso/YGcHvFy059ReEum2rabpFZSILmB\r\nMJiSjjKMKbOx+u8TJiwe9AG8ktdeJxvAEHs=\r\n=O2+h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.5cb8e2174.0","@material/theme":"15.0.0-canary.5cb8e2174.0","@material/animation":"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-indicator_15.0.0-canary.5cb8e2174.0_1677688497090_0.03287971924019617","host":"s3://npm-registry-packages"}},"15.0.0-canary.f32339937.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.f32339937.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"68c672bcf9060f68bbecf2e903480c10156e2dee","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.f32339937.0.tgz","fileCount":38,"integrity":"sha512-4t+n2UmcjbFEh9jh84GKdRfwCQsOKXIGnF1662+6ztY7LuqI8aJgkMqkUCoqrCGAaJp3I2tiST0qOrdzkEwprw==","signatures":[{"sig":"MEQCIB+U4vMhMiU4ob3VhrcW6ORdhoFG0y2eJzOgzuqnyF/0AiBHT8MTMEer9W17giQP62/GEwyy/wxk10moeLE+c3j5mw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkBgNtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+XQ//d4GJC8TABcdX5ZFAzrXxZs5MxssdLPXYcoOK7IU7MdDlEjLI\r\nx3QrZT/DT8A1U0grkLNOEwz8xLgMXidHZ2Vq/+r70zB9LfUolCUZpsHQBjv8\r\n9WwNXqGhHAXmU9NlErmL1v5Mmt8IsGQfYDZRi2Z3nxJ4blBPTu4yqwKoTMw9\r\n2xDWeF9zFqesIWLQVwXaP584ucQxK2MntVGfdxPr2MLxDVPCAszwccub8eZG\r\nt5fhFpZ/d5LsgEY+NFwzTRtS/wBtLnxS0cIhQ8q/EuVGwqUxkw/bPRJCDv3Z\r\nNtyCqopohgmVwx/jbmnrH1tTFC8/i8A8/iX7DVB+XbO1wz7sybY2SlJ7zh5S\r\niWhohY1DyfT9bxkFykBNm8OIHxtjenQa9WA0SI2A2bhrPv5jkD5BMe6V3Nm3\r\nWBYEGuGXmqoRXiB5R8OwKVKeZBPywFkMyzilBRfbQl4ly8B8GWld/R50Uu+Y\r\nDRlCvejh2l1HkfAemErBGnGc8AJpH3Dkv4/XT5lp07/sL04YPCUAdKUJjxEP\r\nxi65ykYBylNTMoWEiiDcVl7P7YtzrkXfJPL41vWS1fcm2w+C+A8kvrb0sEcM\r\nNeZEPpauxo6Ea3MCS417tPbW664mxwadOmzZlwP3JalWMUAHRUYjx1HCHSJL\r\nRxxDZiohia0fYl7sLg0i736e/8DDb0gHw+U=\r\n=UOWy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.f32339937.0","@material/theme":"15.0.0-canary.f32339937.0","@material/animation":"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-indicator_15.0.0-canary.f32339937.0_1678115693317_0.4375225630449544","host":"s3://npm-registry-packages"}},"15.0.0-canary.7644d63d5.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.7644d63d5.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"996e919208c22b6bdfd56f3a52a7e97a0ca4ce95","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.7644d63d5.0.tgz","fileCount":38,"integrity":"sha512-bXwEmx01a+HKwm3k/qLRABi3d9Gvlr3Ed1BDeKJz5m2bXTegKWxdD4SJxI3FPxuqnP26jWsOZJ70mI5M1+tmrg==","signatures":[{"sig":"MEYCIQDO2bNJzYojfuOZOvfoY7/lw3hK7EOtLyYODb9bfaaT5AIhAPe1K6ZUDz/AOy7dsM/SvVmu3z/8PeT0G25mbcafXcko","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkBminACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpmuQ//e23p98o2ntxUgRDjzPv3+5llgWftuqwx9iXqPqzzQMJF/nIi\r\nIuM/nYXozPjLTo6SVvBRAR4OlvINByIvaGy9AnWGg2qhc0mREwrHqEwc5iNg\r\n9/Vs0Eh8Iw97NDuNTeqA1Lb5+14Q9ATm4LYTzAPlj5r78Yb0x5M9AA3/meI5\r\nK0fo6yyTA/pmD0gMkZSNmQ0INNo4L0sQ/kg1wesC4WkMmBhJdRYviIzwCtdc\r\nQmvktvyKlcGqOok2QjSZH2U65eOs3CagRwp7EVCTzYaZRDcB3wU/MLpdFmXc\r\ne8sar8hxJ82ODYSV9qQI02o2t7FACllxshCgbFEgKyb5oibbVKBGysYbGcCr\r\nPOqqdleMDZIf7tO80uz8V9ABF+dswzgaZYEvVujYI/ApuS3njnYyAjSGpkF8\r\n6royIrwNxUUEbufNY808NiWoJFEiV9ZuGSc23xAURE43QHbnxH1N9n+/mnjz\r\nRLbKJK9WkQUKOJ5SQSU/jcLNBjcY5vtoa4+Qc54EIhwjuy5oaRkZtR0Y1+E4\r\n+h0I7VLp8SDM/uA/GXSvOwN9+RVYyAS5PSQTpc/sENlvXB39A4IzQXDiiOAW\r\n4H6dYGaM/bFZP4AlU+FjBAg6ThKlgfON5G+3D2NPCkb8abkBTKv8XOhlJ0Rp\r\nksZzwIdSdhRNCy3YluaFSW7ZgCJ28VSfayI=\r\n=4kUL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.7644d63d5.0","@material/theme":"15.0.0-canary.7644d63d5.0","@material/animation":"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-indicator_15.0.0-canary.7644d63d5.0_1678141606914_0.4559732344505436","host":"s3://npm-registry-packages"}},"15.0.0-canary.d96330c08.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.d96330c08.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"6be5d99589e6b681159dbd1295d37394807a2218","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.d96330c08.0.tgz","fileCount":38,"integrity":"sha512-iz91kKcut/APMlc6Xvk5mocQIVXyHHOpXTyw01RfK/rF3C/KRTF8uotnfocj1WwaaW2hx3lVPdDDfxnpCkVqIw==","signatures":[{"sig":"MEYCIQDCiMr772NlkfxIhjk0r84Nhs72/wmHzDlkrGajSeFnhAIhAPscUSaZSfKcL8YfMyq7mQ3TkWzhvbmDyQLLK3NSzqns","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCHRTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrpYQ/+LuE7aKEmzfD11aqRsYNVKr26eDsMTmmWP6KhB7HIJA1oz5Ru\r\nwn8DbesNjSYe4l/WKCb6NQd9yBBmK1a4bmg7rLZCFfjBhjq/EbGH0MMSIDsR\r\necxa2Mx6J4UO2LHlYva6qgz2WRzVFtkjyY8EsJDgbM4uhaaDPGdQ2isTwOxO\r\n93oP+AHBM1a1haQnYeb1m/CF25MWG4WJyKCqVQelb0SE0+HnQ9gV2HxCj8hI\r\nCvAKI7qz8g9zoUjrL07GDcIySRWb8JFMvSs09/FuRjczmAUjmXvkIowJiFrA\r\nijmnbtLxQCjR57z0Zp+yFU/bkECdkMyyqb3YWtvaBCW6r+ash4hvhXGUxSZK\r\nxGBTlSuxmtsa/bM5ISty0tDlcwMdDALvFKZZyJB+j52QFMro1QJrVDS0NcMz\r\n8i65HZawWxjxhdE6ph9HAaN0/krEmZM/bunQlTolJT62R9Zdf9JxT3A0bPYZ\r\n5f01wD2EaM6ml1XsIEZ01K7wP814fsgmkfm+OcYNbUPX1k/EfjzAerGTEudB\r\nDNrIlxA4W5UY0fXIXt3uI1XBmUDwRZlanISNhStwPqdLkknMe/DbmyHfnzka\r\nxI842R/IOluax5JUUXDnytebFI053+IMjluO0TTnMn4TRDzvjLuNImdYuOYS\r\nZ2h25v1Cyfw9Sj2DLpgU3lt13na+rnLtkHA=\r\n=6FLD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.d96330c08.0","@material/theme":"15.0.0-canary.d96330c08.0","@material/animation":"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-indicator_15.0.0-canary.d96330c08.0_1678275667071_0.4046304886936216","host":"s3://npm-registry-packages"}},"15.0.0-canary.c99cae77c.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.c99cae77c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"b31d55f5954174ade4a71659a7386a3e21d445c2","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.c99cae77c.0.tgz","fileCount":38,"integrity":"sha512-tYZItSJwFK0PZhsflPYHui8cSmKr7uzQljc1VpSnXIT1eXRfxYKiFA9rkCmqZobha4zgr+kftMoycBtXrGHfsQ==","signatures":[{"sig":"MEUCIHF+KJLuUM/bCMcyYc0h2bYX4riNqUi8TLlm8uYb+tX6AiEAp5EzFSiiL1LcUBwGQ8ecrhVKAafgiFNEKKy32whFxbU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCR1VACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpdhg/+JOnR2m8qzE8t5eNbaZSmoCHHRvJsu40HLf7I8QqWAaU17MT2\r\nLDGebtEJp/VZKsjgphc4W9UjiU+kAhByr4785PE2ARfNuPPsJVe/86krGazM\r\nqX6Sz8r86w1NVZFbFqROPecpHuB+M6HgnWpnBdNdH5sAKRW3IomsEAz8rpfB\r\naXlXz2J4u+z2Bi/Qv9D/xH45yTwV+4Pn4RIHVq3szEjwlpO+6NTtqsj0cQRD\r\nf1Akv+E4d9msMOXtzgkqn+23bAeFqW82+SnlP7ZGCGRLrp8C9/SIgShblZ4D\r\nj8QzSHiJWg/K0mwb7LZ65uMiLGlikFNK7hFF8/NbwpI0G4QMTOyG8HrbHunU\r\notHHFN4VEFaPPqpZPLeVsH5CjxF/dnxbRD+emDqsWEo1U3QD61O5JfpTIVSj\r\nA87Wa6RmXPFl6nrzKMu4M7+6XjktCsx8eUVYhIaDHcxZwM/GKsi9ZI2QcNYI\r\ndlicYX7SG3lRmvDkomy2zk8gclL8ZJ4LH6BxgcpQRGyFulCeIJiaoqLzc5kr\r\nG9QbjVdPyvXt9jI+LCFC/g8d1XhlbcxNdUlb4tm6KN1ZpV4btQB90enSdmhw\r\nso2CFZlaTpfKCNFcnzPfbLYbEtwCXlhAZQNOsXr/Ka7gEkoHH6GaM+H1PHYO\r\ni3LuJm7kag7zj4jj1jTp6waZro3Nxlg4bfc=\r\n=1zHX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.c99cae77c.0","@material/theme":"15.0.0-canary.c99cae77c.0","@material/animation":"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-indicator_15.0.0-canary.c99cae77c.0_1678318933022_0.19427979415723895","host":"s3://npm-registry-packages"}},"15.0.0-canary.6023b1cd3.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.6023b1cd3.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"61619bd9958a3002d3786a393b45b3f3a3f2d4c1","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.6023b1cd3.0.tgz","fileCount":38,"integrity":"sha512-cXFnnxbtZTLpEagqWbTlXcHrj9N11EB+LXp6bEDAJpapLhefX+gx9A2isVcJl0dfOI/Wb+RuLpcLum2VNN8hJw==","signatures":[{"sig":"MEUCIQDKi1H5/JAyp3G13ntX32y0i/QZZEJExt9vqPpKHPGsdAIgNQeTb8nB9EJu6Bn6rirFvs/FWA9jBPP5V0hCl1YvoXc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCexpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrUpg//QnoXxU0JFrIRm+ZX3kdFQh0qfqtH5u6bCF+kM911BfOeAnaF\r\nf/i9Rw0b7SDOFtfdOU613aEGuGH9StCWOAUv6mZJa5X6dhhU5hUt9cD6QhNj\r\n2w2M511goAy0keeXBjWyZ+14nxZCn/NPIWqS8Nym6ETcfNrelvedBWWnQbTX\r\nLh4gH2LK2N2+b/iJ4bHs/GGgAl2TJ6Oreg8cQ3/CFJKe7eGfjOtGRWlP2lcF\r\nYDUWLyaR7tM5tLalIh58XtGZJs4hxiPtBI3wC70kozKAEr8peBsy/2P35gi8\r\nxu1Wn6gUbaaeAGFU37PCwtJnfGc7pD/ZE8/8qFB2+q1t7XnAFtn9g5ha6PXJ\r\nn3d9Rwi2iLNMgkIKvv/0F8fQJpkL2EzY6x1R8aFVZHhFypFczEkwLGPedcvt\r\n2r5f14hy1R21fjA6KLvxpW+fX4eS2QwQrJ5v4zEZEcffCPz/+IHnBq8f5zmM\r\n5UymLtUy2fKqjTyjbS/Fktt4aJ84vTcQr0WkBaV+PeWaWCzeEBSGwhW0IxRb\r\ngsbfkhkUkJ6cz/3b1YomnSIN2rRkeeRvnTcMBACQZwAFz78UA/75M+XvYpC1\r\nS6eQE3YPjoHz7y5kmuw8bCut4R1IXtW9uSK5E9q+KgNV5c3T4VPJiDFzJoHR\r\nJZemsC2lmPKe5XjHpID4p1zuXXF7WYgLTUo=\r\n=mPVx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.6023b1cd3.0","@material/theme":"15.0.0-canary.6023b1cd3.0","@material/animation":"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-indicator_15.0.0-canary.6023b1cd3.0_1678371945355_0.8262204566125328","host":"s3://npm-registry-packages"}},"15.0.0-canary.274610c77.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.274610c77.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"7aed327bdf68bb2434d1be696e075a4a87a3a400","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.274610c77.0.tgz","fileCount":38,"integrity":"sha512-XYOXJj7gWpLSQEUYgBhlRL1+FqLFspJqmPE/2Qh028dHTTF9UqVYdp5LtqwOUEGSBDOKgMtDLm6bhje5x4q1zw==","signatures":[{"sig":"MEQCICPfJ0w4H3UhYn1MPa/goUCneb/Fag+eXs2/s4v0BuYrAiARUUHqBGmRbSOYvm2TvNbjxH2oeg0ETczg9fod9Bf8Mw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCfPyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrcvA//Yn2WhPwsa05LiyLZLOD0q4C4XBWAI+hM8d9tmxeCWtKBCBwT\r\nHejD+AoiipDHNzzQW3sIFlmMfsGkoT2uMtS08XSI+J3xoyCFXkOrmVbgiDfz\r\naXADyWxYScYHivKmyfUgffS3eFZ4Dj6DXcBEVKVnHF8tWMNmS8LdQr9sGd/W\r\ngg7qzqnxbjsOxPH8HEpf4sqpAzENUJ3yUk1faJhNFnSqe+zu+r8w4DqiqBUx\r\n4tUFWgZVo8isNk7URt4o3XToqT69wuI2YJdftuSfFl0OIc5ljRMsbIlkbuwY\r\nczIvoAs23jTZosziEPBnZfsD1uYBbzD7QwxT5rnni8BRKyUpSWkr2KBUJo4o\r\nAyvktLzByjIBo9CjC7GLwbXXnUzf/7TztWlIG02xEy9EtcT3iNUe1qK+yUN6\r\nlh1YPQWbFesuYupWAits91yoUK8+efs2Izzh1KeCyBP35uEzVkV0HJu05tcK\r\nwS9V/dFpBYfG1sz6woS8+ibOzXfX0xphqXh8vVkIxpV2/dxYeuSUskIVTdcn\r\nh+b11D5InOciFSqgO9ZRpxi72ZM8G97lzLyNfROQICV9WjKTi804hpkyKANC\r\nVjV4WKQPzT2Fz+WAj7PZAf0c9ZtjAJb8I8wXhrzmEkFRYB+fkCcvaslSCJnf\r\nQGV6ODcmJMnrt/J6YdPTr766km5SG/ylvSo=\r\n=MpSb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.274610c77.0","@material/theme":"15.0.0-canary.274610c77.0","@material/animation":"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-indicator_15.0.0-canary.274610c77.0_1678373874396_0.27132347761954123","host":"s3://npm-registry-packages"}},"15.0.0-canary.a274583b9.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.a274583b9.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"fb364bdf1822b7be41f0ad5c02d09ea55d9e5b05","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.a274583b9.0.tgz","fileCount":38,"integrity":"sha512-/2LE03xq6FlZ0S79WzfGphSsT/03TJAQhBevm28Nb6ltdJDEWT3ortwdfimBD6Ik44IUMDhzB7ssAUCle0kQ8g==","signatures":[{"sig":"MEUCIQCmVPDN5vIVUdYYt2B1HboMbvP8n4m+Xvk0v19/lGJ7CQIgQG2UtwnpxErNDwfvzibVgTsxFcdyrgS12s6BndFWPFo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCjjdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpjKw/+IChIP6eLkDRzVmxReWYHAM/orcitHSzUzn5IwSEyRjA9VPVC\r\nH8Mql2OiNRyB+j5JQ93Kyw9rYbINf56m2NKbK49u88V9fo+vdxfQzztucajZ\r\nId5phEf6y9F+aAA+bKC1RBz3no3u9yU1m+tsI7q+GQgDy2CCU1V06auycxjj\r\n1cvzBH+vFhrPLTEbUA0EDgPV5Jg+5TCA1fa32RA2H4XplUff731E4jtgfAQh\r\nFVM5mwDMwLo4WEdYTBcH8opVTZVT9a5iPadcB2AZwQT44oSBkp29gh2CLQwj\r\n5CXZWTGrOB6osvS2CbcUw3WseRdkejlrmat2I/loQ6WoDqJJkGk2JNcXyj9W\r\nqS1qFGb1u0FcBDiD4A+I56wD/tKwl5hFh9HkAaEPCJobB5fi/Plp3Ecg4FUq\r\nFHM2tRx7n/eU7/wUc2rNSSe42KPsJvn1UmmbQhohDCG9c7j/OJlAM3j7eoE7\r\nB/ZXZgTJLLWUapf8Qc2XfAmIsFMhXLqjEx964O9GSTEKbREXVhldptDnes1n\r\n3YNZrgOJ0QY2ctNR4X6GIsxoICcnQdo1RCBYuHtBzGj7tt8hnHJKouAF/8cG\r\nA/MdsYe9dyLmPxSaHdC12l3cZ0L5AG9eWbI39fmTuBenL3pSKU5oU4PX1mcg\r\nyGqcVs4ilJqNANEiljM8GzrIjR/flqykulc=\r\n=xofy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.a274583b9.0","@material/theme":"15.0.0-canary.a274583b9.0","@material/animation":"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-indicator_15.0.0-canary.a274583b9.0_1678391517382_0.5993490198271572","host":"s3://npm-registry-packages"}},"15.0.0-canary.da22ca960.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.da22ca960.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@15.0.0-canary.da22ca960.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"1667bc8119fac3538e4d46564e23083cc89926c7","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.da22ca960.0.tgz","fileCount":38,"integrity":"sha512-VsU3JoiKwpbk1P4OjzlLNIaFz3cOnsnvtiCL6hswMCQZ9/flubzr4QRfd2JFoNerYy0iL2sdjnZYhtuZuXse6A==","signatures":[{"sig":"MEUCIDRpSzKznh/URn3TDFSrjdplN5JC7lfIRMxXjUJSlNvHAiEAkkcdZazqkzd1lE+uW28nPVGQy6tddhlo/30Vi7MNc3Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCj7XACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoLPw/+OFEZEEVr2nhtyR5/cRCdx+yKkyfZUk/lqQVW0ACy3z5ckW7/\r\n2iqTzIHp1jlT3SNxZhrA+AlcLTdpSephb4Ia97+ojUFHpBm4U2HVLXs91z5X\r\nwBiuTxQImDue2GzdkfQZ8RQD0PIavBbybquvJ6BXi5MJIX6lw5fzksVnrrXh\r\ngrOUGlp/lSMmZawpReGpKyGmIAnTku75CxHGj9Vi0K3YFsMXhCMR5dDgX9h7\r\n8I+kKgZX1x+mAxyEKOCNE42LKDnJwKN0/fQYuCksn2cHG5Ue+W8gGElmzvta\r\nHH6YJcVuDAcnsjdLXmzsjy/AOX701rkT/xg5SyrmRCBxjcAlD4juezTWtIt3\r\n1fX5vWdeUY6PLZ+Aom89105tYNxbGGy5lW4CaZDSI15D2Z7IixTy8n7Hb5nH\r\nV4CRPOzr9/ymrN157Vo7R/4uKmYrD2AuFV7AWyK+P6YunJ74VHnPtED8RqpA\r\nkZS6a2xuceV04Vcc3B/w/qTvZQY1xQqERtmoJ5FVTcY9+cchqw49tq3dfFvy\r\nZtqeX5Ydmg3PlDp3BnYN8oSJqbDjic1AOZ3RicVa/Cpzi1hXlcwhVvj+McsK\r\nW6z70BRzfp4lfs+iNXUREImkCH22JDzd6sWxKPrtTN3vLWLlfNLjz2GZNPkT\r\nfR0MscrRy7wdPGGlfqzaxy2gLC9Fn+nOU0s=\r\n=p8F7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n","gitHead":"1b58f37865efc4ba8ba06e1190cef502dee9f902","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.da22ca960.0","@material/theme":"15.0.0-canary.da22ca960.0","@material/animation":"15.0.0-canary.da22ca960.0","@material/feature-targeting":"15.0.0-canary.da22ca960.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-indicator_15.0.0-canary.da22ca960.0_1678393046944_0.554185430158247","host":"s3://npm-registry-packages"}},"15.0.0-canary.304a94e8b.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.304a94e8b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c2defc14f8c450d0babe989c019b6c4ae6b68546","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.304a94e8b.0.tgz","fileCount":38,"integrity":"sha512-n30Sp1xR6gpniPd/Fc6t2J0/0DVR0Qg4fooW8Q1LuvQPGOmWUp8TLGPx55yxKIO4Cod1UUCKz0rjM4mgt8umJg==","signatures":[{"sig":"MEYCIQCxwfqbqwOJerRrMvrvdIeZfsAnC+hTuv8XEVqmDt2dmwIhAPGd13rCTgqOMLVubGW9TdsiH10SRRBK52yw3N6gZXm9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCkUjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmro0A/+IV0YOxPlWpq9+iKfLVC39GyJoASvgcLPHIffWs5S1Z4EWaEC\r\nfiAVDLwULIeHXOHk8ra3ttbetUed0S7Q8wv05PgbQ+jlwn4OOQId6yHEVsV8\r\nZjbslOr9xQUWjLO8exhr4Y5UfhB2PLUlz8qkR7Fy1mjezsKksvK3JFCZgt8a\r\nX6xq5zjUNtLiyXdzeGl9u/Ag+KCgrvnIubnPIceuG9SxQ2BMywNVyz+RTFXT\r\nQI9SpCjFBAhLbIFnfCccDwD5iqMgK8hw9uCK3psJcgWPi0fMvHj/P/seO4tD\r\nodFjVhLESDdQUTMRTaI6Du/Q8SBCFfq3VsoXp0fSAN8a3tEtAmX/kk5Z6AEr\r\nLHnIs7fu2hc/gzxUr5itX6MLdKeD+2cE5FRy5eUGs07B/UtDe5wALEMjdS4m\r\n+ngplEwZx4F741G4lttgByXY+fu8vQE1NN0WhYcFKWI2VyA1uQyzjpOGNUAo\r\nXAWEDWzB8cmvgHi0Ysu2cDu/zuCo1YZdH37IPZ27GBJTDQITg8LXx5oWxi6v\r\nq+8Gn5BuP3tbZbhUnP8C6MHkQxmOVG77Skus83LtmJrdhm5T4cHF/LrxJJ2k\r\n6ye4GomXFRyFRr67HVlxIMzSbrCzzdSgkbXlhQa/SyLxZ07Zew7cavzrcA1n\r\nr/2lW4otOf3CCd2o03wS8gzZFj4bwFwYIDU=\r\n=V+xC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.304a94e8b.0","@material/theme":"15.0.0-canary.304a94e8b.0","@material/animation":"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-indicator_15.0.0-canary.304a94e8b.0_1678394659404_0.47495526612030003","host":"s3://npm-registry-packages"}},"15.0.0-canary.6c265915c.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.6c265915c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"2a0f2ce5636a4cdab4b44d3ae005f933438b2c12","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.6c265915c.0.tgz","fileCount":38,"integrity":"sha512-lMkROFZmFOOPrCjsHiDFKGfQ66t//v85jF0kN4cilvHSxlEoNIYhXpi2P2MfgBMY18kDFY2mmV22SHcaR4do1A==","signatures":[{"sig":"MEUCIQCyI4BGvheEMs7xbRCEJkVym3j5tTWPIs4zhFlFABBkaQIgCXBNQc2h4PwcAmBXRA9T2ZmxlL5ec5JxJFDLdB6bbTc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkClO9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoOLxAAn3O0Q60KA1psPJAwyPRgH8kY99C/ATrkzP1RerS/JAblFjpX\r\nN3rLoN8lQtDBC1H2cNqLTtGLsExI7KOM2yPRkVWRNbYv2qjtSy9fWqWy6qUV\r\nApdWeAucwkrepBR0PSqmJe5b8fOnUTW3r5PQqzX5ebyMCisRBfgMtZG39f/B\r\nZEQHSEPMmcccaxE/F3W4x24+kCN6/F3yrt5keT+0zdqCVyiZPSL1TFUqaQBs\r\n/mQ+m1M696gTzIAsHlUKIGVZ4UGPUfJC5GT3lN/lsAy2eLMwEfKg4npbK9h6\r\nYHVsLgdhjPGoSOTLgQ/HX6PP5IKrMcTG416wqQbm1JhY88oZ4lSGsZv0VAWW\r\n/f5G1FKrHcp13vKfTuHXryeQOTM4Ofcp+UwPy/RjiVETA6sw1slr7z1zZvH6\r\n8SXCwJ2qLh8qTA9HFzdF/qIubP2ldFWJ+iDo820vhFbLhxgIkuX+aSl6ew+j\r\ngV/CyZkrgqov0lMSmfPs3ofuO2jzy8VU/6pHfZCmYUJg4iu84YP6LdLkvBzs\r\n7J0lyvnHf+xM1OtrXiSMLHJA3wlcFijqYZpXPsLnx4Y/kuKwQXNDyr6pHpS0\r\n4x9oFA9U4T4AO91O2YmM3mWaB3MN+bLEWtFAO5nLqZvWvRqwSMG5QGJmgWSR\r\nb+SnVBt8oIIdFidxy4Frej4jf65OlCklClo=\r\n=EBdq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.6c265915c.0","@material/theme":"15.0.0-canary.6c265915c.0","@material/animation":"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-indicator_15.0.0-canary.6c265915c.0_1678398397230_0.6008131180540519","host":"s3://npm-registry-packages"}},"15.0.0-canary.de5224633.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.de5224633.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0e44c740229847b2ee72586dadcc10bab64dcc09","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.de5224633.0.tgz","fileCount":38,"integrity":"sha512-3QRd98n3D3X+2juEfeRLrPz/XcO11WLmhw+qE27KXgyWz3n+KmUhvVdYbZVFK/PVISEC42jIQn2J97rfjoKh/w==","signatures":[{"sig":"MEQCIA4I1c1GZi9qeebOdFt5DaPUbvPNXI4a/U1p2hTj2Bf8AiAaoAPwZHhmpOCnABs97S2XMJKnt8qkKRLl8KXJGhU7mw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCnHaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmodLg//WOGvyfEk5aU+EqTEnpZJu6sbr8g2UmS7IZj8h1vWFiIjZ+xR\r\nRe3e0KsFENM/mB8azJBbq4xhcDPhv8p5GIh8A+8C1oSxZNvc2JuxmayTs7DH\r\nAE+0me3J50RjJFhyf9BXaOIOO3+N00gXOydEgzsMOW9rwczXLsIxabCoHvVe\r\nafl0nmWpnAVkV318UN1ipLr+dbN1UUMjqp6QEQ+Uk8KBtAAwyoly8EaAKlRD\r\nMl3WxePE2pdJ+IDQE0ZQD8HkoUVxiHCSzMnkIYMWPngktcfalzC0PXskTkgU\r\n61CEE71GG/0bVGtODLsT4JnSk75d/AKlhc88cYRzNx4mlFKazNWs0JSRcPW+\r\n9AbVVknvV2qEoR7ExDMJH8emC+UHyw8WQVoogDHFgdZswQVeA1sdJGeZRGEO\r\n9wWTN3lpOOlExku9TdA+TFVy/q1RAB5upHZVRzEtCisl+Dr0NCiSQDmf68N4\r\nZWqXBoNdSsHY9lvRBdqKVUMjxm/GIAZxyIq+gqTx/pvMP+CkoYmZiLI5A/QR\r\nXcGHlfpi/UtgDo8LZraQPFYESjUYXtu6O2DvsM/zQJeJ/onH/x9UXp6GFOU2\r\nMDvTe7TMpAb4HIYzAGGAyMcTAIqzkOyKVHNbAXKH9ygOaGlCDaUNA5rIBT00\r\nbIS5L5PMsfJwcRJRaXkALoYCt/dto3G5T8I=\r\n=D7l+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.de5224633.0","@material/theme":"15.0.0-canary.de5224633.0","@material/animation":"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-indicator_15.0.0-canary.de5224633.0_1678406106212_0.7144871497502276","host":"s3://npm-registry-packages"}},"15.0.0-canary.8879557e6.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.8879557e6.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"dbe9ccb6efc8dbf21ccf472b9fb3da72f4f37e6c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.8879557e6.0.tgz","fileCount":38,"integrity":"sha512-tLh6pkMs46zpEbo/8BdrWNQW6RfqgB+J0QhgEaz+E/waks3mbljmPEdo7hCRD+jmqaPcHVY7mw+9VQyfxbnRcg==","signatures":[{"sig":"MEUCIQCrjIWgLQAWVu5zeQtMiscJcsocgTi8d8UMbi9JiZiJWQIgZXV674nLhmAoXeVXqLkHg+m3fwoxmVMjWk/+59rFZMY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCzmTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpE7w/8C1nHP4usiogyGttSEDdHE5pPLWpeE5wWZycSThM0qNNKFpzC\r\nFLbS5fNW+FW5Bj+QVBBSv/GWDR63g0yAYeq35kYDHRBSx08YSvGbfafnzBBi\r\n7YYCCL7JxeADk5Z0oMBTR+L43NRZBJ1puT1IBhGRjsy/pKdQfhLDdobFhjcb\r\nOPcrH4KkaA1bjJsTkggbJMpV9KdQzhwsnHjDjvHolV9IiEiNvcrxolWZGpRT\r\nN9Xei3wXSFxohC0sfHiqeZtFrf1o1Eiuk0FrCLf2uBA5/oPlgcZ696xJz69M\r\nm2UfGFfw0pqwCjUGEOzJHyJajkJc3Gx57PosWuptN6BXeJ+ufnxIHnNpBQ0G\r\n2cirMzuzf9WLUvvt35K7Kfwz7xTfNhQiVEzhAWVPH0/8ZyThXGRLF/ZGGIAn\r\n1/o76jj6dhFKtWSlh6SPOaHHZnkdExL34vWyPnqc1R9hyHuWV6rO5rCOdsLT\r\nCYXB+APZE31CG+tZg0SQZoHtu+2pVP6o870vtiQViRi5s5pKPhUtuadEK5LV\r\n1kPWTCZSN3QUSUVFT3G0QvHhyX3Vs35LlWKBa2LUHlc7DC1WOr2D2pqkcztF\r\nq5Aurvl21wZR6Anc2dH8mVYFFrntxTaaB4K8lSm6EJRMxS4kixV+wkd6HHL8\r\nETZvWVIipVRtuQv/K9OWJ2Fv01T6azZrLdw=\r\n=BKVq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.8879557e6.0","@material/theme":"15.0.0-canary.8879557e6.0","@material/animation":"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-indicator_15.0.0-canary.8879557e6.0_1678457235205_0.1650686458035866","host":"s3://npm-registry-packages"}},"15.0.0-canary.23073a303.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.23073a303.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"289706c5abd72c6c6abc693ab8ceeef97c144159","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.23073a303.0.tgz","fileCount":38,"integrity":"sha512-iwUit2E1JbO3peiOSVrmZx6TbpXbR2wQ0ahZEUumDVCJwFzv2Baw0twceVg7Ykqja/+bRfEEdm6oFn9Rkpwxvw==","signatures":[{"sig":"MEUCIQCWvWewiGQb/XLoQ83S95L6jUz+HN9VXPOhCWnhCxcMJgIgRwbqdmv7Uf67rQwhOtkQjkh/BN5+SBTfrTgeCDULr0A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCzsvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpV5w//W11GMmRRgQBbK89haNoQJ/e0SJxRI/T0SgTcNx32zyOungQp\r\nF7x+PG6xbW8igco0zLPAKPZH5G7hsD88L9TEITqySblz2qix3/ik67oaU7Gs\r\nT4kPZRChV9xVt9rq77yvaqXYVWWUAOZVORJwVLmJQPox5/eDM1j94+TB9MC5\r\n2pm0JS587dO1pMB0gnVMCamycP3OvYg+99+kJxcLPCjNBcyCEKXo2G2TTC01\r\nnrmkUbX4CY+7WRNa7DdbZvH+nfXTcuszLgkQeg3voCo2+Cm3u6ZBQk9dQxWB\r\nRETkXFA0ZE4b2sHJsDnwJM6XNc2kvQUln4eQf5ApP3ieKKlYdqM2+g8IKiPv\r\nET43w5a/SAwZXW3j/zeogbG94dvriKUYIPtdWoHGaaouuHu94YJSZJxLb5w6\r\n9fg11irxomEgJ34pnGQSHAQRjobppNbfOa6BdtBq5g77IgRCzTpUB17WJ6NF\r\ny5unvlV9ZMtzonpQ2sEfa2LG5hw7YLjErmuxpa2jzflmYB/c6dbd1BBdjcOa\r\nv+4gaHBlgmhyz9ofGknebdhBZWGH/UNSuqJpKBqIjAG0z+uVXUuv1KDdJSn8\r\nJ/zQTU2GjvVtezbywoBRCabUAXOc1JDIFeLKG5JUqNfN/tb/kgkO5k0iO+y8\r\njtb89Nk4GXSe37hcpd7UX9gSAx1c2q0acEo=\r\n=ZbN4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.23073a303.0","@material/theme":"15.0.0-canary.23073a303.0","@material/animation":"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-indicator_15.0.0-canary.23073a303.0_1678457646935_0.5291936016300325","host":"s3://npm-registry-packages"}},"15.0.0-canary.51c7d4014.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.51c7d4014.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"14174e1dfaa077628255821f7606abff4f0efa96","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.51c7d4014.0.tgz","fileCount":38,"integrity":"sha512-Aff10e6jTGzzUtmf57jUK/TtdvfXx3hMOjZxLf7z6HCBjpIQcIfkFHh0K0U6z8C0UHGv5rygxxWnYCsuYHdpwA==","signatures":[{"sig":"MEUCIFaa3bm7+Ql+FlHrEKef/basEN5lulXR0tNg8Zw2lUQFAiEA6j7UQGwqVYpve/ffO6csWNJglMezYMf3FVdOvGxU3rE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC17yACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoW2w//XUjxLWHI8GtIlxHfyfF19l3OeKPA6eqQmAB7z/c3+ixOBqYo\r\nQmvnclXUZKjoUPQEdyXJgBeSoYuIRtX0k72XdxJmzsUX6iwj9o3O20kl5F0N\r\nnGCJ/OWLMYv3/kvOVYBRElOt9p9GKJ2BE35BdbU5pcyTYupVpqw4mBqmKPMD\r\nctHCu2Sqkl97bzQ0azNGJ//hVI8thKRvyyhq6b0P1/Y3F376TAbcabmxNt9l\r\niu8a8462qTAW7Yz8St1n/aoNCQlSxDT88d8/49kiU2vDhTUf/sJy470pdKAn\r\nl/3Cuc96mfwZgia8U0ZHPYGOim6xAIInN/EreueE5dQOaadEYdF11dI7PyPs\r\n5ASHdjCp2CNK/PtCLh5DwMt/MiUmsCU51wYOCjapCxh0EVnN8l+oYEq+wuHh\r\nuKsyPTRpmVEqGLeSCflZKX4tpoKuneOU5VLLe3Prq08FkdlnrjcgMGGkAIqq\r\nF4Hx/7yMOOE2TejECkmaAaPfDUOcIfIQYh5Dk5utySg+oTwgaa2uJ1fjiryz\r\nyaxwgEJinKwlvbUfVFjUVA88VhdC8G6hX3gCH7GwWZtrrx2Q/QVgv0FwwQ1A\r\nMhDFUtknPUQXvqQtrKGqYKD+N4c3GfUtQzzwn2zwCXCVgPv7jY/ggc4SWlqX\r\nagMLab/6SpW7MdrhRHuhVTQ98Jby6n3Hvz0=\r\n=0HZz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.51c7d4014.0","@material/theme":"15.0.0-canary.51c7d4014.0","@material/animation":"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-indicator_15.0.0-canary.51c7d4014.0_1678466802453_0.4708936186095065","host":"s3://npm-registry-packages"}},"15.0.0-canary.1175a5be0.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.1175a5be0.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"98143838ba4d0a8acbedc5ca52eb4e26ff734769","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.1175a5be0.0.tgz","fileCount":38,"integrity":"sha512-TN8/Pvfx/+KBlZBcHcatF+nVBox9BWYDxn14BO6aMzDJt0Sh+IyyIkwFd53eaqInmET5P3G4uh3XpEgara3lQQ==","signatures":[{"sig":"MEUCIQDYLIaB1f/GxSCOoopDlEksizGICTPaDLMrN1ObmIQz7wIgead8fZwuLd/gGukBdUt05s+0N7hqxQQIksJhZG9uAmI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC5daACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrHEQ/7B8zvvttFnu9PEi0mC7Nhx853AAGjnQCIUkIlRq6MoWCWCUKM\r\nR5ynzwJvFh6O3G6YzhvdoWPXR1GrYLiSfTLWiBOc+71ZEkWX5z5OerudpFqz\r\nPOxJttaGpHidT+donyAlQzbVKbS2BI5DjMN+GV+UJX8TjScdgVriguh9o/7e\r\n4lMcCUR9qgkQnQf4bXxNvoQEEnj54GUfwhmMU3OzfQwclNFZgXxxM2kMiOFG\r\npvAy+JEiukS97ZhMjgti9rfL7X2mmPCxJtp9MIE/E+CHwdPZAhYJZY2CPPHP\r\nsVVmH0vqFl8e6VFpLM3gcrKUK4F28QuSrdxfwA7imkhUGKIH4j2+LNtZhzxI\r\ncXmwsznBCvjxmgj0zjHlz2vBGB6QmXEpzHUNtgPg5lr+Jt/vcUYTZgvTKQu0\r\n8oRm+sY9WGfHBNAO2HxfUPharEROnzDtH8Elizq8os/w5HGk+hn6ih7Sa20i\r\nVfjl9aXvYIGFP26iKnBP3s0RhECZtka9ReA2q0fvbtiEz3g18BwkWV1m15gs\r\n2Qn2LkMWPVnnj/USPHwb4Xjb9ZDoxucFuxnES7QUZUZo6v19yne06vdehk2L\r\no9IPsk/iODLSpck5m3u1uq7gXwn3SfawViG1c2qf2G+E0zfEgI8gPoHbYQJj\r\n0eW/NdNrFqSk7Cy/foDDc7e+AKpdUUjr4aU=\r\n=QO3p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.1175a5be0.0","@material/theme":"15.0.0-canary.1175a5be0.0","@material/animation":"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-indicator_15.0.0-canary.1175a5be0.0_1678481242269_0.6344242984657693","host":"s3://npm-registry-packages"}},"15.0.0-canary.7adf3af80.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.7adf3af80.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"19878eb1b254b7738a93087bcffedf9f88d5a373","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.7adf3af80.0.tgz","fileCount":38,"integrity":"sha512-Lq7TvWbXfBryv9HPOIRNEQE717YEokIwr89VRjtgl4SBeohynPMNzwboKSRMt93XZG5PZMX0yoiMA99SxvJ6uw==","signatures":[{"sig":"MEUCIQD5mseS/Ck99Kc7jiGe8Gjtc8XglGIx93ftsMgDGln2nwIgY1AUUhTHGJGSHSU8H/mYeHGzpVn6PDJVwGxCQjqnEJY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC9hAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp7vQ/+Mhk79xEHHbeIanWuLRlIQyUtGmfiZ0dM6Hkg/Xn9Tsuk7MI0\r\nE9uuGFrQLNOlxt3EIilV1nAz1Qw0J0wP+sb40I34zvJ5V5Unuvx2wFd2P5XY\r\nthPMNHkzN1tO6MVG6zKIuGi+Wm82CEB1mW4rF6lsROs4YHSbiNklQyaYvIxl\r\ny2EI+Iqweiow0PCGLSp7Q4nL4LB1BDdFLSxxOqPJtL2IJ59y5UPWC3o6IRwA\r\nKrWOmn5/Y0B/J8JzK0jv98Gi4kjWO+3KoNk+Giw0x+7G9/mgDfhgqXLsXss+\r\n2hpvTJZMo4H8Amnxz4zTFvyqLKtyS9a5HTTf4W8s8wB6Xj1AiIDyuOQarE4t\r\nmmht7dGLE3eC0R5IPP3o1f3um6SGvnUI87WjJSCHClSfdQ6h3M0hCfopCwuQ\r\nVBhF4lJ28Uo4xVMQ75XTH2Ceg6SUgPPl+snvLYM4d/QNERxFbDKxqSf0lhaN\r\nl1jW9DEkRXkG7ANuRZf+WCHI1vi1lT9bSScnJimZ1FtuaLUma6lOrARiFS/W\r\nh6NB04tJA3WerEYbQbkJLeORJHjmqgqZtE4FdUeaWuliyI4NkZWi5VU74PAn\r\nGV0NxM7gtmleoE6K4OFeD7s42TmjNmensOmKbmR21akrS3wSPfeYLnaFRJs3\r\nL/1OdBiK1BMADRefdab/Z+gctIP3SuaTaOI=\r\n=kb/k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.7adf3af80.0","@material/theme":"15.0.0-canary.7adf3af80.0","@material/animation":"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-indicator_15.0.0-canary.7adf3af80.0_1678497855989_0.5255271590861883","host":"s3://npm-registry-packages"}},"15.0.0-canary.82554d770.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.82554d770.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"def8116ccbdf8bbab50c538051719df6b556d45d","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.82554d770.0.tgz","fileCount":38,"integrity":"sha512-epubwT7pS0YsFhRZo3zaXsqJfx3Q/Th4yVKKbnyc1hb0jWlyAYdeQBvXFudBz/52Hle0XHNutsY7gwQVm4bRRA==","signatures":[{"sig":"MEQCIFDxXipX1DPge5lgb7I3fJZ/j3E2jgOQRTBWcYirGhFJAiAAuvKpdlU3CJd5ij0FYjhrdgX+zw/oE3S27DdFMsbU7w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC9slACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr2FhAAgnpJkbjaMz1WOiin5O2wv7n93EAEpyVIbO+2f8BKHTlkDoWp\r\nJX3LMqPvGWhKfJoxGlp0tuhd9gYa8zDC8W6kIfCYVC69n9g+6gJkJX2INZme\r\n7mP7WJAoEGoIAf0z4M9JlTv4ST7/qKg0919Ui2GBO41ghlhqrBVTnN0n/hRv\r\nyvBGQVghhgGZqAamNXhk1BXcpXzJtg3S4DZvwpoSRyL3VC1+ajWOMs04Hpw6\r\nBjcNCAzsJQ36sm25glXm+lkXd4VUVLkDueEW0AywpX10yesRQOX2j84le32M\r\ngvepa3phBdCzYYdX8z7i687ZC9430Hm93BAFsajcv5ZRToZGLBcAxcUcAE0N\r\ntyQJGvE5E5FKw4nOOU2tO1pymJM2rrKt0Z51Fb8HiWl8bjGVYGRMOfUubqu9\r\nJaAlVW8JvSKkZvZFjxv/Hr2UO2gIKk457R6DVPe/0f4UfdQ2f/M/A13wwd85\r\n1mPQJAGq6YR22llLgKujEjrlAOT8mXWzEl+r3xAnDPL4lB2B+onXj1SsIi3D\r\nzJ2nhYMvqkSISkfiBPAmrsHDbdjTOt65RePbQv5ZHZoh1uM5nXccekffT7EF\r\nDDevS+c0lbYIrjo9LxEVOmUjSD/iav7yHfuXN0g8R8oHo3Rgt4IZBIKZ8/tr\r\nWLCfebTzbAOxAa6BfK7bHDjSxBKN19BoIuM=\r\n=MVQd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.82554d770.0","@material/theme":"15.0.0-canary.82554d770.0","@material/animation":"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-indicator_15.0.0-canary.82554d770.0_1678498597097_0.7349140754775363","host":"s3://npm-registry-packages"}},"15.0.0-canary.93fc524b7.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.93fc524b7.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"7bd8fa6cdea67863ff430bf63c998c4b952c5e89","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.93fc524b7.0.tgz","fileCount":38,"integrity":"sha512-4xqAUaisZsLFmoWonW7cnTrlKu49Q/vsTlJaVgyoQGUPNxOrtA+tvJadiGydJM5eLoHJoZ+YF4W9HYseYosmLw==","signatures":[{"sig":"MEUCIQCf52qjrXe4nkSdsCeYPpPn9Tv1fTnRbyiHMAFMon9HKAIgLge4YS/5k8BGbx1/RX3nx0l1iU+cMhbboxV4SFS37sA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkDuDjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqpSg//S84+U7XKKvOgLc0EeerdAlergDsi7sVuozGQ5WCBh0zyymEN\r\nrXQ3gRrXkNb6Sf7xRzs8EUk8gkz4xFcmFHHQs4RJIqU9pCzLLR2udj5PtoOI\r\nk6Kg0vA/414HYBKVzD41fa+cMsJ0NZ4wdz1VBoZ980+3LV7Ol0Th8wWaupWt\r\nc+6oekLDh6izxVESY/P2zLWhCwrntL2oYHBb9MHCGZYZ1ful/V6hSzGHjnhQ\r\n1XQ5xSvH5Anvi4GSLGU7XtWl/DhCsSEutt8wkCfDwN6HehXczbI10Ce/RZTW\r\nN4r9aRTj9+tB+31qLRXtYCaWrq1vuWTsWWlF0AsgFbJZQtH4A7rlx+nwylQN\r\nLwn7R7p2bDtvvjXmPFPhcVIw83l70hjCDa3KI7guLuGofhIIO7+cw0Y94ACr\r\nJnTdEQs+tZJDkAK4Ke88ZhM4SOdN3WjDX2diK/fFQDNlhUVr/SckUVpMDx6v\r\npd15bsKjF3ebdg7v0qgi+rfAgXMTepQI/JWFjr40QTfbGTQi6eGatdjYpe/n\r\nFCzxypsMCnqWexOtw2EdcsZgWwxT70p6bGm5rTaRx0NE8uYkUoEJjOJnVtGU\r\ner/Af4kAwNRPuu0wp52RdZ1y2v1iNwLrVHu96B1jm8STu8MSLt4f0cFaXJlE\r\nRpg25fTHTsfFKve3ny+WU3yqL/XLSlGtoEE=\r\n=Kte6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.93fc524b7.0","@material/theme":"15.0.0-canary.93fc524b7.0","@material/animation":"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-indicator_15.0.0-canary.93fc524b7.0_1678696674963_0.06197962718780059","host":"s3://npm-registry-packages"}},"15.0.0-canary.50be0fbae.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.50be0fbae.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"4d2ffa331eb61aabad3df9c2d5b77c98c59243c1","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.50be0fbae.0.tgz","fileCount":38,"integrity":"sha512-ANAcYsa0fbTtaF4KMREv3PZDcoL2PI8ctiX99cl3Ll1T/chKTZHIMO0+CkHXBJkfPBJ5Cdn3PHmKANOxspiCuA==","signatures":[{"sig":"MEYCIQC2adBGLLjVjuHlFAf1FcqVydFAHucHaxatETc0kIhQCAIhAPVyrTlZTevB0WzoSmgq4MFj48xYngeEfZq2RksQxqiN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2DCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoThw//Sr6EcUXYk0Msr6Andr3WJKK5h+E4XqY59zcEExMXkNkz0Xel\r\nrnUyqmfTPQo7qOGBhXwgUBobyGDCx/C5dN4XT8na3eFGiqOthhN+2zhrBheu\r\nfqVur+znetoW65A3rgV2d/im8Uey6TOlSGpVrj4P+VfA5P6Yy0abWayk8/WZ\r\nPK3H9jXDP/2U2f0qz2KPPsOEoFW0ZrvyjoXXls0Hy01qWTj/K6b5HMXFy5FR\r\n5+cPyYUk1TPEkHlYmig0WmR90M94kHhCp8DGqeuNmSyVPZ8XDCRI4M5YBZHe\r\nBzdgKh35sKvgLa7izZa/nk52WOM3/4J6LLGyknumcDavRhZoNVS25PYvVC7b\r\nRXs3YpaOBSL4hq3vfnHIbwiiMGLT8+y5BaHyBzO0K9FEZxVrBy8ff0vd1Dme\r\n63kS8h0fDrg06lgRxjzp7kBJoxYpBjr6F6roIOOyzLcZ6v3plC7002+Rhv62\r\nVn20Cs4+CVZKGLIUL/LYBjs/cEMyKoU9NvTIHXwdnPVdrelDyYvCVIRF9vxZ\r\nSRmfUxsQKTzgI4gXYq9MiyiqtIH5yZ10L6m6rkAP+x6603yXcmdOxnqhG0LA\r\nDsnrUpyij26X71XkACg+PGGfra2SnnXoctaFDdVP9RCqUA0MxRgHOHpmhNhm\r\nE8BRn4OA5Ec8DLkT6F1UmEU4XQzGo6S6Gqg=\r\n=WhD6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.50be0fbae.0","@material/theme":"15.0.0-canary.50be0fbae.0","@material/animation":"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-indicator_15.0.0-canary.50be0fbae.0_1678729409813_0.09503687545134487","host":"s3://npm-registry-packages"}},"15.0.0-canary.6b5ffccd9.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.6b5ffccd9.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"dbd50f395073d1b4cde915bf7b73fc4b7785eeca","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.6b5ffccd9.0.tgz","fileCount":38,"integrity":"sha512-kaqaJq5HhGN/ifH8Hg/lTxoCjyTuMUFakTXA+Q+g1fiMkBFXkP5iuBDkuWVvuXT7StW4CPRE8e8dlHdR9RGaAQ==","signatures":[{"sig":"MEUCIQDVscnpCYM2gCdMRjMjx8LS92jMvu2suuClGFjTB01JuAIgQIPpUN4qeHcFqRs9Y4ai1cyS7a8VspVYENDBiaLC/K4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2GJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqSvg/8D9Lsxur/nIl7cn7Zg0f9UEvei5z6MwoKa82Ni2+9ZpZI4w/z\r\nqjqOkXGNj0YpDZKJOXZIrGF6kK5iIPyrxtmGESBEGPIfH+Sr61N34eS1oafb\r\neLMJV9TJ9zbCF4j8aQXHHU9IuOPt07Z92vc7zJYGCqW0zcitIURs8GwNed5s\r\nZXXNTBGuWU7NtHkgRV/IAnOKddXyPTEHL24MO8618wYvwq7aHfVFcPCLW5Ot\r\nn1j5snXa/LJh69gPpTGW8/DzLEwyf6frWQKLnLysxV11/e58N3jJVGeju0yh\r\nqM9y+3g45EkL6xhl9hu3WApFCqsKc7H0cMF1pvV3a9m4N4Dgf6bTl5fmYEzq\r\nGwY56Ixp3KtXQgbKjakkckcydEZAAwAHoDoMdJ4dGqdklWljXxGcv3UqPdZt\r\n6GepnkEnP9p46/etbg2DGccJeZFNZIdP84JHpcVaHsYp9aSICy8YlKOkBwaj\r\nMyLVwPZj0yQpdj4FXqToXw+3fMQh0/Fy4SKLtFe4fuARFuz5PbWTl68gelTX\r\nXdjz9L5/LPebNE2QwC8VrlT0YbsM8XUpx2u5vXxH8MRAAyM6zkJKpI1JhAwT\r\ndBg0M+oyol1IfWDPo2MS6vgX4HHXCqFDmjScKPyyDQK1xAEz5gMjGzaGOBeZ\r\nUpZIsZK0VT4ONMPgoEP/LwJqK5nMw/dqzAQ=\r\n=G6vU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.6b5ffccd9.0","@material/theme":"15.0.0-canary.6b5ffccd9.0","@material/animation":"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-indicator_15.0.0-canary.6b5ffccd9.0_1678729608884_0.11021120674894558","host":"s3://npm-registry-packages"}},"15.0.0-canary.1c8013f4e.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.1c8013f4e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"dcdf625d74a2545fe271d9c33e7977455624170f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.1c8013f4e.0.tgz","fileCount":38,"integrity":"sha512-MWAtgdG6idp7avfr9CUkqKOliZFTrhX/xw/G1XOcd8VWSDSSGvLdKnTXgjOWVaMgeIVHdH9BS+7Lo/E4T7ohPg==","signatures":[{"sig":"MEUCID6YlcIO+F7nvO3fJ1dMiHhEPkceQqZXdSfdcD4FT8NqAiEA6Nok1TY4pWMHi4jK08QCpU5HwJh+oC0XpY2MPdynqz0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2T0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqQbw/+Kh2aaOE85wDoxndG6zVFj+/fKtl0gME1Mg/tOtm63bfSAFPq\r\n73hf9tp5H5Xi4ZKrlAtDTCPzRDfNFw3F7AZ/FeIK9CLzhNwxrsrhkIgtPsY7\r\nPdb+Iw34b/VTDxFJcO52U6FoeL7Yedkwxc7ziqk+FjJ9wnw2yKUhjW2RBAih\r\nD9IWx+qDdvhPv+BwDLQPCiW4hWjeu7OuxwS8dcz/OErfCTdwrOt+bX+8wKAR\r\ndpU1Eq9lwGFaKF/yIqb+ex/9y0HEpeiXH35uE5RMa1wJPpQOiweDpjToQHv0\r\nTy/9VEMQfU9OclaIpdWUhy7tR6utzC4ZciA2wUb0vicuHc8Ac4gI03OCsDYz\r\nQL3vafAsVjfRaD0vUeeCJ76CiWlCyqw+GUoZE0XqPJlSDpyBUw3l0orO/SuP\r\nZcn6qSmlsOCnxkavtXlgHWDt+JoSJNPYAJkxw9NTuKmJe2SU9kwiv3ilY8IB\r\nIilRPfSm5kU8552y7XkrNByfPH7sQ48tJ32LF9s1c+tVd6ang0/dg3Zl0ERU\r\ngqtXc4PPp7VxUZE66Tw7i7PVJUP+0Bi/gOmSpnK1OzG3DTEs+AgXJgm6GHMr\r\nscGi8EPaZRklKmaE9EMzQQg2WJr+rupVJKKMqJH71dFf13k8eTArf+v69vjD\r\nt8bN8KIaxN86wLbXB37a1ggogsjN9CpRTAI=\r\n=OgG9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.1c8013f4e.0","@material/theme":"15.0.0-canary.1c8013f4e.0","@material/animation":"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-indicator_15.0.0-canary.1c8013f4e.0_1678730484176_0.26051180240746663","host":"s3://npm-registry-packages"}},"15.0.0-canary.112715df5.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.112715df5.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ae7ca903774bc34d11ed4a01472b582bb15cc7c2","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.112715df5.0.tgz","fileCount":38,"integrity":"sha512-gEh0GBN+qsJMPxtUXcnUfAQY9WksIZCn6oRhmaKmtLxdfOh2loHYyDnBj2MhPP8Y2r2POFqIXjOGn/yjAjAPcg==","signatures":[{"sig":"MEYCIQCbY6np8dmCNPDBOr7uZjA8JkM2RocxIaK4kb+Q/EUtJgIhAJumrVnwbD6TNhlM6XhyPXGwzn7ctJ4u1HLF0E9CduzJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD22kACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqJyhAAg/iGC57PB4WIwIS2CbYgkGCAqNASuQLnEJVxgRX1Fg4gf+V1\r\n81RrQ96tnOxtNMQF4qP/WZeCqn4TqA+6A1Q9/ArkXt4wKg/qZsMXrFnZVIVv\r\na/asVl+dY8qBJxbhHtAbAR+H5iED946fHLJIaOocTDLzY1lrGsUGgyKw3UEx\r\nu6oN9PA0lS0XI1+FXqI/nU6u1gpyFs9SIkEQLbPelp4n+fCosOrl2QSqEBHd\r\nw3Buf0lW1L13ZtDS0kbtHan7cMHUM/7oUiz97O08zwuuW4plkM2TKdpdhAml\r\n1iyImzVHdQo8fvZm9w5RsPzHWpf8ZR6NS5T97cGRQqJUQAY24hIrInzP+ujm\r\nlCsNeHEiC51CqESgFggZMhVVYSYrCFbFXqWsIvvSByPiYYYQEKq4E1KkaGNJ\r\nfVOLV8lt0M5EP2UZbUEyIAzPcVKJpHH/7gWytnlZrL+/44yH8rBLMvoqGXLo\r\nUY3Khm2kOhTed4iqbboTy2h5e30mIzGxLm4K8qodXCx+1VvipKwFHCDHam72\r\nL0T1mxMiPcLfevEQ46UTVKwzt+pIfxzsb2r1Sm/UHLPXR969qrUuth82NYwQ\r\ntr4Y3WnudZ5gZyEfo0DRLFDzM89KfviV5bJJSYajNPq5AKKMnW3Ny5gbCp1l\r\n6rAtqTy7iITds00cbjC7zfJItUrhyghA32c=\r\n=irqQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.112715df5.0","@material/theme":"15.0.0-canary.112715df5.0","@material/animation":"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-indicator_15.0.0-canary.112715df5.0_1678732707898_0.24886191125444213","host":"s3://npm-registry-packages"}},"15.0.0-canary.d250911f2.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.d250911f2.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"10cae90d2b32db1640e1856c169cbfc21487940e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.d250911f2.0.tgz","fileCount":38,"integrity":"sha512-Mi+AyEiPUBZ7BFDkZQRuDLV6tP6nRuW3ip581jKbfPYhzDcT7WjGAXCh9xIxbNJL0B1FAEThwzWUjsiaATzSvg==","signatures":[{"sig":"MEYCIQDlDyHYWy42beTcXXzlqXfipUtNjOr6afCm+o/Dtu7Q0wIhAL5nJOOeVXFFvLcbb5zPRH9xyOrcoGso46jtFcpToy3A","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3nmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq/YA//YRWHouJ5AAizOk7adGOBnMpsDImaBPtMt152jhSmn8ohxT3D\r\n+NN4bA9UFdEXwkHj++Y2+9tCWScSSvTqsQ496VpuLqGy41mpoO6CQTDQeaxW\r\nx9oxyJUv+JFBfU/r/q0eogjz6bEk4fVLZejPGRyDz4vxalYoDY8wf5uW7NjF\r\nNcW3HrBwUW0DvXHdfwBLiuDLj8LAd3Rpf1/Nc0G4zl0KC8RayMeQKFes4XRD\r\nVBvlLw/tZjt0HL1fehknOsRfZHsRz9NivySmYLXV6ZcG/VmUSn3zIH0uFTz0\r\nf0mGmd8Zil2FMsXnP73pUluu0FZcfQHyq37GA2hdN/iXsYTNqyi+bQP0kjIj\r\nbmy/0NnuKbVFhhEp6DYk7dzhlA3CoG03h5L6RBtJlCtCZGvmuqujy68qhtPy\r\nLMz9yPAUi6bfnuuYLSOYYnLiFeD/QDRe49YEXqruYVUEvh7cOj+jBF1wLwcv\r\nO7Wp4IjkBHfDGKrM/Y7xtvONWCTjyQcb+vX8vj71AklZoj03buN3S2KQt1Td\r\nEboxE85jyAneIdO0uleuLZNa1HgYmREQbv9Ng+ucDOgrw+YH4nsrw6j8LUDf\r\n4Kay+qBZfKhQreMot2tsR6zvie8fHtDAiKwu+xm1EF+Vc/7xeAG2p+wyG2YC\r\nr6UqPDeB8HV7dgL/m3Id0/uN+Q71yXd7/dw=\r\n=6wWy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.d250911f2.0","@material/theme":"15.0.0-canary.d250911f2.0","@material/animation":"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-indicator_15.0.0-canary.d250911f2.0_1678735846714_0.3609329380004107","host":"s3://npm-registry-packages"}},"15.0.0-canary.7cd925c12.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.7cd925c12.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e6a0199051f9eb7b27732f713eae0accfd924730","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.7cd925c12.0.tgz","fileCount":38,"integrity":"sha512-CAx7QokmSfpXwN8DleznYGjyOno/8U6+zkdxTEwkyxq1zZpz0YjRm6Y3VazB4Mkl9OOUskVxOgdWEkYTWDBQ/w==","signatures":[{"sig":"MEUCIAEA9YCpdxU9DH6rF4dNa5Q4fnPMDKNeI0oQlvvio87iAiEAhVTl/IlxCYPrPwVBY/ezusOCJyOKnLUYaRUkno4knTw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3umACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq5SBAAjB72TcjTdM/5twGMKVH0+rgnxHe0Btg3vw27B4RSB2JRIUkg\r\nSVxJRU+AtQzqFEkA0E4LFPGwljPS4s5IpRwgudFxDG8T38p1c3x+wbyYLgac\r\nvu3FefNjdzgo2/rK4abb7UBpdDY8j7QL+H83TKf1S+2TLd9FBvc4pBsW8Wx1\r\n4oR5+ZcmWf+tMx4PEbhWPu8Vmn1MRud8pZimrPT/I+t9Nu+q+ZC5NYtWwx+A\r\n7Av4QP3LqpEJjJagZfnCawmC0d2sNLnXoWamMV+MRsw9Xt9qrgIOPjCxXQti\r\nKQ8l3bhNezqUc4i+Z+AWS+VsbmD58ivuNJNzx++Egq75dHZHPTyNbN+J5rh5\r\n81QQPktI+GBmX71iS2uRzPFLa04S4YENbg6PVFXPJtobl+e3ZRgaWRgbEG5b\r\n6SrCl3iblzZZ4dBQJAJFs5EgUFn3LOF13T2b8Xd3KJvIQq4ctwf1K/m8BXpi\r\nJrelcjp73WO9DEI4Rn0CxruMAcLeBzKmqZ6icTUVZLOTbQsSZ91jnzxaqgyf\r\n0c1ZNVsXnWP8gWBSxCwFoSwjbfPXZL6gUxmxFEUVxXTGpQzD5zcxC0W5TtRG\r\nnZ8f0zFyb+5aoS89j38RHciT9vlXTdnVzIDsT5PbaOb7WXXpx9kMhg64kW4v\r\nUTXs8RFN8vZ9ito48+1jFVOTqJcgykpCek8=\r\n=msah\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.7cd925c12.0","@material/theme":"15.0.0-canary.7cd925c12.0","@material/animation":"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-indicator_15.0.0-canary.7cd925c12.0_1678736294229_0.06883871058376312","host":"s3://npm-registry-packages"}},"15.0.0-canary.b2ddacf73.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.b2ddacf73.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"285f1f0aaea76ad3e52fae714af5073633b13679","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.b2ddacf73.0.tgz","fileCount":38,"integrity":"sha512-OolS6/DoOsJ79zQ9727DMpPttaHwIMy3A/HcY3mcP18lvxUq4Wqy+5a3o/s8j5PlIfEwr9d5HEw0cBsqLPrZuw==","signatures":[{"sig":"MEQCIH4XmwqD+dqBIaC1NhCKuq0ao1IT1SIIVw0ypkKtIP/9AiAzZhWS7okByJ8iQsnShVp2coxYxkkLNYg4qO/x1omzZA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3yyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoiCw//WmV2RrK+DzAAO6v87uJbKhapwhIm7TnpBqGgqzQcaoOVBDmA\r\nCM/VAUnXlEPsMDq16OiRsiqYhzF3crB/vo2wCG3qhmzvE5d05SMOO4ojrtxz\r\nhYUhwyRxBQAznimnTSG3vVpAEjNr/D7YPwbvCFnSYI5DRRzMwlLD75y9ucJQ\r\nwvtknTggovylYAfYsQxCoNr1EeePu1YbHH93cYQ1D7xY1zVpiB2GuLJaWKNG\r\nKxgU0DWwK36OeuBTM0q+/JKtLgk/IH2Uh6GQyFrbdrYvmFmgEBU8wuQeqqBn\r\nQ4c03GeeDyw57bybZnW7H47GIOPLQKPD1bdCcQfjvpqr+G4Z0GhMO2evVzx4\r\n65cpcWu4KtBUagkQe7KNEA7R9XFZ74Xg99hR9nhxpuYsHWOOb6hmbzmyG52Y\r\n5mtRCpAfWSOrbzjCbdDu1/65+pAyv5QoO/rkkYVW6BIRsV04F8VgBrbkRE6R\r\n82fWAYpdotLA1EVjdJaGu6ERgb7jRVXjgoddUsH7KhGSr731u/FFsPwnqrRy\r\nNhVpOEbSp1wh9o2par7bBq83C+PttKrr7x4fWZlNLXyA0d/2P5YofjPM0oZi\r\nUIVDEM0SAu6zEmRSg2mJpbajDhOOqvLABcCdi7xyszPiDepjWjgxck1nU0cm\r\n3MWCiKtEXjbj0UdkaoXbV+3N/8mWGiRECkU=\r\n=a52j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.b2ddacf73.0","@material/theme":"15.0.0-canary.b2ddacf73.0","@material/animation":"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-indicator_15.0.0-canary.b2ddacf73.0_1678736562538_0.31185452431713445","host":"s3://npm-registry-packages"}},"15.0.0-canary.989ae2ecc.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.989ae2ecc.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ea3c1906a5037d6a7ed7ae742b421acbcf1af00a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.989ae2ecc.0.tgz","fileCount":38,"integrity":"sha512-+nHsEg9yfV2S8kCrBdVo4UsQoZ8z3uLamkPA8ECz8iWV2mc04YCZmNdrzhyMiaJ8hwk/amCg1OBhi8euBBNZTQ==","signatures":[{"sig":"MEUCIQCoKXswa0h8vIPMoPAGgCoe7Nc/z0sbBMjGvstaGDGcDgIgIlIjx/FWJFbA0Mrf89im+0LZ0hAPCcQdk3tYVorunWs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD37bACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqsWBAAmzIySeKLq7f7SXfm4YJWyFl+ZmBNO99OUWzI0wTI/c4BM5ao\r\nvBNU8FdYI9wj6rxat7WnFy8W7mCCXLNTwFWBMDq5BKlQjcfXdCNNDYyEgSR2\r\nJiTf+ib/DGZOEDT9qGTWbyzesrdx6Pb/PPbSc/hBWGX3fA8KsJgoIzVb8cEv\r\nKpnKr3V1gjc0A0zm7gEB+wVJcMWFoeG0+ngoHNurBwcZySSmUG7jah6GJxJo\r\n7q34yN/0qg2cUvmfnT6M8s+X0dv8vShgt6gaG4SKBGvNnqZY1gu9DfULg7hu\r\n8z+ttI9zYJ7rXb62V3HMaH7+6Ow98ZLYPWSGm2bki+q4aS3eYLLEE23Gz2V5\r\n/5cRLJpB+vt7UT5mwvpTbgHRvYlTfDkHXULBsFsVVawN0yyImEvvMD4nsQIr\r\nMi5N+WVx+YopkUEIF0SZ6PDTR6wFsK/1OlDl/WZHmN8yqK2N70nhKeJQb2WO\r\ngz7X7PqwU3C4wrsOlNnp2h/GJmt5StFtj8pIZ/jpPR4C4uxwt9KpxElw3L39\r\n5dq2XMiHGd+f7Rp/CkB3mvCrGhiTIpDgIpe/OXGpzzkXqfqQw+X7DuYaozSH\r\njVLYL77fwbMqOovVFw3BYhilaoz+ipIwjKb3tOIB7vMc9C1c9PWiAG6fYOev\r\nmPqhA/UjxzLkYLstwC8tjeQS6oUcPEyVkWw=\r\n=w8nD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.989ae2ecc.0","@material/theme":"15.0.0-canary.989ae2ecc.0","@material/animation":"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-indicator_15.0.0-canary.989ae2ecc.0_1678737115045_0.6496585468177436","host":"s3://npm-registry-packages"}},"15.0.0-canary.89c66483a.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.89c66483a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"f563407aa300c2e5df94a40efcb27ce2f669fe14","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.89c66483a.0.tgz","fileCount":38,"integrity":"sha512-7WWK76KAGismB9pwhwMh3+KS/kPI289bzMXNuKxXdX0UYcx1ttrT3SfmHhtB7IproUL5EKTYlpZrnc3iv7xjxg==","signatures":[{"sig":"MEYCIQDyTVxT03LJXD0eETk7yS80IIrviI6n3+MP1KGr7pbxYQIhAI9eb6l0vWFU2DMpZZnGxFuqAslY2wiq3Ve661oQgkAJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD4RvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqNRg//VZuIvSTr4CIhGK5dA9cjikwm789x2NkJLljkJegn2r8NXbMf\r\nfTaRNapL1/Cj3GNZfHNjIY7o0e5j1WerWRdQAhbtb6hH4YFMlL6kvLQ4KQzH\r\nUDFNyxM7HVmghpgOC61T/KaDq3ICR+ZsO+ATj+NNs0C5yqct2WolfpvyIMYP\r\nbtCu8F4r30pvu6gc06H0DUYP3hPcwAdFZ2HqdQcQUJgCFQ1z1GsmQB4R41vS\r\nMckcQuvVvG5LcrEpZbSGnQMGyIjy5dJ9jFk9lsYzVdhvgX32656LGMU1BgTp\r\ngkQ9h4BSn0wFNiVMQadG/q0UsfbV6fm5G9MRfBCecLkuaqmi2HBFkXD8XmlY\r\nzIFSnGkESlL7eFgNbSn775PIUASGZDBdoyB+pbZTjxb3fDtmBsFtsxut1Hv+\r\nc8j5pG64ULP7ayAlrs0OQKoUVonLeBd0kIYnChQMWlKymCkcn4/Sfe610quO\r\nMGBmtAFjBSa5yQRwt89NuCu7bheZG+0kB0DuYdjDLvewF1LvCZwKEer+a07R\r\nP4P9v0cqiXAcKqa8ALU3BFe5kQck2AK+DhE0pESiAj/2D3XlQzwTBTk3FVvu\r\nJItSf0Uz56PYzfKkkT921+Q8zi5ofrXckz40B3MhggoEskjZ61dgnY0p7F7F\r\nggHrtuGRn5b4Z6EM8M5sRcSOpP3LCZmirhQ=\r\n=S1Xa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.89c66483a.0","@material/theme":"15.0.0-canary.89c66483a.0","@material/animation":"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-indicator_15.0.0-canary.89c66483a.0_1678738543457_0.7265199337567807","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a85742c2.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.6a85742c2.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"b119f2a60607122273abbdde751c56b77fd24164","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.6a85742c2.0.tgz","fileCount":38,"integrity":"sha512-thfavUi0CrpKHBTj3AnSk/sbPP3lsaW6gYwikZYImllmIR2aL96wpxX0L8/qESYAFcks4Kf4dQW+HljsiIgKvA==","signatures":[{"sig":"MEUCIQCg/rnZRyu7ZU0Fqq6MDDiExMnw4ju7mV5FzWovWoK+SAIgfraXnvHzcz+VHVHHsRWVZUUX8Ks+uc7oBAQRd4nT9Y0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD+ARACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrzoA/+O5GVzeNjko+mSn74pB22E0FxQjyLZn/8Aosi+OIkRSr7d2Eu\r\nRLhl8BehuZc7V5atnGRS4ljUmQVCAb4zCtlntMqtN68SxkrLntQ9aHL3dwnU\r\n2DHJeWdQuvCIfkEMcto9N2iTYIGHZEaxJy4wLzlH6WijMq9mowErJU5yJePh\r\nSm1TbqV1jg6bmVK680V5Mk3Exl/VHQyfc/m5vaMPVzoD7P0VK0rhSekeUEX7\r\nY5Ijyg+oWr14WuUa54508M12RxBfJ4UFdlb+Y1owakx31sTHySUpSJgau5se\r\nqhsjlfimml2W2x43FXMcWt3wIsJVGACQmbeSZ3vpMkXzFNEIRkTbbmDfvxz4\r\nvWU1MLvbnqb6+tEGVQsufvGOFdhdbaWEucO2f5NMb+DCaYTHozCLWPWZOL3Q\r\naQ9F2AvlCUC4BrYkyLTS70BlZvsfnwZqA3djG2bSBqNE5dvWb88jDoNMtRZ3\r\nEePVHcoMfiAIdZuz6BTj93Ozaf2vcmD+NP9AZq0FaqUuAc13JeZWs+Idhgz/\r\ngMFaN/NfqOK64GIja6wK5nuesJwxwR+xRu8DJsJ35fYRZ52NUHv2OlMxL4pt\r\nss4eXZbOdDlt93jWrfjLDrGTG98kYhlg8qS/Eugev1PUSwPVCF3QvUvw2uHa\r\nCpgx2RJPiZ2iQigwiKbg/EegTlyLPbHYG2o=\r\n=L/7X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.6a85742c2.0","@material/theme":"15.0.0-canary.6a85742c2.0","@material/animation":"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-indicator_15.0.0-canary.6a85742c2.0_1678762000839_0.6296695090524456","host":"s3://npm-registry-packages"}},"15.0.0-canary.bb6cd78d5.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.bb6cd78d5.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"bd4c8e13bd2fb46d43d95e2cbeb156a8a5dd8e31","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.bb6cd78d5.0.tgz","fileCount":38,"integrity":"sha512-VCRb/IcJbOEtyycH0VlU3uKBnMbxp49m7nsvm+EoO45R4qdGAPm/n/LsJ25yN4H3Vq/Zm7wmnP67ipNfK/IeQw==","signatures":[{"sig":"MEUCIQCC/pBa1ufNe3VU9ciDwsPpDAd+XP3fffHOhVz8aaTO1QIgcRzgKilDXr6/94MHcrS2Cs3rRjvRCiIbWSQ43jn8m/g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELniACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr78w/+IVlzTM6LtPOr3fcvVqBkzg+VFKMuGFBluAGeVLO9WVqMuPAD\r\niJR+sK82KYfc1Nsi7923+x6aRKU4efltPD7DTD0RrB0iSDnZDlDoUJ4C6JCs\r\n/2Fe3ycTpiJFRymzoTGU+7I1HXUGQCdCBnf1Nycn+DPEXcjrfzJNhE0tERNj\r\nD1m3AENvvIQzVbnTcEm2YimOZ9J6xgfa+/qBYA68RixYZ4OajOacdqCpPAAm\r\nOdoXwOs+bpC2y0T7t12WZ0DwReNbyOtxcl7Ztjqsj+Ci+RV14c4oAcE1DexD\r\nSR1Wg8uRgSnNF35bNrtzUSuN3Y+bzifglSgrb8KDQolgYluNm44wf5A12z11\r\n5lwPsPDyzBZ9X2Qdl2Fe/MEfQsti7pxsBu4nMQhuE4FMaTzdDG1hlYV6trnr\r\nqto6nvh+FY4hMtFUpAFdg+s6gdXMJ5t4ueswaFahw5UahhPPxlAy+AS41qVC\r\nIJc3zcx8+eOTn+LqMKqKQsYLHi89WBRRux2VS0Mno6+o9kgo+G5wq4M7KI0m\r\nSt5BQihXCKYdFiiA/im9eyTXfPl8bWRTQl0tXF0K/mBk8paOmHYqxU22Bsi6\r\n9qbUQ2eRFSKrWR9/YxSh/20Tl3goROPxJnu4Hf/kFEoiY/lQDTufGgmPnL4e\r\nCvj0pizHTRBDWYZL14xRjw8VtNmhjVXDWW8=\r\n=N+F9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.bb6cd78d5.0","@material/theme":"15.0.0-canary.bb6cd78d5.0","@material/animation":"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-indicator_15.0.0-canary.bb6cd78d5.0_1678817762101_0.5843728613314254","host":"s3://npm-registry-packages"}},"15.0.0-canary.5f94aa37d.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.5f94aa37d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"73d78ff5fc270579f97ce2204261e6a8193855fc","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.5f94aa37d.0.tgz","fileCount":38,"integrity":"sha512-VHPJqc22i8vmMb8spk7wc7wR/Q8t0rDh2npBDNk5NR47gzVxdHFp/+NHXrh1Xkt+2UYbwJrEqjQjuZkxb5bMGw==","signatures":[{"sig":"MEUCIQCYI4qzOapuvXfHMpGZm2NHKj/xKLI++oKnd2kgeI2rQQIgJL5eZhzrExahf/GEAYr+7djn0JAqMU4IRSwShuTQbRo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELqvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqBixAAhnSA0qo+udHeTKJwRcixgFXSMefCnppqlH1cMW8kHWwC/n+c\r\nO6D1x44F0F76iFjjmDNGDfFo7gcHh8ye2zTvfyvqH4S6WtRknb6ODcLVZKaY\r\nBn9CnAPrJacX/nAmbVIc+VR4//tS0VSb+ggggXZ7GtYbTeCB6CE/B7TOiXFr\r\nbAFb47Qvm0gbx0cdP3E75ivSQdKaP096ofqOeD8OaJGK3jwZryW4iHUslwd2\r\n6jQRpDy+wlzg9+aAFdWNpU5+uQSTLjL7k0V9ZlKdidyWztp39UNFB4LZvKdU\r\nVdkGDixPhfEa9YH4ptwdsjV9qzKFotZD4iGuBt0psMCNX1n2UvrmNKLYMJIU\r\nl7g0QOu+inQqneFyfXReJAFMPh7r6BD3BzOWCRWfBEPr3Ta2WKM2nqNz/JRu\r\n8YKcdx05mylkXunYrz+hOWSapBcbKx4IxT8mkjDU+HJ6TiW6j+CaOp3LuAGa\r\n68M36wNoggw6+eJfXIL9hli8yxp4fEI77GXcA/+L+mow/2Dy1STZ7sU48JH/\r\ngDTDO1T5n1gWF1Uo1kiloIgNNiJMcu++qz7jfecZi8dWR7JUlm1i8Ukwhku9\r\nHTpM//7E2CnNLNANoFoX6ToXesUnbCyS63hTBJJltTV629CJNDPv76AELGoc\r\n7m9dmTUfKMlqLKBXUz1Ah6fd2QU26vTBz0M=\r\n=g4EV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.5f94aa37d.0","@material/theme":"15.0.0-canary.5f94aa37d.0","@material/animation":"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-indicator_15.0.0-canary.5f94aa37d.0_1678817967514_0.6399813096638758","host":"s3://npm-registry-packages"}},"15.0.0-canary.1bd317240.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.1bd317240.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"82b289ed7b66e6d9fa2f971a00a7efab7b47da1a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.1bd317240.0.tgz","fileCount":38,"integrity":"sha512-nds9cgJkCgSkYEbN7WG2TVfbNRYYEMuGjQgqIRlCmkxWWrnEZ4GhHbapNVWVn2bAffD0qs3mfdA4kkEPSa6hiQ==","signatures":[{"sig":"MEYCIQCbs42ZgatgLoVNWymBaZb4T3a5BiKeN0fa2ZqqOQzKOQIhAINz2jKS31o/3rtuHp+ZsD9uql6qRwJHyzMYHNGNYsi9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELuTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqcQhAAk0wXLAT8xvC9E5P4Ug3SPYDMUmk5h1EOCcwgQCe4T1MSYPZq\r\nh7zbT8JDsBpKMp4mM+0jU7D3fZQC8tKB4UzYWjn+gnOLkndL58XTJCixVTwL\r\nR63DMTS+uRyMRH6ycrpJnY9iOBYbO1eiackv64/U2v/EFnu1eNki3zvjnquY\r\nEWVp8UxGuVLghrUnBH3WhYQGa8QiubPw+1cKa4AzLOSXGPnnhouFXvybVLBX\r\n6u08ksBXeVitIPo6hX3XDqDmxw9dMB0YQzpIPjIBAwLi/jN7065Xrtj1AACE\r\nHOhly+Z5G/heplatJjcn6XB686sit1w5e5BC5XVO776+4Iensvgx/9LS06sF\r\nEu9JC10EAw2Mwy9UDATEQgdyoywPBvLJXPJQeo8DZYlhHAKzo+UJKj4HwHlH\r\nH9J9I9QN8BGmg+Akp/iU/sq9O8Is5I9AAPEvBONYFjwx+sl4wqCbo9WTOp7z\r\ntGapztpt67tYLT7UwPbDc4cwVaRw5Xi58lrzdPsq9UuwXJU6bqsupe+xLpmh\r\nWK3/YqLT8kDgeEPxiqT+Q11BjxJOfu2EbKHmyaSI+aKrhyFU9GDDQYksjZaD\r\nYvoZTjnd/g9kGfTYcmOZ3UuNUgVJu77qhwrBOJ0jbhxV8CjfvurHvU6L5sQM\r\nn+Ajmz8V58AnuWHo+Rr+DQA4IGD8ZWXLDvY=\r\n=tpj9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.1bd317240.0","@material/theme":"15.0.0-canary.1bd317240.0","@material/animation":"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-indicator_15.0.0-canary.1bd317240.0_1678818195245_0.6286953316140886","host":"s3://npm-registry-packages"}},"15.0.0-canary.d441d2a2a.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.d441d2a2a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"af0f72951a026baed978c28ab2c922e6196a2ae4","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.d441d2a2a.0.tgz","fileCount":38,"integrity":"sha512-b4cNFZbUyRaEUHcl4eVCldZ9DtrcHU0V/aBQUY6ZxzBeTEAzuRunX1KK4RAPZDibg3d4WwMpcaL5uNRW/gWS2w==","signatures":[{"sig":"MEQCIBf2y7hfIB4UQSeSpyGQ4Hi9T+lBJ+h6W5WZsptZjNZzAiBL8wFpU8XKYvq8PPJVLUJ1RzfJs8Zt8EB7iK0J9e7NUQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELwtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmra0w//bH4RxfdSoCXy/oXCbYc9vviEQEr6BXSyY8LaG+6uOnThGrns\r\nTOpD8/+F9ZquwLhNXKLPkw8K746koC/mT1gtuJLsOGf5OoLd8tDtvWnFa+Zp\r\njV/BPXzcLpbA/ms1LHzS2qSnyf0MdFUoyoo1Hy+iVPCd+zg9yzMZjle7pmQV\r\nKIZ3Hb6VCJcnfWT0XVnB0GRFOwKQBH1F5eh73ugEq5/ngDaB7gQa63FCTXjf\r\nSkvqICNPAYrAK92dkgitskADEuXRfYM5EVm6vFxtNcOSW5Bt0uiJxvrstl1q\r\nvChH5GAOeOzv1tuJ3hoq1UFJrBFje7zWwOxpaUKUoiaFRmRdk2hQQgpFBf8f\r\nI1+w/fhGWL/5ahBoai+wg1ZLPHNEHTsvYFjlcjNbyGD+jffgVLv3qeGmO9xZ\r\nbTvpeXC8wO6o7EBk8QXtmt7iSpFIH4InueiEcp3/qUdTI0s3v9g2r/lJYUC+\r\n30JDRkedGgOLbfxcqsao0BKwk4HT7vf65aaFomaevGi8uOzKiwVqh4E9Kufj\r\nKdEM2S0XMfbUsSyCY3t6+IHKsKAy9u1tYkYkil1q0NvA+Fkwxqq3CF26J4/O\r\nxxRngKQ7Wut2jvHDZCf/ceqEj0D0b8dzNdm/IxjEBfLxj18yNPLaytYRddHe\r\nnpAYMTMbG/u9/Mpi/EGKurAqlML8AHqKZVs=\r\n=1dSF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.d441d2a2a.0","@material/theme":"15.0.0-canary.d441d2a2a.0","@material/animation":"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-indicator_15.0.0-canary.d441d2a2a.0_1678818349451_0.6027636429301526","host":"s3://npm-registry-packages"}},"15.0.0-canary.fff4066c6.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.fff4066c6.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"b5ee5d56beea6a4634dbd962e76b5c321c418fa0","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.fff4066c6.0.tgz","fileCount":38,"integrity":"sha512-awE/0DJ9X8avClHbsH/edE6lrUfn0lc3OseB08zwtPJwO+IFgKqzRlDUNdkdkk40SZjfAKn1L4TerNe+EGTqtg==","signatures":[{"sig":"MEUCIGhrMzcZDKVI3k5ei2mz1+OCl9ALRLJmPHtAFAeMLTqPAiEAl/rtK8Qx13kbyufHaL6Idv447jul4d+qM+OKpVCDi00=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELxSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo32w/9FfTPQOiONkwx0+d/IawH+3wPuf/01uoYLVVN2LpuvrKH6g0/\r\nwo/ye8Ugc3B6eMgcgSaD3xPCTZWic/ABhAFgjsUpIs4gzxgR/bqmVPDzGLkK\r\nhPEBI9XqoRaAiAXLcxOKBcAH0Z0+zw+xWL/ZJMKw3edUrN7oE3DSjPWraZz8\r\nJQze+X+3XMjZ+d3xZGAE9ZCywRAiT/Whnvb3zdLH1facy+j9DKQuHp1tV2IU\r\ntKbctJPslZsAFVsRF5X5eiXzgv88Ftt6g9ROnDkTYymN49C97RVgX7jwz5zD\r\nhrp+l7R3DuU4YAA9LdHLtbb08ty1MOKfI83k6faySMy1S72pMKhXK8IOa48U\r\ncwLK7H0B4cVJa1jVI0DE5SuuMQPWPHCtKIZYzFtqZA8CVi/ZI/mmk9Yfagp0\r\n1Oc28k5ov2BaZ419pB6BYYT3ghoW7wKzq0Z38lNcuLSpgB+bSS8mxRhDB4z2\r\nP/tn1YAt6OoQJ9vU0FzVwVy0FQ2zGp2Od4KRtr82Mm4VA6qeoF2C5IACuuvF\r\nyAUGqfaWRcniiJbSvs7TRF9LBAqwaZibJcVagCfP8705iTzcpRRWIhV/vJTN\r\np+34gH743GXq887JXQ3PDc0M+kyapI3kl0drKhkLevTx0UjKg6PyoiG7t6xS\r\nxLqzDJF2qPk43sJvLvWwSuyKmxUpamxUIrM=\r\n=sWpZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.fff4066c6.0","@material/theme":"15.0.0-canary.fff4066c6.0","@material/animation":"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-indicator_15.0.0-canary.fff4066c6.0_1678818386751_0.7139103632717698","host":"s3://npm-registry-packages"}},"15.0.0-canary.87809c710.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.87809c710.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"7454479dfb447bc7ae3b0a3f828b3674bd13e969","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.87809c710.0.tgz","fileCount":38,"integrity":"sha512-v95rhfVw1GaJVi12JxnuQMFOsmomiL6h13XOQPz6hPRPr7dLJ0XaCOGu7OdfaU0UPaufkXq0ltbK7Q4uLsxMMw==","signatures":[{"sig":"MEYCIQCnOEmjEfdEwIGwAMwvacie6LI8mQgOGT6vnEwq/hEyXgIhAPRUyWzjC1VTgVcKaQQaqeM1cZ7U3YwJ9g6/OXL1bn57","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMAiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmplMw//Syme8djXC1MezNWZODfc46Yz01+6BhHKBWzl3Zk8Q6L3KB0H\r\n6znaiNPqqYOKmRKIfYvpmkDgtLqOObp1UoEMVndD0Ob7llOHnvsskjsFaPG1\r\nyCijFtH5+fMTDtgP4zHKS3eJJ/ITkeBrWWeRSNyG49VpXQKfSNCK+YHRrLLz\r\n6kqLqcV49r/v4R5tPY3V5i6JUh7Q78rZ7MSDPmXdOh38b+FE3HpLfGWFlZrZ\r\nHkKMS1iFuDPRjEBLZQ6d5a7S5+ifDp0wAxDPOABhzPv6NQhkjaDk28V8M9De\r\nNU7Mn+6VF2tMj2Wyde4bblt24n9YHlDnwnJxzZYlF1oahcuSHuYAtbxsXvBx\r\nv2pvE0PdIUPJ+rmlSJk6Ngih34RXsXBqYSY681UtRP/mM8pOu9HW+61WvCo2\r\nHwJVB82IMg4gM2GBznSebjfWtw7yRp7dO/fI1OIjHh3+nyDXWhLBfnrzAgdD\r\n0NJCse1SR3TaArtush4ctYuQH4Dc/EClKf61tVQSL3wg0Hk13x2fI1Croope\r\nqseeeyoF/inYxNWUS9hC1qkFmh/VIfnL9nisOpdGPFRv0TPvOxsMdq2UrZZ9\r\n2tg8qvRhsu4+1vWH3RP0RJLKMfPCm8sVQsWbXQAc44p2Q/wSU3ziTdhaea8O\r\nLc2b3M50rb//AYt/8mz7f7pyQ64otI6wAqA=\r\n=z4c3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.87809c710.0","@material/theme":"15.0.0-canary.87809c710.0","@material/animation":"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-indicator_15.0.0-canary.87809c710.0_1678819362309_0.18646845172474058","host":"s3://npm-registry-packages"}},"15.0.0-canary.48d30012d.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.48d30012d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"fa1b969bc438e139ae3d387e7c819ac75fadef3e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.48d30012d.0.tgz","fileCount":38,"integrity":"sha512-WLDGrEphqJD0S+dK+Qjhxp/5LU6+sb9KsQ4L5Y9HmnbPI1E85Frr/Q38PEFop8B292jbSgQuTfFluLkfM/2mXg==","signatures":[{"sig":"MEYCIQDYgaio/tggkL9GOG/zhhgg/tHHF98i5Yi1/tFJ5ckwwQIhAJ7hWs7794hKdRcVFLlspNafKcPrrfiTcSBDssPa3mY/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMEoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqWnA//fA4XYXdg8a2LmEraVS2QearfN6KqhKVRD2C3lD8e3P5iaytz\r\n0b+nahaSEkVLCau8qHdthOb3PMib+4YG5CJXk+HBn245CYVvdjtRXDK4kJ0Q\r\n7Gmn4r4sFSbhpJbTJojCGttk1o3Xda2mW3BEdfmAYxjyMRT5zQ9Fwtu0C0Wn\r\n2ENDD0Je86I4DC9copXRNItsYsIaIKdmPp5ETSINHdtjFHk5nse6v7KF/QII\r\n9BPTmon7wYwuRTwXkJmkrFJ8srXPuO7sIRZWFRm7SQZ87lPTIgitS6begrZ+\r\nu1E7k5fXZKaP5FsVQAu3X7UcgzI/DkpXbxvOdwjOV4Z5lCuO+XNcQq2lYMaf\r\nHe7657dEDuiMjx++5i8COLa8WG1wfJsITOgGNjL4E3Vk6MjnllbfgPCRjGI8\r\nRkm4Mt0wOh2lXceWoTDjPviJCUpSFd3wipNzPhf8i7/kHlVnAcSq5M00xps4\r\nNulNxNjiSoZJ532B162ae8XMgy4t8a2AX0d10e48O0sLCVIkfTn5GTmKslhZ\r\np+OGkOdq3eY1BHuWXEZJJ6GX43X0y9SZu0/EhY8Xk+42br2+pM7enjEHHF6X\r\nz9nPTJJ9xQVKFLBg0G71RGNSS4DooOtGW1o7cfQPfznBTL18O7Q11UVUWVqh\r\nHqIDhxPdlODRFTSwChiqq85Yhqbf+mZJFpQ=\r\n=bQnv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.48d30012d.0","@material/theme":"15.0.0-canary.48d30012d.0","@material/animation":"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-indicator_15.0.0-canary.48d30012d.0_1678819624161_0.8791505779646673","host":"s3://npm-registry-packages"}},"15.0.0-canary.419b23cc6.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.419b23cc6.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"cc0f6b057f244e407c8c67af33df2ca806910c85","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.419b23cc6.0.tgz","fileCount":38,"integrity":"sha512-SeYtkkBOmZDM1ORW3DGSZvFDA54RAQdbIMj/l+g9XgeF+aeFU2xnEHZDsu5+WcNyvd+AEcX8vxIb/3mAY0biog==","signatures":[{"sig":"MEYCIQCxelHhNPgz1xByZnIokph0LwZ0m8skTrcpL/gz/jCXxAIhAIQt53Qd/yTRoSko/hOKSzkWKaa7UyK6MuzV7BoLqD8b","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMO5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqKGg//Vefdmxz8k6xB7amwyh5gKxfH53GWxADKqXJhFhqBZkr4kjia\r\nKsA6bWi5GoYDgec240evfO4OIBwMTTzpD3bX7m0vBOZ3op9ZK6e1B0lxk3Yt\r\n5CcVhZsZWNMN4bll+/zxqfukkaUzBAnfi4gdZKzGwP8nAqz4IJG3ryrXfD9c\r\nNrO9hxPq4jAfUCKTUkZPLpXxWqRUS0fODC37Ve4rKv+0OFjBkpnX/Q18sG4V\r\n+/N3iSNghNnF2tx3A7jswb9Xx3JlSVwDM/d3/svzCb0F5ROmHVsZXJyndqGb\r\nVyGqy7NE7/NnfReKjAdWiAb9qcu4z95vzxrP9EYo1d15UDcl6CCGf0Ax62kc\r\nVQ46z4mnPA2BGjqpOlsL72V1p3i/5QQFGAjNoA5eTVOfWVofaL6CkAvhB09U\r\nJa0V9Fgt/flxw0Sw2FImKGx3A7PBiSgyxSFi9yUcy+x3c646jH71nrSRbNSH\r\nASpzTQ0DThh7bFGNbAy8bHuhV4qSrVsuPwIsima2JXucNVgDtFBM+ucz6OOs\r\noVUiKL4tNjNCxHteswqTAg8jb4qFjWRbrqE8cLYFElOPe6+oEfq8mWaTKmmg\r\nx8Z7NoomTEYT1nWfHHUjNGhv+t3HUK+vH6jrlRzpZ/EGHmIVf90BlXh83iVj\r\nHDk7K8Kx0IWd3xJPc5BU3UcNf/1nDVf/7U0=\r\n=/U8x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.419b23cc6.0","@material/theme":"15.0.0-canary.419b23cc6.0","@material/animation":"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-indicator_15.0.0-canary.419b23cc6.0_1678820281102_0.2410728302185885","host":"s3://npm-registry-packages"}},"15.0.0-canary.bf86521f4.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.bf86521f4.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"bfb745b0ec4f3909fe3338da619ddc7309b16adb","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.bf86521f4.0.tgz","fileCount":38,"integrity":"sha512-vsrFJcBZy+IrFDZ76qc0zL05Jr9hQLiTwlit1duESL7nENamqWE2pd/pbOMKudfEIJ9GZVA2ClMfjSpIkj/Ueg==","signatures":[{"sig":"MEYCIQC/GjlmqMpI0tLmJaooFMoK6NH8Qf48+twApoqX46HM7wIhAO9yLCrMxyJnP+wQlb5f+hX9fQZNqDZZg54P3kaAaBey","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEP9rACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoShg/6A6KWV3RNd4Y0iiSzUSVw4/oDOUSUzwv8kW8upqezOfqyWAhu\r\n5ljp+B5OCxnC1zLstqxwcCQgobryYrdtfM1ujH4uWTLCsuoRyRMGyPNr6HV7\r\n3morgOrxaSMEd9vwzwhvYo4pVGXTrguncoblpVLHcSsyFuPbTpPSKibQe9Oa\r\nPifoR0UG/HQlZOBGh+LAMa02udBxGYtKfvY9GdRWE7ScGQQVWnM1B5cX1Rxi\r\nzU0zTPDz1ScZJnte/N03wzxewN2NpraswPwokEC/BCtfCm3D3mYebvTJwXGx\r\nvwB/ahsoMHB8JkqkAzHe7McTtXlXGXUlDJ79rP2V5q+spFPnyL+U68u3QoNq\r\n6VUTHelKTuGakv9VkGJwO1NGAxiapape+myNn/AVo1Bl6MpAYu1ycBYP9+zm\r\nyYSfbRmb6+cPFlB6kxO54ZGXzHlRR38QKhesR95KWtRqT4BscahAKgKqZWV4\r\n0jA6GlyY33YwZVQefaMgx/AWbduJaXtIDAv8nKYYB2TxZHoEWWlfbMuv+aFK\r\nTfnlSt9wMCTJ6dpmNvx2dUcHT76h7thjdLN5mTb4VC5g/NzZZN9YI0ndR+1E\r\nEYtqY9f7dbmfLrqr54ud5RofJNyJ2ZlA33i1EbFqtUh15QefOi529TJNuodR\r\nKQtuGpq6LoschZCJs3+7NT61WpBkqMqL+xc=\r\n=YhI+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.bf86521f4.0","@material/theme":"15.0.0-canary.bf86521f4.0","@material/animation":"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-indicator_15.0.0-canary.bf86521f4.0_1678835563702_0.792473846465658","host":"s3://npm-registry-packages"}},"15.0.0-canary.11f3d280e.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.11f3d280e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"6387f729f806a8d6d80d60b5cf4d00b0ce679c3e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.11f3d280e.0.tgz","fileCount":38,"integrity":"sha512-ZHEZ/w31GASqtpdzx7vcd4gB7hDrcQKN+1vXbMlug3zql7pxHrOsOK26Tp3bRIc/SS0nzS9GniBMfYc9dWie7A==","signatures":[{"sig":"MEUCICc57CoUccZCf1KTU4w6VIKGnuN1zJoiGR1hbGpreAweAiEAyABeuzCaNk0udU7D9YYOT3CzvXvWpM+Barr4lM3Utp0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEQz6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqeahAAkujhAPGiFiB4CfI9N8GCe1o5Wb0YwXysvZtxwXLJGjbXmmKl\r\nAupMWdsLJYnGIUP46KkN++ZjvxP/PkJZJkafw72KKOy+AiyJZumtwzt0xfTy\r\n8dboOqVDk0tIYCHVHF+PItSa8rbzbdMZ1k+uhF4kE8Qs/dz66gqdsgRdIBjT\r\nWzG+hiGA0Eu5tUVy/Hb+7PJ8e6X5CY8e9dUSDyOymPIjSDxIb00WYeDgINLH\r\nnLNNq38JXilqbjPX/1xcwIWbM2YgmS7s7GG5IyIdEcKMa3Rpxd/iMFVQI67D\r\nOgu2+kchNEPJm3ka0nQqOeAfMsvFy/rZh7Sigo02bbFhy6vi7UBvtyRPPxGT\r\nvW0bjeOO0sSBxZ1QukPz6RcUqUYKEqenu0luWNmb5pZQhsrEQRpQ5ysDz7x1\r\npYXfZMcrIgRXAIpDgL6UtZhQGqOHM4NofNAXUZhBrZsgwYiLFJ7ZFZ6UlyDb\r\n8iXg8+C5jGF9fVxzWSlYcBpjnXrDePcshpIgu+sFjn0PCB3tG9dvGQD4mXfd\r\nojozANeoSV27kX5g4QM+P52GelfwJ4F0BdGcbxi4e/Wrm4Zib9r0Idx9RSkF\r\nunrslPh8cPVRwA5FcLtTtyKbPHCejyX7yewDCmF3G8m7GNg5vfQWEsJHTgW9\r\nSdDrGDJcbBHlzUqV6e13M97dEh1fKnaBTW8=\r\n=Grs4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.11f3d280e.0","@material/theme":"15.0.0-canary.11f3d280e.0","@material/animation":"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-indicator_15.0.0-canary.11f3d280e.0_1678839034033_0.4506189761016739","host":"s3://npm-registry-packages"}},"15.0.0-canary.b281a409a.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.b281a409a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"126e3e30c5dea4d1a1a0147a1ec7296c436ef961","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.b281a409a.0.tgz","fileCount":38,"integrity":"sha512-+bsfdpHGnNX4eKh+aS0L+J0TL76Xp+kt8jxS75A0BFBXqbPII4N169ijlmW1PKf8MM9Dzmbf7pD8D63LO0i9VA==","signatures":[{"sig":"MEQCIHyn4S20iCgjjijj4y8PKpaC1TRHpAON8STpspix7G16AiBd3jskZAct0QhXH0sNE6/yQW+YphcFJhloCKH95zjhZg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGc/aACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmohmw//aUMQ1dLrIRHmoSn3uV6Q8fldY17Tc3xM+lrTvnxx9y0MAgbY\r\nKkCFIKW21ERYOJHnLhaYSMMlzdiAW2PT+R6PKD9RhmYZwgD9RTw+dLtF0biJ\r\n6iDBpQaSM/RzxyCXNAxKjB4v6btKlkqDzguxK/Oj4KqKr1mrQIbmPl+CdBRt\r\n9ezmOgIYfBW3MDOBQWmG6oXhtKsZZgqmy/IFj/7IzZrz+96YqPON/D3F1E48\r\nJpbcEHNUGq64PStM+FZqQq2zvErUIisINqOIFdGiYfZQZ+0/TMHWk+ZpkuF0\r\naq76m5BxLdvdL+nvgRh2cR1mP4EZJFx0xQCcrn8Oy8BRmCP+eT12C/LvCSBJ\r\nlyZMx46x1jQvtV3qXh84SBogaUEiThAvvI2wsGfjdpgSbeaUIx6xjsY855LZ\r\nX1Ctdp1RqtwafPw176MGBTBKxQJc4zMjcraXO97FaqXaOEKM00gKF/Dk/58e\r\nP1I0Un6p04YDiDzZBhKJRkMTedVMIm8LOsa55NW9+/Js4mEqLU4kfX8e++V4\r\nKrdfBgHe6u6ZTMYJ4TG+q96E4vssak98aQMn6o9uXn0rF4UNsWRPfeo4X0Tq\r\nOdCSjJZMB/IS4Vw9cQliFU8ApVtJ0T/or+JxpXWBgL02lu+0THZNX/J9MJvD\r\nhgko1AlliTvTMfre0RtZa2nTbaTHPf+YDbc=\r\n=SIpV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.b281a409a.0","@material/theme":"15.0.0-canary.b281a409a.0","@material/animation":"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-indicator_15.0.0-canary.b281a409a.0_1679413210359_0.40456136082528427","host":"s3://npm-registry-packages"}},"15.0.0-canary.39e473690.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.39e473690.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e8879c11c3765d9bc11a5a284a50faa1c6d06ced","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.39e473690.0.tgz","fileCount":38,"integrity":"sha512-zIjQx1JTSvnaTgwngiAk4ZQokI5Vvxvk7KRtl+NEOpLtfr5G3ZWqcAF4D9BV17FcUn5UZOJGQ4CKEgWm6pxZbQ==","signatures":[{"sig":"MEYCIQDV7ckXXo6iiAyF5HpCJXbRjwD95aSsx6LfU+XZ/JWd1AIhAOFxWCVIOsZP1Pf1rhCPNwTKuhqywIxGIIsZdeizEPCt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGe5oACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq1cA/+JeRxxcfiZEgApUcrL6KP0xcnrBp6n8Dw07TfRnYazWWFYBS4\r\n9XNGWWTqrPiJ5wDz2vuQSTl7lCU+iFRfwwun/MRsjs5lt9rGAFFTzWDTtxpU\r\n9bLvZZnVQHCQwpv+k90PfC7kYUCjF61Vg5iwCE+EeULoeQZFeaihMp30tkgj\r\n3F8UOFvDSWXkTkcvJKNhSX6ykKOj8IlUlmjfJCIs3rYWUlGaKRofeRlKsaC+\r\npAFHLLBlga7yfeShJD3QWBcUnTm0D4f8wL1cIRitYrZyH7mV3PLg2KATAbzc\r\n5yvPrCrGhui4mvuBK0H8tC8r1RykhGKLXFHM+fZ18Ms5Y1q2lf2Ws5PmFoQG\r\nNnhGfDov1pnD+pINL3EmxYdL14ArV2L9dWOfJvPH4qGBC6427jHi66J7zA5U\r\nAh+ar2jjq5o15HQgkMkYebBEmKQjRzn2EgrUx3diE5c53pVovnhsMP6JRMOQ\r\nhSo35BHeQ/0hd3jRNN3eUORO/UHnl/ROIqPgDKFixP1oF0gRKUOVBCt5jhSi\r\nCRLbolZM8mAyiHIflNt8J5P3pchXyXalLT4/Z+k1V9cQ+d55xS8oFRyLQ1bV\r\nI2gNmibc86pyEJM3kEBYN47rijN2F6uaCIZ0mDmMM14g4ryNKFi1Myd2DyvG\r\nCTadnYGrLnuyTLCjoXpHrTS4M0GvRYzrCIE=\r\n=Epbf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.39e473690.0","@material/theme":"15.0.0-canary.39e473690.0","@material/animation":"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-indicator_15.0.0-canary.39e473690.0_1679421032018_0.2001921116298293","host":"s3://npm-registry-packages"}},"15.0.0-canary.cedffb44c.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.cedffb44c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"62a473a5260582cd4ced4a9545c8bee96310561c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.cedffb44c.0.tgz","fileCount":38,"integrity":"sha512-ESv7hmg++Gewf6QFX98uzPm12C/LbbnIqGqWdXpposaGcXpwViztHarVmBwW8TN833DGajIyPCkIPICyu2rWDg==","signatures":[{"sig":"MEUCIEmPX0INXbhKUo3TtOYEN71MXTDKflTMzyjDrtH2DZPZAiEAxQtBAtGiVwakGc1h40HRevcpNCmSncu5kxq/gfptvCM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGfANACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpT6w/+Nlle5z3wDYm+VP0N+fqIYgJ1OBM8Ld0q9hZ2D8tsUpe+HtZ3\r\ny6ROhXlsknNWujgSIwEpBxMvMaAxBPFcbWtnkK8oA+HDxzNcle1upg/0yo1v\r\nb7/3DI1nG3iKg0cRXTuuR5fO2jWzAvIt35fNb9xHtBoWmzBwbxzAk3ldPKNb\r\nmHytxiZI1c3vkDjLy+ihPegmFZei2PpA3AlZIvCjvhiW1Sl1KU5sb1B+sovU\r\nxxz6dbuio8JnL69d+p95EritecWa+M6A+HpYpiSE5GZqHeScARg3rQzIYwjo\r\nN3ClqctYt4dpxHtCRYx+w2DV0ueB+h+5YUSG+RZDyhyZRjaC7w1sFnwqo1xj\r\n3x0OlZGhaRsoF1g0xaA1CEWSzRwe+tmDQ5YD0wb+ruWJOH8DNCIz7nQcH5Gh\r\nzv+0WVhcJIoqmDzygKFhv63Juk6GFJBphb761PJ0HJXjxPUnHuOXsdrfvzuX\r\nAWZgzt6RlSHHhKTa6XFKFafK4G+td2uOQ1TQ3O83qAxI4L7xegb3p25bYIFg\r\nTBy3IASQAq1/izNv2Br7DQDTU7WVHv8pbMGhEzSMQegbB2rMur9BJRtnMgos\r\n2hsHZUu40HwXK5AxYlYrrFLRdrRmVprOu+1Y7CTb2oetGR68EkvoldObm2e7\r\ncVuOjmJo7qGsHqJXUGq+k6EG/ZSh3D0GDXI=\r\n=nJto\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.cedffb44c.0","@material/theme":"15.0.0-canary.cedffb44c.0","@material/animation":"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-indicator_15.0.0-canary.cedffb44c.0_1679421453174_0.40285494361022756","host":"s3://npm-registry-packages"}},"15.0.0-canary.36a4cba99.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.36a4cba99.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"5d4442424bed0c4083d200d9be45160e39a49d1d","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.36a4cba99.0.tgz","fileCount":38,"integrity":"sha512-Apc/PWKFWVXJ4ey+6YhLN614UhSuvqBj/wE8qXucG7cIma0Em2YPiGZk/YLG2vn/gnZjd3ECxRtUodzCjD390Q==","signatures":[{"sig":"MEUCIDxfvQkE1zQW+yO0Qth4iRmpEa0u/H+W8NfSxQHLhOnOAiEAjVx5UqNeIG4zfCA2PE5DaWz6jYpbhNi3S7GCu/EnekQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkIyigACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrr8g//bWHjF9ZtAQlk4yoD1j7HhRnADVDJs3qtHfY83bVh3kUwoBlI\r\nPZFnykxwDV724t3XINlXj+HKsU7x+nF47KSJhOkQS7VghiziW2MdtBrtdK9s\r\nOEf2qMWyyn90L+xNQfROEKFE8VsIdg19sRixqEsiJAqMpZHlI1zoCtL4/jq4\r\nttKFy9amxHuUNb+siqMA5ZiV68TGJ4c9tPpleNXrX/KJuL6D7IfSWfULbvbb\r\nRlbvcqiNQmQVgGHro/Y+2YoOLQUaN7QEmm3izR0IEPTKvsMTMH0OCKv3kMFb\r\n4dcaNkLrDTdiaEhiS8pjhWz2+h+xHJLyguvyzkhysoANxqTWJKPgFbm8Ast5\r\nG31wEupNgfZ/ugeoVoXumxXk2vNk5ZxidvFWzZOea9Lp+gHxvSgVsHN0lgc7\r\n/1TPt/kOMdb7j4/eXV8Q0aQ9i2Zuj3FtLx9Kgv+YNp6y3oFcr99G4V5MMCyz\r\n4Fn/AI7B9a5m9ax5+ICW0oR0yZGZtLd282vuYel33n6nCDDbO0Jlu6Oap6io\r\nHtFyfYQDsZE816I46SLxou+Y5WPJeYhRQmiMk58zSdlNwltgtJk7j1SvsZFd\r\ns3Ubu7V3N8DctsEX1NuhfTYCGU+jsqtSRXuurKDpCqSSTHTP5LgyAJEUx56G\r\nas4PvQ4sM/29qWL6O+jWUKsxze875LxLy9o=\r\n=2v6c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.36a4cba99.0","@material/theme":"15.0.0-canary.36a4cba99.0","@material/animation":"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-indicator_15.0.0-canary.36a4cba99.0_1680025759833_0.7932888667338385","host":"s3://npm-registry-packages"}},"15.0.0-canary.ed7e82ded.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.ed7e82ded.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"1d3b962cf118a62d5c5bcb59b7b34b766149bef6","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.ed7e82ded.0.tgz","fileCount":38,"integrity":"sha512-B+HuvSyuTqClGl//eL7mkOSCl8PLHn9zJ3UmDhEx6W7wxypWYBZ1M1V5+r2mIveN1KI8crJiP57uOboRopK9BA==","signatures":[{"sig":"MEUCIBU1Hmwk/O51jNfEXcwbVd21JIYx2lytTEGnfiarGVvvAiEAivMvVvINgO8jZ7pJZYOxOnITS1E5D4W2rUWfJOqs0Zs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkI08uACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoyiA/+IO9iBb6gWC2HkKpPgBAH0CK6zQYUHAmuIuXBhkUKjGV4YUlT\r\nv+KB52uKEQNjnkCux4lmBvCJmSCT6GIGm+TaaF769tx7PKszJCixOPzMM98y\r\nFHcIpQ0cCuIC7lBWmn4xdFmZ5Pc3t66vlDrquQ6qABpBtLkcyb/rIxXaUar1\r\nTWwuNY5YDs0Pz6UJ1cpAR7h8q1F5/5w68Z9FQznjrHY9Yh8Vy8jRLE1VZ1Kr\r\n/oP5t+R1502L/TGHfHwPvDbCur51phObOlKxFXooWHAdXQEgIxoQofGMl98I\r\nOpZYRFDEgsXOD2Mhmy+SSEax0KZli0eOq3KiEfps5o4oPZQc23tonz8//3QI\r\nI3+IGykjV6KXiqqR3pnPJQAagTdKgYx0IiuEfDsqi2nJwvr4p+wbYAJy1Qe3\r\nMgfS1lX4khESaBPw9ZAI+IG4x7MwDkKVsbhaiexUK6y1P/s2ETy2yB2cx9c8\r\nKk+Y5+mZy6ajomdNCQt58HAZVSUCGZjjmTATPtbpit2udTkT6ZTxgHXt22CW\r\n2/omTO849gOiSnLIVwFbyKYluHj9/IgmnVqcu/e4DyIx3+mCDfRLiSkrhHQo\r\ncq4rkrTr0XqqY5vonhVUWQXDDcFp5ExMctymsjl++gCg6UPTTGe9fnfmDciz\r\nKRKogjUH4OxMLnXTYDLrXG8bRGIRYnWfSrk=\r\n=l448\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.ed7e82ded.0","@material/theme":"15.0.0-canary.ed7e82ded.0","@material/animation":"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-indicator_15.0.0-canary.ed7e82ded.0_1680035630197_0.67671336219909","host":"s3://npm-registry-packages"}},"15.0.0-canary.55093ee1e.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.55093ee1e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"af328f3748f8578d7267bfe395035fc40b496014","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.55093ee1e.0.tgz","fileCount":38,"integrity":"sha512-fQ/9sBzXL7JjbzYaZor1zd4r66F8b+pB0eloI4mhfXQcweO5Gz7oxTUPnFDr5LSdhgNQnQuHGk1HPUaeljMk6w==","signatures":[{"sig":"MEQCIGzzpcPrzq8vr2SUJI2VWFXan3hSilL1Rg8ScazPBS2ZAiA3XnwW1t8BK4z6vnJ+eCofuPQ2kUm1uC2sG9Yz0va2jQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkJIe4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrbUQ//Tbq49BrMM1D6smdJVh2MUxvSDL4fQSqadr2pHC3ursDNU1C+\r\nW+XBpvBe/XPrLwVvmKayKH85hGrMY85DzF01yc5dgJ2JjJt8HhOZGG3W3bZn\r\nAkOrQUmbXjAvJzDDQrZ7SC3nfHKpR0/4s+8sOdugcFSrXUFa/QwKxNR0A3dB\r\ngDYuXHLQcTHvcMjQ8qFNSE121CrD6udnP3eCvvEQMjrt6JeSCsEq8PndZ0B3\r\n0rpE6/HGNHVsl8rXmJZAB5JPOuNeHxOuKNMSUZ3+G5j+17KxkfTZvSz4MWVS\r\nysrmVmlfUweE2fD2yJ0LeefdR66tpEKFXGkWyPl7r/2OkMaKoftzl90nLLZb\r\n3D+OHnx0Fwk/HkXwhRsHWVMaCvdmuPqlWj+VJYflW/iIWVo22TiyjajGMY+N\r\nEEkNb+cbql8tc5Au2wUMjEmwL1me3dW59VJWSwTd8Bw1JpECoVtvyumBlfKA\r\nlKuuiUQVQ2wv+nFHI1xb+V/5fMyjCk5uIDugak50QondKhKdrrH6vw6P2lkF\r\nAn28N/zgy3Pc7Ft26zU260s6aCQ+7gOYa8W1I+gMQzSUF+MKfkFwTnKSMcp6\r\nozx51AowBh4+rR/8Vgu9zWEAUH2g8SNb2iLD3+UwhaD6/ZKiIrW3SHVBNMmv\r\nCtsUBdiF9x4Mb9TT/R/nmKVYiv55m9AlBMw=\r\n=3av5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.55093ee1e.0","@material/theme":"15.0.0-canary.55093ee1e.0","@material/animation":"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-indicator_15.0.0-canary.55093ee1e.0_1680115640842_0.03785958460066707","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c53abc81.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.0c53abc81.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"80a8dd5d9647b66fa0d7bebc23c302b22b30d6ef","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.0c53abc81.0.tgz","fileCount":38,"integrity":"sha512-O6DAsY7KYjJLz92tuCVF60OHTLdDdwYZ7186T8ucPkrKCfTQ0cH8fA/e9jhQYEfRZpUho9ywNG49v5GI+O1yRA==","signatures":[{"sig":"MEUCIDL0c9zew3dBBD012uEUn3PNV8x4Pfvpq+0alOBxp99xAiEAwlW9lh8iKl7HMfLgt+Kw+rSdPv8OaA+pdxeLCVJe/30=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkL3SLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpEsRAAnzlb/cBoNky/7swa5apWWvJGEee69ZYNimGFOmZCTzs3W8la\r\n71tg9AMEtF1FoDSu7GuNKdqn3w2K4yvW8QxR6ERfeATE5cVVQtxAakdxTJBA\r\n4SfISmayMLn4Mor0pnnwSDnU2w+NEP6fVrPuHfr4PphsZIvb9PSDKRikTOlK\r\nGfs7rZwfzALkKzDxW5eQR8G18860iNcQTInVGQhIjuxxgsDSIF0nf17nyiFn\r\nLc0SZuyQgXwT2eUZ/g+Pt0zcozb4RxhTdrheJaQ7CX1lMvBfeFKlve/My8AP\r\nk43ELxZ78+ngv8ctiyO9HazdZUGo4y6aeZvcyRhr4TPgm1q+RXrF93vlxk6b\r\nL3z2y256rUs2s9Rgn1pg0H63Imym3x0TSmc4fZuPZ5+W3DzNZ5+++JB2WKRR\r\nCXVkghu0I9PM48vd6nLDhT3x59GsiOdB8t2Pu3AYd4q6sRsDeD9+yvb1CI9K\r\n7/aZ64CEd1qrlwY/jdRI7UPqwktXKTr+rmqKB0+yUm/qU0oLqKmHYYk2J4WC\r\nsivOQ+SYdrAeJybCUuqnIZpsJVYpOAvzdzG0BTC+LzRrMQ/teJ9OGCCyBD7C\r\nb44GZdat/HOI6kOeT0timzkoxlorMmmum+CZa2Xu1bRA3A6DtBtrSK4yBkRR\r\nUpsv4hYXodApNwIttAiLgbabHQ1JLbDOm6k=\r\n=y21S\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.0c53abc81.0","@material/theme":"15.0.0-canary.0c53abc81.0","@material/animation":"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-indicator_15.0.0-canary.0c53abc81.0_1680831627532_0.4456015369601549","host":"s3://npm-registry-packages"}},"15.0.0-canary.51311e69e.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.51311e69e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"a8016da528977f2f45085b9f71392d28756a8517","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.51311e69e.0.tgz","fileCount":38,"integrity":"sha512-WVwqdmZPzSzbnPRuwmaMyDxrAZs6Z+XowbtVIymV4G51IYF76IZMl9+pUJ5MTOIwcnSIY9X0afcgvH150ijmMg==","signatures":[{"sig":"MEUCIFQQvsNusIsZo2kvbE20dI/DA/7gD5rrHGQcizPMSvSaAiEA84jbs61M9W8359Bib7eJZfC4FxEYHyBMSK5gXdiu3oQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkMFvMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqlUg//fc5X28yCBpo02CqDP4uihiO/evbueUhM7pyXZt5qoUQl28oV\r\nzWGX1XMa2FM8Q6joevqyyo+YqwKY5Ih3GUHv4oo8/p8WpKMVDafPk6MqRjv0\r\npYSiaM6G7mGIeCZw5chADTfxu6jqYKllR4FB04ZXHq6KN6pD5qbU2M5UoNi/\r\n98BU9nas78PS3Xfb7slpZU4AUph4AnbXmnU1FUvmb0tn/4gTobVNrjoDRm2d\r\nj5PMYE1P16XWEZ0KQgQayaxVGJ5aYhpsewxt658ohGSd21oREvPnQ5zvZY+r\r\nUT0mDVhtSb2PyCMfVqJLrSMiteBAW1LdF7VUlzfuT0Y/e8V6rURk5VZpVXKb\r\nQN7ft/2ZL/Ryzb9pQKegmZhBX9N+CeZCD9UJcULQju7NreqzpDEDj4ZgBBhe\r\nDBjQVRSTdeeaglNbsWu/tPAe5ytuPE3IzK5LAneOMOIEazEPvkm9MhoW/py6\r\nBEUwsnN0CcHoAECM6KkWtE3YidZuKSa56O5O3F0vZ5hH4GKf1dypmksZzK+C\r\nv5xwaHf/aMA/8pIKET4RULmCwRYksxi5LQDygvEU7t2EkOaMjSSLaW0W8aES\r\nhhcONegirgZygkWVmScJP/XZuaqaeM6aNSBfE62SZtFO+yKqhoDjkiF3UQ82\r\ntql0ChdgqgkyMLxdjJ+mkyIUgnzONs/M5rE=\r\n=dWlY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.51311e69e.0","@material/theme":"15.0.0-canary.51311e69e.0","@material/animation":"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-indicator_15.0.0-canary.51311e69e.0_1680890828643_0.11000679552850579","host":"s3://npm-registry-packages"}},"15.0.0-canary.113b1a38e.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.113b1a38e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"df138b0b8095bf25e2347d55eafd34b3f29302f6","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.113b1a38e.0.tgz","fileCount":38,"integrity":"sha512-+l0dBc5OkfEKotJqo80jcAOxDW1xbqqHmvUeo/7DuR2h0tR6UYs/GRgShKVCMGe+XtNMpXY3gN0pS4WYv/KE7A==","signatures":[{"sig":"MEQCIFPYmVd4yrkBTsj3GHSlrgNrnLaOvd7PwSK8Rtya0FlcAiAUYvyPoX/Fu2uWR6DUIUDBw6Q4m/1pRhg3b4s/TDPgfg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNIVAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrljBAAjI1WtyocO86kOO6CxfCgxs6D/dSjB9hww2Zu5ZXd1unjzbgG\r\nsNfRaN5U7Wpury5vbOhIj7Jvgw0t5eCcYBUE46lT6t54oD18dHytz3kC8WPD\r\nOymaPeJtsb7ktbdJXcK1K4knwJfjFBOqFoApfIVl3o+m3WPnhVF8kW+CxYlJ\r\ndByKHKlvf3LsNOOeg0iA8h8WY8AqPnPHwvZMOybrXYw237PsTMtE4jsYOwu0\r\nnfcGJi2zhdoJCT7TPYk6caCX/35aKzmT0hvP2R8/yQhk2B2d8URS6KbggvbN\r\n2RBbdNyabqH6AZ1Eau8RPwrgvoHEK7VQhgmN4k6ZUW4MV6fGMRNBQBIK3eE9\r\nJDXvCUyKVivJ5sTokNrwEiDuzC7WZ31o7j/gZfrVBUx3k5akVLVMFms3b6f/\r\nKP+n6DqCNeALwia61uRn/eApp2nyEERCMLVzzGcOhKZ3m7CAFJX2LvWFuN/m\r\n7uUYpZKgay2zgjdnOe6lqRUJi9Qj1Ah9rodlcY9NJ/xvvxeap/zPdxLz0Ypg\r\n5R3HpnQXXXMhiGoJzhQqfn+A4RIlhuiZUYGAkBL0UseBLshwN960GpAYdIMp\r\nPlWhq+zQfmodQx8TTujP8UHBt0svA015GMyguorg3PIOjOOeOLInsFX2ieg2\r\nMDbQHF52kecHOaUmiR1eUM1W1rn6zYcY21A=\r\n=IbF7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.113b1a38e.0","@material/theme":"15.0.0-canary.113b1a38e.0","@material/animation":"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-indicator_15.0.0-canary.113b1a38e.0_1681163584320_0.24606151104850027","host":"s3://npm-registry-packages"}},"15.0.0-canary.ea2191426.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.ea2191426.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c20771d5ebe17f2e34842956b9e33683df7f0ee1","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.ea2191426.0.tgz","fileCount":38,"integrity":"sha512-nltySLYmB9AoErIsrzaOClWZDa9X+b/zznZyPNoGKDATYCajRoL/dtb3QWnLaiXzTF+QSA90P7h46DDLSVIN5Q==","signatures":[{"sig":"MEUCIEZBTXkRipnuCRSxcaEe7HQFDBfZtsyTamSQQldQ74pfAiEA1gnBTrrsq+gS8yT/yLi6JgTbCvX8H7i7t0DrlXE1jQw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNdcuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq1cA/+OtuVjKh3gMkBkobSBW/sL2d89tYCsacT/YjWIg9/M9mqRhH+\r\nD/aXu0gRYx4g4JP/fFonq+pIAYLn+xpUklgX+beMT+qWc4cmPaU9BFLHpkzJ\r\nJ/oTWeN1CRvaAYmPKjmDVCD3WRCdCeu2BuQnhdxeNe/o+PWF6rOq8lilEAva\r\nZpgyOcaP51oIlVu6jbcaT+Lc0S+gMJkY95SIHV577DVyExLiYiglq1DoYmyI\r\nQUg4TQHG5bfMQH2md3y+TJ3Kqh0r3demr/ezzlCab8tDCgoCA6beLDD8XLq8\r\nSKCj4Mvf/Hw6w2l/Gsa7atFLSBY9CPXzm2KRjiRRIgRBbvcTdkYUX9xk4KBI\r\nPVwtiiR9y0txAT/z68o11Qp9eTM4KxHRX7EWE3H0xPv3FddbDnmULA7Yu9px\r\na2Qhp4/gMXq/bsBkpWrlrOJd80Zw2bs+oxAp+Tio3AfMHkyyC0bjpi8TnUZz\r\nL1cYEuHf+5F0oPUJWKRT18jaV5PketT5SeiOaaZAOJQzFOm8q3dGmxLtvuJG\r\nvLivfzTAz6DMiyE66QTG6VxEIT2zhu4COi3IAqPPNi5J61q7muikqXa5sRLE\r\n5UhjMYRgWZbtI9ulYEwL+uM9V2Mm6KM1sJPHvdi5KyhUIHuVno4PaNsAGMGm\r\nZp/OoxAI/B2pGUtzE6WEhSGyXr8QFtfO8io=\r\n=buUU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.ea2191426.0","@material/theme":"15.0.0-canary.ea2191426.0","@material/animation":"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-indicator_15.0.0-canary.ea2191426.0_1681250094415_0.5284974030491307","host":"s3://npm-registry-packages"}},"15.0.0-canary.5a5c38538.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.5a5c38538.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ee9f751a7f6ccb64a095c39ec9fd2c27911c4f14","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.5a5c38538.0.tgz","fileCount":38,"integrity":"sha512-0BYfy572rs2XLgJl9FVz+kKFQwclGZXWmQr2WNIRDmn+UwW+26wHVWwwoZihZJIOc1AIZgby93AlmnaZTfY4/w==","signatures":[{"sig":"MEQCIE1xdhc2UKhrFmePsSyrsdmbPjUAGeAfS7iKHnfC+ZjSAiBR94b6RcYjDbQHqpNltyhq6zdJOJLBkV/3VPV4QaLPKg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNd9RACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrVSQ/9FHOo2yq/91ow0A1obTysSZzDWt6dUoSdQLSefdBc+Iy1sSfj\r\nkX2t0UZOMrL+LERKP/WE7iUt+gQ6pU8gTvoGobGU9eiEND+eEEdMu1MDPcZC\r\nXxLf62l1nhpnPKBWteufcaFum+rfsKb9j9S3Q5TS9wLXT+h/dZACC9Rarj5+\r\nDl97/MHTCqKKs30khwh/I/bWlWXrn+Mqv3axWoAsmlINM6/QVO1/HLH/IpDd\r\naQ//vV+xFZfG6Lsl1iFa2JuG/rBtZUxpNygzvJyGlMzvrnOAhpD0JOJ0Jr8v\r\nOhdhKeTuC3rsyvltnSvCEV66Y4rAaNtzk09p5MqkHc7t9G7Uc4LYJGBHGYZU\r\n2ho+fMn91Rw6DDdIlz9irqDNP3zqojLQ+BqIA6eeplwu5vYHhOKzEM8i18F3\r\nJyzUCXI299LtFKNlCZFIMDyHQ21i/Fqv7PYbXzQVaa60rCwKPI9EIM4uWGrV\r\nwBNERFNGoYHnd2btjdlxY355VwVq9k+dePc2QM3cGHDcvWtEEiAlrRuj8EAP\r\nhmqjwqwLxsaCMqh2yHm0PF83IS7srgG8PItS/wrqW0wZQk7fzQfE+Gan2tUn\r\nuhHiUpNXz5D3sk62MshGuK8juV+xHw1BlQ4Tq95P5xUa7nCHd9ErUnKl4lDE\r\n6oP7P4mlQXtsDvC5B+5/dWzRS1x+K/kudkk=\r\n=Ienj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.5a5c38538.0","@material/theme":"15.0.0-canary.5a5c38538.0","@material/animation":"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-indicator_15.0.0-canary.5a5c38538.0_1681252177574_0.18771125392186883","host":"s3://npm-registry-packages"}},"15.0.0-canary.e4b5ea7eb.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.e4b5ea7eb.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"739cd1a7d90488d6cb63c26b130d755278ce4766","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.e4b5ea7eb.0.tgz","fileCount":38,"integrity":"sha512-tHg98HhN1YU6h3DKGQTc87ghkopf0Qj7JvNSS03ED7MduZbyNm9iP3qcAYqiHmHTSuQVp/WX2YbwOGDS7Tl5yQ==","signatures":[{"sig":"MEYCIQD1s9m2l1BC4hV+VSrPeDMTTHFKyRqCkvjfypxkmGRv0QIhAM/n4P8cYGgp0dWwoEPNasv7eBLucrqPwDfV9yUZIBsS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNedBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpB5g/+MfVtx+PLt02SVR6Ta4SIUfFKocu22lemD/gOmA9Xhlkvo5xs\r\n3JPVX9ksurvuOTo8lqoEq+06hIiY6Sk9bo/UTV7zGcEf+GZ1Qkq77cPSmzzg\r\nhCuNXCaA+X3zmDcU23ktedBn/NgQYQE6opkQgiX0rJJNMFBzkJEKu3q/UMZ0\r\n4AfaWmx8xdQCsVoTG2+RPSR1jP99UKrEI6+y0zZtIf5UxfL6prWsom1kWSfw\r\nM9o1X5jfGKaazQuTS5JtpBCzD2bdUhFHU5h+eBfTJ6fptRa5KYFZMP32TBtr\r\n+4HY1lwaeK0mVgyeXutITLbT/lotb4uIJBVAON7wqtpX9iovvtN1XhbAEly8\r\nKciz/voRY3+qS0EsBhNFKDU0fY6y2EC05VzGE6Kb8ovonb46dfbs3TyAjZlu\r\nrYkebFIjRgKjRP/C7X2xejnVI/Po1eBmyEp3DQ25D8dgCo9FJe8j713Cne/E\r\njaArQyl1uBh+5B1pxct72QVqmjm33CbYb5lfEcQKuhDftFxePmBsAYpREDoR\r\nZYHEW20OrcEiiLWssuZIvuebABPEFZq3jchZFnCTYdawHOcDCx+6cko2JugW\r\nSfT9ITBAJMRmfUlSp4MY1+H4sH12L8TrZz9AtSy7k3s56+0amwFMuQPa0ZRh\r\nERb7M5zPlo9sjTcfv2XWxh75lb8WjBFyBWs=\r\n=Keso\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.e4b5ea7eb.0","@material/theme":"15.0.0-canary.e4b5ea7eb.0","@material/animation":"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-indicator_15.0.0-canary.e4b5ea7eb.0_1681254209223_0.3660456622238175","host":"s3://npm-registry-packages"}},"15.0.0-canary.a094dd9c1.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.a094dd9c1.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ad3aeba2825aba4f5ba855786e983f0847c6d7f4","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.a094dd9c1.0.tgz","fileCount":38,"integrity":"sha512-e5pl3CDYSay4yWUHmhUuZtnJaZ362/zo8Ox3gGICNrKlGTF2P7pi6CysSk7gGzVtlQc1Cwg3bV7KZZs2P+2c5Q==","signatures":[{"sig":"MEYCIQD4roURad/G1CxLMK/WIkKH1XREsGgFJQNnlhk8FS5YZAIhAIS36HYGvRIuWmkHByU7RlNgRIGh81R148FgUGyCk4tm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkOdarACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrn1hAAj9DqMU6/DCA6X8Uq/8tD27lCGmdazZT8EC8kXWhOdH8SbL3c\r\nT0DF5KhmmhmtO6B1NmZ7M214nijrZctMv9C8ltpCN9YlXXGBxLhsY8ub2tsm\r\ng6kLrje/nBLA+x0jWkYjyYUsANH+LDzvq/MEKroazi8dPBy2DYjggFF9zeEn\r\n5FG+5+6fukDsmhU5b3aKmqxBv+DecqxvOE7FeMriBwElI0imFwrT2IED4n5C\r\nwH21jRL5WJSfz5bEBV/pro6SOiI0W7tTu5S59YQCHWaPAtdYNkPrIA6krF/f\r\n35MjWnm2TDNKHhLmFnzZiABevJ/k9Gu2Lxyoy5tOLRy5grhiZSWiNdZNysFf\r\nJODQ3dcsLOPq56diOBhPXFytWfvJNqUZECNMpHLeEFE3aqrQj4qUI2sDAOv0\r\nE9jntH/Hoh4uoqVl5w6MoH9E8eB5lOjOgbwLmA+yvoskZoFXIG09L3Cgwspc\r\nuslNqgoVHPWtzBR6gDb2JJ6IecLYSvJ2wSH3ok1lWEHSsyRd78at3pbRqyWX\r\nfIhrnegzc3qSnqzneQfCDmR/Lj4eOtsl7BfuKleHzHCU3DHMa5wO1+l0jQl/\r\nHGIstthuJC28sB07ZMc53l+pxeojvv+sjwjGiDCBjA0tUsNnTKuXNXF2kDzc\r\nBw+fnby2kPqjDvbVgXHT77QgnqnqOF42ERQ=\r\n=8Kds\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.a094dd9c1.0","@material/theme":"15.0.0-canary.a094dd9c1.0","@material/animation":"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-indicator_15.0.0-canary.a094dd9c1.0_1681512107437_0.009904730861383548","host":"s3://npm-registry-packages"}},"15.0.0-canary.f771b091c.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.f771b091c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"70b1e820b2a2477d343366d9ffca3b126e409329","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.f771b091c.0.tgz","fileCount":38,"integrity":"sha512-98WQcMPkYRqccv1AyWSHpdcbZUaTS0ixtnNCtwGTfyVShNH0qYHOguBWrDQVnZ/AKynFKI3W0UAg3143hhHUTA==","signatures":[{"sig":"MEYCIQDAeJZ9YQ1HHKwhs0AdET6sIWCRGjmxrJUs0y48YkocGgIhAOklHl7M/lvUz1JCgWsufMv2GYgulu4x9CnODCVpar6y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkPWesACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo49w//WgwYjI2ZWEBcHN0rIytP3M772GQjl+8cdiuYj40HcbvwpDt4\r\nMstRs4cRTxpsoebMLevRNLYdHA0q7jwxcpdlhOXnAJbHq9VzXrevRL+X2qWn\r\ngSudlp/Wfzy/t/BJTXOfUnoMCyBcXh6zdj3xIbX48LMw6ttAbKeWn6uLqHOB\r\nqB1IhWmm2833nAXwDa5SNfxdPLTZQ56TS+v7NHvZky+QlzwS/jIvC8HDs5n7\r\nXVisBSGrDuKqMfMjkigHanoHk8LHXlwslJb3Rr6DDZUWt5GvNGXSeDneDp2j\r\nlit1TMp0XqITaUrclLe08hFiLBSer7IxmmXMcWiZ/BrxdgbAQYFo0tRWyipR\r\nTpWMy7EXQzNrlNiKS7eshH1J2aqTLh10nU0O9vaUJe/0+WkHXUiWWRW7qdWS\r\n50D77H1odBw5BDF3O338kfX4YUcXlmhZsM3elJ8PqirWI5Q7ianGBCc6ill6\r\ngU2WxFF13RJN8g4ifsPqZO+vg8pofwZTFaSCO8tH3+bQROnIcaBijajfWyZU\r\nW0pjpDwrLO4edxnbPCT7eMamumxFfCBXMDH2DcQH4kL0XK7bcH3sAOWEbPEb\r\n758xsIG577KKs6nIFIh2BDJu1KTuXyJ7Eo2o3pjGMGxR/Tbd5wQWEuybtCyc\r\nUGsEnmzwa1vxfGtgDoGH4JDj0hcOTFXH4+8=\r\n=r2y0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.f771b091c.0","@material/theme":"15.0.0-canary.f771b091c.0","@material/animation":"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-indicator_15.0.0-canary.f771b091c.0_1681745835873_0.5739577266388922","host":"s3://npm-registry-packages"}},"15.0.0-canary.79b1b612b.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.79b1b612b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"36c5be853f957d2be652b6efc0e3acf5a902193a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.79b1b612b.0.tgz","fileCount":38,"integrity":"sha512-ElCheXMpja9tNEge9AGpIiATOvea2QumO+ICL0jwmw+e4N17VGVvGpIK8M5I4fShhytb9+hoF/dqRa8OXqCpoQ==","signatures":[{"sig":"MEUCIC64R/8TsVPSVi00cbfJpJNXY3ncuYk5xhnlzkc2zMhfAiEAod1ISUm+4A6pkg6eoGbOzCmom0920+kvwdWABIsh7Mg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQHulACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqszQ//YiXsfWMVP1e08OFHWcTgtvXBwuaPSTavaDF0GXrOogyYNMxJ\r\nHED78ok3s5fIgmd5ZQ7m/MJfKejx0wYUm+Cb9kDNqmE0TfSIqiHfAqh26Z9v\r\n9Y9QaLwTaFsoO8BGHlYyA6G6+ct/mz79KyltxMNkhJhxwBX1sADJRZs2nz2D\r\nkUPc+bY8uF+M5gaK8a00lJVkKnxvL3WDtsu3yH/mxIa4f7sDu6v8/dGoInVR\r\nWdpGjDvxccqS/ntzHh9IxCHxvCv7DnfZIG0Kikm5vpHzLHPKPBHfxW+Tldsb\r\nnLhEgH67DZwX2b06PYCSjP98FEaaNgwe5C59V+aYS+3SKOf37FprDHMn+2Jw\r\nTYaGqn+ulB/ym35bgueyb8/VlBwS8eROLo2l4NDN3xRHCwR9pX/4ygBhhZy1\r\n+SYVtjz8wwB6XOLBvJ6XWi5wxGo+UcQRTHd3zlLM8eVjmLMcmsQ1NLFbIJju\r\nsH5tg/qRx3so7FzC3vX+6KXYCTkhfqJb8JraUGp676kfjr6+MSasTtYF2cJd\r\nEIY/xRlA/Cp10e8QN4hSLCkU/JD0E+vy3k1AenR3L8kUNKYoaSg7K4xUJKoP\r\n3Sqlt0b9nQAx/MMBSIek2aHIM9EhzfQIMPEbsKcdzq5NrV06dmEyXXHau6VZ\r\nfbLP45xC5heYCRFpxhfHvbZasrhEXIs06DU=\r\n=mB6s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.79b1b612b.0","@material/theme":"15.0.0-canary.79b1b612b.0","@material/animation":"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-indicator_15.0.0-canary.79b1b612b.0_1681947557115_0.12395109435015339","host":"s3://npm-registry-packages"}},"15.0.0-canary.6f50071e5.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.6f50071e5.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"08e642f5b0e24440bc2767cded372d8e5a946965","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.6f50071e5.0.tgz","fileCount":38,"integrity":"sha512-B0a87+8PFZ1WCBGTKidxrvWfWlEGxPmxdzVmkYX1SsBPo+7UwM8oKlOyGkGXHuv/s4jTTO5LaBaqNlLwNNjCAQ==","signatures":[{"sig":"MEQCIBb5HvfH8IDOGvulH1ffjxCoEy/7m/jkA1n0+J0ON8YWAiBaF/c59tusyMWU8tRhCvmQw07VqE1/mxaW6ksBtGvtYA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQX2qACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoFKw//b9DjKgYPbW4Jok+kLD8BqV331brl9J/3Mkci7ChbHZKZVy+A\r\nM4XF7GHIl79pG3kbDRmOiQBBqPetrjuzXUKsA0alOqXQMss9H2cRy811UgRU\r\nkdXsgoihvRVckCz8OAlvQJ+Fyphz1q2gLk9Ha9i3ZJKMcrLJqWWeFf6XNwjz\r\nl/OwKSpbMq3LAvdBZR3klbUh72pRajamJDmIGRlQpCWNJ2oN9xi5I9UadQSQ\r\nfPaabY73ueEmQJXh2+pl4o2LlJSn0tcKbGHSNSznn4bUhAUjaY33ued1bHhK\r\ngJEc4SSjtk2NQgLhKenWS/OUfxyPk8CpkSMTxyAllehMJK7pf9c/sxyhvLn4\r\noBc8pEjXK3EBCTSypom0oio4jZopIyF4RuZOoqXJJ2/nChPNC0n+v91fnID9\r\nU971aKWes3t0B/AyLu9BV9a/qrS4kAcy+tdRFUiHxj/hJiuf6jZHQNWSpG4h\r\ntRGAR+qpvyCUme1tUTIe/gQWI8Z2CA+d4DPVh0ctLV18moJj0JEQu0/3FCF2\r\nN0OXsVdEsiPzG1Menidomn2lbt06iTl5CRjo35vb7POwdRmqIJs6vLyrncLw\r\nlm/eqNebAPaBMWtjE4E9O5YWeL2DbYStWUWMpyI46ehy9IDnsX3QggjZLJVZ\r\n3ePLx00hhNMFZ20eTIWC4J0JllHleTMKfUc=\r\n=PFrg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.6f50071e5.0","@material/theme":"15.0.0-canary.6f50071e5.0","@material/animation":"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-indicator_15.0.0-canary.6f50071e5.0_1682013609843_0.03363321300068689","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef754381c.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.ef754381c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"10dfd2a97e1dcd6117d0b0a20d5dd939688af83b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.ef754381c.0.tgz","fileCount":38,"integrity":"sha512-xfSDFmMGyUylqypduozyuu5/PLs4fczKtnT9A9sEr+v8oY1d1dVTGXtXe0f6aV1iBGPSZ2FYxgDPDhxJ3P0ztA==","signatures":[{"sig":"MEUCIBiCuEtrSKIIGm1uzUSu7rmtR8agdhbxJAZgY1Wfxl9SAiEA4rtCdVVG3PeJUCp2JKwCIjGs7mJ1VUjppB2OiItCLDE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkRuuFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoIPRAAmcRt/kDww5K8whdH07h9gYLEuuSleT4Y7WZ7xG9gC9/5YGB9\r\nvGDzs7wJQOi+S/SHCbhR9maTr40TP7/OH8x5jZ3iYa2za8pe9YvTTx7gVzjw\r\nQ8Y5pVaoGeaZtvqsQ9YoM+YAQ83fzEmQSbMzjjCYSI2P7IjoqktmdAtTGuey\r\ntGiErmvi1GH/2A67w7lXF3PbAknmoPeKXT+hd42AGozdRCBhC2O9gnWZ8Yk/\r\n7LkM0J1xXmr/TP0EAytpSEzwBXkxbMBi0fFJIgX+Yj6JjAIJfML4rD2t4dCo\r\nfSxZETPZFbv4WS84NlWSiZ0MuIFLZ942CqkSVbec1ckxlAquWwLlJW5X8qXj\r\nMNPwRKF4Awn9mB87ma/GnDIJoYaPu1ryVMonQL3nY4/x+8usbmSwkIXQn45t\r\nFhz/zPgpPhcdsleljcUT6wUqEcB1uhjpVT9j0guOg151S2FS+bFCoJZOQlHO\r\nFO1+1d+BgkahHVQYCR8x1Sny25S3hrOCvjhqIpXE33BqhqlYNOwWv8rIZmL4\r\nfSeOyPlGmw9cUbWqVSYMJnPrOHMsZkn3St72e9dJfDEirAUT1sfQaKl4bQQW\r\nJJiuOy/xbswCOSU59Pxu3s2p2EDifKsrrKQSzHeTWU7/UGklPT0V3XCx28Ym\r\nwbzYpYhOQH8j91f6xFArRwkztBAELLp2Shk=\r\n=YOqs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.ef754381c.0","@material/theme":"15.0.0-canary.ef754381c.0","@material/animation":"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-indicator_15.0.0-canary.ef754381c.0_1682369413209_0.5021494178449346","host":"s3://npm-registry-packages"}},"15.0.0-canary.69ebf61ea.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.69ebf61ea.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"7c918a5e04c98de88dc1eb0f80ca663bfc2ce55a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.69ebf61ea.0.tgz","fileCount":38,"integrity":"sha512-6fbxPBeSuQ02E+1IQVfcVXGHtYgtnA+zocqXVZnQyKBg0Sdp+4En8UeFJIkTAsMuR0GD99rdDZ88Oofi7q3Yiw==","signatures":[{"sig":"MEQCIEufN4CrGxr26S59DmFALQkcJHkX5e5bXHJe0RPbuMESAiB0GYPl/S+sOMbzlDt6WZR73U8quyKkeGw0r1qLzTM8Ag==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkSq7ZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrKvxAAhDR+Rw7s+juqkT4+wypEmY0xW5YDuhMx/Lhg/XY6yJrZVHgc\r\nLCkiUNKdcLvOYeL2n7lcMFEs3NmF/n9Sy6CH2KECoNNA5IFhkvKjAr3EK0kw\r\nC0GDzGE4TLW4PecqFBfyJExsr0eCzF+CL3xAwIGVp+oJyiGFcHhFYgkJEvki\r\ndud/wwdhnis5wDx/BxS28w0Lv6fJ20u3+B6XSM29+VuEqg8FLotbPphwzxMQ\r\n5ZBTrNOPgwgs3h+ENf3fDpAqVdmSNukruI44XYnSJaVuRvigX+1q7/3FlgPc\r\nj7kEnpBcYuWbjawyqelmGBE02hg/N73XlrpsmPX667kEAEMSMRC/2woBpztp\r\nt1SIIe13iDeQ+nLItJQl/VjxRRZjStKBgRK1fvlk2OVVHnBWs9Tehxb9M3sa\r\nSfo4/v10qDxWsP5ZhuN8VQKo0TVDzK84/aWA+S4pL7dbhMU68MLS6RSn7gg5\r\n0M6FelrKBea82Eh7A0GRzP0mLUzlXkzxSfFkutCQ3Rz3QXRoXtwfa18sIbuR\r\nX9p4PafkeJTA0R53L1Lgx0DWWToqCCO46K2whmTLD5OgrV5p05b/Bx5/DA4D\r\nsQtRoHF5EMG3xIe4Cw/GxvllVpGhG7t1N6aWsRGmqSpCVBqDBa8iRQ/Em6za\r\nT4yk3oENNpgMirM+m+5zMOzaXo7c4XBGG/E=\r\n=J+JI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.69ebf61ea.0","@material/theme":"15.0.0-canary.69ebf61ea.0","@material/animation":"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-indicator_15.0.0-canary.69ebf61ea.0_1682616025061_0.7788411797398664","host":"s3://npm-registry-packages"}},"15.0.0-canary.b90be86de.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.b90be86de.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"23941ec7898797442bdc34485f0656a12e326fb3","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.b90be86de.0.tgz","fileCount":38,"integrity":"sha512-p6hOjI/qFKSD7AULHEogl6nFVGHQiumPtU3JA9/mWHh0PUB4N4SLqzPW5TDDnqiL/nXmqg7BmOBpSVPg+NcKaw==","signatures":[{"sig":"MEQCICdmQ0UEMHVkzyFFYAcWrx8A8BRgzhMxpL9EhySC3CxiAiB7OpEDrqf/YqVf9aOpgiQNJiPTYalNAENrAml2vFnpsg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkTGLmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrH7xAAhOFTjrbmggL8NcVq/jVq5TjhFYxBve8EqkWEWfudwfXRSjCB\r\nf3y1nu+ePEO4KB8GDqH/8/Ed8WSpbdoAx1LeYs1Plg6/VEa6j5me97WIPRIj\r\n8FUI1CIvgxE5ZpBcNSH+skn1nm9GxA7MB+1PKVff6hx2wKX3ps/JM4/0MEtG\r\nY+Vj6p/JAmn7sXu7SskuJckuP3Papg/SchN5jdQvsl3ztsIK9JeO205oFeWx\r\njNj2BGgX7rhKXFwS8dLAMpTj8Votra2kgy0B0HwZS0orsWVrR5IFRY+7n1p/\r\ntvbjJlSholwuWJgoVJ7uKoMKTGcU/r5u6MDIHJAO3GrnGcRgX9BKkBehhV4D\r\nSQu08AFBD9yt8sUD6c14wlhOvakuxgvMKn22LVkmkLaOxTxAGE3Li8es3MSW\r\njp6dzoQU+ZflZxaqoyn6AENwJkcpmSXBpQ2ArgenUfvnfSlYREn+Vh8DFzLc\r\nxmqKPa72j+mnITgjNobrIP83AvnCxE6wtqKBK3f06iwdN/haJBaVuDYEj+rX\r\n3Y8GwWGyTucDPdMRHk5mmRW8lXtcu4uvMfMST0Q9zf8YtdIHeAkY5qMaDZGk\r\nq/Oh6Q1Z816W66fhdv8h8htVmt6xnWXqdc2mt1XI6s4fE6aD1Cop/iTCzvih\r\nUs8AGkwPJsACPdlv7aRx164mDba0A2qsqmo=\r\n=E0j/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.b90be86de.0","@material/theme":"15.0.0-canary.b90be86de.0","@material/animation":"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-indicator_15.0.0-canary.b90be86de.0_1682727653860_0.5614135983551649","host":"s3://npm-registry-packages"}},"15.0.0-canary.51f9c0c28.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.51f9c0c28.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"3991b9a9732400e38efbd26cc62ab6c7070b97f1","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.51f9c0c28.0.tgz","fileCount":38,"integrity":"sha512-C5DBeiVgR75+Du4MdSdfPmBJ/AYhMyvM2nG+2PBqR5h1recM5+ocypeEtmZI9foJaPRHypc3fNTW/mdxV7c3dA==","signatures":[{"sig":"MEUCIQDZXoxuIxjv7CUjLOgHjtOzdpdaHl5RbJXY7BjUVydN4wIgSCvvWndMyPd4siRGCIJFLjOVl/cqfffZc7jkMEF+or4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkTGUwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpTkg//YeHXeGRxDduE5zrql9P1VKQS3O0Q+Rmg3dMfA6k/Cx49PuAa\r\nbJOz5OcOomEwGUcSNLzOaYgbLgRZpDrURFZGHmNRBZ/aC2H/rIt022AjQUJ7\r\ntdkgj4XRxpyNXj3C+lq8vhlHen4aNxr8Nz/3gb+tI4E/63RIhP9Vlu7n5k80\r\n9xHUPNTbM0uZK9kvyXD0SLMUGOWtVRjyFm2qfmaGNR+ZBWbLIHWUHjT5btkY\r\n0QNlZFcoTOkmr7CmDJX5/m6LxYmR0OySRSiBg8snLWmBBPbtPSbgLeRbFap9\r\nlj5gptxMa97bHgf152cS/L7yGpADyb5b+s1ee9H69gBk4bvxKdpimtbXvJ5V\r\nYRgLs6me/t0qjwyoc4UOrPJ8bLQ4P0fPfXBRww1SImY7VslIJ3tc8a9/Y7QG\r\n9w7fPrag085wEssjXb540XoggNMhCSjz+mXJAHquJ2h9iW2ha3XvcLWP8vMm\r\no3d4uvNHfnEJfIBhQKNu6z78kGx+9ndvy8qAFmBPcb6qI3jkDWaH2Rfyb7uo\r\ny02WXr7qPUxSh9LrBI46+shguqOJqadZrU4JfVGoRrgCQfsoXs1jbj5y5oji\r\n3VLFdZYtRnnBmhxgFtWsIgAgbGSwCSLJgrVudKbHHu0xPmQPmCt1mrQgL8FC\r\nRMPbcHQml85AtBYxBou8b6Mb1wfshhN926g=\r\n=1yM+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.51f9c0c28.0","@material/theme":"15.0.0-canary.51f9c0c28.0","@material/animation":"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-indicator_15.0.0-canary.51f9c0c28.0_1682728240316_0.4745655131666242","host":"s3://npm-registry-packages"}},"15.0.0-canary.4e840d685.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.4e840d685.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"d31e8f4e03c869489cdb798fe2e65ba496ea3eac","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.4e840d685.0.tgz","fileCount":38,"integrity":"sha512-8l4YX3eO7cUhDg04bqFcdItLSL3oLOPkhNMBtumeelDTV7FD4rKD2+iH4gZ6sT0+eNSV9upJ/CQ9UBhuPfApxA==","signatures":[{"sig":"MEYCIQDV/mOMDm1EUw6711/DM30UUlbwwI0MyHrjSdLfg+9tKgIhAMY+unXGji7wpZG+UnvKzyHQNpIWqfEwNfdMT9A+zxR3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.4e840d685.0","@material/theme":"15.0.0-canary.4e840d685.0","@material/animation":"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-indicator_15.0.0-canary.4e840d685.0_1683041560986_0.026913434536517622","host":"s3://npm-registry-packages"}},"15.0.0-canary.10b8563e4.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.10b8563e4.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"d803920b3b0b03c4bc4e0bd99e8f80fd32cc277f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.10b8563e4.0.tgz","fileCount":38,"integrity":"sha512-mLGKq6wkize5YQzTZe9Sv0N78M/Mb0ZwE8OVCscxYsZ+ywJkx0AgH+kXGYGQxm+RLLeUlzmlbaNM12JC7wftBw==","signatures":[{"sig":"MEUCIQDemTWfmvJJ96mGR0IUjngm8rwkeTMWrZrJWo+mTX5hZgIgd+eGunp73p1bQrkq3Fr1Yg55MOMtGblyPHbcJykMI+8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUZ+VACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoHzBAAjb+sifydovJMyoWacjbBySH2xcaz1IcfDRpWyxD6wFWunM69\r\nTLPZAM4OtemT1qkYGtlO9j2WYU0XUHkgApHCElMpr3GytxwCUkDbigsFTWNa\r\ngmY2UiiuRYXo+AallDhJEItzPrFwI0K/xmrp2/pyAjOwqW+FXRz+AqbZU+Go\r\n+0SFUjfckmd3DptnlUDF9LJ4gAIfV7nMybVqu5XwxSysOm4R0QYkjSMcpOy0\r\nry2JEq8O3l0/fVAue1VKHEA/xBJzaJ5/uuEBQng7CvralGlKihT7bodTaw92\r\niNFb+SOSEFNH0AcsFWeRYgMKRw2B4tMM2NYyfeQxo92wAbqyZtel0lV4LGOI\r\n1bQHDBPp587JML5k9mPgpqa6YXKU8K+qbz5x8yU872P/yEmyHOvbCuFD9SUI\r\nkYW2t0f4wU4ivX7d6/3f3YzsX3hcUO40OEdX/biX3Wt/7k4RzEARs72LOhGK\r\nf6F62HsTWWUuHmD6AdKu4QUPRGaL/qP4uFHmAUHzx2Q9I5EzBHxSHdGweNTb\r\nUFmGhubelAeVHBJsqvFX+t8JrSrcq2hQMFzPKnOkwgIB7ZCm57+Wyry7wqN3\r\nzxeldhFE1UsHHuDxdKgQwugRTddbd0qj7NBrtktG8ES65+Yd5qOI7fGqTft/\r\nnQ+OxRGG/fssZtUdvrKMNPD5GMdRtAoeEdk=\r\n=yWF6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.10b8563e4.0","@material/theme":"15.0.0-canary.10b8563e4.0","@material/animation":"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-indicator_15.0.0-canary.10b8563e4.0_1683070869051_0.9798793030168489","host":"s3://npm-registry-packages"}},"15.0.0-canary.736b7fda4.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.736b7fda4.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"467bb7679b146b71ac7e46828b40a693ad353d28","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.736b7fda4.0.tgz","fileCount":38,"integrity":"sha512-0XgvYCjvn6B4pNdAbwVv0WIPKYqi/mYfsr9lkbsWdKeDhbw/NMpQ1dgGiiGL742O86nig1+6/sXN8jV8AEe+HQ==","signatures":[{"sig":"MEYCIQCtScL4DGWHmnnxBv4qnef+fgGW1xA0I639aXfc67n5lwIhAIID6bPO25bMiSafLTNoFdmMjJ6c1kpRdvdNg+PXX0Ar","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUnj2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoxkw//Ra9oedIt5q7X3lZKHHN5PzCgUnRzLQFFUKY5xyhbA4sDWVT+\r\nYad7xyptiMaYabuW89iKIgJj6yICS9/071vCcx15cDJGDSOq/YVcQcW57nTj\r\nV2+ZyYtNo4ADnxGdo7tCWaOH/7vGxfzr0IAwf+gwrZ5xYVzX60DaqVfAqtfw\r\nN1sjsd2s52SYRiqzoBIgfYAraR2DgxRVaZLNa6kiDSW4RkeDnEueICwxUQC2\r\n42QpzKyiXw8++xvnqZXUFzP/vHHqnU3XIo8wBSG7rAkQx0lwRHwqtopeomhy\r\nkRv9wkhkqk2POa1bwD28f68oL+FHnk+MxOFEZOWA7HhJaW2hzLZk4LSzmkej\r\nIsG7+0JKDbbkzw6KJaZkEsN4pxOGe1oAKJBJ0NmlHAYXizc+4eL+/ylFuiFW\r\nV+kg4tG/fDHFwa92OV0tz5V9ainT1worET+qAX8CBNNdFPFSD84TMdk/o7Lv\r\nioAAIbn076Anxufh02DEBTar1GmYylt8u0Jkiclc9IyAaofyXg6uUnGSNED/\r\nU+Qid3EiVDbg8h0faW/Zvbf5bxZ3jGe7r41QCm8eHGRzebpn7XcIRfj+iP2x\r\n7tCGJfGi4K5W3TVTKn3ZNpXavGz6Fkf8LWy5oR7PKQ67qO6/a1s9NE+DUE+i\r\n6eUux7QiRxrBieGgpzIaGiqEwUeI8ftXL6E=\r\n=CAxw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.736b7fda4.0","@material/theme":"15.0.0-canary.736b7fda4.0","@material/animation":"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-indicator_15.0.0-canary.736b7fda4.0_1683126518293_0.7109566537002954","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e533c5a1.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.0e533c5a1.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e1480caff2a21d6d46f1decf1eb32e89ca61b961","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.0e533c5a1.0.tgz","fileCount":38,"integrity":"sha512-b9Jz3WlOiMqw8llK2DKjOeJIB57bxp0OcliCHSKYQsaGpFtRZ5TS5WKNft3WV3H+vGi37lAaZ4clzZ3/NTKjZg==","signatures":[{"sig":"MEUCIEqw3WLOc25ybKjP0iaX3q1Z+C33XoNSuGt80bdqwSCKAiEA5MfqD8vR63o1ObnbTEAaTFSLCiID5Niswjjp1OnD7c4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.0e533c5a1.0","@material/theme":"15.0.0-canary.0e533c5a1.0","@material/animation":"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-indicator_15.0.0-canary.0e533c5a1.0_1683305727473_0.8689876254925075","host":"s3://npm-registry-packages"}},"15.0.0-canary.5f01c15a2.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.5f01c15a2.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"2afa9d2719e8d95dd1a31f7ea7084c1f56267b26","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.5f01c15a2.0.tgz","fileCount":38,"integrity":"sha512-HFd2t5dmaIxtx6LZQDtGhqNquNV/Bcw12Uk8Ao32TJUk4sc2S0srmvE51fIuob3qDeX8NO//Ysaf6pMmuhKooQ==","signatures":[{"sig":"MEYCIQDxhHykC0qz3Ky714ievPo/WYbrQ0t/pa1JqrAi1IVbBAIhAOgF6CaCXuN01Rp6jHIwQoh8OaUHzuxD1elffEq9Ou63","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.5f01c15a2.0","@material/theme":"15.0.0-canary.5f01c15a2.0","@material/animation":"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-indicator_15.0.0-canary.5f01c15a2.0_1683307533176_0.8178787943162458","host":"s3://npm-registry-packages"}},"15.0.0-canary.3b5b55e31.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.3b5b55e31.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"9b24447804f1c0705989a524ccdf3b03c23b21a6","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.3b5b55e31.0.tgz","fileCount":38,"integrity":"sha512-EEx6trwtWHaD9RE1xBskmy2hSAGe3id+PhXeMRj7TNPZ3g9aFZ/G60y0n8oGs6zg0T8KyHVZ/37fMH/QqoEttg==","signatures":[{"sig":"MEUCIGVRG4PWx6NcfIBWCF8rseaGNZu2um0Wef3IKzL6+kVeAiEA+elaujSkT2Qbmq241R/Ny6xACnz8W67tHuMpZmjOvj8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.3b5b55e31.0","@material/theme":"15.0.0-canary.3b5b55e31.0","@material/animation":"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-indicator_15.0.0-canary.3b5b55e31.0_1683311890597_0.022222333074769063","host":"s3://npm-registry-packages"}},"15.0.0-canary.d0788120f.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.d0788120f.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ac45c2e9b57591b3572169b652dca25dd40b3439","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.d0788120f.0.tgz","fileCount":38,"integrity":"sha512-1Dc8JskQmF+ekZVmatwiRsSLIqqqplK0Fz8XfmLWT6tpsdDagGRCPv6tUDok2O7hLqZw2OtBZvk2lcJJT9n+yg==","signatures":[{"sig":"MEQCICaNTTKfE3wmDqDg05YUxqNIPdIz5AP5Dz16+ml9IA6aAiBFw1pLe3r3Iso+KVXWKQNAE/qLqHgmnPs1Lyh0YcDWOQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.d0788120f.0","@material/theme":"15.0.0-canary.d0788120f.0","@material/animation":"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-indicator_15.0.0-canary.d0788120f.0_1683620537573_0.8477238504652442","host":"s3://npm-registry-packages"}},"15.0.0-canary.f52358dd0.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.f52358dd0.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ed2ba596609dfccf1dd48a1ac20ede9e0b89f24a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.f52358dd0.0.tgz","fileCount":38,"integrity":"sha512-BP3BBcf7Fh9OqnB83F+4CfPNTUfP6C9vaRdWZjwRtOgtfcqye/G642OBaifp+KaqNL2ij14JtVDwNzvxGnr6qA==","signatures":[{"sig":"MEUCIG2Rhzzp0POaRBoQA3xYXr70Zam6B6aJi//UWYHX4lwQAiEA0GLo27Gx/JvO5uhR5H6WExTnMhN/9Quzo63p6bcPvKA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.f52358dd0.0","@material/theme":"15.0.0-canary.f52358dd0.0","@material/animation":"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-indicator_15.0.0-canary.f52358dd0.0_1683901777400_0.7524807403135487","host":"s3://npm-registry-packages"}},"15.0.0-canary.d3c3fbaa3.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.d3c3fbaa3.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@15.0.0-canary.d3c3fbaa3.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"aa23e35aebb81bf55abdff08d30ebbffefa47970","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.d3c3fbaa3.0.tgz","fileCount":38,"integrity":"sha512-ihOCTom8A4dP/aFfjTLw0A+FXMqkak7vVPwjvHJbyaAZWKgxb8HWvRHTIwSa6HLTRRK3h7aknXrfm1qQCRxu6A==","signatures":[{"sig":"MEQCIEUxfWvBHQMi3oaZcjHbMCN9n2n+RqS1hMPFy4SeU4YGAiAQX0AwNdAEejpiU/419t1m6dqIl4fxNtxHmv3QiMeh9A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n","gitHead":"3b7f31c254605439f8fef56301c46f7bcbf3a9fe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.d3c3fbaa3.0","@material/theme":"15.0.0-canary.d3c3fbaa3.0","@material/animation":"15.0.0-canary.d3c3fbaa3.0","@material/feature-targeting":"15.0.0-canary.d3c3fbaa3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-indicator_15.0.0-canary.d3c3fbaa3.0_1683914380124_0.7354899877184611","host":"s3://npm-registry-packages"}},"15.0.0-canary.576d3d2c8.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.576d3d2c8.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"42610e3344cb9df4a193ad6de10a9f876a2e5c34","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.576d3d2c8.0.tgz","fileCount":38,"integrity":"sha512-zPGeBimy+mG0Eo2wc83aKS8cdiyQM7RZW0BFl570BGejzjTRWoW3hoQTqKj/3Ha7/jcN+kMHMFpsNr8toWGC4g==","signatures":[{"sig":"MEUCIQDt9EtrEW+LB4s9N0yOSsFeTNEVDfjJpRZvLLJV0FqB4QIgLB2YQ6pwnCaDFXcrUk6u6OZwoqmO7g9Lw1w1DpuBqBQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.576d3d2c8.0","@material/theme":"15.0.0-canary.576d3d2c8.0","@material/animation":"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-indicator_15.0.0-canary.576d3d2c8.0_1684202355539_0.06539446180622033","host":"s3://npm-registry-packages"}},"15.0.0-canary.19bb36a46.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.19bb36a46.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"f7648d192e8d4fd0f4b92c5524c7d9be26968be5","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.19bb36a46.0.tgz","fileCount":38,"integrity":"sha512-XzGWXEYGk2J7PMrNWmhKPdedQVaAwSqI+zAGCnFZatlLOXSYA8lhZSIJjzB5+o93YA+Uv8bhJHjz9CAZCyGMDQ==","signatures":[{"sig":"MEYCIQDelnvZ894mFfLCAhEBahkgzdmvIvgYEF0vJ8YR8t2s8wIhAMepv0g6SKJ9aVEtTuO3NzHT/J8RGOc6YtRT3iqXc/O6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.19bb36a46.0","@material/theme":"15.0.0-canary.19bb36a46.0","@material/animation":"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-indicator_15.0.0-canary.19bb36a46.0_1684266795467_0.3950132944426492","host":"s3://npm-registry-packages"}},"15.0.0-canary.aa5ac7fe5.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.aa5ac7fe5.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"81153dae98f7e127deff24a4cd5d0e92d496eee3","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.aa5ac7fe5.0.tgz","fileCount":38,"integrity":"sha512-AFygTgQk9o6LZUBvc/lfAboAE7BBZE0tUyLSywXtkyL8nXVwHNdpxkynpsevrlyCaQx7oVPZYPMWMoyVlnw36w==","signatures":[{"sig":"MEQCICILtzxp7V1r4F7go8sfV+dpobgx97kL8NZxFxPVzv50AiAI9ibPyN6+2w+V+Nr9L0PImk4KhoMzKJnnzYLf9MHFyg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.aa5ac7fe5.0","@material/theme":"15.0.0-canary.aa5ac7fe5.0","@material/animation":"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-indicator_15.0.0-canary.aa5ac7fe5.0_1684776279934_0.36061247475835967","host":"s3://npm-registry-packages"}},"15.0.0-canary.90291f2e2.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.90291f2e2.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"bef83866a3770e521d445c8881ec43a17b625744","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.90291f2e2.0.tgz","fileCount":38,"integrity":"sha512-GXdFO6rO1crXcj+todijzZQVACW4EC72XwLAl6z69TKBgZrhwCoZ6RgzX6vIXSs+KoZ0eIyQLr+yQQx1JjDd4w==","signatures":[{"sig":"MEUCIQD49c42r0FuQDDNGDVH1DFPe/CWcM5VePK5nVQVq4xEqAIgGNR7aLKXt5p8Cb55Ej+RMWrbacceFWELLLWaGzMp0JU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.90291f2e2.0","@material/theme":"15.0.0-canary.90291f2e2.0","@material/animation":"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-indicator_15.0.0-canary.90291f2e2.0_1684863713706_0.6801533711050589","host":"s3://npm-registry-packages"}},"15.0.0-canary.446734f27.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.446734f27.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0cdd8098754a0104f0bdbbd93fed8461a00fa2c2","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.446734f27.0.tgz","fileCount":38,"integrity":"sha512-OpLpNp9ja2fi37dLAO02zLSlCc2OYqIsnxbsgVygg95tsmS6RfPsSO+Ri3g/BFopFNttoUuJh5cuHqwh92NljQ==","signatures":[{"sig":"MEQCIFAiU5i/Kkz9sfp6nHAv2f34kdNYQ/WYmdxb48cnNbMNAiA44mAh7huE67lkOtbuizQM7rFy/CkyegqQ6wtvUC7geg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.446734f27.0","@material/theme":"15.0.0-canary.446734f27.0","@material/animation":"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-indicator_15.0.0-canary.446734f27.0_1685483246519_0.5998753315430354","host":"s3://npm-registry-packages"}},"15.0.0-canary.19de312d8.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.19de312d8.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"a570aa567894c9185c4c8e226a5f1a51a4b70ee2","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.19de312d8.0.tgz","fileCount":38,"integrity":"sha512-V/rp/nIqMiHyqg41XTllNFsPTYQd/or6qr1iQusi7rGK8qBhfM1jxf7paPshsXi9E9K/yVyGr7cIl8eFEuj/nA==","signatures":[{"sig":"MEUCIQDd3BSDdkrOZZQTtFd2GjdbLlSO+JCPieF7TDNNk3PqkAIgVlkgxjjqxU6rXzH1FjGYpDHFFA8mObR+AvbEbqyWRTc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.19de312d8.0","@material/theme":"15.0.0-canary.19de312d8.0","@material/animation":"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-indicator_15.0.0-canary.19de312d8.0_1686071837641_0.953116187972781","host":"s3://npm-registry-packages"}},"15.0.0-canary.6081d829b.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.6081d829b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"52990f08a212c175fc4497e66cdf4bbab5167fb9","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.6081d829b.0.tgz","fileCount":38,"integrity":"sha512-+EDY3NhEG4PI4harjsOB8DaIaJmUzs7AWFTr6FE6nbjOqjdBUqDPrK1R73lO9j+gaF6xeeCEkWWHHoFq8kYThw==","signatures":[{"sig":"MEUCIQD9NTRBs+3IcqymIxL6D5ZsMTAPi2pT/U3MN5hKV78yzQIgNy1gDzGq0PrPoaNuMzkWBBIEmFV4prXpQSBgoHG0qbE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.6081d829b.0","@material/theme":"15.0.0-canary.6081d829b.0","@material/animation":"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-indicator_15.0.0-canary.6081d829b.0_1686100396718_0.4969657111864325","host":"s3://npm-registry-packages"}},"15.0.0-canary.b26c34a68.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.b26c34a68.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ede4abab064a72d05c67dc5783209127a47bee59","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.b26c34a68.0.tgz","fileCount":38,"integrity":"sha512-4jxdowad+4khljX5DY6y8ZBpdeAakUWW94vF/VCdrA+LHA86Wfur858Q/Hu7nasz6e3GV0O8PYOqoOYDPNzHMA==","signatures":[{"sig":"MEUCIEPkKxWBOdhbO1NwmxqEGMpkf0Rik/piApYcpP+oBP1dAiEA2QiVICfvc5d+m4gwSrDl7C1VwBU3nYa0ahHQYHMbIMY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.b26c34a68.0","@material/theme":"15.0.0-canary.b26c34a68.0","@material/animation":"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-indicator_15.0.0-canary.b26c34a68.0_1686168986234_0.010025116464393413","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fe911371.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.4fe911371.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"19ae16da506cb704c16193839d08070022837b56","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.4fe911371.0.tgz","fileCount":38,"integrity":"sha512-iIfOX6VP3fem4uYQs+ZyHHEpLqGsr/UR6dkyaNm0KnFkg5fn20SWT7PShHagtTCj8BOmUHRNKqfSFw9XNa04Uw==","signatures":[{"sig":"MEQCIE6Q9f5QGHgbPetg7lUpymwcf+EanafjeTfWwXghKut6AiBJzCHAbntBcYqAQk4nxNxIW+yWtY9Ejq0ZnhIsakplHA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.4fe911371.0","@material/theme":"15.0.0-canary.4fe911371.0","@material/animation":"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-indicator_15.0.0-canary.4fe911371.0_1686179108043_0.4793892934674706","host":"s3://npm-registry-packages"}},"15.0.0-canary.a9ff9866f.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.a9ff9866f.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e71643e86d063c04c1ea2ad5231dbc07f892265f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.a9ff9866f.0.tgz","fileCount":38,"integrity":"sha512-nn0J1685VfppC+Jsa03kEfKwTFSUdgVVDO9Zqr46fLEd+a1k0/tCrJyUEVQrKJylTxrkdMlo6P9Ym3LhMWG3QQ==","signatures":[{"sig":"MEUCIQDuoa84vwUapyIbUso1vSI4e/XcYNZ1BIkfeS8kyqIhbwIgWvH91e1e8vwC1BzjvFqwoZewTdWGyZQVCFX+e8meZ6c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.a9ff9866f.0","@material/theme":"15.0.0-canary.a9ff9866f.0","@material/animation":"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-indicator_15.0.0-canary.a9ff9866f.0_1686656248081_0.38890814635658333","host":"s3://npm-registry-packages"}},"15.0.0-canary.b994146f6.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.b994146f6.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"927843ab41cf6f42e878612e90c93ae3278851ca","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.b994146f6.0.tgz","fileCount":38,"integrity":"sha512-8IH/DmwlZhQlw/2Y3aKrEvjEhZB+qbKUiyaij3BkTAexvyFeDBh5cLNjRpYkUJSGeSPhS6yu4SYzMHPmQEwQmA==","signatures":[{"sig":"MEUCIQCZK7QogB1F6MikaVqb9ud7mtaXvKOnW252I17w2wTWMwIgRGOQj4/BZCYMnzaux5pifoCFlA9azWJbxTsYEPIPu38=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.b994146f6.0","@material/theme":"15.0.0-canary.b994146f6.0","@material/animation":"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-indicator_15.0.0-canary.b994146f6.0_1686776566917_0.3884250576597792","host":"s3://npm-registry-packages"}},"15.0.0-canary.1fb4b1a06.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.1fb4b1a06.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"b5b10d2bb40ef5c07dc1d3dfeca49e8d6fc7493e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.1fb4b1a06.0.tgz","fileCount":38,"integrity":"sha512-IdnR6KYl+2rPjYrjwz7tFpl7JOKhgq9VPaowylXZEY06Ly19s8If+2rU5jedWI8EQZuBJSrhd9rtvb1a/wFVPQ==","signatures":[{"sig":"MEQCIBKaofpHwbRrjWRO+b7l534pyuW9ftMX9fQyDsO8siaKAiBsCvTC3fsuA6jkDBJJP8n0xabd/ceYloH52EjtjXWJEw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.1fb4b1a06.0","@material/theme":"15.0.0-canary.1fb4b1a06.0","@material/animation":"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-indicator_15.0.0-canary.1fb4b1a06.0_1687892178591_0.780189903856094","host":"s3://npm-registry-packages"}},"15.0.0-canary.c64a2776e.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.c64a2776e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ea80c26239516578b137a52c19c434b1dbdbc6fb","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.c64a2776e.0.tgz","fileCount":38,"integrity":"sha512-0K8TP5v1GJwIhNGmAG1Q2zmr8UQA0TYsFyp+/HDQnnoM+OFfgOSbieLwr3UAwIWvW0/V5r0kC5dz63t1JagcXA==","signatures":[{"sig":"MEUCIChuTWwGMXCocNLDn1YcrSaxrjznSpI/x6JdokmqZU3JAiEAzqOt3jdAEaWlBpH4oFXE2gKwrYmHQ4p32CS9PZEy0kw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.c64a2776e.0","@material/theme":"15.0.0-canary.c64a2776e.0","@material/animation":"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-indicator_15.0.0-canary.c64a2776e.0_1687896939142_0.8662924875106175","host":"s3://npm-registry-packages"}},"15.0.0-canary.b05d9eb7c.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.b05d9eb7c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c1fd6f8ba537f797007fbb7759691636c0a3492c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.b05d9eb7c.0.tgz","fileCount":38,"integrity":"sha512-+nWjtGaFpOaRvTBvGj1yk18i9tcKKhugGTesMJmFWNmOyOafkLsY5M7NgElju//YwJdB9rDyt37PI80wJw3/+w==","signatures":[{"sig":"MEQCIDhIApVPFDGmbpuzZb5g1VoHpYz1hHRuJThsgPXcVUvmAiBmiAADTnO04i30wBttI5GM1CBUAuI59SgYxrtHQiD26w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.b05d9eb7c.0","@material/theme":"15.0.0-canary.b05d9eb7c.0","@material/animation":"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-indicator_15.0.0-canary.b05d9eb7c.0_1688055774629_0.9706631467276043","host":"s3://npm-registry-packages"}},"15.0.0-canary.2a9697dc5.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.2a9697dc5.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"1c9bdf3ac575036cab3d983ad1df0a2effabb0b6","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.2a9697dc5.0.tgz","fileCount":38,"integrity":"sha512-j2s+9vqdgg8If2j7ADFx53ISx0iA5CqlqQH0DlDrC/4IWH4d8UEOp/G9RrAmuERQCPXDZiHnMtmlxo+cbDb6Yw==","signatures":[{"sig":"MEYCIQCmPGlRv2to8qTRbsjfiKfQvitkxKXER296CFA/nKpfIgIhAIDZwMld7wfk5CD/UYdHTwSx/P+yOKNVSGJoZyMm0rn2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.2a9697dc5.0","@material/theme":"15.0.0-canary.2a9697dc5.0","@material/animation":"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-indicator_15.0.0-canary.2a9697dc5.0_1688163189497_0.8177056472377799","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c52adeab.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.0c52adeab.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"fc652e53f2ffa4a1ff297c02e05668439a6f56bb","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.0c52adeab.0.tgz","fileCount":38,"integrity":"sha512-DAPkHm+qei/1Q+prHV1w8iU4+xNEJshBvfOAKUArr2M7G5etgpqVJjech/0A6J/qL/uehw8mRFLGb57ZJMJFPw==","signatures":[{"sig":"MEUCIE8emuDN2mAa97FkvmTanphE4Jjt3IUPf/X7SSCQDnrTAiEAk2FPh4E7YVo1jbqc3UMu+7RmQBuNuqZ6cNKqx2REG7A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.0c52adeab.0","@material/theme":"15.0.0-canary.0c52adeab.0","@material/animation":"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-indicator_15.0.0-canary.0c52adeab.0_1688574295427_0.6339338501971661","host":"s3://npm-registry-packages"}},"15.0.0-canary.83355c322.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.83355c322.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"e857b8dcf1514ad25d8aed9f415a2e83042e9591","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.83355c322.0.tgz","fileCount":38,"integrity":"sha512-h7kB6oLInDotINkMBPaa7ZNNHhZx3zpsTeCZA72sezM0EiaUQ/gHzYGaaEFmZEGBLfhqQbJ6oq0l8jKGyXX9lA==","signatures":[{"sig":"MEYCIQDwwAas+Dy+l5iGeu5CXxXNU9Ehvy4GtEzrsah43nGyCwIhAOu3OfgzijLCFtDcTLsL9upEZyqiwoEFA2/6ZsVy3yjF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.83355c322.0","@material/theme":"15.0.0-canary.83355c322.0","@material/animation":"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-indicator_15.0.0-canary.83355c322.0_1689001464131_0.8014542924343173","host":"s3://npm-registry-packages"}},"15.0.0-canary.bc9ae6c9c.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.bc9ae6c9c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"be37f0cf107c23da64efd4f385130d7d22a55b9c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.bc9ae6c9c.0.tgz","fileCount":38,"integrity":"sha512-despCJYi1GrDDq7F2hvLQkObHnSLZPPDxnOzU16zJ6FNYvIdszgfzn2HgAZ6pl5hLOexQ8cla6cAqjTDuaJBhQ==","signatures":[{"sig":"MEYCIQD8E4gxjIuguV4un0ZuGQwNQxIwMTLWl43qcwBHHsKyhAIhAL3U4TrFoKaguFTFx5/YmwzqBe+pkJ9Pd25HOkPXCGIe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.bc9ae6c9c.0","@material/theme":"15.0.0-canary.bc9ae6c9c.0","@material/animation":"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-indicator_15.0.0-canary.bc9ae6c9c.0_1691097578842_0.9171075648401747","host":"s3://npm-registry-packages"}},"15.0.0-canary.3c44cd956.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.3c44cd956.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"cffc722cb555cb29c91c37af0c6635ca38d2e5ba","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.3c44cd956.0.tgz","fileCount":38,"integrity":"sha512-PyT47vjnWodB5OWWZIpF6x9ZL/kM19/zOwGGR6JBPLTmxZ5/GiQCBu2biZr9L4NxFvG/7WjSXEzpRBYiHibVTA==","signatures":[{"sig":"MEUCIQD2NAwcCKOA9KOCB6Qj8PoNyyARUkpJin2zTaZsvQECfAIgUWvwJcvSPfs+FztSxDXV/lWN+F2SLs4y6I6kLYk/hMM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.3c44cd956.0","@material/theme":"15.0.0-canary.3c44cd956.0","@material/animation":"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-indicator_15.0.0-canary.3c44cd956.0_1691430379164_0.8245434714586792","host":"s3://npm-registry-packages"}},"15.0.0-canary.02702296e.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.02702296e.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"d0e29714b80dff0fcc5105f396c0edbebe874d62","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.02702296e.0.tgz","fileCount":38,"integrity":"sha512-TnWT7sbLbOpYFilaSgR5DGFLxtpAzOMHs0VLTL9RP+wFBoTu5JsNRg+9o2mgFXIdFwYe8YtAx8XFIbCZmmaCPQ==","signatures":[{"sig":"MEUCIAGmvmsMORSyT3La4ZW4DfGBJmOD8TRP9CJKNtayetb3AiEA61+SWAEcDy6l4EpYWt6lt5PIQTKg58FiK2ACPCsDkBY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.02702296e.0","@material/theme":"15.0.0-canary.02702296e.0","@material/animation":"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-indicator_15.0.0-canary.02702296e.0_1692965047131_0.7173872419094498","host":"s3://npm-registry-packages"}},"15.0.0-canary.872b65832.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.872b65832.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"63656b727695e22d0c3d4b54b3d7a394e9f062c6","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.872b65832.0.tgz","fileCount":38,"integrity":"sha512-4ZSiqL9Epl3+R+9ITn2aoZPneVAT+v60fyDmYJxI6tLDRYnjA37LLpxDVEAj7l1oywExuFtVBg6rdu92tuW/1Q==","signatures":[{"sig":"MEUCIBPbIH88pd3ZqGYmhY7fQ0Zo+3lCNlRiOBRFnGZ2faOVAiEAgN1I1ldSEfWSHsIvfsddixXqZ4LQTL8LlGPgCxQqXO0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.872b65832.0","@material/theme":"15.0.0-canary.872b65832.0","@material/animation":"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-indicator_15.0.0-canary.872b65832.0_1693397531392_0.6495958886437205","host":"s3://npm-registry-packages"}},"15.0.0-canary.89b2e4122.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.89b2e4122.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"050b30aca88eee78fb757491b957c80389570a33","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.89b2e4122.0.tgz","fileCount":38,"integrity":"sha512-Hv/h5vR4hsJM8EkqyEuWBEPn1dGIdGddwazo1tmaBD283q5UJgU4l25ocxXFfAcaovvY2Wapo9ve4thjvlGkAQ==","signatures":[{"sig":"MEUCIGTB558M3RdQ95BBVcr0XnnjZa/1Ec4nEb8O2MDuWlaOAiEAm5zkwEA6EN9mlgajF5dly2nSw3qcMeH+CgyZxnijlsY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.89b2e4122.0","@material/theme":"15.0.0-canary.89b2e4122.0","@material/animation":"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-indicator_15.0.0-canary.89b2e4122.0_1693497953736_0.2705185098115346","host":"s3://npm-registry-packages"}},"15.0.0-canary.7a3942e7a.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.7a3942e7a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"9adb0eabddf2276b99301289e7335a9e60d070dd","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.7a3942e7a.0.tgz","fileCount":38,"integrity":"sha512-CHIRWwbFUpVbVIklXjLEAbqlmL7WM5KxyIORoGn0J2+AQl95gBUPNKeriZcNKFp0YW3AGDk376CVutKD74mflw==","signatures":[{"sig":"MEYCIQCD532baraxZViYc1vpsSuq6dWRcbH3LrXG00Yy0hlZ0wIhAKDrUiOnDOpC09xnoYOwkPTn4TBVU5Loq5GowcnV3W/j","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.7a3942e7a.0","@material/theme":"15.0.0-canary.7a3942e7a.0","@material/animation":"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-indicator_15.0.0-canary.7a3942e7a.0_1693507110085_0.12663378701771877","host":"s3://npm-registry-packages"}},"15.0.0-canary.54feb3020.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.54feb3020.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"63a015452217df6310e184b2baec54889f93b95f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.54feb3020.0.tgz","fileCount":38,"integrity":"sha512-i3AKq6qEjcKHiurPxSTO5ePAfs1rPiDZDZf99jAh5ULVyWLxZFs74Wn92EiUog5npGoYbaL0KlR37HUSZV9UOw==","signatures":[{"sig":"MEQCIAaISzXh28zZDxPf9uAN5UDqNTDVG8qYPn3Q6xKXUWwGAiAL4FaFvS+4GNgbAwj4JkPNQ/hsfjLPc42ZvTsK7twCvQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.54feb3020.0","@material/theme":"15.0.0-canary.54feb3020.0","@material/animation":"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-indicator_15.0.0-canary.54feb3020.0_1694466248566_0.1115574943771176","host":"s3://npm-registry-packages"}},"15.0.0-canary.6cda3ce8d.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.6cda3ce8d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"513e7cce1ab45c3d0410957b383a6af3f9d92529","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.6cda3ce8d.0.tgz","fileCount":38,"integrity":"sha512-C9jLU/b5Xe1xasyh/HuCeeKq+Mr+7n0Xs4IuGmN3SDVSoM6gmP9+xC6zDZq32kTrM/3bmaa8ZbzDN0dO2Ha9aw==","signatures":[{"sig":"MEUCIQDhpCuk1zi+gL1+FnXfMlP/f1pxzZsJvfMfRQY/LqAoqgIgL13jMmYAV5ihD5ipxJpVdyXw23p4sInjYH10o/ngvJs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.6cda3ce8d.0","@material/theme":"15.0.0-canary.6cda3ce8d.0","@material/animation":"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-indicator_15.0.0-canary.6cda3ce8d.0_1694483049502_0.29863261313208533","host":"s3://npm-registry-packages"}},"15.0.0-canary.205b20b36.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.205b20b36.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"0431ea014537b5bc6a04473a3f2673eb5a20d48a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.205b20b36.0.tgz","fileCount":38,"integrity":"sha512-IWkbYy+Z6/+UjfLNbXqnVx4LngU+u02ySCbNCvKOpW885uVZZhkEinJFCpEED1RMoeKISXtIgCCqJMC5EQTNzQ==","signatures":[{"sig":"MEQCIEeeXgfLmBnWVuv0FtTCOpGe0+U6REdVCBoqZgcgQd22AiBB8CmmrfsAzbMfUxinZSbTYRCIfaFtA5S6JriY6apfIQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.205b20b36.0","@material/theme":"15.0.0-canary.205b20b36.0","@material/animation":"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-indicator_15.0.0-canary.205b20b36.0_1694625327407_0.36424183574664437","host":"s3://npm-registry-packages"}},"15.0.0-canary.22bf82024.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.22bf82024.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"d1ce8cf4915cc10a967eaf79465ac8e1b8e923ae","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.22bf82024.0.tgz","fileCount":38,"integrity":"sha512-lHL3WQB77hLAXA8TyAcP85a1jX7vpfUGy4dd+lY/BQ9D/Qmw7eljlz3QONi47XKKh+cPi2Gbd9xUQHhyo54iaQ==","signatures":[{"sig":"MEYCIQCmWDUHztaE28VmRG1EqyT8u9Qe0wl2woooJDmA+20GmQIhAJx2IzqIWmQZVDurAn5TOyowx80A+uFabCl8t3jwD7MZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513592},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.22bf82024.0","@material/theme":"15.0.0-canary.22bf82024.0","@material/animation":"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-indicator_15.0.0-canary.22bf82024.0_1695028264767_0.5423141846041606","host":"s3://npm-registry-packages"}},"15.0.0-canary.a246a4439.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.a246a4439.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ed9a9cf50d7175edf32b94d9a199a75656ed5c58","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.a246a4439.0.tgz","fileCount":38,"integrity":"sha512-gG2BgHT+ggKnUOaT8LjmH/+9nknRLh8v9qemrhUkDuCtZ8inlaC33OVbbxfrpQW3J+UzBh5YCUSC+2KrN39uUA==","signatures":[{"sig":"MEYCIQCFXWC0YRruIBrDhSEz4aYkt2/vuEHXRLf2taEGxTrD3AIhAOoAxdwXQVAxVZ8+XTFNr9D9mqCcbljFiE3jt2RI/5EH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513662},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(event: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.a246a4439.0","@material/theme":"15.0.0-canary.a246a4439.0","@material/animation":"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-indicator_15.0.0-canary.a246a4439.0_1695059087836_0.27634663035458895","host":"s3://npm-registry-packages"}},"15.0.0-canary.d153db62b.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.d153db62b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"57e6f8c2dacf67960694550161cb93ff3f1bd36a","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.d153db62b.0.tgz","fileCount":38,"integrity":"sha512-inf+fdfxjHhPDxFz5ZLM/7/VzDpBgcqE31u8Pq+oB7meQlRZAxTw46BhivVR1/2Pw7FiG/eD4a3y7FefCm+8MQ==","signatures":[{"sig":"MEUCIHzICj/MH8+vr2IXjo8BeFyNWdckGgIHOLJPJBVu4Xl9AiEAmK1/3oY6X1YYcy5F/q4MmAYnQgWxM03RW/D6njQnZZU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513662},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(event: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.d153db62b.0","@material/theme":"15.0.0-canary.d153db62b.0","@material/animation":"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-indicator_15.0.0-canary.d153db62b.0_1695150842527_0.7769540339790564","host":"s3://npm-registry-packages"}},"15.0.0-canary.2528c1c3b.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.2528c1c3b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"f75cfebf0d9ee896564692245351334fb8ff8ffa","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.2528c1c3b.0.tgz","fileCount":38,"integrity":"sha512-re71D+vc4cf3cFZ9kmcNrTW6PWDyvuj/XrxKUIGiPqu9fLBSPHfGUDvvP4x6fq4h8vqwjvrmOEbBkKfVn0AmnQ==","signatures":[{"sig":"MEYCIQCQfj3vSRY2XjMbTNsMqpUjFgH6ACbIZ5D4PFiXYLAoQAIhAN7Ha92PR/HJoXIdQ9295GUXYslp1Gyp9EOMqSemtU+Y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513662},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(event: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.2528c1c3b.0","@material/theme":"15.0.0-canary.2528c1c3b.0","@material/animation":"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-indicator_15.0.0-canary.2528c1c3b.0_1695233125304_0.17884012742502997","host":"s3://npm-registry-packages"}},"15.0.0-canary.1728a6dcf.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.1728a6dcf.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"6e69593f77ee21b78d8f79daf1624d99a67cca6f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.1728a6dcf.0.tgz","fileCount":38,"integrity":"sha512-oxvsK8W9w2mclVBu4kjabhGqJpTvI81ugOdHKU2aIiH2svCzkqcu0qAGcDc38RLFzh7pbWXKqGJ+bRpkHX+9JA==","signatures":[{"sig":"MEYCIQCagTzgZ5FJ9tMZW6pBA6H7OahQmE9hy47JwNzR12LvewIhANMDfBThqlew3MsHQ+2+2z6w9lzTHaqFIWSaaaBF4gBc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513662},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(event: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.1728a6dcf.0","@material/theme":"15.0.0-canary.1728a6dcf.0","@material/animation":"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-indicator_15.0.0-canary.1728a6dcf.0_1695691327707_0.9707873457422498","host":"s3://npm-registry-packages"}},"15.0.0-canary.ebb636f3d.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.ebb636f3d.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"a671db91b22aa9c237c469a8c9ac9b6842ac1f2c","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.ebb636f3d.0.tgz","fileCount":38,"integrity":"sha512-RqhacLQpBSt4nKO2W9pY1+s+ko256ivFDxiGnsTxp2i+GvnwbhJRHpAlaaC8i9F3FOUXUOKZBFb2VolE2ydb3g==","signatures":[{"sig":"MEUCIB+mKQyxsIOlXc3eg7TV03K93LXFcriLBzAsZ3mYAKCwAiEA0PniTKjsnMCQ3vApjluOXTsJOK7JMkknptUpcdT4eYE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513662},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(event: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.ebb636f3d.0","@material/theme":"15.0.0-canary.ebb636f3d.0","@material/animation":"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-indicator_15.0.0-canary.ebb636f3d.0_1696016616390_0.26691030958705175","host":"s3://npm-registry-packages"}},"15.0.0-canary.c0d21ecc9.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.c0d21ecc9.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"8f8b4bbfb372c8331af7794245d56181baac3bbf","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.c0d21ecc9.0.tgz","fileCount":38,"integrity":"sha512-f61qgC6FdNCMMpF33l5DgT8t/MGNgRHBBOyxmi+2vEGbdsznfL+TbxW6ZGNm8SGd/uvwqtxUDZRx0RNfpTSrDg==","signatures":[{"sig":"MEYCIQDZKeWjIqXd3vvAk7ubhmp3ycQLS9QJV15HIEgz6xNODQIhAOqgGgA587CP17xIuTM9L4IwfGDoT8B0swVViOxAHpem","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513662},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(event: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.c0d21ecc9.0","@material/theme":"15.0.0-canary.c0d21ecc9.0","@material/animation":"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-indicator_15.0.0-canary.c0d21ecc9.0_1696880157366_0.4752136771285671","host":"s3://npm-registry-packages"}},"15.0.0-canary.127a44b28.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.127a44b28.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"4f6d87623a29c1fbe89f6fda263f7c1ec28687ca","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.127a44b28.0.tgz","fileCount":38,"integrity":"sha512-5LwmrxYEFxxqAtdkJLX6eoDSfIDWZrY7FaEzd8JkVztl1Hq4skIGlEeYBuHZ3JC5xRKP1PF3aaLnG50jxEIKkg==","signatures":[{"sig":"MEQCIAuwGL7U86WgaYscQZrrllevy3bQteqEo2PXFxhGNeElAiASQ2V0Xdtkb0sAoYBICyC1l+LLLxSC3kefa9LB9rRIZw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513662},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(event: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.127a44b28.0","@material/theme":"15.0.0-canary.127a44b28.0","@material/animation":"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-indicator_15.0.0-canary.127a44b28.0_1697140737801_0.8935593438375218","host":"s3://npm-registry-packages"}},"15.0.0-canary.0ad128337.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.0ad128337.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"6308d38a265b90d854ae70b95ecfc8fb431c3f56","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.0ad128337.0.tgz","fileCount":38,"integrity":"sha512-MXjNzNh9iGSdfwsC2qwSUcVRtjuk3YqibptRp1U9Zo7N9uDYdv2v1/Q0QYFlyQ93qjEiMP3NAEDwTL1a897yvQ==","signatures":[{"sig":"MEQCIEdy6vtPSe6PGeaz2frFa/AKxx+OCR5vGsdqL8otevN0AiAk5ZGhH6Rc6IS8FbfsCE3ZBLRzkI6wrxi50UM2hzufzw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513662},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(event: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.0ad128337.0","@material/theme":"15.0.0-canary.0ad128337.0","@material/animation":"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-indicator_15.0.0-canary.0ad128337.0_1697741452655_0.7563615280163518","host":"s3://npm-registry-packages"}},"15.0.0-canary.9cec94097.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.9cec94097.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"1f19e950c3e4583b61157a275e65e13a53fed696","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.9cec94097.0.tgz","fileCount":38,"integrity":"sha512-fG9I/m4Byo9XX9knp/lrn9f5+Ybgg2Ts4J1SGWR3cRXD3+lg3GIwHD8cNv37qRlRdYWfq7C2XGgxwyoy3mheqg==","signatures":[{"sig":"MEYCIQCdnUC+268yOaHUy7L0GGd/MZ397U9Z8JExObIlOGqEVQIhAMeQNT5ftFUcSrtHlg5qC9EbLPbZMlempl78+q1TL+OC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513662},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(event: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.9cec94097.0","@material/theme":"15.0.0-canary.9cec94097.0","@material/animation":"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-indicator_15.0.0-canary.9cec94097.0_1697756911592_0.4175626796607548","host":"s3://npm-registry-packages"}},"15.0.0-canary.c51a0bbcc.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.c51a0bbcc.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"18fecdc980605d48367fb02aeef255cb4f84bd91","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.c51a0bbcc.0.tgz","fileCount":38,"integrity":"sha512-X/YfOLAY8BcEVoJLTFsvY04QrDg7UoN32gP1JrIY6Mpi0hdIfllYUTqQM/98V5IyQRQlMoBBp6xRQfd/gHzmWg==","signatures":[{"sig":"MEYCIQDOvY3KEg7nzOKsLqMkqCb/s7SgN2cIxt9etLo/Pw+e+QIhAIW4BGKG57cicqD94tlsHZcKJAn8xCvOScMZxJd+evVT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513662},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(event: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.c51a0bbcc.0","@material/theme":"15.0.0-canary.c51a0bbcc.0","@material/animation":"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-indicator_15.0.0-canary.c51a0bbcc.0_1700081888524_0.5309334228095619","host":"s3://npm-registry-packages"}},"15.0.0-canary.d76666ad4.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.d76666ad4.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"3153fe760dbd8cf2d110e17c7aedeae9c00e7e27","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.d76666ad4.0.tgz","fileCount":38,"integrity":"sha512-nl+ix2oaLRIqSLmZ+Mq1UVMxUhtP6E0hI8jMtxfWJjlHE/XIRJynrHmVntINAKSxsiTXUzbzZhiYjGQSyleDyA==","signatures":[{"sig":"MEUCIE3sJ37ayDIu6f4Hu/IGxmbGJfLZV/y4FdrZdkPSFPoLAiEA/aIwFLuQYMS16ILV6rsAsgzgG5PEZrYEjNZEh+7Y+J0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513662},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(event: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.d76666ad4.0","@material/theme":"15.0.0-canary.d76666ad4.0","@material/animation":"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-indicator_15.0.0-canary.d76666ad4.0_1701123153179_0.47563401589532495","host":"s3://npm-registry-packages"}},"15.0.0-canary.8656bf0e0.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.8656bf0e0.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"d757fb04243a8feff08ee93fd4f336ae987387e3","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.8656bf0e0.0.tgz","fileCount":38,"integrity":"sha512-ZFvSZuIVp6JsOeX+Ecuh93ZAsykNUnmjuw+2pfxzUVX0cS3nwpMk4H4T3ouc2NTOv4ZBX50xBkTfVI+FHeIKng==","signatures":[{"sig":"MEYCIQDQW3WQGjVOWE1CC5y6U/oKcbK1CgCshI/sDk+Uf+vN6wIhAOP+DglbS19m1bvfwtxVYLkg3wQPrITemcvPMnpMlIOg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513662},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(event: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.8656bf0e0.0","@material/theme":"15.0.0-canary.8656bf0e0.0","@material/animation":"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-indicator_15.0.0-canary.8656bf0e0.0_1702415882614_0.08394984295038843","host":"s3://npm-registry-packages"}},"15.0.0-canary.7f224ddd4.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.7f224ddd4.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"85f91e23142249d18379cf6415d3b2385ccdee0e","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.7f224ddd4.0.tgz","fileCount":38,"integrity":"sha512-h9Td3MPqbs33spcPS7ecByRHraYgU4tNCZpZzZXw31RypjKvISDv/PS5wcA4RmWqNGih78T7xg4QIGsZg4Pk4w==","signatures":[{"sig":"MEUCIQDU0aUfsmGppo7Bcg12dNpkr1rFbwzzGasOXKj2eXf86QIgGWCNNg/NzuNyqB03zNyb62OjUhmX7kV+XGkNfe3kGIc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513662},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(event: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.7f224ddd4.0","@material/theme":"15.0.0-canary.7f224ddd4.0","@material/animation":"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-indicator_15.0.0-canary.7f224ddd4.0_1703743709418_0.04325665868846906","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0b8a90c0.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.a0b8a90c0.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"3c44948389b71a374f94f8bb28377c8878e6e249","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.a0b8a90c0.0.tgz","fileCount":38,"integrity":"sha512-2r9B+K33YCR2XJru/CxtN3yZPm5tMsdwtPrAa2Za4q5RIxS6eeaLCHH9TpFSUzNIPj+ESyU6NKtcFcpw6+KBdQ==","signatures":[{"sig":"MEYCIQDsu3/1HiwuTVyplTiBtYwhZPF0VqhyQD/OBItDi0a0JAIhAK1+rZX2XtAHsqlZ+mosu65X8Y+xAUdssIDGFB2SbH5y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513662},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(event: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.a0b8a90c0.0","@material/theme":"15.0.0-canary.a0b8a90c0.0","@material/animation":"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-indicator_15.0.0-canary.a0b8a90c0.0_1707333531703_0.6069819671858445","host":"s3://npm-registry-packages"}},"15.0.0-canary.e50b478eb.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.e50b478eb.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"d93e7eb0466627e5ac4efb47c84a299fefd7077b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.e50b478eb.0.tgz","fileCount":38,"integrity":"sha512-6YWHgNWnMQKt29voBuSjb15Zhh839fOIYeX5lZuGBmSyhPVImXsx2ffGmo5BtMAPfnyuDfMHQ2Vpx2jG0a4Pxw==","signatures":[{"sig":"MEUCICusdxIT2EXyTrNywCnsMJr3uE8viV+KeeIMs/YjOGnzAiEAvt8bMDk4PFbrW+yAknnHZ+SrzIsgQUcVw35+A3hRq2o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513662},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(event: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.e50b478eb.0","@material/theme":"15.0.0-canary.e50b478eb.0","@material/animation":"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-indicator_15.0.0-canary.e50b478eb.0_1707415642101_0.4457775012997611","host":"s3://npm-registry-packages"}},"15.0.0-canary.c43b3438b.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.c43b3438b.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ca47c9b9d18528691e6787ec0207e87d7b2f6b9f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.c43b3438b.0.tgz","fileCount":38,"integrity":"sha512-hF5VS440HeA5ua5iVaAZ3B7oa3CyBwPejHM9q10lGeZn152YeSYrUZ1DHETTA50/jtRHltiFyN5hdSYZiGkRCA==","signatures":[{"sig":"MEQCIFe4LiqR9oToXzccyfXO+D6ACKr23QnBTc7NCkHZ8/llAiBRep3u+LFeGocSW3w3MHQFsYKbJxByfdBiUFcMkwoKaQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513662},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(event: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.c43b3438b.0","@material/theme":"15.0.0-canary.c43b3438b.0","@material/animation":"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-indicator_15.0.0-canary.c43b3438b.0_1708719414074_0.5432709450855799","host":"s3://npm-registry-packages"}},"15.0.0-canary.819498d8c.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.819498d8c.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"ce31a722777199298c08db447598879d46c30aa3","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.819498d8c.0.tgz","fileCount":38,"integrity":"sha512-SR3tcIMDYdqV5gvU7UkOxJu2IsTSPAQbSwre1UvRFeOjk3lZ7zBjQ0Kd6mscsYIsIh/LPiyuwDPTGEpuhd3Nqw==","signatures":[{"sig":"MEUCIQCABfL/cTeHq6j6snWZkXe2seR4TLRukmE1l0xotuutWQIgXiqqIe6ZmRIB1IkjKIcmCPNpewILg3o5NkbRzORbTTs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513662},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(event: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.819498d8c.0","@material/theme":"15.0.0-canary.819498d8c.0","@material/animation":"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-indicator_15.0.0-canary.819498d8c.0_1710515640905_0.8570753540904079","host":"s3://npm-registry-packages"}},"15.0.0-canary.453a6248a.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.453a6248a.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"db77ab4ba0ca8a198e300e34cbd8764d5e20b371","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.453a6248a.0.tgz","fileCount":38,"integrity":"sha512-gx51QN1cDeDDUTQbaSqQybBdOOo7iJL48mtdJMmDC7xkP1Cj6ugnqqVO4DPQWdVU4dceJp/Q7mQ7eCuBKTiLHQ==","signatures":[{"sig":"MEYCIQD8ClI4rOopdOE2b6bxij8Yk2leYjWa3LjEeNmQwmuacwIhAMQXFD9AuuUjlLjvotnjVUI3bn3YhtUdJHGhyDPXm/0F","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513662},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(event: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.453a6248a.0","@material/theme":"15.0.0-canary.453a6248a.0","@material/animation":"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-indicator_15.0.0-canary.453a6248a.0_1711386775424_0.1779100076915825","host":"s3://npm-registry-packages"}},"15.0.0-canary.68edc03c6.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.68edc03c6.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"c6e8c3c401d0207eba3964f207537740e737b916","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.68edc03c6.0.tgz","fileCount":38,"integrity":"sha512-+TWwb+pcxhWsHxUABN4mYon4BUdm7WU8f2lo/F2/DoVBmvJCVQ+LuK9iXuIe6NIQzzjRfkOA82G54kxs5M+/0Q==","signatures":[{"sig":"MEUCIQDz7TTdzucpQM5WbkLsdXPIUO3NCvFXLM+/D/owJ8vjiAIgV8iACY4ZRjiJ+0FV+PAccmu/ayr8Ysj0eaIiDOrKmMU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513662},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(event: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.68edc03c6.0","@material/theme":"15.0.0-canary.68edc03c6.0","@material/animation":"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-indicator_15.0.0-canary.68edc03c6.0_1712603101076_0.29987152741319445","host":"s3://npm-registry-packages"}},"15.0.0-canary.5bebc0064.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.5bebc0064.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"00de7e3fd7c0f491a0713578957397e88a66c587","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.5bebc0064.0.tgz","fileCount":38,"integrity":"sha512-S4i4YldIoAM4tprT/y40wMwu3hDFFGs50Q13XN42zGBnR9rsE2FFRmXrBj5BOHsVOljgckBfaVCG4tEvAyHg2w==","signatures":[{"sig":"MEUCIFfUxihPwLFoLs1sCshkkyeOlX0tN3p+YTiHlCQGs5pMAiEAsWb78hofrPkhF31UgsWVtP8Ud8g7fJMXNAEQazaNnBY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513662},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(event: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.5bebc0064.0","@material/theme":"15.0.0-canary.5bebc0064.0","@material/animation":"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-indicator_15.0.0-canary.5bebc0064.0_1712871565753_0.8837791841457323","host":"s3://npm-registry-packages"}},"15.0.0-canary.311f29a60.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.311f29a60.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"762a3fb82d27201ab437639caf5b1b491150c575","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.311f29a60.0.tgz","fileCount":38,"integrity":"sha512-KK9yKXNlMu+KQSn0X/M33JrD6BjmmdnOftatKJT8KBaGMeRo3ELxH3Mo0ofu1Uhzi1vn2wr+zptrkcFIXdNyIQ==","signatures":[{"sig":"MEQCIDl3gEOxCMXhlpV/4VxmT/Lm7jb0AWrnqu0PQ61uZj5aAiBkePRMqNpBlH4bSMkMcsFoKUZADxDP6QymupG6XPrrQA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513662},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(event: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.311f29a60.0","@material/theme":"15.0.0-canary.311f29a60.0","@material/animation":"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-indicator_15.0.0-canary.311f29a60.0_1713895131984_0.9920774062787867","host":"s3://npm-registry-packages"}},"15.0.0-canary.65c10a622.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.65c10a622.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"23d14d294d69a8a0b651b8b732242fa486038d53","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.65c10a622.0.tgz","fileCount":38,"integrity":"sha512-otsBsnBbPcsUClSYOvEmXz8iVsUZ2C25xaFODwYVQjh5VXPJGqD7KmyvDqUxaS4rPjZGswYThfa8gN+UqkuyOQ==","signatures":[{"sig":"MEYCIQCkP+1HdLYAYFM5QVM7qNn1kh9IBQO7AjfpATy79a4mlAIhAJAIIi30dLyPSfVk4USC53eHnWNvZYNSvW91WTkQzJ+l","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513662},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(event: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.65c10a622.0","@material/theme":"15.0.0-canary.65c10a622.0","@material/animation":"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-indicator_15.0.0-canary.65c10a622.0_1714070879442_0.06614974335033863","host":"s3://npm-registry-packages"}},"15.0.0-canary.4b35cb7d0.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.4b35cb7d0.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"bebfd802721f60df4f6d3c905f123fe59baf1f6b","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.4b35cb7d0.0.tgz","fileCount":38,"integrity":"sha512-CvQtsA28GZFMP/Ypdf32xGCHRt9g5zQ/FjHLfOGaqeKZvLR22eRsT81E862jS97YfcAlyMkqGSwBzYNiCSXPJA==","signatures":[{"sig":"MEQCIHCq+M5LV5o6xefy+kdagSc3ozpfb3taIOGh6b0pL5oOAiBfUpG4c2hrbupUPtGKL2C1XsThdbr9FhE227Ul5mT0bg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513662},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(event: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.4b35cb7d0.0","@material/theme":"15.0.0-canary.4b35cb7d0.0","@material/animation":"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-indicator_15.0.0-canary.4b35cb7d0.0_1714651325260_0.401941958339882","host":"s3://npm-registry-packages"}},"15.0.0-canary.f80ac92b0.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.f80ac92b0.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"1d905431bd6535877e3535819c29e2c90c7f7a14","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.f80ac92b0.0.tgz","fileCount":38,"integrity":"sha512-uWjr729WWMU5KAKrHzT/3hNH1Y/UfOkZc1Xy9hhD7pefiCne6CFcwJ4+M7eRN9fVQdUkQRH9NIYSw4PNxIhs3g==","signatures":[{"sig":"MEYCIQDBOf399FZKHQJ/t2G8E/nLT5POD5k9tqCNcti3bEJEGwIhAMiw0Qd6hfPA+lMG7pQoQME3+nYlxzUurhcI85wuQEgc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513662},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(event: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.f80ac92b0.0","@material/theme":"15.0.0-canary.f80ac92b0.0","@material/animation":"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-indicator_15.0.0-canary.f80ac92b0.0_1714651950176_0.2783756344268413","host":"s3://npm-registry-packages"}},"15.0.0-canary.2f5b899bc.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.2f5b899bc.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"8b30e91d22c097baf6abdd026e93c3606d283b10","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.2f5b899bc.0.tgz","fileCount":38,"integrity":"sha512-ik8y+tdOlCGsPCbDzmCNLcYj/RvIr/zDBE9KL6oD0e3rTR4yg875JklNmylthr32/1ZV86BCPk25yOsvOuM43w==","signatures":[{"sig":"MEYCIQCFuVipiJhZLHHbpiioQAkMJkdc7mty4nkRW1mJ7AecUAIhANR8l5tw7ZHZ6O3RjXksuRqUJudkRnboBVgvDbvEVQmc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513662},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(event: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.2f5b899bc.0","@material/theme":"15.0.0-canary.2f5b899bc.0","@material/animation":"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-indicator_15.0.0-canary.2f5b899bc.0_1716213244806_0.5409429328931052","host":"s3://npm-registry-packages"}},"15.0.0-canary.cfec83c74.0":{"name":"@material/tab-indicator","version":"15.0.0-canary.cfec83c74.0","keywords":["material components","material design","tab","indicator"],"license":"MIT","_id":"@material/tab-indicator@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":"9ba62e2f5672f120beb9182618d9af3bb1e8a02f","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.cfec83c74.0.tgz","fileCount":38,"integrity":"sha512-WaeDGi2Msr/recEoyUnhL+IB+bARrFRbYVMvQFmD5PK+Nxq26aCw2UQWmtRnxqc1yMt6j5zTzc6oEfkYXG9ZVA==","signatures":[{"sig":"MEUCIDtFE9SoikbehF6EHslNOe11cn1k63BKNXlsdpCrEkM8AiEAgkbGRLrmPTWn8UTTHrcLMWaCKODKX+ubNAqEEeT/ixQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513662},"main":"dist/mdc.tabIndicator.js","module":"index.js","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(event: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab indicator component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.cfec83c74.0","@material/theme":"15.0.0-canary.cfec83c74.0","@material/animation":"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-indicator_15.0.0-canary.cfec83c74.0_1716231365193_0.7648186681355447","host":"s3://npm-registry-packages"}},"15.0.0-canary.423edc3dc.0":{"name":"@material/tab-indicator","description":"The Material Components for the web tab indicator component","version":"15.0.0-canary.423edc3dc.0","license":"MIT","keywords":["material components","material design","tab","indicator"],"main":"dist/mdc.tabIndicator.js","module":"index.js","sideEffects":false,"repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-tab-indicator"},"dependencies":{"@material/animation":"15.0.0-canary.423edc3dc.0","@material/base":"15.0.0-canary.423edc3dc.0","@material/feature-targeting":"15.0.0-canary.423edc3dc.0","@material/theme":"15.0.0-canary.423edc3dc.0","tslib":"^2.1.0"},"publishConfig":{"access":"public"},"gitHead":"19b2c5a95782b4928b3aecb29a1075c42aee53e5","readme":"\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n \n\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n\n \n\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n\n star\n\n```\n\n##### Sliding Icon Indicator\n\n```html\n\n star\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(event: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\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-indicator@15.0.0-canary.423edc3dc.0","_nodeVersion":"14.21.3","_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","dist":{"integrity":"sha512-tKJ0XQfdz9CYweBXXbsSLrjcsiAQ8U9pgV40Me8s+YBhzZBuk5cvi02OwAPmU9TUwQ1RroxO9EZdciedi07p4A==","shasum":"06d15cde85db3cdeb6882272318fdac1455d2ae0","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.423edc3dc.0.tgz","fileCount":38,"unpackedSize":513662,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCTw9HBXR3YEKcymT7qUa4Gcp2whj3LRorbiokzGY94mAIgQJZcRctQ60F2+5IZ88MPrK5WKk9WppnjP+9Yxohh/uQ="}]},"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tab-indicator_15.0.0-canary.423edc3dc.0_1719425498949_0.8698075385807174"},"_hasShrinkwrap":false}},"time":{"created":"2018-07-30T17:06:34.161Z","modified":"2024-06-26T18:11:39.534Z","0.38.0":"2018-07-30T17:06:34.351Z","0.39.0-0":"2018-08-16T15:15:50.958Z","0.39.0":"2018-08-27T17:40:27.448Z","0.39.1":"2018-08-31T21:36:22.565Z","0.39.2":"2018-09-11T16:54:59.498Z","0.39.3":"2018-09-11T17:18:48.140Z","0.40.0":"2018-09-24T20:00:57.292Z","0.40.1":"2018-10-08T20:54:26.774Z","0.41.0":"2018-10-29T20:21:59.766Z","0.43.0":"2019-01-07T19:49:03.120Z","1.0.0-0":"2019-02-27T23:59:25.996Z","1.0.0-1":"2019-03-04T23:33:18.001Z","1.0.0":"2019-03-06T21:08:09.459Z","1.1.0":"2019-03-26T19:25:50.712Z","2.1.0":"2019-05-06T15:33:41.993Z","2.3.0":"2019-05-28T21:23:42.330Z","3.0.0-alpha.0":"2019-06-12T04:06:46.546Z","3.0.0-alpha.1":"2019-06-12T19:02:05.725Z","3.0.0":"2019-06-25T22:27:51.392Z","3.1.0-alpha.0":"2019-07-16T13:29:08.090Z","3.1.0":"2019-07-22T22:02:32.627Z","4.0.0-alpha.0":"2019-08-07T21:09:18.693Z","4.0.0-canary.0":"2019-09-05T04:37:48.401Z","4.0.0-canary.1":"2019-09-09T20:20:41.603Z","4.0.0-canary.79d881baf.0":"2019-09-13T02:21:31.165Z","4.0.0-canary.e851d4f40.0":"2019-09-13T04:07:18.143Z","4.0.0-canary.905884690.0":"2019-09-16T23:48:05.139Z","4.0.0-canary.199534d61.0":"2019-09-27T18:57:50.726Z","4.0.0-canary.22d7ad2fb.0":"2019-10-15T18:57:11.038Z","4.0.0-canary.735147131.0":"2019-10-16T01:23:29.532Z","4.0.0-canary.062ade5c0.0":"2019-10-17T01:01:31.467Z","4.0.0-canary.774ad4f8.0":"2019-10-17T04:04:29.600Z","4.0.0-canary.5916d18c.0":"2019-10-18T20:08:33.536Z","4.0.0-canary.d4141c95.0":"2019-10-24T01:38:13.830Z","4.0.0-canary.2b878b3e.0":"2019-10-25T02:10:38.263Z","4.0.0-canary.b06c0efe.0":"2019-10-26T01:35:06.526Z","4.0.0-canary.01628efa.0":"2019-10-29T00:02:59.236Z","4.0.0-canary.b5c6d66b.0":"2019-10-29T17:56:41.788Z","4.0.0-canary.cdf858ea.0":"2019-11-01T17:58:52.647Z","4.0.0-canary.719b57e1.0":"2019-11-01T20:01:32.701Z","4.0.0-canary.97cbbdc2.0":"2019-11-01T20:29:07.798Z","4.0.0-canary.8e36b3b7.0":"2019-11-01T21:01:11.804Z","4.0.0-canary.62d3a09b.0":"2019-11-01T21:10:43.064Z","4.0.0":"2019-11-02T18:11:40.145Z","5.0.0-canary.b5eb51e94.0":"2019-11-07T18:33:39.023Z","5.0.0-canary.58500806e.0":"2019-11-08T15:35:43.529Z","5.0.0-canary.66299b646.0":"2019-11-08T20:33:40.173Z","5.0.0-canary.821871e04.0":"2019-11-08T21:28:11.540Z","5.0.0-canary.491fddc31.0":"2019-11-08T22:07:12.868Z","5.0.0-canary.b0cecf145.0":"2019-11-09T18:42:24.766Z","5.0.0-canary.afe0dd1bc.0":"2019-11-11T15:37:40.314Z","5.0.0-canary.b4cfdc40b.0":"2019-11-14T15:58:32.489Z","5.0.0-canary.525989b5d.0":"2019-11-14T23:30:47.661Z","5.0.0-canary.7084b403a.0":"2019-11-15T01:05:54.001Z","5.0.0-canary.3cbee6dac.0":"2019-11-15T22:32:49.148Z","5.0.0-canary.591a6ad44.0":"2019-11-18T23:48:31.376Z","5.0.0-canary.5729943ba.0":"2019-11-20T05:19:24.668Z","5.0.0-canary.e89750dc7.0":"2019-11-27T02:09:43.581Z","5.0.0-canary.3e560b33a.0":"2019-11-27T02:10:33.557Z","5.0.0-canary.7fd17ce5e.0":"2019-11-27T02:10:49.877Z","5.0.0-canary.ec729683b.0":"2019-11-27T15:54:54.070Z","5.0.0-canary.b8bc4a26e.0":"2019-11-27T19:16:45.283Z","5.0.0-canary.f978109c3.0":"2019-12-02T17:07:20.081Z","5.0.0-canary.ad9dfe706.0":"2019-12-03T23:18:03.908Z","5.0.0-canary.5e45d77f3.0":"2019-12-03T23:19:14.692Z","5.0.0-canary.d10e8cdf3.0":"2019-12-03T23:20:15.833Z","5.0.0-canary.a5dbd8a2a.0":"2019-12-03T23:54:59.281Z","5.0.0-canary.ba879b68b.0":"2019-12-04T20:22:41.260Z","5.0.0-canary.aa0eba489.0":"2019-12-06T01:59:06.103Z","5.0.0-canary.cb7b71a86.0":"2019-12-06T23:55:51.194Z","5.0.0-canary.50f110a6c.0":"2019-12-10T16:59:35.265Z","5.0.0-canary.878a08b7c.0":"2019-12-11T20:16:20.654Z","5.0.0-canary.397905b4e.0":"2019-12-12T02:47:15.995Z","5.0.0-canary.1fbf5bd1d.0":"2019-12-12T18:59:15.894Z","5.0.0-canary.b723dfa78.0":"2019-12-12T20:09:44.649Z","5.0.0-canary.1c494e567.0":"2019-12-12T23:36:45.560Z","5.0.0-canary.c9e98a125.0":"2019-12-17T18:09:41.968Z","5.0.0-canary.5ffe8f7e3.0":"2019-12-17T22:33:18.503Z","5.0.0-canary.47949b08e.0":"2019-12-18T17:40:33.497Z","5.0.0-canary.b240bcc1b.0":"2019-12-18T19:16:45.212Z","5.0.0-canary.391674a26.0":"2019-12-18T19:16:59.189Z","5.0.0-canary.c4837746c.0":"2019-12-18T19:34:50.759Z","5.0.0-canary.e41a70425.0":"2019-12-18T23:20:08.338Z","5.0.0-canary.bac43eb43.0":"2019-12-18T23:24:00.883Z","5.0.0-canary.2e491de55.0":"2019-12-19T10:49:46.222Z","5.0.0-canary.ae101c144.0":"2019-12-19T16:24:51.421Z","5.0.0-canary.a51c31f26.0":"2019-12-19T17:14:15.427Z","5.0.0-canary.21fc4e13b.0":"2019-12-19T21:27:04.466Z","5.0.0-canary.d2ae6e17d.0":"2019-12-19T22:24:07.900Z","5.0.0-canary.ba30399ad.0":"2019-12-20T01:09:40.275Z","5.0.0-canary.a08ccec35.0":"2019-12-20T23:26:46.261Z","5.0.0-canary.a2f75105e.0":"2019-12-23T19:47:38.172Z","5.0.0-canary.c054a24c7.0":"2019-12-23T21:49:57.130Z","5.0.0-canary.c6808c51c.0":"2019-12-23T21:54:38.041Z","5.0.0-canary.7bce9cf77.0":"2019-12-26T18:45:31.973Z","5.0.0-canary.c92f038c3.0":"2019-12-30T22:03:01.986Z","5.0.0-canary.1f1ac7558.0":"2020-01-02T20:54:03.692Z","5.0.0-canary.ec26e799c.0":"2020-01-02T21:42:19.724Z","5.0.0-canary.0a40ced40.0":"2020-01-03T17:09:24.317Z","5.0.0-canary.3adf84899.0":"2020-01-03T18:22:21.557Z","5.0.0-canary.0d42ee650.0":"2020-01-03T21:36:57.889Z","5.0.0-canary.847dd1ada.0":"2020-01-06T19:26:17.941Z","5.0.0-canary.39df7e5df.0":"2020-01-07T00:55:23.051Z","5.0.0-canary.f1a2581ab.0":"2020-01-07T14:59:30.665Z","5.0.0-canary.7c7ddf347.0":"2020-01-07T15:15:46.093Z","5.0.0-canary.a1c84d4b5.0":"2020-01-07T18:10:03.015Z","5.0.0-canary.ec9f16578.0":"2020-01-07T19:39:28.236Z","5.0.0-canary.b602226ce.0":"2020-01-07T20:15:09.870Z","5.0.0-canary.b2d2dc08c.0":"2020-01-07T21:25:53.982Z","5.0.0-canary.61f2d7580.0":"2020-01-07T21:39:36.518Z","5.0.0-canary.d1be53a2e.0":"2020-01-07T22:17:09.061Z","5.0.0-canary.9b0d06e32.0":"2020-01-07T22:19:13.322Z","5.0.0-canary.730c807a0.0":"2020-01-07T22:20:51.505Z","5.0.0-canary.2213152cd.0":"2020-01-08T17:22:09.920Z","5.0.0-canary.5750f7169.0":"2020-01-08T17:56:48.170Z","5.0.0-canary.f7abc7a43.0":"2020-01-08T18:27:41.914Z","5.0.0-canary.bf7b4a061.0":"2020-01-08T18:41:29.185Z","5.0.0-canary.784fa7903.0":"2020-01-08T19:10:14.920Z","5.0.0-canary.823c050ba.0":"2020-01-08T20:10:39.365Z","5.0.0-canary.70c708dee.0":"2020-01-08T20:22:12.210Z","5.0.0-canary.5ed9d13d0.0":"2020-01-08T21:42:33.579Z","5.0.0-canary.4819cc7e5.0":"2020-01-08T21:57:59.027Z","5.0.0-canary.fe3ffd2c3.0":"2020-01-08T22:16:09.424Z","5.0.0-canary.c0e850090.0":"2020-01-08T22:23:08.346Z","5.0.0-canary.615f86f38.0":"2020-01-08T22:40:06.643Z","5.0.0-canary.1eb032637.0":"2020-01-08T22:59:54.059Z","5.0.0-canary.5bc5ebfea.0":"2020-01-08T23:00:44.937Z","5.0.0-canary.1112b8def.0":"2020-01-09T22:10:10.440Z","5.0.0-canary.aab102017.0":"2020-01-10T00:12:14.743Z","5.0.0-canary.426913342.0":"2020-01-10T01:44:07.211Z","5.0.0-canary.d4ea9a706.0":"2020-01-10T17:25:14.909Z","5.0.0-canary.7d4ee2996.0":"2020-01-10T17:56:42.757Z","5.0.0-canary.981ec9b6f.0":"2020-01-10T19:26:34.820Z","5.0.0-canary.737da83fc.0":"2020-01-10T21:18:45.007Z","5.0.0-canary.aca8e6c18.0":"2020-01-13T19:32:12.358Z","5.0.0-canary.c38d84e21.0":"2020-01-13T22:13:36.606Z","5.0.0-canary.a4db5fbad.0":"2020-01-14T02:15:19.656Z","5.0.0-canary.faa9af310.0":"2020-01-14T16:52:40.973Z","5.0.0-canary.60354c577.0":"2020-01-14T22:45:51.126Z","5.0.0-canary.d07c78daa.0":"2020-01-14T23:38:26.762Z","5.0.0-canary.8ddd5c6dc.0":"2020-01-15T01:42:57.144Z","5.0.0-canary.a9511d870.0":"2020-01-15T19:10:13.421Z","5.0.0-canary.5d4b82bac.0":"2020-01-15T22:47:56.993Z","5.0.0-canary.7c8583c4c.0":"2020-01-15T22:48:03.833Z","5.0.0-canary.57d0186e4.0":"2020-01-16T18:17:24.922Z","5.0.0-canary.071a6ab70.0":"2020-01-16T18:23:50.495Z","5.0.0-canary.22e0cb618.0":"2020-01-16T18:46:55.618Z","5.0.0-canary.f16f15b8f.0":"2020-01-17T00:06:51.140Z","5.0.0-canary.aa8e43e9a.0":"2020-01-17T00:36:37.111Z","5.0.0-canary.fe1f3ca07.0":"2020-01-17T01:00:13.050Z","5.0.0-canary.d405af26b.0":"2020-01-17T18:17:07.712Z","5.0.0-canary.6e857aae2.0":"2020-01-17T18:20:41.469Z","5.0.0-canary.e2e764f7c.0":"2020-01-17T18:35:54.009Z","5.0.0-canary.7ef986a87.0":"2020-01-17T19:30:45.387Z","5.0.0-canary.29402e2d4.0":"2020-01-17T20:39:42.069Z","5.0.0-canary.2b3ec563c.0":"2020-01-17T23:11:25.172Z","5.0.0-canary.e8a993677.0":"2020-01-21T16:49:36.228Z","5.0.0-canary.cd4903304.0":"2020-01-21T21:37:14.819Z","5.0.0-canary.7e4b04b25.0":"2020-01-21T22:45:53.888Z","5.0.0-canary.ebc296937.0":"2020-01-21T23:44:54.134Z","5.0.0-canary.cf33f113d.0":"2020-01-22T01:22:14.443Z","5.0.0-canary.e1d5f1be5.0":"2020-01-22T16:55:18.723Z","5.0.0-canary.6b6a4ff92.0":"2020-01-22T17:57:36.037Z","5.0.0-canary.6092f71ee.0":"2020-01-22T21:16:47.464Z","5.0.0-canary.d8d95020f.0":"2020-01-22T23:09:21.956Z","5.0.0-canary.b7facc628.0":"2020-01-23T18:12:34.231Z","5.0.0-canary.63f357dbf.0":"2020-01-23T21:55:09.134Z","5.0.0-canary.f2426d26e.0":"2020-01-23T23:55:09.041Z","5.0.0-canary.7f5e0c23f.0":"2020-01-24T16:47:28.901Z","5.0.0-canary.3fc3ab520.0":"2020-01-24T17:20:42.296Z","5.0.0-canary.80a4d326f.0":"2020-01-24T20:45:42.608Z","5.0.0-canary.ef7de4def.0":"2020-01-24T21:32:11.011Z","5.0.0-canary.93e2288b6.0":"2020-01-28T16:55:59.508Z","5.0.0-canary.34ef15f67.0":"2020-01-28T17:24:12.668Z","5.0.0-canary.d3d176ba5.0":"2020-01-28T17:29:18.768Z","5.0.0-canary.32c1df133.0":"2020-01-28T19:43:14.833Z","5.0.0-canary.f3adce86f.0":"2020-01-28T21:48:56.376Z","5.0.0-canary.a4423f890.0":"2020-01-29T21:09:26.981Z","5.0.0-canary.9351f167d.0":"2020-01-29T21:55:30.389Z","5.0.0-canary.29b89dbc1.0":"2020-01-29T22:16:44.390Z","5.0.0-canary.45985457b.0":"2020-01-29T23:32:50.345Z","5.0.0-canary.a1a0deb3e.0":"2020-01-30T17:37:07.580Z","5.0.0-canary.181486643.0":"2020-01-30T20:56:01.540Z","5.0.0-canary.3a85313ac.0":"2020-01-31T16:23:01.224Z","5.0.0-canary.b6c7f624b.0":"2020-01-31T17:02:55.034Z","5.0.0-canary.b3f70ebde.0":"2020-01-31T20:10:01.389Z","5.0.0-canary.3e782d8f8.0":"2020-02-02T01:12:34.856Z","5.0.0-canary.535398572.0":"2020-02-03T18:12:06.451Z","5.0.0-canary.5ff33802c.0":"2020-02-04T18:03:42.304Z","5.0.0-canary.1eb29491c.0":"2020-02-04T21:00:16.848Z","5.0.0-canary.4c7154b26.0":"2020-02-05T16:02:38.582Z","5.0.0-canary.ab5f49a2c.0":"2020-02-05T23:32:58.788Z","5.0.0-canary.c541ebe15.0":"2020-02-06T22:29:45.984Z","5.0.0-canary.98f7faa05.0":"2020-02-07T19:21:08.397Z","5.0.0-canary.b4727e43a.0":"2020-02-07T19:55:21.874Z","5.0.0-canary.91d9d5a65.0":"2020-02-07T22:59:11.587Z","5.0.0-canary.d5c006ed1.0":"2020-02-10T16:48:29.187Z","5.0.0-canary.559f1a570.0":"2020-02-10T17:24:40.266Z","5.0.0-canary.ad3bbf782.0":"2020-02-10T19:11:14.222Z","5.0.0-canary.570d8e49c.0":"2020-02-10T20:43:16.652Z","5.0.0-canary.48b06b89a.0":"2020-02-11T18:43:04.010Z","5.0.0-canary.612443dfb.0":"2020-02-11T19:48:54.063Z","5.0.0-canary.8c11ea2a3.0":"2020-02-12T08:51:17.995Z","5.0.0-canary.b2f3d311e.0":"2020-02-13T21:43:42.580Z","5.0.0-canary.4f488d0ee.0":"2020-02-13T23:06:03.473Z","6.0.0-canary.fe79de07d.0":"2020-02-13T23:23:35.732Z","5.0.0":"2020-02-14T00:08:43.259Z","6.0.0-canary.5e313b1f2.0":"2020-02-14T23:47:58.972Z","6.0.0-canary.6a56f387c.0":"2020-02-18T19:43:23.828Z","6.0.0-canary.bdfd52632.0":"2020-02-19T20:22:21.962Z","6.0.0-canary.ad2e4376a.0":"2020-02-20T23:15:56.637Z","6.0.0-canary.765caef18.0":"2020-02-21T17:32:46.021Z","6.0.0-canary.949562303.0":"2020-02-21T20:37:28.331Z","6.0.0-canary.7ec96974e.0":"2020-02-24T18:57:49.699Z","6.0.0-canary.265ecbad5.0":"2020-02-25T21:00:33.290Z","5.1.0":"2020-02-25T21:37:44.820Z","6.0.0-canary.2cf87456f.0":"2020-02-25T21:38:27.664Z","6.0.0-canary.781434a92.0":"2020-02-25T23:27:45.738Z","6.0.0-canary.d6f60c98b.0":"2020-02-28T22:03:17.256Z","6.0.0-canary.69edc6e28.0":"2020-02-28T22:11:54.902Z","6.0.0-canary.9372e4939.0":"2020-03-03T19:09:49.953Z","6.0.0-canary.9cf5e9842.0":"2020-03-03T23:25:31.122Z","6.0.0-canary.3657f8863.0":"2020-03-04T17:43:58.947Z","6.0.0-canary.98b843417.0":"2020-03-05T18:30:47.242Z","6.0.0-canary.17b9699c4.0":"2020-03-05T19:22:05.944Z","6.0.0-canary.6ee035572.0":"2020-03-09T16:46:18.721Z","6.0.0-canary.bd33cb56b.0":"2020-03-09T17:21:45.036Z","6.0.0-canary.26c049afa.0":"2020-03-10T17:02:12.540Z","6.0.0-canary.1db5c9fc8.0":"2020-03-10T20:36:24.213Z","6.0.0-canary.4971637f4.0":"2020-03-10T22:58:09.129Z","6.0.0-canary.1ae8130ce.0":"2020-03-10T23:05:14.327Z","6.0.0-canary.8639c2690.0":"2020-03-11T06:33:02.470Z","6.0.0-canary.d5808057f.0":"2020-03-11T16:25:20.444Z","6.0.0-canary.b3f58203d.0":"2020-03-11T19:37:52.917Z","6.0.0-canary.bec065920.0":"2020-03-12T20:20:01.740Z","6.0.0-canary.776291ef0.0":"2020-03-17T19:20:32.536Z","6.0.0-canary.ece19f3dd.0":"2020-03-17T22:01:05.627Z","6.0.0-canary.4dc45af6c.0":"2020-03-18T01:47:45.892Z","6.0.0-canary.6b48781bf.0":"2020-03-18T15:34:33.912Z","6.0.0-canary.a88c8e4dc.0":"2020-03-19T17:35:42.693Z","6.0.0-canary.cafe18860.0":"2020-03-20T14:53:18.593Z","6.0.0-canary.35a32aaea.0":"2020-03-20T19:59:07.340Z","6.0.0-canary.e75deb854.0":"2020-03-20T22:14:58.652Z","6.0.0-canary.2cc6966f6.0":"2020-03-24T18:43:17.249Z","6.0.0-canary.8707953b6.0":"2020-03-24T18:46:55.061Z","6.0.0-canary.10af6cf39.0":"2020-03-25T18:18:14.446Z","6.0.0-canary.7d8f9c8d7.0":"2020-03-27T18:04:48.876Z","6.0.0-canary.d6315efe2.0":"2020-03-27T19:56:19.283Z","6.0.0-canary.a3016368d.0":"2020-03-27T21:19:24.586Z","6.0.0-canary.4b45b6620.0":"2020-03-31T15:56:06.102Z","6.0.0-canary.e84b9c8.0":"2020-04-01T16:55:48.984Z","6.0.0-canary.e33c49e.0":"2020-04-02T00:09:16.803Z","6.0.0-canary.f1f8e60.0":"2020-04-02T19:13:39.299Z","6.0.0-canary.1e17c49b3.0":"2020-04-03T18:03:45.252Z","6.0.0-canary.6a40ef217.0":"2020-04-03T19:24:33.304Z","6.0.0-canary.5f24faacb.0":"2020-04-08T15:36:00.531Z","6.0.0-canary.82fa986b9.0":"2020-04-08T15:41:31.074Z","6.0.0-canary.9930d9cc5.0":"2020-04-08T19:32:19.886Z","6.0.0-canary.6601d24af.0":"2020-04-09T00:29:47.433Z","6.0.0-canary.05f5e1583.0":"2020-04-09T00:47:05.640Z","6.0.0-canary.bce00e186.0":"2020-04-09T15:22:29.494Z","6.0.0-canary.927fa902c.0":"2020-04-09T18:46:19.692Z","6.0.0-canary.eb28b6ecc.0":"2020-04-10T19:30:52.620Z","6.0.0-canary.816a43b42.0":"2020-04-10T20:52:36.038Z","6.0.0-canary.008c4d319.0":"2020-04-13T16:33:46.584Z","6.0.0-canary.cbb3f28ca.0":"2020-04-14T05:05:53.456Z","6.0.0-canary.f172b0f90.0":"2020-04-14T23:10:18.143Z","6.0.0-canary.c02642273.0":"2020-04-15T16:17:18.031Z","6.0.0-canary.8a299b568.0":"2020-04-15T22:43:13.968Z","6.0.0-canary.490fbdc09.0":"2020-04-16T05:59:38.759Z","6.0.0-canary.f838c6e55.0":"2020-04-16T14:26:35.541Z","6.0.0-canary.ce6cb7024.0":"2020-04-16T17:19:03.218Z","6.0.0-canary.0ab62a65b.0":"2020-04-16T18:54:19.428Z","6.0.0-canary.ca61b656f.0":"2020-04-16T19:59:53.361Z","6.0.0-canary.45a6615e3.0":"2020-04-16T20:32:50.725Z","6.0.0-canary.4b04cdb0f.0":"2020-04-17T17:40:57.267Z","6.0.0-canary.b273afa93.0":"2020-04-17T23:02:51.459Z","6.0.0-canary.b70bc601e.0":"2020-04-17T23:21:26.285Z","6.0.0-canary.c4b4bba96.0":"2020-04-18T00:17:52.560Z","6.0.0-canary.6c1ebc721.0":"2020-04-20T19:58:16.017Z","6.0.0-canary.9cff4318f.0":"2020-04-20T20:55:45.755Z","6.0.0-canary.7b4482402.0":"2020-04-20T22:20:08.984Z","6.0.0-canary.deda86d8c.0":"2020-04-21T01:14:46.915Z","6.0.0-canary.d10412cb2.0":"2020-04-21T18:18:21.650Z","6.0.0-canary.c141801d5.0":"2020-04-21T19:41:52.120Z","6.0.0-canary.28d10a96e.0":"2020-04-22T22:07:05.583Z","7.0.0-canary.8540808be.0":"2020-04-23T17:25:52.397Z","6.0.0":"2020-04-23T17:26:25.797Z","7.0.0-canary.2673adb74.0":"2020-04-23T22:45:32.649Z","7.0.0-canary.b10d0d7f1.0":"2020-04-24T00:21:03.529Z","7.0.0-canary.3bd8c1bac.0":"2020-04-24T21:05:58.541Z","7.0.0-canary.b83c8dc22.0":"2020-04-24T21:18:46.261Z","7.0.0-canary.1b3dd846d.0":"2020-04-25T00:43:51.090Z","7.0.0-canary.29debfea7.0":"2020-04-27T12:32:05.130Z","7.0.0-canary.28d32f8e0.0":"2020-04-27T14:06:46.082Z","7.0.0-canary.af71cfdd6.0":"2020-04-28T23:17:23.332Z","7.0.0-canary.99d2fc961.0":"2020-04-29T10:43:52.109Z","7.0.0-canary.0e052b24f.0":"2020-04-30T01:29:26.392Z","7.0.0-canary.ff4bc632a.0":"2020-04-30T08:27:43.917Z","7.0.0-canary.b0f83d2fd.0":"2020-04-30T14:32:32.462Z","7.0.0-canary.e59906a57.0":"2020-05-01T15:42:12.957Z","7.0.0-canary.c02712b59.0":"2020-05-01T18:25:40.152Z","7.0.0-canary.15d65448e.0":"2020-05-01T19:22:27.728Z","7.0.0-canary.142b1549e.0":"2020-05-01T22:35:44.095Z","7.0.0-canary.524b7b812.0":"2020-05-03T20:47:30.441Z","7.0.0-canary.bd8ca9678.0":"2020-05-04T17:18:57.470Z","7.0.0-canary.2553e86fe.0":"2020-05-04T17:30:57.040Z","7.0.0-canary.03dec929e.0":"2020-05-04T23:33:46.495Z","7.0.0-canary.d92d8c93e.0":"2020-05-05T16:58:55.848Z","7.0.0-canary.09f591967.0":"2020-05-05T21:04:13.874Z","7.0.0-canary.3846ce311.0":"2020-05-06T14:09:22.483Z","7.0.0-canary.ed7f32463.0":"2020-05-06T16:07:43.011Z","7.0.0-canary.8135cc085.0":"2020-05-06T19:54:59.097Z","7.0.0-canary.deb212de4.0":"2020-05-06T22:18:36.013Z","7.0.0-canary.f83e00898.0":"2020-05-07T16:49:20.178Z","7.0.0-canary.047e6b337.0":"2020-05-08T18:38:16.937Z","7.0.0-canary.119e21426.0":"2020-05-08T20:22:17.267Z","7.0.0-canary.2f052d824.0":"2020-05-08T21:07:06.524Z","7.0.0-canary.e84444387.0":"2020-05-08T21:31:25.936Z","7.0.0-canary.893eb1876.0":"2020-05-11T14:13:00.461Z","7.0.0-canary.a5aeb3001.0":"2020-05-11T14:28:51.162Z","7.0.0-canary.610c68d97.0":"2020-05-11T19:32:20.789Z","7.0.0-canary.ed52af767.0":"2020-05-11T20:27:07.327Z","7.0.0-canary.058cfd23c.0":"2020-05-11T21:24:56.720Z","7.0.0-canary.0a371b4fe.0":"2020-05-12T23:17:58.414Z","7.0.0-canary.2139200b3.0":"2020-05-13T14:47:06.825Z","7.0.0-canary.744d751a0.0":"2020-05-14T04:42:38.993Z","7.0.0-canary.ad0c0c103.0":"2020-05-14T14:51:19.677Z","7.0.0-canary.fd8f8f2b7.0":"2020-05-18T17:53:29.615Z","7.0.0-canary.730920fbb.0":"2020-05-18T19:43:57.158Z","7.0.0-canary.bcdad99bb.0":"2020-05-19T03:17:53.966Z","7.0.0-canary.4497b86ed.0":"2020-05-19T03:50:38.063Z","7.0.0-canary.2e60575da.0":"2020-05-19T16:09:10.501Z","7.0.0-canary.e3eacefcc.0":"2020-05-19T17:38:00.273Z","7.0.0-canary.b065a4d2b.0":"2020-05-20T14:36:22.083Z","7.0.0-canary.4ebce8d78.0":"2020-05-20T20:50:22.417Z","7.0.0-canary.b0fdca492.0":"2020-05-20T23:02:42.426Z","7.0.0-canary.c67667e8e.0":"2020-05-21T14:12:36.362Z","7.0.0-canary.62b5f37db.0":"2020-05-21T16:41:04.106Z","7.0.0-canary.2e218dbf8.0":"2020-05-21T17:01:54.686Z","7.0.0-canary.7fd792bb9.0":"2020-05-21T17:14:25.173Z","7.0.0-canary.a66493cd8.0":"2020-05-21T17:18:04.171Z","7.0.0-canary.da05f66e1.0":"2020-05-21T17:19:46.609Z","7.0.0-canary.740860e78.0":"2020-05-21T17:26:33.152Z","7.0.0-canary.5cea2610f.0":"2020-05-21T17:28:34.085Z","7.0.0-canary.cf7747ef7.0":"2020-05-21T17:28:54.974Z","7.0.0-canary.862d0d7bc.0":"2020-05-21T17:31:36.573Z","7.0.0-canary.0008c8a91.0":"2020-05-21T19:32:57.985Z","7.0.0-canary.541638fa2.0":"2020-05-21T19:47:54.989Z","7.0.0-canary.6167cd075.0":"2020-05-21T20:20:52.343Z","7.0.0-canary.863ac1b0f.0":"2020-05-21T20:59:38.996Z","7.0.0-canary.d30a214ac.0":"2020-05-21T21:03:47.658Z","7.0.0-canary.62abbc8d7.0":"2020-05-21T21:28:29.043Z","7.0.0-canary.49bf31d5c.0":"2020-05-21T21:31:50.965Z","7.0.0-canary.8e17857d0.0":"2020-05-21T21:32:48.389Z","7.0.0-canary.c113fc942.0":"2020-05-21T22:46:14.144Z","7.0.0-canary.912d9021d.0":"2020-05-26T18:45:11.137Z","7.0.0-canary.68a2af131.0":"2020-05-26T19:07:23.598Z","7.0.0-canary.01de07011.0":"2020-05-26T19:52:28.779Z","7.0.0-canary.51d4535fe.0":"2020-05-26T21:34:48.438Z","7.0.0-canary.b86d826b7.0":"2020-05-26T22:13:33.730Z","7.0.0-canary.d91794c7e.0":"2020-05-26T23:54:47.552Z","7.0.0-canary.8c6d7e076.0":"2020-05-27T18:59:09.993Z","7.0.0-canary.5b5f62f93.0":"2020-05-27T19:16:11.193Z","7.0.0-canary.d9972abb1.0":"2020-05-27T20:20:40.826Z","7.0.0-canary.6556eda2b.0":"2020-05-27T20:29:49.935Z","7.0.0-canary.32aa23641.0":"2020-05-27T21:38:05.340Z","7.0.0-canary.654934dfa.0":"2020-05-28T00:36:41.331Z","7.0.0-canary.41910b8b8.0":"2020-05-28T00:51:11.226Z","7.0.0-canary.d66d22bf9.0":"2020-05-28T19:55:10.899Z","7.0.0-canary.8904f3cbe.0":"2020-05-29T16:50:11.324Z","7.0.0-canary.51512a4ac.0":"2020-05-29T19:14:58.382Z","7.0.0-canary.0743288fb.0":"2020-05-29T20:04:53.795Z","7.0.0-canary.06ef147b5.0":"2020-05-29T20:40:32.751Z","7.0.0-canary.8073a20a9.0":"2020-05-29T23:25:23.646Z","7.0.0-canary.72ff42330.0":"2020-06-01T16:44:07.311Z","7.0.0-canary.9ea52070f.0":"2020-06-01T16:48:53.777Z","7.0.0-canary.d86ad3b60.0":"2020-06-01T17:48:42.120Z","7.0.0-canary.b9776b1d0.0":"2020-06-01T18:25:54.193Z","7.0.0-canary.ba6f7c294.0":"2020-06-02T17:02:34.899Z","7.0.0-canary.cf3b664ab.0":"2020-06-02T18:23:24.806Z","7.0.0-canary.4ba3c9a31.0":"2020-06-02T23:52:08.332Z","7.0.0-canary.388b042c7.0":"2020-06-03T13:46:29.280Z","7.0.0-canary.cca1ca84d.0":"2020-06-03T16:02:52.111Z","7.0.0-canary.9b0b5f2e0.0":"2020-06-03T18:57:30.594Z","7.0.0-canary.0a7895f4d.0":"2020-06-03T21:08:56.888Z","7.0.0-canary.7461aad68.0":"2020-06-03T22:12:11.433Z","7.0.0-canary.a0dc2b5c4.0":"2020-06-04T21:13:54.405Z","7.0.0-canary.2b420c5b3.0":"2020-06-08T16:14:19.430Z","7.0.0-canary.8fa22aacc.0":"2020-06-08T18:04:25.468Z","7.0.0-canary.21c4e4ed8.0":"2020-06-08T18:44:11.294Z","7.0.0-canary.dfde46516.0":"2020-06-08T19:41:50.614Z","7.0.0-canary.05cc5c206.0":"2020-06-08T20:56:47.571Z","7.0.0-canary.3ee488f1c.0":"2020-06-09T14:53:52.373Z","7.0.0-canary.b83d720ee.0":"2020-06-09T17:26:08.823Z","7.0.0-canary.afb1c11a9.0":"2020-06-09T20:16:19.686Z","7.0.0-canary.39e6f71e2.0":"2020-06-09T23:39:29.831Z","7.0.0-canary.d4c66dc7d.0":"2020-06-11T17:45:56.769Z","7.0.0-canary.be4a19f9f.0":"2020-06-12T06:08:11.697Z","7.0.0-canary.a6ac8f629.0":"2020-06-15T21:30:35.263Z","7.0.0-canary.9833dc287.0":"2020-06-16T19:49:13.715Z","7.0.0-canary.3aa33998e.0":"2020-06-16T20:20:58.353Z","7.0.0-canary.d2b54d183.0":"2020-06-18T01:15:35.463Z","7.0.0-canary.f2a488e95.0":"2020-06-18T15:04:08.621Z","7.0.0-canary.bd8d1aafa.0":"2020-06-18T15:16:10.669Z","7.0.0-canary.1321eb968.0":"2020-06-19T19:21:11.325Z","7.0.0-canary.db5cc0382.0":"2020-06-19T19:27:46.109Z","7.0.0-canary.6ac9bf031.0":"2020-06-19T19:48:00.110Z","7.0.0-canary.c21b5c367.0":"2020-06-19T20:10:25.465Z","7.0.0-canary.bfdd7fd39.0":"2020-06-19T20:19:48.179Z","7.0.0-canary.10b505785.0":"2020-06-19T20:21:16.353Z","7.0.0-canary.6483d3f44.0":"2020-06-19T20:37:27.601Z","7.0.0-canary.30a74e921.0":"2020-06-19T20:39:43.882Z","7.0.0-canary.c20727498.0":"2020-06-19T20:42:37.149Z","7.0.0-canary.4e360ae94.0":"2020-06-19T20:59:19.997Z","7.0.0-canary.8550fa53b.0":"2020-06-19T21:01:35.244Z","7.0.0-canary.93ade142e.0":"2020-06-19T21:02:47.839Z","7.0.0-canary.a0032f5bb.0":"2020-06-19T21:27:48.682Z","7.0.0-canary.3f342e721.0":"2020-06-19T21:30:04.491Z","7.0.0-canary.ff89457cc.0":"2020-06-19T21:31:09.949Z","7.0.0-canary.4a1855cf8.0":"2020-06-19T21:33:56.167Z","7.0.0-canary.8602f1b4d.0":"2020-06-22T17:23:29.521Z","7.0.0-canary.69f9f0982.0":"2020-06-22T21:14:14.512Z","7.0.0-canary.369a293f0.0":"2020-06-22T21:16:31.583Z","7.0.0-canary.f1432b5c6.0":"2020-06-22T21:25:05.631Z","7.0.0-canary.4757a16b4.0":"2020-06-22T21:53:12.562Z","7.0.0-canary.f8f472762.0":"2020-06-22T21:57:14.123Z","7.0.0-canary.7e4d55c34.0":"2020-06-22T22:29:10.958Z","7.0.0-canary.bd1dbc91f.0":"2020-06-23T14:27:51.675Z","7.0.0-canary.31523bc62.0":"2020-06-23T14:33:26.690Z","7.0.0-canary.a96b6d4d6.0":"2020-06-23T14:39:47.319Z","7.0.0-canary.ef3a09533.0":"2020-06-23T14:47:59.183Z","7.0.0-canary.080965f39.0":"2020-06-23T15:17:25.135Z","7.0.0-canary.1bd67b65d.0":"2020-06-23T15:59:47.319Z","7.0.0-canary.18ca31248.0":"2020-06-23T18:24:46.475Z","7.0.0-canary.39cf00836.0":"2020-06-23T18:47:45.722Z","7.0.0-canary.1bfda9e05.0":"2020-06-23T19:00:15.565Z","7.0.0-canary.08731bd95.0":"2020-06-23T19:02:49.843Z","7.0.0":"2020-06-23T19:10:29.995Z","8.0.0-canary.a3212b209.0":"2020-06-23T19:11:24.913Z","8.0.0-canary.15e81fe98.0":"2020-06-23T19:40:54.015Z","8.0.0-canary.004c9d392.0":"2020-06-23T22:55:46.735Z","8.0.0-canary.03bde00f5.0":"2020-06-24T00:31:28.560Z","8.0.0-canary.599b8c319.0":"2020-06-24T14:56:18.191Z","8.0.0-canary.87e3be418.0":"2020-06-24T17:53:04.328Z","8.0.0-canary.035cf2a6f.0":"2020-06-24T18:38:29.179Z","8.0.0-canary.2fed2c12f.0":"2020-06-25T20:01:35.526Z","8.0.0-canary.38197b443.0":"2020-06-25T21:22:20.993Z","8.0.0-canary.69a35e80c.0":"2020-06-26T17:38:34.639Z","8.0.0-canary.df7154fb3.0":"2020-06-26T18:16:34.543Z","8.0.0-canary.d5618602a.0":"2020-06-26T21:48:06.477Z","8.0.0-canary.e590b376b.0":"2020-06-26T23:23:24.614Z","8.0.0-canary.0c9d6bd2d.0":"2020-06-29T17:15:07.819Z","8.0.0-canary.c1fec4246.0":"2020-06-29T17:30:23.516Z","8.0.0-canary.c678a9d34.0":"2020-06-29T17:51:31.488Z","8.0.0-canary.521afaf6e.0":"2020-06-30T15:05:18.867Z","8.0.0-canary.a2ad48839.0":"2020-06-30T19:14:11.340Z","8.0.0-canary.ec2385881.0":"2020-06-30T21:46:45.532Z","8.0.0-canary.610c26c4a.0":"2020-07-01T14:55:56.189Z","8.0.0-canary.e2ea4a99e.0":"2020-07-01T19:27:00.067Z","8.0.0-canary.a78ceb112.0":"2020-07-01T19:38:45.482Z","8.0.0-canary.b0c456d33.0":"2020-07-06T22:41:02.173Z","8.0.0-canary.2e5711e04.0":"2020-07-08T16:47:47.089Z","8.0.0-canary.811fc5d24.0":"2020-07-08T17:15:43.519Z","8.0.0-canary.6ed717ddd.0":"2020-07-08T19:43:53.558Z","8.0.0-canary.d850de590.0":"2020-07-09T18:05:16.138Z","8.0.0-canary.e07a70841.0":"2020-07-09T18:35:05.382Z","8.0.0-canary.37947ed6c.0":"2020-07-09T20:35:59.425Z","8.0.0-canary.5d443afec.0":"2020-07-09T20:51:36.363Z","8.0.0-canary.9ac1ed914.0":"2020-07-09T21:20:28.931Z","8.0.0-canary.1e7cb6198.0":"2020-07-09T22:12:08.731Z","8.0.0-canary.843f636c0.0":"2020-07-10T17:42:31.828Z","8.0.0-canary.b2edaeead.0":"2020-07-10T18:07:04.384Z","8.0.0-canary.5dac1f624.0":"2020-07-13T16:34:08.288Z","8.0.0-canary.4497acef8.0":"2020-07-14T14:19:52.033Z","8.0.0-canary.e6e23019d.0":"2020-07-14T20:10:17.344Z","8.0.0-canary.d548d7a92.0":"2020-07-14T21:12:53.420Z","8.0.0-canary.58ce529cc.0":"2020-07-14T21:14:51.110Z","8.0.0-canary.a0f1202dc.0":"2020-07-14T21:34:07.392Z","8.0.0-canary.ad4df58c1.0":"2020-07-15T00:09:09.997Z","8.0.0-canary.01db89053.0":"2020-07-16T16:38:58.946Z","8.0.0-canary.fb5a4cdeb.0":"2020-07-20T19:19:48.918Z","8.0.0-canary.8df0f517c.0":"2020-07-20T23:55:26.368Z","8.0.0-canary.abcdbcfeb.0":"2020-07-21T00:50:00.067Z","8.0.0-canary.7bd5075de.0":"2020-07-21T18:46:59.161Z","8.0.0-canary.405a29a20.0":"2020-07-22T22:23:02.659Z","8.0.0-canary.f3693ac4c.0":"2020-07-22T22:33:35.020Z","8.0.0-canary.12a109680.0":"2020-07-22T23:03:19.998Z","8.0.0-canary.bbd06696e.0":"2020-07-22T23:52:43.673Z","8.0.0-canary.4951e7651.0":"2020-07-23T01:49:26.843Z","8.0.0-canary.75deebbef.0":"2020-07-23T17:45:43.482Z","8.0.0-canary.95aff33ee.0":"2020-07-23T18:47:13.382Z","8.0.0-canary.9d9f47473.0":"2020-07-23T19:58:29.574Z","8.0.0-canary.00dfbf6be.0":"2020-07-23T20:59:22.330Z","8.0.0-canary.b87e522d2.0":"2020-07-23T21:23:31.445Z","8.0.0-canary.5b3e150e5.0":"2020-07-24T01:23:47.434Z","8.0.0-canary.f0ae11786.0":"2020-07-24T01:43:27.890Z","8.0.0-canary.fb4ee66c0.0":"2020-07-24T02:10:37.731Z","8.0.0-canary.5511e0aeb.0":"2020-07-24T16:56:41.898Z","8.0.0-canary.8388a9bf6.0":"2020-07-24T20:13:02.468Z","8.0.0-canary.ac405eae1.0":"2020-07-27T15:06:17.510Z","8.0.0-canary.75553837c.0":"2020-07-27T15:12:15.341Z","8.0.0-canary.b96fbfc7a.0":"2020-07-27T15:37:50.429Z","8.0.0-canary.61f1a8d85.0":"2020-07-27T15:46:54.969Z","8.0.0-canary.81dc33377.0":"2020-07-27T15:59:01.047Z","8.0.0-canary.ffd9ede58.0":"2020-07-27T16:32:14.960Z","8.0.0-canary.52dc55acf.0":"2020-07-27T17:08:22.137Z","8.0.0-canary.d4274ff05.0":"2020-07-27T19:51:06.717Z","8.0.0-canary.b82d0696d.0":"2020-07-27T19:57:53.291Z","8.0.0-canary.c2852000d.0":"2020-07-27T20:58:07.499Z","8.0.0-canary.f86f83f54.0":"2020-07-27T21:53:56.039Z","8.0.0-canary.41eb1684c.0":"2020-07-28T17:50:07.084Z","8.0.0-canary.9e2f6c450.0":"2020-07-28T22:39:05.174Z","8.0.0-canary.e6950b55a.0":"2020-07-28T22:52:03.599Z","8.0.0-canary.5e51ee38e.0":"2020-07-28T23:15:45.463Z","8.0.0-canary.a3898ffcf.0":"2020-07-29T00:36:12.273Z","8.0.0-canary.bc5cc6c96.0":"2020-07-29T00:49:03.415Z","8.0.0-canary.9bdeaf928.0":"2020-07-29T01:20:32.104Z","8.0.0-canary.fde2c1f9d.0":"2020-07-29T01:34:46.894Z","8.0.0-canary.6b3876d5d.0":"2020-07-29T01:38:35.254Z","8.0.0-canary.30ce17873.0":"2020-07-29T17:14:38.684Z","8.0.0-canary.f6bb43bf0.0":"2020-07-29T18:25:14.974Z","8.0.0-canary.6af75f6ab.0":"2020-07-30T00:01:11.037Z","8.0.0-canary.42d7a65aa.0":"2020-07-30T00:10:10.547Z","8.0.0-canary.85abdabb7.0":"2020-07-30T00:15:09.181Z","8.0.0-canary.49fb20ca3.0":"2020-07-30T01:27:28.108Z","8.0.0-canary.962d4abbb.0":"2020-07-30T16:10:03.353Z","8.0.0-canary.2fcee40cb.0":"2020-07-30T17:21:20.291Z","8.0.0-canary.bd5987f5a.0":"2020-07-30T17:45:59.295Z","8.0.0-canary.005e86a9b.0":"2020-07-30T17:59:43.516Z","8.0.0-canary.e309c7c68.0":"2020-07-30T18:08:34.250Z","8.0.0-canary.935a51cc0.0":"2020-07-30T18:20:13.022Z","8.0.0-canary.74839da7b.0":"2020-07-30T18:31:07.814Z","8.0.0-canary.f041a48c9.0":"2020-07-30T22:59:20.891Z","8.0.0-canary.fbb1381e1.0":"2020-07-31T15:50:16.212Z","8.0.0-canary.7f61d5785.0":"2020-07-31T17:22:52.692Z","8.0.0-canary.e1bc84d10.0":"2020-08-03T17:50:37.288Z","8.0.0-canary.096a7a066.0":"2020-08-03T17:53:24.716Z","8.0.0-canary.aa3a3e5a4.0":"2020-08-03T17:53:42.147Z","8.0.0-canary.5903d39af.0":"2020-08-03T17:54:10.482Z","8.0.0-canary.72258f898.0":"2020-08-04T01:17:08.091Z","8.0.0-canary.1b44b43c8.0":"2020-08-04T16:48:00.352Z","8.0.0-canary.e9d2e2f96.0":"2020-08-04T20:24:01.663Z","8.0.0-canary.b9dff0a19.0":"2020-08-05T03:48:39.452Z","8.0.0-canary.2bd09a706.0":"2020-08-05T03:53:41.237Z","8.0.0-canary.e0560522f.0":"2020-08-05T17:19:28.180Z","8.0.0-canary.08ca4d0ec.0":"2020-08-05T17:39:13.117Z","8.0.0-canary.08090126b.0":"2020-08-06T19:32:28.567Z","8.0.0-canary.e8bf5b2ac.0":"2020-08-06T21:49:46.198Z","8.0.0-canary.e3b746208.0":"2020-08-06T22:26:33.029Z","8.0.0-canary.96a640534.0":"2020-08-06T22:41:18.332Z","8.0.0-canary.9f9aac825.0":"2020-08-07T20:51:12.195Z","8.0.0-canary.fc65fd00b.0":"2020-08-10T15:20:11.095Z","8.0.0-canary.02e372c5f.0":"2020-08-10T15:48:24.288Z","8.0.0-canary.66669e3b6.0":"2020-08-10T15:52:22.863Z","8.0.0-canary.6d1ea9761.0":"2020-08-11T14:30:34.504Z","8.0.0-canary.79414bf9f.0":"2020-08-11T19:01:37.475Z","8.0.0-canary.85a5272df.0":"2020-08-11T20:07:58.349Z","8.0.0-canary.fda053eb8.0":"2020-08-12T20:03:56.881Z","8.0.0-canary.760873445.0":"2020-08-12T21:43:04.298Z","8.0.0-canary.2f4711a30.0":"2020-08-12T21:52:59.776Z","8.0.0-canary.2d72f3659.0":"2020-08-12T22:00:28.859Z","8.0.0-canary.1fee70a5e.0":"2020-08-12T23:28:28.798Z","8.0.0-canary.023f3fa34.0":"2020-08-13T01:12:13.082Z","8.0.0-canary.80f3a9e5d.0":"2020-08-13T01:28:45.092Z","8.0.0-canary.a1dcfe97c.0":"2020-08-13T08:49:30.955Z","8.0.0-canary.af332d5be.0":"2020-08-13T21:17:07.217Z","8.0.0-canary.7dd4567c4.0":"2020-08-14T00:50:44.595Z","8.0.0-canary.ff870005a.0":"2020-08-14T01:15:59.847Z","8.0.0-canary.150f427a0.0":"2020-08-14T13:29:22.858Z","8.0.0-canary.bcc58290a.0":"2020-08-14T23:22:18.855Z","8.0.0-canary.4f55400bb.0":"2020-08-17T16:38:13.945Z","8.0.0-canary.000d64815.0":"2020-08-17T17:04:05.030Z","8.0.0-canary.defa599a8.0":"2020-08-17T20:31:38.352Z","8.0.0-canary.66b8ed7e6.0":"2020-08-18T18:36:36.257Z","8.0.0-canary.e2b1033df.0":"2020-08-19T18:41:43.886Z","8.0.0-canary.2e8c3dd2e.0":"2020-08-19T19:23:41.982Z","8.0.0-canary.b2e80a5d9.0":"2020-08-19T22:20:43.862Z","8.0.0-canary.ff88df637.0":"2020-08-19T22:32:45.158Z","8.0.0-canary.32fb314cd.0":"2020-08-20T10:37:19.459Z","8.0.0-canary.546277d32.0":"2020-08-20T16:42:53.548Z","8.0.0-canary.da72839f4.0":"2020-08-20T17:59:38.184Z","8.0.0-canary.346069ccb.0":"2020-08-20T18:18:12.198Z","8.0.0-canary.e27c5802f.0":"2020-08-20T19:14:57.419Z","8.0.0-canary.f4532b9c8.0":"2020-08-20T19:57:34.020Z","8.0.0-canary.fbf73c2a6.0":"2020-08-20T21:06:09.069Z","8.0.0-canary.cf800124f.0":"2020-08-20T21:52:25.512Z","8.0.0-canary.95e4eeea7.0":"2020-08-20T23:28:38.359Z","8.0.0-canary.91ab1c62a.0":"2020-08-21T15:11:33.261Z","8.0.0-canary.58eaa9f02.0":"2020-08-21T20:00:08.180Z","8.0.0-canary.238216fc4.0":"2020-08-24T15:40:38.216Z","8.0.0-canary.a1c65593d.0":"2020-08-25T03:03:39.090Z","8.0.0-canary.708cc09c4.0":"2020-08-25T15:56:12.165Z","8.0.0-canary.19bea2ad3.0":"2020-08-26T18:49:04.943Z","8.0.0-canary.911014711.0":"2020-08-27T16:07:48.912Z","8.0.0-canary.d3387f54c.0":"2020-09-03T20:54:40.506Z","8.0.0-canary.2ccf996cc.0":"2020-09-03T20:55:08.625Z","8.0.0-canary.744bfe5d8.0":"2020-09-03T20:56:02.850Z","8.0.0-canary.78da96eaf.0":"2020-09-08T19:12:35.760Z","8.0.0-canary.b0ed593cc.0":"2020-09-09T06:15:50.220Z","8.0.0-canary.85a1fa9ea.0":"2020-09-10T21:10:15.948Z","8.0.0-canary.0bc41a9c7.0":"2020-09-11T17:49:31.752Z","8.0.0-canary.fc0eb5013.0":"2020-09-11T19:55:18.120Z","8.0.0-canary.319bf66de.0":"2020-09-11T23:09:58.464Z","8.0.0-canary.5bfc305ec.0":"2020-09-13T23:00:02.050Z","8.0.0-canary.83d83f131.0":"2020-09-14T00:32:27.367Z","8.0.0-canary.40d8e4726.0":"2020-09-14T23:29:38.478Z","8.0.0-canary.c25d70a31.0":"2020-09-15T02:28:32.470Z","8.0.0-canary.d52b165b5.0":"2020-09-15T14:54:06.331Z","8.0.0-canary.a831d4799.0":"2020-09-15T17:51:39.453Z","8.0.0-canary.a306aa488.0":"2020-09-17T00:58:24.603Z","8.0.0-canary.fd608ff66.0":"2020-09-17T14:25:28.989Z","8.0.0-canary.3e435ba57.0":"2020-09-17T14:42:46.171Z","8.0.0-canary.c250ec52a.0":"2020-09-17T20:10:22.361Z","8.0.0-canary.e34e411b1.0":"2020-09-17T20:17:44.773Z","8.0.0-canary.4e9343929.0":"2020-09-17T20:42:56.859Z","8.0.0-canary.4e5c350c2.0":"2020-09-21T21:13:57.406Z","8.0.0-canary.16c563ef7.0":"2020-09-22T19:46:00.995Z","8.0.0-canary.fd8af3d43.0":"2020-09-23T19:32:04.878Z","8.0.0-canary.d4cd83a85.0":"2020-09-25T00:35:15.987Z","8.0.0-canary.199aecdfb.0":"2020-09-25T15:51:07.104Z","8.0.0-canary.38ef4501f.0":"2020-09-30T18:24:15.153Z","8.0.0-canary.774dcfc8e.0":"2020-10-01T09:53:58.268Z","8.0.0-canary.0f60323a8.0":"2020-10-08T21:09:54.767Z","8.0.0-canary.d71622574.0":"2020-10-09T16:31:32.121Z","8.0.0-canary.7a9afaf4b.0":"2020-10-09T22:53:47.803Z","8.0.0-canary.8a39352c8.0":"2020-10-12T17:46:12.206Z","8.0.0-canary.790ca85fd.0":"2020-10-12T21:56:37.267Z","8.0.0-canary.174c0becf.0":"2020-10-14T02:15:36.742Z","8.0.0-canary.c71ebfa02.0":"2020-10-14T04:17:23.481Z","8.0.0-canary.2ab716cbd.0":"2020-10-16T00:04:08.597Z","8.0.0-canary.43c1c5e2f.0":"2020-10-19T14:07:54.066Z","8.0.0-canary.ccc64eea3.0":"2020-10-26T22:51:26.595Z","8.0.0-canary.a79cdd019.0":"2020-10-27T16:31:03.238Z","8.0.0-canary.596e98424.0":"2020-10-28T16:03:25.987Z","8.0.0-canary.05d5facc2.0":"2020-10-28T16:11:55.105Z","8.0.0-canary.291b3553d.0":"2020-10-28T17:44:49.493Z","8.0.0-canary.dbc449b09.0":"2020-10-28T18:12:35.129Z","8.0.0-canary.4794b25da.0":"2020-10-28T18:41:04.988Z","8.0.0-canary.c61db90a5.0":"2020-10-28T18:59:31.870Z","8.0.0-canary.6d9648ab2.0":"2020-10-29T20:32:18.600Z","8.0.0-canary.5511c5254.0":"2020-10-30T18:00:05.863Z","8.0.0-canary.bd6e302a4.0":"2020-11-02T17:04:43.206Z","9.0.0-canary.d6b5cd418.0":"2020-11-02T22:58:51.862Z","8.0.0":"2020-11-02T22:59:15.586Z","9.0.0-canary.fdf9a2634.0":"2020-11-03T23:21:21.570Z","9.0.0-canary.4a86f30a0.0":"2020-11-03T23:27:41.699Z","9.0.0-canary.fc8b045f1.0":"2020-11-03T23:36:58.693Z","9.0.0-canary.a0b2db26b.0":"2020-11-04T00:08:45.176Z","9.0.0-canary.419e03572.0":"2020-11-04T01:32:54.333Z","9.0.0-canary.a432ad542.0":"2020-11-06T01:45:46.116Z","9.0.0-canary.e2e8aef1e.0":"2020-11-06T02:05:09.811Z","9.0.0-canary.ec6b68b34.0":"2020-11-06T18:56:21.322Z","9.0.0-canary.b39094d14.0":"2020-11-06T21:15:49.741Z","9.0.0-canary.8648b8258.0":"2020-11-12T10:44:29.394Z","9.0.0-canary.240c5f74f.0":"2020-11-12T20:20:28.386Z","9.0.0-canary.6cf6ba4f4.0":"2020-11-16T18:49:45.871Z","9.0.0-canary.07f3e01b7.0":"2020-11-16T21:45:32.604Z","9.0.0-canary.23491cf85.0":"2020-11-17T00:17:04.987Z","9.0.0-canary.b659d4fc3.0":"2020-11-17T00:24:54.602Z","9.0.0-canary.d8a3aed67.0":"2020-11-17T15:27:17.440Z","9.0.0-canary.482ff9091.0":"2020-11-17T17:57:52.675Z","9.0.0-canary.99cfb6bd5.0":"2020-11-18T18:43:32.069Z","9.0.0-canary.b98d15d90.0":"2020-11-18T22:34:41.917Z","9.0.0-canary.30c11bfc2.0":"2020-11-19T01:25:51.261Z","9.0.0-canary.1b731d51b.0":"2020-11-19T18:52:10.756Z","9.0.0-canary.4ae94ff78.0":"2020-11-19T18:55:07.141Z","9.0.0-canary.7ad038e1d.0":"2020-11-19T19:18:10.936Z","9.0.0-canary.a41527604.0":"2020-11-19T19:59:55.376Z","9.0.0-canary.7b0e2b377.0":"2020-11-20T22:55:24.135Z","9.0.0-canary.c927a5d05.0":"2020-11-23T19:47:15.461Z","9.0.0-canary.b349b5185.0":"2020-11-24T17:08:36.822Z","9.0.0-canary.9083b7d61.0":"2020-11-24T21:15:24.854Z","9.0.0-canary.eff7b46ac.0":"2020-11-24T23:30:49.058Z","9.0.0-canary.ae27b44b0.0":"2020-11-25T15:32:34.502Z","9.0.0-canary.2fbba2554.0":"2020-11-30T17:40:09.301Z","9.0.0-canary.6d8574fe1.0":"2020-11-30T17:51:13.019Z","9.0.0-canary.fd22355f7.0":"2020-11-30T22:59:19.376Z","9.0.0-canary.c4ab98722.0":"2020-12-02T00:56:22.436Z","9.0.0-canary.977585650.0":"2020-12-02T14:41:46.472Z","9.0.0-canary.c7edfc7b6.0":"2020-12-02T14:49:25.861Z","9.0.0-canary.4f3347306.0":"2020-12-02T15:07:19.497Z","9.0.0-canary.37fbae10d.0":"2020-12-02T18:16:13.484Z","9.0.0-canary.11da3c0db.0":"2020-12-02T20:22:11.755Z","9.0.0-canary.489d4c219.0":"2020-12-03T15:29:27.512Z","9.0.0-canary.6557a69d9.0":"2020-12-03T15:41:20.163Z","9.0.0-canary.4ea1b7c69.0":"2020-12-03T15:57:57.071Z","9.0.0-canary.eaeb78ce3.0":"2020-12-03T17:01:07.136Z","9.0.0-canary.1c156d69d.0":"2020-12-03T20:44:32.295Z","9.0.0-canary.832668d33.0":"2020-12-04T18:05:44.045Z","9.0.0-canary.4321323e4.0":"2020-12-07T11:28:48.525Z","9.0.0-canary.2d5f32d41.0":"2020-12-07T16:41:40.673Z","9.0.0-canary.8239afc64.0":"2020-12-07T19:49:17.633Z","9.0.0-canary.6871336f1.0":"2020-12-08T16:01:16.208Z","9.0.0-canary.9f718da94.0":"2020-12-08T16:13:02.577Z","9.0.0-canary.1fccb1418.0":"2020-12-08T16:28:05.502Z","9.0.0-canary.afb68894e.0":"2020-12-08T16:32:01.353Z","9.0.0-canary.fd88d40c2.0":"2020-12-08T16:45:22.572Z","9.0.0-canary.ba9e3109c.0":"2020-12-08T19:05:06.982Z","9.0.0-canary.1085c3b2d.0":"2020-12-09T19:10:46.315Z","9.0.0-canary.c5dda809d.0":"2020-12-09T20:49:32.709Z","9.0.0-canary.f5f1bd86a.0":"2020-12-09T21:07:37.258Z","9.0.0-canary.00f38200f.0":"2020-12-11T15:44:06.865Z","9.0.0-canary.ac41a5729.0":"2020-12-11T16:27:55.172Z","9.0.0-canary.7fe0e4f05.0":"2020-12-11T17:05:12.111Z","9.0.0-canary.9244508bd.0":"2020-12-11T19:07:03.215Z","9.0.0-canary.384a8eeb1.0":"2020-12-16T17:01:36.014Z","9.0.0-canary.eabf9d5c2.0":"2020-12-16T18:27:21.349Z","9.0.0-canary.30fdfd06e.0":"2020-12-16T19:07:17.085Z","9.0.0-canary.9590a8f90.0":"2020-12-22T17:41:44.588Z","9.0.0-canary.f89d8b8f2.0":"2020-12-22T23:04:47.430Z","9.0.0-canary.fb194dd35.0":"2020-12-28T20:45:26.068Z","9.0.0-canary.64f36e287.0":"2020-12-28T21:08:16.433Z","9.0.0-canary.b7bbe7022.0":"2020-12-29T18:47:46.993Z","9.0.0":"2020-12-29T19:45:48.741Z","10.0.0-canary.776c18681.0":"2020-12-30T00:39:54.630Z","10.0.0-canary.671d72d95.0":"2020-12-30T20:11:36.092Z","10.0.0-canary.b4f5a1c9e.0":"2020-12-30T21:46:13.358Z","10.0.0-canary.a94bd8deb.0":"2020-12-30T22:04:03.865Z","10.0.0-canary.5d128511b.0":"2020-12-30T22:09:30.383Z","10.0.0-canary.365c69360.0":"2021-01-05T17:48:00.137Z","10.0.0-canary.700a8261a.0":"2021-01-05T21:00:16.000Z","10.0.0-canary.766981c15.0":"2021-01-05T22:40:00.073Z","10.0.0-canary.b28c576d9.0":"2021-01-05T22:49:46.814Z","10.0.0-canary.968735356.0":"2021-01-06T15:50:25.898Z","10.0.0-canary.c5e18b020.0":"2021-01-06T19:43:56.059Z","10.0.0-canary.bcff8a66a.0":"2021-01-06T20:25:58.524Z","10.0.0-canary.79328c9ff.0":"2021-01-07T02:33:58.391Z","10.0.0-canary.121e1f303.0":"2021-01-07T23:19:34.634Z","10.0.0-canary.abdd10065.0":"2021-01-08T17:51:13.408Z","10.0.0-canary.089de519c.0":"2021-01-08T22:20:25.866Z","10.0.0-canary.163119837.0":"2021-01-08T23:45:02.391Z","10.0.0-canary.b8a1a58e4.0":"2021-01-11T16:24:00.613Z","10.0.0-canary.7584267ff.0":"2021-01-12T01:12:00.473Z","10.0.0-canary.251ac04c0.0":"2021-01-12T19:54:50.538Z","10.0.0-canary.772cc1068.0":"2021-01-14T00:06:41.450Z","10.0.0-canary.fe13dd130.0":"2021-01-14T01:10:04.408Z","10.0.0-canary.c7c5da28f.0":"2021-01-14T01:33:44.103Z","10.0.0-canary.b2faa116a.0":"2021-01-19T19:26:18.784Z","10.0.0-canary.0c95c9f7b.0":"2021-01-19T22:53:33.283Z","10.0.0-canary.5268222c4.0":"2021-01-20T19:18:48.354Z","10.0.0-canary.2ed2d829b.0":"2021-01-20T23:07:43.635Z","10.0.0-canary.df00c2b30.0":"2021-01-21T19:54:34.236Z","10.0.0-canary.fd61b0476.0":"2021-01-21T20:09:14.070Z","10.0.0-canary.3fb3a0265.0":"2021-01-22T00:04:25.786Z","10.0.0-canary.07deaec27.0":"2021-01-22T16:56:00.921Z","10.0.0-canary.d2959b16c.0":"2021-01-22T18:51:52.583Z","10.0.0-canary.75f3bfe7c.0":"2021-01-22T22:51:12.007Z","10.0.0-canary.b9adb7a0f.0":"2021-01-22T23:35:10.396Z","10.0.0-canary.d29ec2862.0":"2021-01-25T16:23:25.828Z","10.0.0-canary.96be07c68.0":"2021-01-26T00:09:41.426Z","10.0.0-canary.e383944e9.0":"2021-01-26T01:44:39.085Z","10.0.0-canary.623af861e.0":"2021-01-26T03:44:56.912Z","10.0.0-canary.6863fd43a.0":"2021-01-26T21:32:22.932Z","10.0.0-canary.ea55b87ca.0":"2021-01-26T23:45:33.469Z","10.0.0-canary.e902ff05f.0":"2021-01-27T00:03:42.283Z","10.0.0-canary.2c9fc538a.0":"2021-01-27T00:26:51.457Z","10.0.0-canary.6bf56aaa4.0":"2021-01-27T01:19:41.035Z","10.0.0-canary.994873795.0":"2021-01-27T14:50:40.052Z","10.0.0-canary.96878e1d0.0":"2021-01-27T18:01:47.998Z","10.0.0-canary.3c117cdcc.0":"2021-01-27T18:31:57.763Z","10.0.0-canary.b411e7033.0":"2021-01-27T22:03:12.987Z","10.0.0-canary.a9ac16b4a.0":"2021-01-27T23:03:07.862Z","10.0.0-canary.fec7b42ca.0":"2021-01-28T19:14:17.005Z","10.0.0-canary.8e66dbfee.0":"2021-02-01T23:20:05.908Z","10.0.0-canary.637d15da6.0":"2021-02-02T18:48:53.619Z","10.0.0-canary.fb793939e.0":"2021-02-02T23:42:33.345Z","10.0.0-canary.15a4d40dd.0":"2021-02-03T02:18:12.950Z","10.0.0-canary.7a003acf0.0":"2021-02-04T02:33:38.053Z","10.0.0-canary.05f249666.0":"2021-02-04T17:49:49.077Z","10.0.0-canary.1a3a39629.0":"2021-02-04T18:42:44.701Z","10.0.0-canary.8b1cdb1be.0":"2021-02-04T22:34:21.264Z","10.0.0-canary.8271f00f7.0":"2021-02-04T23:00:17.894Z","10.0.0-canary.533092a90.0":"2021-02-05T03:46:27.465Z","11.0.0-canary.633a9fc7a.0":"2021-02-05T16:16:56.740Z","10.0.0":"2021-02-05T16:18:23.070Z","11.0.0-canary.b5227247d.0":"2021-02-05T17:41:41.683Z","11.0.0-canary.95322b11e.0":"2021-02-05T23:31:18.784Z","11.0.0-canary.1f318ff0f.0":"2021-02-06T00:04:30.717Z","11.0.0-canary.ab12cf7a3.0":"2021-02-08T15:03:03.519Z","11.0.0-canary.98db2c5ec.0":"2021-02-08T15:33:44.859Z","11.0.0-canary.1f86b9f6d.0":"2021-02-08T17:16:49.490Z","11.0.0-canary.aac8f5d9a.0":"2021-02-08T17:59:52.888Z","11.0.0-canary.750e18fc7.0":"2021-02-08T21:40:58.228Z","11.0.0-canary.b62b1266d.0":"2021-02-09T21:52:16.134Z","11.0.0-canary.a6b3101fb.0":"2021-02-11T23:16:31.096Z","11.0.0-canary.ed88df700.0":"2021-02-12T00:06:24.564Z","11.0.0-canary.d30efe6b4.0":"2021-02-12T02:41:32.683Z","11.0.0-canary.0393bdc4b.0":"2021-02-12T04:30:31.734Z","11.0.0-canary.7cd26af4d.0":"2021-02-12T15:59:00.640Z","11.0.0-canary.71fe9a067.0":"2021-02-12T16:30:27.490Z","11.0.0-canary.0fd56a86b.0":"2021-02-13T00:11:21.744Z","11.0.0-canary.f19bbc4af.0":"2021-02-16T22:15:46.424Z","11.0.0-canary.f9cac96cc.0":"2021-02-17T16:09:26.049Z","11.0.0-canary.79ce0878b.0":"2021-02-17T19:24:42.920Z","11.0.0-canary.d6e507b5b.0":"2021-02-17T19:57:46.296Z","11.0.0-canary.f2658381b.0":"2021-02-17T22:44:20.135Z","11.0.0-canary.97c4d4035.0":"2021-02-18T02:34:41.600Z","11.0.0-canary.f5bb4648c.0":"2021-02-18T16:04:48.213Z","11.0.0-canary.302c7a960.0":"2021-02-18T18:37:13.287Z","11.0.0-canary.aa0aaf026.0":"2021-02-18T19:22:50.861Z","11.0.0-canary.07ff0c452.0":"2021-02-18T19:42:08.907Z","11.0.0-canary.bed7ecd3e.0":"2021-02-18T23:27:12.059Z","11.0.0-canary.06dead2d6.0":"2021-02-19T00:36:31.460Z","11.0.0-canary.cddb03553.0":"2021-02-19T03:12:50.830Z","11.0.0-canary.d6d8d0476.0":"2021-02-19T05:36:09.273Z","11.0.0-canary.0b4a4b2eb.0":"2021-02-19T15:45:16.511Z","11.0.0-canary.3201cae47.0":"2021-02-19T23:00:14.484Z","11.0.0-canary.f1b1fd5d3.0":"2021-02-22T19:48:59.831Z","11.0.0-canary.7899e0fe0.0":"2021-02-22T22:45:32.516Z","11.0.0-canary.f19c86d13.0":"2021-02-22T23:30:14.172Z","11.0.0-canary.60e892d79.0":"2021-02-23T01:13:21.844Z","11.0.0-canary.c96bfa495.0":"2021-02-23T19:32:26.511Z","11.0.0-canary.fa9b59f67.0":"2021-02-23T19:33:46.099Z","11.0.0-canary.869e3497c.0":"2021-02-23T19:34:16.691Z","11.0.0-canary.8ecd7c9a9.0":"2021-02-23T19:50:12.783Z","11.0.0-canary.9c85d505b.0":"2021-02-23T22:15:06.450Z","11.0.0-canary.9f2e85fb8.0":"2021-02-24T01:47:20.001Z","11.0.0-canary.19c4f29ef.0":"2021-02-25T19:21:58.989Z","11.0.0-canary.63df6e9bf.0":"2021-02-25T19:36:45.163Z","11.0.0-canary.981ad970a.0":"2021-02-26T00:06:54.170Z","11.0.0-canary.f9c9e39d6.0":"2021-02-26T18:38:25.912Z","11.0.0-canary.c97d7d881.0":"2021-03-01T20:52:47.360Z","11.0.0-canary.bf670dad7.0":"2021-03-03T00:20:29.199Z","11.0.0-canary.c7d98fcde.0":"2021-03-03T20:31:20.716Z","11.0.0-canary.4fef8bc1e.0":"2021-03-03T23:23:48.133Z","11.0.0-canary.afae3a3ec.0":"2021-03-03T23:41:50.749Z","11.0.0-canary.0a0b10f22.0":"2021-03-04T00:00:23.045Z","11.0.0-canary.6f678a91a.0":"2021-03-04T18:39:36.722Z","11.0.0-canary.f5f1b613c.0":"2021-03-04T20:48:55.072Z","11.0.0-canary.606e767ef.0":"2021-03-04T21:44:54.507Z","11.0.0-canary.f77a4dd1a.0":"2021-03-06T04:39:24.061Z","11.0.0-canary.2d6ba2c23.0":"2021-03-08T22:43:42.543Z","11.0.0-canary.7522dcaca.0":"2021-03-09T00:27:07.855Z","11.0.0-canary.5c0ab7401.0":"2021-03-09T22:51:53.224Z","11.0.0-canary.59010b6dc.0":"2021-03-10T16:56:44.482Z","11.0.0-canary.9e52f5544.0":"2021-03-10T23:24:30.689Z","11.0.0-canary.a678806f5.0":"2021-03-11T01:49:26.623Z","11.0.0-canary.b2d22df5b.0":"2021-03-11T17:02:12.408Z","11.0.0-canary.81911b707.0":"2021-03-11T18:22:38.868Z","11.0.0-canary.9eeb35c38.0":"2021-03-11T19:36:19.700Z","11.0.0-canary.12be3e95a.0":"2021-03-11T20:00:56.887Z","11.0.0-canary.e683bdf4a.0":"2021-03-11T20:08:15.450Z","11.0.0-canary.a07b6d486.0":"2021-03-11T20:32:35.143Z","11.0.0-canary.1e0653477.0":"2021-03-11T20:39:54.362Z","11.0.0-canary.148e8cfcc.0":"2021-03-11T22:43:43.793Z","11.0.0-canary.73a227194.0":"2021-03-12T00:23:26.750Z","11.0.0-canary.f8579b7ea.0":"2021-03-13T02:02:24.385Z","11.0.0-canary.d2a39d300.0":"2021-03-16T00:34:21.244Z","11.0.0-canary.7cf67823e.0":"2021-03-16T18:19:32.917Z","11.0.0-canary.67d780c79.0":"2021-03-16T19:47:13.204Z","11.0.0-canary.0f358ddae.0":"2021-03-16T22:11:44.714Z","11.0.0-canary.67eb0df80.0":"2021-03-16T22:38:58.357Z","11.0.0-canary.941ca3b3c.0":"2021-03-16T22:40:48.118Z","11.0.0-canary.3344d12ad.0":"2021-03-17T10:01:11.272Z","11.0.0-canary.6072ed604.0":"2021-03-17T22:58:56.128Z","11.0.0-canary.d3a6862af.0":"2021-03-18T16:19:20.787Z","11.0.0-canary.40dd242d5.0":"2021-03-18T21:16:38.365Z","11.0.0-canary.ec8f8465f.0":"2021-03-18T21:43:36.363Z","11.0.0-canary.da38969ec.0":"2021-03-18T22:17:15.561Z","11.0.0-canary.f5246264d.0":"2021-03-19T00:37:14.476Z","11.0.0-canary.03d34bbad.0":"2021-03-19T00:50:30.857Z","11.0.0-canary.cbc57c600.0":"2021-03-19T00:59:10.112Z","11.0.0-canary.d6c5bcf37.0":"2021-03-19T01:11:34.283Z","11.0.0-canary.fefc668d7.0":"2021-03-19T01:33:13.422Z","11.0.0-canary.faa7d3226.0":"2021-03-19T17:43:23.983Z","11.0.0-canary.c60449bc8.0":"2021-03-19T18:04:30.819Z","11.0.0-canary.5f0fc444a.0":"2021-03-19T18:37:07.673Z","11.0.0-canary.4567a750d.0":"2021-03-20T02:07:03.452Z","11.0.0-canary.0cde52f5a.0":"2021-03-23T00:02:14.796Z","11.0.0-canary.48f4b67fb.0":"2021-03-23T19:53:21.451Z","11.0.0-canary.0b8cff734.0":"2021-03-23T20:04:02.824Z","11.0.0-canary.8943b991f.0":"2021-03-23T20:28:58.667Z","11.0.0-canary.3955d8d3d.0":"2021-03-24T19:15:42.775Z","11.0.0-canary.23ea2d85e.0":"2021-03-25T17:31:58.189Z","11.0.0-canary.e3ec22f45.0":"2021-03-25T17:55:19.427Z","11.0.0-canary.4ceb42220.0":"2021-03-26T07:56:49.142Z","11.0.0-canary.dc9c84023.0":"2021-03-30T17:48:03.609Z","11.0.0-canary.56fc26962.0":"2021-03-31T00:20:19.668Z","11.0.0-canary.bc318250e.0":"2021-03-31T01:33:10.338Z","11.0.0-canary.edaee19aa.0":"2021-03-31T02:11:07.897Z","11.0.0-canary.24609b822.0":"2021-03-31T20:56:38.100Z","11.0.0-canary.b6cddc2b7.0":"2021-04-01T15:04:30.853Z","11.0.0-canary.94937c78c.0":"2021-04-01T21:00:17.435Z","11.0.0-canary.e7202cb57.0":"2021-04-01T22:46:45.708Z","11.0.0-canary.1f636b205.0":"2021-04-02T22:23:28.156Z","11.0.0-canary.94f50b260.0":"2021-04-05T15:04:32.662Z","11.0.0-canary.a4009b80a.0":"2021-04-05T22:00:02.901Z","11.0.0-canary.15604bd0d.0":"2021-04-05T22:41:47.239Z","11.0.0-canary.76da7876c.0":"2021-04-07T01:44:07.432Z","11.0.0-canary.6bcb6cbd2.0":"2021-04-07T18:53:25.937Z","11.0.0-canary.c91e8d141.0":"2021-04-07T18:57:21.994Z","11.0.0-canary.f77c50860.0":"2021-04-08T15:35:14.762Z","11.0.0-canary.367d88bdb.0":"2021-04-08T16:38:06.209Z","11.0.0-canary.0ec437d3b.0":"2021-04-08T19:34:57.740Z","11.0.0-canary.b2fa996a1.0":"2021-04-09T15:10:35.199Z","11.0.0-canary.24255c408.0":"2021-04-09T20:11:52.763Z","11.0.0-canary.7d6a4bb72.0":"2021-04-09T22:53:08.217Z","11.0.0-canary.352b295c1.0":"2021-04-12T18:15:09.172Z","11.0.0-canary.ab99b8064.0":"2021-04-13T14:43:00.398Z","11.0.0-canary.8f0a11e32.0":"2021-04-14T20:02:37.792Z","11.0.0-canary.f5c6db8fc.0":"2021-04-15T18:03:43.236Z","11.0.0-canary.3793a3143.0":"2021-04-15T18:30:49.484Z","11.0.0-canary.bc104bae7.0":"2021-04-15T19:45:45.351Z","12.0.0-canary.3f342c3f4.0":"2021-04-15T22:53:51.995Z","11.0.0":"2021-04-15T22:57:53.441Z","12.0.0-canary.2ebfc5374.0":"2021-04-16T20:44:30.409Z","12.0.0-canary.5631828e1.0":"2021-04-17T07:46:27.110Z","12.0.0-canary.bd685395b.0":"2021-04-19T18:40:56.151Z","12.0.0-canary.b52196498.0":"2021-04-19T19:57:28.251Z","12.0.0-canary.8ba3e298c.0":"2021-04-21T14:08:06.933Z","12.0.0-canary.c629eab71.0":"2021-04-21T19:56:48.245Z","12.0.0-canary.8ace3b810.0":"2021-04-21T20:37:27.201Z","12.0.0-canary.70beaf42d.0":"2021-04-21T20:49:04.677Z","12.0.0-canary.cad489689.0":"2021-04-22T16:49:06.122Z","12.0.0-canary.d928692b5.0":"2021-04-23T17:34:01.641Z","12.0.0-canary.8f68de8f3.0":"2021-04-23T18:12:45.698Z","12.0.0-canary.05753cf77.0":"2021-04-23T23:42:46.036Z","12.0.0-canary.ef43e6d96.0":"2021-04-23T23:49:03.763Z","12.0.0-canary.197f64fa2.0":"2021-04-26T17:09:16.351Z","12.0.0-canary.55ad2d7d8.0":"2021-04-27T01:19:27.363Z","12.0.0-canary.ec4ac5234.0":"2021-04-27T07:58:12.991Z","12.0.0-canary.b0579acdb.0":"2021-04-27T08:35:53.669Z","12.0.0-canary.81e2d4ff3.0":"2021-04-27T20:57:19.940Z","12.0.0-canary.c8edee52c.0":"2021-04-27T21:45:41.023Z","12.0.0-canary.f5b6110d6.0":"2021-04-27T22:07:06.576Z","12.0.0-canary.cee9b9e22.0":"2021-04-28T00:12:27.217Z","12.0.0-canary.96e83fca7.0":"2021-04-28T02:47:31.502Z","12.0.0-canary.4c497bd19.0":"2021-04-28T17:53:11.291Z","12.0.0-canary.105b15b96.0":"2021-04-28T21:44:23.177Z","12.0.0-canary.6e20259e3.0":"2021-04-28T21:48:53.621Z","12.0.0-canary.0f79a5d74.0":"2021-04-28T22:42:39.254Z","12.0.0-canary.84f3db9ed.0":"2021-04-29T14:17:31.134Z","12.0.0-canary.8fc29273c.0":"2021-04-29T21:23:11.354Z","12.0.0-canary.c50d20bab.0":"2021-04-29T23:01:33.379Z","12.0.0-canary.474836ad0.0":"2021-05-01T03:37:22.208Z","12.0.0-canary.f5ad92287.0":"2021-05-03T18:21:56.821Z","12.0.0-canary.af453daf8.0":"2021-05-03T18:53:05.909Z","12.0.0-canary.1f1918c24.0":"2021-05-03T19:22:11.861Z","12.0.0-canary.33148231f.0":"2021-05-03T19:38:27.097Z","12.0.0-canary.06b76fa74.0":"2021-05-03T19:45:33.097Z","12.0.0-canary.7c5000473.0":"2021-05-03T22:41:19.614Z","12.0.0-canary.de997644b.0":"2021-05-04T17:27:51.915Z","12.0.0-canary.d4d7f1cc2.0":"2021-05-04T17:54:37.549Z","12.0.0-canary.be999eb08.0":"2021-05-04T17:59:50.242Z","12.0.0-canary.eda1705fc.0":"2021-05-04T19:09:57.924Z","12.0.0-canary.718c90178.0":"2021-05-04T19:27:23.499Z","12.0.0-canary.0e3917299.0":"2021-05-04T19:30:03.859Z","12.0.0-canary.836b3c7db.0":"2021-05-04T20:33:28.925Z","12.0.0-canary.53d4e6d59.0":"2021-05-04T20:49:13.086Z","12.0.0-canary.18d147e27.0":"2021-05-04T20:57:44.623Z","12.0.0-canary.b9984794e.0":"2021-05-04T23:02:48.292Z","12.0.0-canary.b76f5fc9d.0":"2021-05-04T23:06:12.174Z","12.0.0-canary.055d4f10a.0":"2021-05-04T23:21:17.855Z","12.0.0-canary.5b6a46016.0":"2021-05-05T16:15:57.673Z","12.0.0-canary.33c9a737a.0":"2021-05-05T17:26:49.702Z","12.0.0-canary.9bc0effaf.0":"2021-05-05T20:59:41.419Z","12.0.0-canary.a1e0f2af5.0":"2021-05-05T21:40:34.512Z","12.0.0-canary.06930c96b.0":"2021-05-05T23:38:54.065Z","12.0.0-canary.03f525f9f.0":"2021-05-06T00:29:39.586Z","12.0.0-canary.e82ba2a26.0":"2021-05-06T15:56:01.209Z","12.0.0-canary.fc7c4e5ce.0":"2021-05-06T17:28:56.663Z","12.0.0-canary.65c04514d.0":"2021-05-06T18:43:06.626Z","12.0.0-canary.c97779ca6.0":"2021-05-06T21:42:33.714Z","12.0.0-canary.869d890d4.0":"2021-05-07T15:18:25.425Z","12.0.0-canary.ec22e1da9.0":"2021-05-10T18:23:12.039Z","12.0.0-nightly.7427449f0.0":"2021-05-10T18:44:55.188Z","12.0.0-canary.957cc3bf5.0":"2021-05-10T21:56:26.525Z","12.0.0-canary.88a33cd70.0":"2021-05-11T00:08:34.787Z","12.0.0-canary.d20dc6dba.0":"2021-05-11T00:24:22.666Z","12.0.0-canary.0ce2fdb02.0":"2021-05-11T00:58:15.244Z","12.0.0-canary.cb162da37.0":"2021-05-11T01:58:06.745Z","12.0.0-canary.573dc7ffd.0":"2021-05-11T02:16:58.043Z","12.0.0-canary.d5f6ad3fe.0":"2021-05-11T23:22:16.538Z","12.0.0-canary.25751d2ed.0":"2021-05-12T16:19:30.025Z","12.0.0-canary.a23ecb682.0":"2021-05-12T18:22:52.203Z","12.0.0-canary.33a954852.0":"2021-05-13T15:07:20.992Z","12.0.0-canary.a4484849b.0":"2021-05-13T15:30:37.718Z","12.0.0-canary.b4c3f513e.0":"2021-05-13T16:07:43.066Z","12.0.0-canary.1a8d06483.0":"2021-05-13T16:13:22.324Z","12.0.0-canary.8e6081836.0":"2021-05-14T21:40:21.023Z","12.0.0-canary.a2b0f4cee.0":"2021-05-14T21:53:31.769Z","12.0.0-canary.e8e39ad19.0":"2021-05-18T20:12:50.940Z","12.0.0-canary.4bb5eea2b.0":"2021-05-19T15:28:00.017Z","12.0.0-canary.ccce99cd6.0":"2021-05-20T00:56:31.559Z","12.0.0-canary.14767a8db.0":"2021-05-20T20:50:41.594Z","12.0.0-canary.22c6dcff9.0":"2021-05-24T15:18:16.407Z","12.0.0-canary.fadab3372.0":"2021-05-24T16:05:26.236Z","12.0.0-canary.caa73aeee.0":"2021-05-25T14:14:07.013Z","12.0.0-canary.ec31ae1ed.0":"2021-05-25T20:35:06.087Z","12.0.0-canary.8530d3514.0":"2021-05-27T16:04:32.000Z","12.0.0-canary.00b5899dc.0":"2021-06-01T22:45:18.236Z","12.0.0-canary.f1525ea3e.0":"2021-06-03T13:54:07.355Z","12.0.0-canary.464a00286.0":"2021-06-03T14:45:32.914Z","12.0.0-canary.474de7878.0":"2021-06-03T15:13:58.025Z","12.0.0-canary.b87ebf74d.0":"2021-06-03T17:46:02.159Z","12.0.0-canary.2daa49b35.0":"2021-06-04T16:13:50.889Z","12.0.0-canary.08db3d737.0":"2021-06-04T19:41:24.914Z","12.0.0-canary.5823407a7.0":"2021-06-08T00:48:00.398Z","12.0.0-canary.23b0c5e22.0":"2021-06-08T16:21:54.291Z","12.0.0-canary.2952c6a76.0":"2021-06-08T17:40:30.326Z","12.0.0-canary.f12425f88.0":"2021-06-10T01:05:40.790Z","12.0.0-canary.e543628c3.0":"2021-06-10T01:06:44.971Z","12.0.0-canary.e0c346286.0":"2021-06-10T16:35:32.734Z","12.0.0-canary.f43af5633.0":"2021-06-10T20:35:30.022Z","12.0.0-canary.8415ae585.0":"2021-06-11T16:05:30.006Z","12.0.0-canary.598fcccc8.0":"2021-06-11T21:46:08.269Z","12.0.0-canary.5d0605188.0":"2021-06-14T17:38:50.546Z","12.0.0-canary.f147a2271.0":"2021-06-14T19:17:46.745Z","12.0.0-canary.33579e00b.0":"2021-06-15T00:21:38.833Z","12.0.0-canary.a6909c0e6.0":"2021-06-15T18:29:50.548Z","12.0.0-canary.c18b5925b.0":"2021-06-15T21:03:14.043Z","12.0.0-canary.7ea2e830d.0":"2021-06-15T22:50:23.970Z","12.0.0-canary.271fff902.0":"2021-06-15T22:50:46.857Z","12.0.0-canary.d96f0a1e0.0":"2021-06-16T21:05:50.801Z","12.0.0-canary.a6183801a.0":"2021-06-16T22:05:04.317Z","12.0.0-canary.940550232.0":"2021-06-17T19:39:49.455Z","12.0.0-canary.f705e8048.0":"2021-06-18T15:24:07.089Z","12.0.0-canary.08d791f37.0":"2021-06-18T21:11:21.636Z","12.0.0-canary.e38d7440f.0":"2021-06-21T17:40:05.514Z","12.0.0-canary.75900a5a9.0":"2021-06-21T18:36:31.615Z","12.0.0-canary.33e6f50e9.0":"2021-06-23T00:11:42.946Z","12.0.0-canary.8c685301d.0":"2021-06-23T18:24:14.788Z","12.0.0-canary.8c7d994ae.0":"2021-06-23T19:27:04.159Z","12.0.0-canary.4ccd39bdd.0":"2021-06-24T16:14:33.139Z","12.0.0-canary.17553e9f8.0":"2021-06-28T22:52:08.772Z","12.0.0-canary.4c80072fd.0":"2021-06-29T18:40:32.858Z","12.0.0-canary.796811db7.0":"2021-07-01T00:03:03.548Z","12.0.0-canary.70e1efdca.0":"2021-07-01T17:06:08.296Z","12.0.0-canary.435866d32.0":"2021-07-02T18:20:53.235Z","12.0.0-canary.d0f9f3f2e.0":"2021-07-02T23:59:41.396Z","12.0.0-canary.adeac0549.0":"2021-07-08T15:08:55.421Z","12.0.0-canary.068fd5028.0":"2021-07-08T19:03:16.031Z","12.0.0-canary.5dfec7a14.0":"2021-07-12T20:03:53.550Z","12.0.0-canary.07a73750c.0":"2021-07-12T20:25:08.167Z","12.0.0-canary.3e4c6dca1.0":"2021-07-13T01:50:55.711Z","12.0.0-canary.ea77795b1.0":"2021-07-13T15:48:59.386Z","12.0.0-canary.15a179fad.0":"2021-07-13T18:08:55.293Z","12.0.0-canary.c73142a1b.0":"2021-07-13T18:43:53.173Z","12.0.0-canary.d923db73a.0":"2021-07-13T20:53:37.481Z","12.0.0-canary.22d29cbb4.0":"2021-07-13T22:50:08.673Z","12.0.0-canary.2749604bc.0":"2021-07-14T16:22:00.346Z","12.0.0-canary.e1703bed9.0":"2021-07-14T21:47:46.339Z","12.0.0-canary.de48eff0d.0":"2021-07-15T17:07:48.143Z","12.0.0-canary.4f060adc5.0":"2021-07-15T19:21:37.412Z","12.0.0-canary.bd25779b2.0":"2021-07-15T20:42:02.231Z","12.0.0-canary.9f68a932e.0":"2021-07-15T22:06:51.664Z","12.0.0-canary.4eecdeaf0.0":"2021-07-16T14:57:36.561Z","12.0.0-canary.7239684d4.0":"2021-07-16T15:58:47.847Z","12.0.0-canary.d5f1f7c72.0":"2021-07-16T16:13:41.252Z","12.0.0-canary.4d95812f9.0":"2021-07-16T19:42:50.840Z","12.0.0-canary.38d1846cc.0":"2021-07-19T18:41:41.333Z","12.0.0-canary.3f691eccf.0":"2021-07-20T16:08:25.715Z","12.0.0-canary.ebb5c73bb.0":"2021-07-20T16:56:32.041Z","12.0.0-nightly.778a0e8a.0":"2021-07-20T21:05:10.538Z","12.0.0-canary.791311bba.0":"2021-07-20T22:07:13.299Z","12.0.0-canary.85e9a6ac3.0":"2021-07-21T15:35:39.286Z","12.0.0-canary.6b0442278.0":"2021-07-21T18:49:32.481Z","12.0.0-canary.5f00e454a.0":"2021-07-22T17:06:06.684Z","12.0.0-canary.90e08fc6b.0":"2021-07-22T23:38:03.884Z","12.0.0-canary.cf5b9eb86.0":"2021-07-23T18:11:58.343Z","12.0.0-canary.3f36ac75c.0":"2021-07-23T18:31:56.789Z","12.0.0-canary.ea1e1b850.0":"2021-07-24T20:55:30.250Z","12.0.0-canary.22f390c43.0":"2021-07-27T18:59:36.748Z","12.0.0":"2021-07-27T19:49:33.248Z","13.0.0-canary.ae85f7eba.0":"2021-07-27T19:51:07.220Z","13.0.0-canary.5981207f7.0":"2021-07-27T23:17:52.597Z","13.0.0-canary.83bdd0222.0":"2021-07-28T17:25:30.246Z","13.0.0-canary.28656298a.0":"2021-07-29T18:12:49.912Z","13.0.0-canary.9e797daaf.0":"2021-07-29T18:35:03.793Z","13.0.0-canary.adb9f1ad8.0":"2021-07-30T19:04:38.563Z","13.0.0-canary.cc5377458.0":"2021-07-30T21:33:07.624Z","13.0.0-canary.a395972cf.0":"2021-08-03T21:23:04.074Z","13.0.0-canary.7c96e6b98.0":"2021-08-03T22:13:36.394Z","13.0.0-canary.a80c8b2c2.0":"2021-08-04T23:59:31.553Z","13.0.0-canary.3dd611091.0":"2021-08-05T03:56:04.188Z","13.0.0-canary.5dee37ff6.0":"2021-08-05T17:42:00.009Z","13.0.0-canary.bf405d22a.0":"2021-08-05T20:17:51.732Z","13.0.0-canary.b47dd37a6.0":"2021-08-05T20:49:39.521Z","13.0.0-canary.6c82b965b.0":"2021-08-06T16:14:37.633Z","13.0.0-canary.4ca11fe76.0":"2021-08-06T17:07:07.235Z","13.0.0-canary.510cf90f2.0":"2021-08-09T17:17:02.864Z","13.0.0-canary.17580ebf7.0":"2021-08-09T18:17:10.032Z","13.0.0-canary.7249a3060.0":"2021-08-09T18:21:16.729Z","13.0.0-canary.4c405863b.0":"2021-08-10T17:40:31.073Z","13.0.0-canary.f4241a42a.0":"2021-08-11T16:59:15.537Z","13.0.0-canary.0ad12ed3c.0":"2021-08-11T21:28:32.768Z","13.0.0-canary.077dcfcfe.0":"2021-08-12T17:55:03.221Z","13.0.0-canary.e3346766f.0":"2021-08-13T19:45:02.131Z","13.0.0-canary.2fb068fb0.0":"2021-08-13T19:48:15.102Z","13.0.0-canary.fb76c5069.0":"2021-08-16T20:07:52.852Z","13.0.0-canary.457d89aad.0":"2021-08-17T15:21:33.611Z","13.0.0-canary.0de2f2edc.0":"2021-08-17T20:53:57.643Z","13.0.0-canary.1f9259b9d.0":"2021-08-17T22:13:53.068Z","13.0.0-canary.3b9290351.0":"2021-08-18T05:23:16.527Z","13.0.0-canary.43d2eed2a.0":"2021-08-18T16:01:57.963Z","13.0.0-canary.0a9069300.0":"2021-08-19T16:17:22.300Z","13.0.0-canary.7da413ed8.0":"2021-08-20T15:48:23.729Z","13.0.0-canary.e1e69fd8e.0":"2021-08-20T19:32:03.073Z","13.0.0-canary.f5afc16df.0":"2021-08-20T20:26:25.254Z","13.0.0-canary.28d0d75bb.0":"2021-08-20T22:20:08.757Z","13.0.0-canary.21ece5360.0":"2021-08-20T23:44:01.270Z","13.0.0-canary.8de07c02a.0":"2021-08-23T15:26:27.518Z","13.0.0-canary.65aa63b0c.0":"2021-08-24T15:28:20.903Z","13.0.0-canary.15981e9d9.0":"2021-08-24T16:16:54.056Z","13.0.0-canary.fa7520f62.0":"2021-08-24T22:27:40.264Z","13.0.0-canary.ce25bc3ec.0":"2021-08-24T22:48:16.908Z","13.0.0-canary.12f5622e1.0":"2021-08-24T23:17:56.421Z","13.0.0-canary.d97f8f133.0":"2021-08-25T18:33:01.243Z","13.0.0-canary.d86fb6fac.0":"2021-08-25T18:53:35.092Z","13.0.0-canary.e8554dbbf.0":"2021-08-25T21:59:12.880Z","13.0.0-canary.877e3fb0d.0":"2021-08-26T15:37:49.899Z","13.0.0-canary.6236f3576.0":"2021-08-26T16:05:32.064Z","13.0.0-canary.1d19158a1.0":"2021-08-26T17:08:45.820Z","13.0.0-canary.6adc9e83f.0":"2021-08-30T22:44:08.089Z","13.0.0-canary.d082790f0.0":"2021-09-01T21:54:08.225Z","13.0.0-canary.e2c4f0196.0":"2021-09-02T02:11:03.425Z","13.0.0-canary.611db508e.0":"2021-09-02T03:14:46.214Z","13.0.0-canary.d4706933f.0":"2021-09-02T15:37:30.645Z","13.0.0-canary.c16fe03ce.0":"2021-09-02T17:44:32.525Z","13.0.0-canary.9203a958a.0":"2021-09-02T23:45:59.549Z","13.0.0-canary.fddd5ae93.0":"2021-09-03T07:29:28.951Z","13.0.0-canary.117599a8b.0":"2021-09-03T07:30:58.609Z","13.0.0-canary.e4180d07b.0":"2021-09-03T07:31:27.525Z","13.0.0-canary.42d175efc.0":"2021-09-03T15:42:25.835Z","13.0.0-canary.72464476c.0":"2021-09-07T15:33:44.176Z","13.0.0-canary.37d4db866.0":"2021-09-09T14:32:56.976Z","13.0.0-canary.6df682e74.0":"2021-09-09T15:42:44.409Z","13.0.0-canary.b49359c35.0":"2021-09-09T17:35:03.726Z","13.0.0-canary.470bd34e8.0":"2021-09-09T18:00:34.913Z","13.0.0-canary.d48a01771.0":"2021-09-09T18:09:53.380Z","13.0.0-canary.13db34b34.0":"2021-09-09T18:24:52.262Z","13.0.0-canary.864798678.0":"2021-09-09T18:36:17.685Z","13.0.0-canary.d04bda3fb.0":"2021-09-10T15:21:03.228Z","13.0.0-canary.5533f73d3.0":"2021-09-13T23:03:11.214Z","13.0.0-canary.08398f880.0":"2021-09-13T23:33:52.322Z","13.0.0-canary.818f4ee93.0":"2021-09-15T17:49:47.764Z","13.0.0-canary.8355e14dc.0":"2021-09-15T19:11:46.877Z","13.0.0-canary.d4e16a6c4.0":"2021-09-15T21:58:33.734Z","13.0.0-canary.65125b3a6.0":"2021-09-16T21:16:51.679Z","13.0.0-canary.80a583365.0":"2021-09-17T20:35:16.212Z","13.0.0-canary.83900936a.0":"2021-09-17T23:23:50.066Z","13.0.0-canary.860ad06a1.0":"2021-09-17T23:35:30.222Z","13.0.0-canary.3b8d4429e.0":"2021-09-20T17:47:03.749Z","13.0.0-canary.2da3606b9.0":"2021-09-20T19:37:13.162Z","13.0.0-canary.e8c598d1e.0":"2021-09-20T21:11:23.852Z","13.0.0-canary.1340ee9f7.0":"2021-09-22T17:57:23.577Z","13.0.0-canary.65084baff.0":"2021-09-23T21:24:55.000Z","13.0.0-canary.c79aa0cdd.0":"2021-09-24T13:41:20.109Z","13.0.0":"2021-09-24T19:45:20.671Z","14.0.0-canary.198431fcd.0":"2021-09-24T19:46:06.099Z","14.0.0-canary.9a02b6ef8.0":"2021-09-25T13:10:31.973Z","14.0.0-canary.758ce31d9.0":"2021-09-27T17:28:45.557Z","14.0.0-canary.86b50ef74.0":"2021-09-28T17:42:29.438Z","14.0.0-canary.b2fe3528b.0":"2021-09-29T22:56:23.298Z","14.0.0-canary.586e740dd.0":"2021-09-30T16:30:45.459Z","14.0.0-canary.2ac92d766.0":"2021-10-05T19:28:00.574Z","14.0.0-canary.353ca7e9f.0":"2021-10-08T18:46:25.342Z","14.0.0-canary.c78ff0429.0":"2021-10-11T17:21:33.237Z","14.0.0-canary.261f2db59.0":"2021-10-20T16:59:08.306Z","14.0.0-canary.9803d2dc1.0":"2021-10-20T19:21:21.193Z","14.0.0-canary.348665978.0":"2021-10-21T14:50:07.032Z","14.0.0-canary.b2b979a8a.0":"2021-10-28T15:11:41.540Z","14.0.0-canary.1af7c1c4a.0":"2021-10-28T17:52:18.234Z","14.0.0-canary.4afd353cd.0":"2021-10-29T15:01:04.690Z","14.0.0-canary.a986df922.0":"2021-10-29T21:34:33.552Z","14.0.0-canary.c3cdff07b.0":"2021-11-09T19:05:24.794Z","14.0.0-canary.468392606.0":"2021-11-11T19:39:38.442Z","14.0.0-canary.828f9803b.0":"2021-11-11T19:50:21.790Z","14.0.0-canary.8795cba87.0":"2021-11-11T19:56:17.494Z","14.0.0-canary.cd7f8cace.0":"2021-11-11T19:57:57.947Z","14.0.0-canary.207230eb8.0":"2021-11-11T22:23:52.355Z","14.0.0-canary.991fb99f7.0":"2021-11-11T22:35:56.715Z","14.0.0-canary.15db4f164.0":"2021-11-12T17:29:19.200Z","14.0.0-canary.8fcad5a3c.0":"2021-11-12T19:13:19.729Z","14.0.0-canary.f81fb1d23.0":"2021-11-12T22:39:46.507Z","14.0.0-canary.783f6fd5a.0":"2021-11-16T05:49:22.700Z","14.0.0-canary.d57ec74c7.0":"2021-11-16T16:15:46.447Z","14.0.0-canary.554c71829.0":"2021-11-16T16:18:38.740Z","14.0.0-canary.3ef470efe.0":"2021-11-16T16:23:30.194Z","14.0.0-canary.61a28b2b5.0":"2021-11-17T18:58:39.567Z","14.0.0-canary.fae6c652d.0":"2021-11-18T16:24:22.849Z","14.0.0-canary.978a3b5bb.0":"2021-11-19T19:38:34.926Z","14.0.0-canary.e6f43cf44.0":"2021-11-22T17:34:32.915Z","14.0.0-canary.39cf14bc3.0":"2021-11-22T23:03:52.127Z","14.0.0-canary.93134d453.0":"2021-11-23T15:38:20.892Z","14.0.0-canary.bbd11268f.0":"2021-11-23T22:31:37.881Z","14.0.0-canary.3db9c4d3d.0":"2021-11-24T15:36:47.997Z","14.0.0-canary.78305b6d5.0":"2021-11-24T19:50:03.102Z","14.0.0-canary.43d08ba77.0":"2021-11-30T22:55:27.674Z","14.0.0-canary.17a072535.0":"2021-12-02T18:04:38.400Z","14.0.0-canary.5d809696c.0":"2021-12-08T17:43:41.913Z","14.0.0-canary.b6510c8c1.0":"2021-12-08T18:05:48.884Z","14.0.0-canary.f460e23da.0":"2021-12-10T15:24:42.630Z","14.0.0-canary.7d8ea4624.0":"2021-12-10T19:28:39.127Z","14.0.0-canary.8fffcb5dd.0":"2021-12-14T08:54:23.671Z","14.0.0-canary.21e1cb9be.0":"2021-12-14T19:39:13.754Z","14.0.0-canary.ba78e8724.0":"2021-12-15T22:12:20.831Z","14.0.0-canary.e3e073c00.0":"2021-12-20T21:09:06.930Z","14.0.0-canary.3366a71d7.0":"2021-12-22T12:31:48.675Z","14.0.0-canary.c047f7c19.0":"2022-01-05T16:45:08.939Z","14.0.0-canary.05db65ec0.0":"2022-01-06T17:13:33.868Z","14.0.0-canary.6ca8b8f85.0":"2022-01-07T16:00:19.818Z","14.0.0-canary.173ee7a7a.0":"2022-01-10T16:53:33.164Z","14.0.0-canary.b704e4dfc.0":"2022-01-10T18:32:21.279Z","14.0.0-canary.c14e977ee.0":"2022-01-11T15:48:57.032Z","14.0.0-canary.b094eaa4e.0":"2022-01-14T18:41:44.377Z","14.0.0-canary.390220e42.0":"2022-01-17T16:45:25.794Z","14.0.0-canary.4b5391f8b.0":"2022-01-19T23:52:09.064Z","14.0.0-canary.cef6bc623.0":"2022-01-20T00:16:49.082Z","14.0.0-canary.0379179c4.0":"2022-01-20T18:53:45.933Z","14.0.0-canary.e62f3dabf.0":"2022-01-21T23:02:45.286Z","14.0.0-canary.3e20c1de8.0":"2022-01-25T15:31:04.846Z","14.0.0-canary.9f9d928b2.0":"2022-01-27T18:12:32.522Z","14.0.0-canary.a2bcb065c.0":"2022-01-28T19:36:29.357Z","14.0.0-canary.4e66fb2e1.0":"2022-01-28T19:40:50.146Z","14.0.0-canary.9736ddce9.0":"2022-01-29T09:49:17.115Z","14.0.0-canary.cc4ed13cc.0":"2022-02-04T18:22:05.327Z","14.0.0-canary.dcba26fe1.0":"2022-02-04T21:56:33.127Z","14.0.0-canary.ec54d9046.0":"2022-02-07T15:45:56.546Z","14.0.0-canary.ea9b5b463.0":"2022-02-09T17:53:01.080Z","14.0.0-canary.96ea061c1.0":"2022-02-09T18:58:38.325Z","14.0.0-canary.e00181e59.0":"2022-02-10T20:05:56.940Z","14.0.0-canary.037285f9b.0":"2022-02-11T18:28:49.768Z","14.0.0-canary.1aaa68dda.0":"2022-02-16T19:48:22.631Z","14.0.0-canary.ab4aba1af.0":"2022-02-17T18:15:49.479Z","14.0.0-canary.e58552c6e.0":"2022-02-18T18:03:36.315Z","14.0.0-canary.868793776.0":"2022-02-22T19:34:47.481Z","14.0.0-canary.fdc37a445.0":"2022-02-28T18:45:40.631Z","14.0.0-canary.43c7d87dc.0":"2022-03-01T15:32:40.151Z","14.0.0-canary.23043acd0.0":"2022-03-02T20:26:59.041Z","14.0.0-canary.6505e61c5.0":"2022-03-03T19:59:49.565Z","14.0.0-canary.16c166154.0":"2022-03-08T23:21:52.016Z","14.0.0-canary.bdf1d3771.0":"2022-03-14T14:27:55.420Z","14.0.0-canary.cf4292778.0":"2022-03-15T00:29:07.685Z","14.0.0-canary.bbd43e0e0.0":"2022-03-16T20:49:36.839Z","14.0.0-canary.1b6afad86.0":"2022-03-16T21:03:07.648Z","14.0.0-canary.bdf9d4af9.0":"2022-03-16T21:17:23.681Z","14.0.0-canary.32b391398.0":"2022-03-17T17:58:42.443Z","14.0.0-canary.ae8a6a3a3.0":"2022-03-18T16:38:44.253Z","14.0.0-canary.cbd9358a6.0":"2022-03-18T22:51:31.589Z","14.0.0-canary.dcfe49c98.0":"2022-03-21T18:43:35.596Z","14.0.0-canary.f31a833fa.0":"2022-03-23T00:50:13.533Z","14.0.0-canary.4b92e210a.0":"2022-03-24T20:18:05.777Z","14.0.0-canary.a657abb61.0":"2022-03-24T20:39:28.830Z","14.0.0-canary.443f63f50.0":"2022-03-25T23:04:07.207Z","14.0.0-canary.eb382f318.0":"2022-03-29T17:34:27.204Z","14.0.0-canary.344d52823.0":"2022-03-29T18:42:46.727Z","14.0.0-canary.4e372fb49.0":"2022-04-07T20:32:25.142Z","14.0.0-canary.3e30054fb.0":"2022-04-13T22:13:42.579Z","14.0.0-canary.8c4da223a.0":"2022-04-19T15:23:42.073Z","14.0.0-canary.7de8965cc.0":"2022-04-19T20:22:54.574Z","14.0.0-canary.641ed0851.0":"2022-04-20T16:05:07.295Z","14.0.0-canary.e88f83024.0":"2022-04-20T17:47:10.091Z","14.0.0-canary.7321d6254.0":"2022-04-20T20:10:43.138Z","14.0.0-canary.3ab956515.0":"2022-04-25T15:01:21.910Z","14.0.0-canary.53b3cad2f.0":"2022-04-27T12:44:46.432Z","14.0.0":"2022-04-28T16:55:19.478Z","15.0.0-canary.432c815e5.0":"2022-04-28T16:56:26.844Z","15.0.0-canary.a0f01f669.0":"2022-05-06T20:14:08.670Z","15.0.0-canary.276cb39a4.0":"2022-05-06T21:30:59.898Z","15.0.0-canary.4fe98ed70.0":"2022-05-06T21:55:33.211Z","15.0.0-canary.58b130a3d.0":"2022-05-06T21:57:52.063Z","15.0.0-canary.ae278a2fe.0":"2022-05-09T15:24:02.679Z","15.0.0-canary.bebf5bfdf.0":"2022-05-11T02:39:49.829Z","15.0.0-canary.e6072cd6a.0":"2022-05-11T20:17:58.140Z","15.0.0-canary.5b40eb988.0":"2022-05-12T02:43:41.746Z","15.0.0-canary.6a61d62f6.0":"2022-05-12T20:26:19.295Z","15.0.0-canary.05930a453.0":"2022-05-13T18:46:58.256Z","15.0.0-canary.c0a11ef0d.0":"2022-05-18T22:00:33.248Z","15.0.0-canary.2f9b268c0.0":"2022-05-20T19:32:09.969Z","15.0.0-canary.7741345b8.0":"2022-05-20T20:02:15.865Z","15.0.0-canary.f807e793f.0":"2022-05-20T22:21:14.740Z","15.0.0-canary.9f53d4a8a.0":"2022-05-23T14:57:05.763Z","15.0.0-canary.77cf00e37.0":"2022-05-31T17:39:09.743Z","15.0.0-canary.3c7b844c2.0":"2022-06-07T22:20:24.636Z","15.0.0-canary.df47894db.0":"2022-06-13T17:08:05.961Z","15.0.0-canary.b18a873dc.0":"2022-06-14T06:29:22.059Z","15.0.0-canary.ba9c29637.0":"2022-06-14T18:57:01.325Z","15.0.0-canary.9bfd12f01.0":"2022-06-22T19:22:04.560Z","15.0.0-canary.764de225d.0":"2022-06-29T16:26:40.973Z","15.0.0-canary.31e517cea.0":"2022-07-01T18:28:01.635Z","15.0.0-canary.9ea4e8e9c.0":"2022-07-01T22:54:37.477Z","15.0.0-canary.cd5bafabb.0":"2022-07-06T17:54:00.650Z","15.0.0-canary.a02fe49d3.0":"2022-07-06T18:50:41.777Z","15.0.0-canary.826a3d8be.0":"2022-07-06T19:30:40.163Z","15.0.0-canary.ef276aa93.0":"2022-07-07T17:02:15.460Z","15.0.0-canary.59cf61d6b.0":"2022-07-07T17:31:01.634Z","15.0.0-canary.8647092f7.0":"2022-07-07T20:38:16.611Z","15.0.0-canary.02ecd4d85.0":"2022-07-11T16:38:47.071Z","15.0.0-canary.63d3a146e.0":"2022-07-12T11:36:39.152Z","15.0.0-canary.88db01990.0":"2022-07-12T11:39:39.681Z","15.0.0-canary.6432d8fd7.0":"2022-07-14T07:28:30.729Z","15.0.0-canary.085f9b25c.0":"2022-07-14T16:34:35.390Z","15.0.0-canary.39f9424b3.0":"2022-07-14T17:04:52.324Z","15.0.0-canary.ae9fce587.0":"2022-07-14T18:07:47.884Z","15.0.0-canary.1ebddc343.0":"2022-07-15T08:48:59.418Z","15.0.0-canary.c5018840c.0":"2022-07-18T09:42:48.903Z","15.0.0-canary.551b40d18.0":"2022-07-18T10:00:36.262Z","15.0.0-canary.cf9f12371.0":"2022-07-18T10:04:37.909Z","15.0.0-canary.2797ff8b6.0":"2022-07-19T00:23:44.696Z","15.0.0-canary.110fafa17.0":"2022-07-20T07:46:19.040Z","15.0.0-canary.386ef1d2f.0":"2022-07-20T18:19:25.775Z","15.0.0-canary.c3924efef.0":"2022-07-20T18:28:58.330Z","15.0.0-canary.cf5c5907c.0":"2022-07-20T21:21:30.560Z","15.0.0-canary.0617e2319.0":"2022-07-20T21:39:39.792Z","15.0.0-canary.a743b7967.0":"2022-07-20T21:56:48.378Z","15.0.0-canary.69fd619d0.0":"2022-07-20T22:08:47.133Z","15.0.0-canary.2a6ddc1cf.0":"2022-07-29T16:04:13.630Z","15.0.0-canary.86efd56f6.0":"2022-08-02T14:45:11.826Z","15.0.0-canary.ccfc24d19.0":"2022-08-03T18:13:04.124Z","15.0.0-canary.e4570146f.0":"2022-08-03T18:40:17.997Z","15.0.0-canary.6683a36cb.0":"2022-08-03T19:20:18.316Z","15.0.0-canary.10196647d.0":"2022-08-03T21:53:23.668Z","15.0.0-canary.b20d3d73c.0":"2022-08-04T22:42:29.468Z","15.0.0-canary.47c0c6b1e.0":"2022-08-09T15:20:00.270Z","15.0.0-canary.0e3dc8e38.0":"2022-08-11T18:45:33.486Z","15.0.0-canary.d5a11f1c8.0":"2022-08-30T23:00:54.443Z","15.0.0-canary.bac992a95.0":"2022-09-01T07:05:14.114Z","15.0.0-canary.d25f3404c.0":"2022-09-01T09:44:02.453Z","15.0.0-canary.920d8a79e.0":"2022-09-01T20:20:32.454Z","15.0.0-canary.c363f267b.0":"2022-09-01T21:17:54.185Z","15.0.0-canary.a4eb4937a.0":"2022-09-06T18:19:25.609Z","15.0.0-canary.4299717da.0":"2022-09-07T16:15:17.774Z","15.0.0-canary.fa7d8d44b.0":"2022-09-07T19:18:23.304Z","15.0.0-canary.a40e3c768.0":"2022-09-09T20:03:34.561Z","15.0.0-canary.18cdc9a00.0":"2022-09-12T21:02:31.124Z","15.0.0-canary.7ab3cd3c8.0":"2022-09-13T22:38:47.766Z","15.0.0-canary.2860d244d.0":"2022-09-16T22:54:28.928Z","15.0.0-canary.e8726533c.0":"2022-09-20T20:17:19.155Z","15.0.0-canary.00d8de0aa.0":"2022-09-21T15:19:40.871Z","15.0.0-canary.271aedc30.0":"2022-09-21T15:35:28.122Z","15.0.0-canary.9f17ff2cb.0":"2022-09-21T18:07:51.021Z","15.0.0-canary.d3344c16f.0":"2022-09-22T09:24:01.383Z","15.0.0-canary.94f20ccb8.0":"2022-09-22T20:47:20.105Z","15.0.0-canary.81e4cb7b2.0":"2022-09-23T15:07:42.032Z","15.0.0-canary.aa85f9413.0":"2022-09-26T17:56:00.520Z","15.0.0-canary.7134a7752.0":"2022-09-26T21:57:10.260Z","15.0.0-canary.70b8ac16e.0":"2022-09-27T22:44:28.037Z","15.0.0-canary.c20d74405.0":"2022-09-27T23:30:48.776Z","15.0.0-canary.f033fc8d1.0":"2022-09-27T23:56:53.955Z","15.0.0-canary.8d7ae912a.0":"2022-09-28T07:55:39.663Z","15.0.0-canary.db414b864.0":"2022-09-28T14:52:09.252Z","15.0.0-canary.c0462d134.0":"2022-09-28T17:51:38.361Z","15.0.0-canary.28cc6791f.0":"2022-09-28T18:06:22.134Z","15.0.0-canary.a515a2d18.0":"2022-09-28T18:55:17.550Z","15.0.0-canary.ce9523167.0":"2022-09-29T20:30:43.214Z","15.0.0-canary.b2310f7dc.0":"2022-09-30T00:13:24.002Z","15.0.0-canary.a44241e54.0":"2022-09-30T08:20:39.647Z","15.0.0-canary.0ce81e115.0":"2022-09-30T18:17:44.409Z","15.0.0-canary.3cc30f6ad.0":"2022-10-04T17:18:46.920Z","15.0.0-canary.d9cf98e60.0":"2022-10-04T19:03:17.039Z","15.0.0-canary.d71935c8b.0":"2022-10-06T08:14:24.526Z","15.0.0-canary.49c56a25d.0":"2022-10-06T18:50:29.405Z","15.0.0-canary.07acddef3.0":"2022-10-07T21:37:04.318Z","15.0.0-canary.1c74eb2c0.0":"2022-10-07T21:54:35.100Z","15.0.0-canary.dadfb713e.0":"2022-10-08T05:05:20.075Z","15.0.0-canary.395f1ce61.0":"2022-10-08T05:07:21.037Z","15.0.0-canary.e741b5c82.0":"2022-10-10T17:37:30.778Z","15.0.0-canary.582f3cc1c.0":"2022-10-11T04:48:27.568Z","15.0.0-canary.b1a6e3e88.0":"2022-10-12T12:01:49.238Z","15.0.0-canary.c9b1a31e4.0":"2022-10-12T16:57:54.464Z","15.0.0-canary.13e9b0d1f.0":"2022-10-12T19:20:22.714Z","15.0.0-canary.1dc797e7f.0":"2022-10-14T09:40:55.761Z","15.0.0-canary.ed4009397.0":"2022-10-14T16:50:43.792Z","15.0.0-canary.95ef196bc.0":"2022-10-14T23:13:22.865Z","15.0.0-canary.13eea1b2d.0":"2022-10-17T03:51:01.480Z","15.0.0-canary.ef9b2babb.0":"2022-10-17T09:17:20.159Z","15.0.0-canary.cec7fb987.0":"2022-10-17T10:55:44.198Z","15.0.0-canary.4fff58b08.0":"2022-10-17T15:21:51.017Z","15.0.0-canary.587d8f871.0":"2022-10-17T15:56:33.533Z","15.0.0-canary.edf4b98d0.0":"2022-10-17T16:39:54.101Z","15.0.0-canary.024ac5f16.0":"2022-10-17T22:41:45.560Z","15.0.0-canary.c8bdf6144.0":"2022-10-18T18:22:50.035Z","15.0.0-canary.bacda4885.0":"2022-10-18T18:42:07.754Z","15.0.0-canary.92b2556cf.0":"2022-10-19T01:12:51.193Z","15.0.0-canary.cc804509a.0":"2022-10-19T01:16:38.799Z","15.0.0-canary.982bedae9.0":"2022-10-19T01:36:26.778Z","15.0.0-canary.ee40081f4.0":"2022-10-19T20:11:12.017Z","15.0.0-canary.98f1b54e2.0":"2022-10-20T22:56:10.947Z","15.0.0-canary.e74b7ba7e.0":"2022-10-21T17:05:14.792Z","15.0.0-canary.ab55c07d2.0":"2022-10-22T18:18:38.802Z","15.0.0-canary.fc539db34.0":"2022-10-24T18:58:36.325Z","15.0.0-canary.e340b04c5.0":"2022-10-25T23:44:28.900Z","15.0.0-canary.2c1a8f8fd.0":"2022-10-26T17:29:45.213Z","15.0.0-canary.ecfee946f.0":"2022-10-26T20:14:34.893Z","15.0.0-canary.73ca9dbb0.0":"2022-10-31T17:31:49.800Z","15.0.0-canary.357f2e5f1.0":"2022-10-31T18:48:40.494Z","15.0.0-canary.eb103d4b5.0":"2022-10-31T19:55:47.509Z","15.0.0-canary.af5f01223.0":"2022-11-01T18:36:18.131Z","15.0.0-canary.58733ef41.0":"2022-11-02T18:10:08.340Z","15.0.0-canary.909b48215.0":"2022-11-03T04:07:12.403Z","15.0.0-canary.7f17127d5.0":"2022-11-03T18:18:28.339Z","15.0.0-canary.da95e2a05.0":"2022-11-04T16:58:28.078Z","15.0.0-canary.4832e2750.0":"2022-11-04T20:56:27.225Z","15.0.0-canary.215506426.0":"2022-11-05T01:05:24.358Z","15.0.0-canary.4cf917476.0":"2022-11-05T18:03:29.732Z","15.0.0-canary.eef14bd32.0":"2022-11-06T17:24:01.575Z","15.0.0-canary.6faa29fe9.0":"2022-11-07T03:12:52.718Z","15.0.0-canary.9af09b967.0":"2022-11-07T18:27:02.428Z","15.0.0-canary.0f54fbb93.0":"2022-11-08T21:56:02.119Z","15.0.0-canary.a8d47f9fe.0":"2022-11-09T04:17:03.267Z","15.0.0-canary.66a1e75e6.0":"2022-11-09T09:34:59.529Z","15.0.0-canary.5e5c2afc0.0":"2022-11-09T11:52:39.290Z","15.0.0-canary.3e3f43359.0":"2022-11-09T20:02:16.675Z","15.0.0-canary.3f667fac6.0":"2022-11-09T22:05:24.848Z","15.0.0-canary.faa28c1c5.0":"2022-11-11T16:35:11.328Z","15.0.0-canary.a868c7866.0":"2022-11-11T16:35:53.941Z","15.0.0-canary.602fe8efa.0":"2022-11-11T17:11:14.668Z","15.0.0-canary.558c2be62.0":"2022-11-11T22:44:42.823Z","15.0.0-canary.b5c13a7a8.0":"2022-11-14T15:57:55.664Z","15.0.0-canary.a6e1c0702.0":"2022-11-14T17:26:26.031Z","15.0.0-canary.b6f8a06de.0":"2022-11-15T09:27:41.459Z","15.0.0-canary.0163f3ba5.0":"2022-11-15T18:01:19.519Z","15.0.0-canary.66c5cbb94.0":"2022-11-15T19:29:22.476Z","15.0.0-canary.b01136063.0":"2022-11-16T00:15:04.886Z","15.0.0-canary.01da0cabb.0":"2022-11-16T09:12:32.648Z","15.0.0-canary.4ac393164.0":"2022-11-16T16:14:34.145Z","15.0.0-canary.6048fb563.0":"2022-11-16T16:16:56.194Z","15.0.0-canary.3777b03cb.0":"2022-11-16T18:40:42.918Z","15.0.0-canary.f7f56fff7.0":"2022-11-16T19:55:22.309Z","15.0.0-canary.7c73f6134.0":"2022-11-16T19:58:55.101Z","15.0.0-canary.f1e037150.0":"2022-11-16T20:04:31.690Z","15.0.0-canary.40b18d043.0":"2022-11-16T22:58:10.142Z","15.0.0-canary.86bde5c06.0":"2022-11-16T23:08:21.354Z","15.0.0-canary.bb7751002.0":"2022-11-16T23:59:30.985Z","15.0.0-canary.63aca9af6.0":"2022-11-17T19:00:33.214Z","15.0.0-canary.56482dc2e.0":"2022-11-17T21:54:37.910Z","15.0.0-canary.953e689f3.0":"2022-11-17T22:04:06.310Z","15.0.0-canary.b5606a793.0":"2022-11-18T10:20:28.572Z","15.0.0-canary.8c5675942.0":"2022-11-18T15:15:31.193Z","15.0.0-canary.697fbdebd.0":"2022-11-18T17:00:01.030Z","15.0.0-canary.d58410453.0":"2022-11-18T19:24:25.312Z","15.0.0-canary.7971d6ad5.0":"2022-11-19T08:44:39.464Z","15.0.0-canary.a0ae73b0e.0":"2022-11-21T10:53:08.373Z","15.0.0-canary.96f472604.0":"2022-11-21T12:52:06.155Z","15.0.0-canary.18b8f31e1.0":"2022-11-21T16:01:46.804Z","15.0.0-canary.912f33ce4.0":"2022-11-21T17:53:22.800Z","15.0.0-canary.1e1b1c369.0":"2022-11-23T18:59:55.718Z","15.0.0-canary.a2ec49244.0":"2022-11-23T19:30:21.614Z","15.0.0-canary.a7458ba0b.0":"2022-11-23T20:15:51.168Z","15.0.0-canary.7c35e5036.0":"2022-11-24T08:38:48.232Z","15.0.0-canary.4356e05c5.0":"2022-11-24T09:56:08.835Z","15.0.0-canary.cb605f8af.0":"2022-11-24T10:14:47.761Z","15.0.0-canary.05fb07f9f.0":"2022-11-24T17:13:10.741Z","15.0.0-canary.a911b386b.0":"2022-11-28T16:46:44.864Z","15.0.0-canary.2aa8050b4.0":"2022-11-28T19:10:59.477Z","15.0.0-canary.323904a9f.0":"2022-11-29T15:33:16.616Z","15.0.0-canary.168a629a4.0":"2022-11-29T16:48:11.954Z","15.0.0-canary.65c411674.0":"2022-11-29T17:37:37.676Z","15.0.0-canary.a86d36fd2.0":"2022-11-30T02:13:34.944Z","15.0.0-canary.3a1f46c66.0":"2022-11-30T12:06:21.417Z","15.0.0-canary.32d8a9648.0":"2022-12-01T17:28:28.356Z","15.0.0-canary.03618ab70.0":"2022-12-01T20:53:55.186Z","15.0.0-canary.68aaed940.0":"2022-12-01T21:23:29.837Z","15.0.0-canary.f0a0bbc75.0":"2022-12-02T09:01:11.395Z","15.0.0-canary.dd99c8764.0":"2022-12-02T14:00:24.404Z","15.0.0-canary.fabdcca3a.0":"2022-12-02T15:06:16.819Z","15.0.0-canary.2d26722d2.0":"2022-12-02T16:25:53.905Z","15.0.0-canary.eaa0c3a86.0":"2022-12-02T17:42:02.359Z","15.0.0-canary.79a613bbd.0":"2022-12-06T14:25:04.877Z","15.0.0-canary.c871fe61e.0":"2022-12-07T07:51:24.164Z","15.0.0-canary.9eaee7936.0":"2022-12-07T20:02:16.537Z","15.0.0-canary.1d37bf601.0":"2022-12-07T20:40:44.230Z","15.0.0-canary.a5fe069d5.0":"2022-12-09T18:43:36.437Z","15.0.0-canary.ce8b5326f.0":"2022-12-09T23:30:13.426Z","15.0.0-canary.43f5323bc.0":"2022-12-12T16:45:40.711Z","15.0.0-canary.5490e32e7.0":"2022-12-12T17:01:32.805Z","15.0.0-canary.817002c29.0":"2022-12-13T21:53:23.951Z","15.0.0-canary.313a1326a.0":"2022-12-14T10:28:12.396Z","15.0.0-canary.a69c14e10.0":"2022-12-14T11:18:17.547Z","15.0.0-canary.f43e0ceb5.0":"2022-12-14T16:44:16.826Z","15.0.0-canary.34767110.0":"2022-12-14T17:22:29.954Z","15.0.0-canary.1f99f3c50.0":"2022-12-15T14:24:59.824Z","15.0.0-canary.cfd69490f.0":"2022-12-16T20:08:00.034Z","15.0.0-canary.94ad8d986.0":"2022-12-19T19:26:33.664Z","15.0.0-canary.604264203.0":"2022-12-21T21:40:16.286Z","15.0.0-canary.85bcff6af.0":"2022-12-22T10:24:34.803Z","15.0.0-canary.ece3e8d21.0":"2022-12-22T17:11:40.792Z","15.0.0-canary.278ad53d1.0":"2022-12-27T17:04:28.608Z","15.0.0-canary.a7d8389e1.0":"2022-12-27T19:03:14.785Z","15.0.0-canary.8175d5eff.0":"2022-12-28T01:51:01.314Z","15.0.0-canary.16abb41ed.0":"2022-12-28T19:37:54.897Z","15.0.0-canary.e21dcb86d.0":"2022-12-29T14:01:38.435Z","15.0.0-canary.20ab6f5a8.0":"2022-12-29T19:40:28.342Z","15.0.0-canary.b9806f623.0":"2022-12-29T23:05:18.906Z","15.0.0-canary.50c9f550e.0":"2023-01-03T15:47:11.578Z","15.0.0-canary.af490a848.0":"2023-01-03T15:56:24.403Z","15.0.0-canary.7cf487c98.0":"2023-01-03T17:38:11.674Z","15.0.0-canary.a52be2d5e.0":"2023-01-03T19:12:40.907Z","15.0.0-canary.e38ba17c5.0":"2023-01-03T22:31:55.603Z","15.0.0-canary.49041a6c3.0":"2023-01-04T15:17:08.467Z","15.0.0-canary.c492898c2.0":"2023-01-04T17:36:32.655Z","15.0.0-canary.d7a2277de.0":"2023-01-04T21:35:09.597Z","15.0.0-canary.fd95ca7ef.0":"2023-01-05T01:02:19.717Z","15.0.0-canary.1eb44faf9.0":"2023-01-05T09:08:51.486Z","15.0.0-canary.adcdb7db9.0":"2023-01-05T16:21:02.569Z","15.0.0-canary.067af7eff.0":"2023-01-06T23:15:38.500Z","15.0.0-canary.21d1196a7.0":"2023-01-09T10:42:28.664Z","15.0.0-canary.8d2d8d3c4.0":"2023-01-09T22:23:26.261Z","15.0.0-canary.f476fdece.0":"2023-01-10T16:14:03.585Z","15.0.0-canary.fc6ee6c32.0":"2023-01-10T16:27:26.225Z","15.0.0-canary.73537ab0f.0":"2023-01-10T18:11:01.339Z","15.0.0-canary.684e33d25.0":"2023-01-10T19:18:00.458Z","15.0.0-canary.0e89aab6b.0":"2023-01-11T16:16:47.380Z","15.0.0-canary.b0103d10a.0":"2023-01-11T19:11:54.858Z","15.0.0-canary.50e7a5312.0":"2023-01-11T20:53:39.083Z","15.0.0-canary.202823f54.0":"2023-01-11T21:35:11.367Z","15.0.0-canary.199fe2a2a.0":"2023-01-11T21:55:04.361Z","15.0.0-canary.8c0786d6f.0":"2023-01-12T14:35:41.311Z","15.0.0-canary.8a74f7c6d.0":"2023-01-17T19:24:00.524Z","15.0.0-canary.b4687fdc1.0":"2023-01-19T19:48:44.609Z","15.0.0-canary.b836b9892.0":"2023-01-24T22:38:39.546Z","15.0.0-canary.e8912fd37.0":"2023-01-26T18:29:11.935Z","15.0.0-canary.16fbd30ff.0":"2023-01-26T18:34:20.647Z","15.0.0-canary.033ae083a.0":"2023-01-26T19:26:17.529Z","15.0.0-canary.3a705fa1d.0":"2023-01-27T22:43:04.076Z","15.0.0-canary.d6bea2ff2.0":"2023-01-31T15:29:26.182Z","15.0.0-canary.0c94182c8.0":"2023-02-01T17:43:32.732Z","15.0.0-canary.15b221540.0":"2023-02-01T17:51:50.859Z","15.0.0-canary.eeebb8bba.0":"2023-02-01T18:21:38.204Z","15.0.0-canary.6a4b3f834.0":"2023-02-01T18:57:40.616Z","15.0.0-canary.b177b40e2.0":"2023-02-02T03:33:24.385Z","15.0.0-canary.d9f821042.0":"2023-02-02T17:37:00.209Z","15.0.0-canary.47c7deb19.0":"2023-02-03T09:08:19.922Z","15.0.0-canary.a16dbd1a6.0":"2023-02-04T06:13:57.092Z","15.0.0-canary.93416f87a.0":"2023-02-07T13:23:23.561Z","15.0.0-canary.49b8e7442.0":"2023-02-07T23:08:49.459Z","15.0.0-canary.de38de758.0":"2023-02-09T15:41:42.096Z","15.0.0-canary.4d62de70c.0":"2023-02-09T22:02:21.781Z","15.0.0-canary.6fcd8d418.0":"2023-02-13T11:49:16.831Z","15.0.0-canary.066d9439b.0":"2023-02-15T19:57:02.156Z","15.0.0-canary.7ab32468c.0":"2023-02-21T18:33:17.619Z","15.0.0-canary.fa27ba61d.0":"2023-02-27T16:18:35.890Z","15.0.0-canary.311ab4d4a.0":"2023-02-27T16:40:37.085Z","15.0.0-canary.901c83e77.0":"2023-02-27T18:05:24.126Z","15.0.0-canary.5cb8e2174.0":"2023-03-01T16:34:57.302Z","15.0.0-canary.f32339937.0":"2023-03-06T15:14:53.516Z","15.0.0-canary.7644d63d5.0":"2023-03-06T22:26:47.114Z","15.0.0-canary.d96330c08.0":"2023-03-08T11:41:07.265Z","15.0.0-canary.c99cae77c.0":"2023-03-08T23:42:13.219Z","15.0.0-canary.6023b1cd3.0":"2023-03-09T14:25:45.543Z","15.0.0-canary.274610c77.0":"2023-03-09T14:57:54.590Z","15.0.0-canary.a274583b9.0":"2023-03-09T19:51:57.580Z","15.0.0-canary.da22ca960.0":"2023-03-09T20:17:27.131Z","15.0.0-canary.304a94e8b.0":"2023-03-09T20:44:19.676Z","15.0.0-canary.6c265915c.0":"2023-03-09T21:46:37.403Z","15.0.0-canary.de5224633.0":"2023-03-09T23:55:06.438Z","15.0.0-canary.8879557e6.0":"2023-03-10T14:07:15.400Z","15.0.0-canary.23073a303.0":"2023-03-10T14:14:07.208Z","15.0.0-canary.51c7d4014.0":"2023-03-10T16:46:42.617Z","15.0.0-canary.1175a5be0.0":"2023-03-10T20:47:22.443Z","15.0.0-canary.7adf3af80.0":"2023-03-11T01:24:16.207Z","15.0.0-canary.82554d770.0":"2023-03-11T01:36:37.329Z","15.0.0-canary.93fc524b7.0":"2023-03-13T08:37:55.133Z","15.0.0-canary.50be0fbae.0":"2023-03-13T17:43:29.963Z","15.0.0-canary.6b5ffccd9.0":"2023-03-13T17:46:49.064Z","15.0.0-canary.1c8013f4e.0":"2023-03-13T18:01:24.381Z","15.0.0-canary.112715df5.0":"2023-03-13T18:38:28.103Z","15.0.0-canary.d250911f2.0":"2023-03-13T19:30:46.935Z","15.0.0-canary.7cd925c12.0":"2023-03-13T19:38:14.466Z","15.0.0-canary.b2ddacf73.0":"2023-03-13T19:42:42.770Z","15.0.0-canary.989ae2ecc.0":"2023-03-13T19:51:55.213Z","15.0.0-canary.89c66483a.0":"2023-03-13T20:15:43.659Z","15.0.0-canary.6a85742c2.0":"2023-03-14T02:46:41.029Z","15.0.0-canary.bb6cd78d5.0":"2023-03-14T18:16:02.296Z","15.0.0-canary.5f94aa37d.0":"2023-03-14T18:19:27.676Z","15.0.0-canary.1bd317240.0":"2023-03-14T18:23:15.433Z","15.0.0-canary.d441d2a2a.0":"2023-03-14T18:25:49.703Z","15.0.0-canary.fff4066c6.0":"2023-03-14T18:26:26.918Z","15.0.0-canary.87809c710.0":"2023-03-14T18:42:42.478Z","15.0.0-canary.48d30012d.0":"2023-03-14T18:47:04.347Z","15.0.0-canary.419b23cc6.0":"2023-03-14T18:58:01.287Z","15.0.0-canary.bf86521f4.0":"2023-03-14T23:12:43.911Z","15.0.0-canary.11f3d280e.0":"2023-03-15T00:10:34.267Z","15.0.0-canary.b281a409a.0":"2023-03-21T15:40:10.552Z","15.0.0-canary.39e473690.0":"2023-03-21T17:50:32.244Z","15.0.0-canary.cedffb44c.0":"2023-03-21T17:57:33.338Z","15.0.0-canary.36a4cba99.0":"2023-03-28T17:49:20.020Z","15.0.0-canary.ed7e82ded.0":"2023-03-28T20:33:50.454Z","15.0.0-canary.55093ee1e.0":"2023-03-29T18:47:20.944Z","15.0.0-canary.0c53abc81.0":"2023-04-07T01:40:27.829Z","15.0.0-canary.51311e69e.0":"2023-04-07T18:07:08.833Z","15.0.0-canary.113b1a38e.0":"2023-04-10T21:53:04.493Z","15.0.0-canary.ea2191426.0":"2023-04-11T21:54:54.568Z","15.0.0-canary.5a5c38538.0":"2023-04-11T22:29:37.729Z","15.0.0-canary.e4b5ea7eb.0":"2023-04-11T23:03:29.488Z","15.0.0-canary.a094dd9c1.0":"2023-04-14T22:41:47.606Z","15.0.0-canary.f771b091c.0":"2023-04-17T15:37:16.017Z","15.0.0-canary.79b1b612b.0":"2023-04-19T23:39:17.285Z","15.0.0-canary.6f50071e5.0":"2023-04-20T18:00:10.027Z","15.0.0-canary.ef754381c.0":"2023-04-24T20:50:13.430Z","15.0.0-canary.69ebf61ea.0":"2023-04-27T17:20:25.276Z","15.0.0-canary.b90be86de.0":"2023-04-29T00:20:54.071Z","15.0.0-canary.51f9c0c28.0":"2023-04-29T00:30:40.454Z","15.0.0-canary.4e840d685.0":"2023-05-02T15:32:41.236Z","15.0.0-canary.10b8563e4.0":"2023-05-02T23:41:09.275Z","15.0.0-canary.736b7fda4.0":"2023-05-03T15:08:38.447Z","15.0.0-canary.0e533c5a1.0":"2023-05-05T16:55:27.632Z","15.0.0-canary.5f01c15a2.0":"2023-05-05T17:25:33.355Z","15.0.0-canary.3b5b55e31.0":"2023-05-05T18:38:10.771Z","15.0.0-canary.d0788120f.0":"2023-05-09T08:22:17.750Z","15.0.0-canary.f52358dd0.0":"2023-05-12T14:29:37.561Z","15.0.0-canary.d3c3fbaa3.0":"2023-05-12T17:59:40.397Z","15.0.0-canary.576d3d2c8.0":"2023-05-16T01:59:15.742Z","15.0.0-canary.19bb36a46.0":"2023-05-16T19:53:15.705Z","15.0.0-canary.aa5ac7fe5.0":"2023-05-22T17:24:40.133Z","15.0.0-canary.90291f2e2.0":"2023-05-23T17:41:53.876Z","15.0.0-canary.446734f27.0":"2023-05-30T21:47:26.672Z","15.0.0-canary.19de312d8.0":"2023-06-06T17:17:17.857Z","15.0.0-canary.6081d829b.0":"2023-06-07T01:13:16.978Z","15.0.0-canary.b26c34a68.0":"2023-06-07T20:16:26.459Z","15.0.0-canary.4fe911371.0":"2023-06-07T23:05:08.224Z","15.0.0-canary.a9ff9866f.0":"2023-06-13T11:37:28.290Z","15.0.0-canary.b994146f6.0":"2023-06-14T21:02:47.058Z","15.0.0-canary.1fb4b1a06.0":"2023-06-27T18:56:19.061Z","15.0.0-canary.c64a2776e.0":"2023-06-27T20:15:39.368Z","15.0.0-canary.b05d9eb7c.0":"2023-06-29T16:22:54.815Z","15.0.0-canary.2a9697dc5.0":"2023-06-30T22:13:09.734Z","15.0.0-canary.0c52adeab.0":"2023-07-05T16:24:55.587Z","15.0.0-canary.83355c322.0":"2023-07-10T15:04:24.433Z","15.0.0-canary.bc9ae6c9c.0":"2023-08-03T21:19:39.033Z","15.0.0-canary.3c44cd956.0":"2023-08-07T17:46:19.393Z","15.0.0-canary.02702296e.0":"2023-08-25T12:04:07.452Z","15.0.0-canary.872b65832.0":"2023-08-30T12:12:11.590Z","15.0.0-canary.89b2e4122.0":"2023-08-31T16:05:53.925Z","15.0.0-canary.7a3942e7a.0":"2023-08-31T18:38:30.434Z","15.0.0-canary.54feb3020.0":"2023-09-11T21:04:08.760Z","15.0.0-canary.6cda3ce8d.0":"2023-09-12T01:44:09.857Z","15.0.0-canary.205b20b36.0":"2023-09-13T17:15:27.621Z","15.0.0-canary.22bf82024.0":"2023-09-18T09:11:05.075Z","15.0.0-canary.a246a4439.0":"2023-09-18T17:44:47.995Z","15.0.0-canary.d153db62b.0":"2023-09-19T19:14:02.692Z","15.0.0-canary.2528c1c3b.0":"2023-09-20T18:05:25.699Z","15.0.0-canary.1728a6dcf.0":"2023-09-26T01:22:07.894Z","15.0.0-canary.ebb636f3d.0":"2023-09-29T19:43:36.621Z","15.0.0-canary.c0d21ecc9.0":"2023-10-09T19:35:57.580Z","15.0.0-canary.127a44b28.0":"2023-10-12T19:58:58.037Z","15.0.0-canary.0ad128337.0":"2023-10-19T18:50:52.958Z","15.0.0-canary.9cec94097.0":"2023-10-19T23:08:31.822Z","15.0.0-canary.c51a0bbcc.0":"2023-11-15T20:58:08.751Z","15.0.0-canary.d76666ad4.0":"2023-11-27T22:12:33.404Z","15.0.0-canary.8656bf0e0.0":"2023-12-12T21:18:02.831Z","15.0.0-canary.7f224ddd4.0":"2023-12-28T06:08:29.623Z","15.0.0-canary.a0b8a90c0.0":"2024-02-07T19:18:51.892Z","15.0.0-canary.e50b478eb.0":"2024-02-08T18:07:22.332Z","15.0.0-canary.c43b3438b.0":"2024-02-23T20:16:54.365Z","15.0.0-canary.819498d8c.0":"2024-03-15T15:14:01.115Z","15.0.0-canary.453a6248a.0":"2024-03-25T17:12:55.700Z","15.0.0-canary.68edc03c6.0":"2024-04-08T19:05:01.288Z","15.0.0-canary.5bebc0064.0":"2024-04-11T21:39:25.900Z","15.0.0-canary.311f29a60.0":"2024-04-23T17:58:52.198Z","15.0.0-canary.65c10a622.0":"2024-04-25T18:47:59.598Z","15.0.0-canary.4b35cb7d0.0":"2024-05-02T12:02:05.434Z","15.0.0-canary.f80ac92b0.0":"2024-05-02T12:12:30.393Z","15.0.0-canary.2f5b899bc.0":"2024-05-20T13:54:05.032Z","15.0.0-canary.cfec83c74.0":"2024-05-20T18:56:05.341Z","15.0.0-canary.423edc3dc.0":"2024-06-26T18:11:39.105Z"},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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-indicator"},"keywords":["material components","material design","tab","indicator"],"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":""}